Skip to content

Latest commit

 

History

History
56 lines (41 loc) · 1.81 KB

provide-print-css.md

File metadata and controls

56 lines (41 loc) · 1.81 KB

Enforce providing a print stylesheet (@ecocode/provide-print-css)

⚠️ This rule warns in the ✅ recommended config.

Why is this an issue?

CSS offers a set of styles specifically designed for printing. By using CSS print styles, you can control how the content of a web page is presented when users decide to print it. This includes adjusting font sizes, hiding unnecessary elements, and optimizing the layout to fit well on printed pages.

Limiting the number of printed pages helps in reducing paper and ink consumption. By optimizing the print layout, you can ensure that only essential content is printed, saving resources and contributing to environmental sustainability.

<head>
  <title>Web Page</title>
  <link rel="stylesheet" type="text/css" href="styles.css" /> <!-- Non-compliant -->
</head>

In your HTML file, you can include a link to the print stylesheet inside the section. Use the media attribute with a value of "print" to indicate that this stylesheet is specifically for print.

<head>
  <title>Web Page</title>
  <link rel="stylesheet" media="print" type="text/css" href="print.css" /> <!-- Compliant -->
</head>

You can also use the @media print rule to define styles that should be applied when the page is printed. Adjust font sizes, hide unnecessary elements, or make any other modifications suitable for print.

<head>
  <title>Web Page</title>
  <style>
  @media print {
    /* Compliant: print-specific styles */
  }
  </style>
</head>

Resources

Documentation

Articles & blog posts