Safari Print Previews: @media print and @page CSS Support

This article provides a comprehensive overview of how the Safari web browser interprets and applies @media print and @page CSS rules when generating print previews. While Safari reliably executes standard @media print queries to hide unnecessary interface elements, adjust typography, and restructure layouts for paper, its support for the @page rule is heavily restricted due to long-standing limitations in the WebKit rendering engine. Below is a detailed breakdown of what works, what fails, and how to work around Safari's specific print rendering behaviors.

How Safari Handles @media print

Safari offers robust support for the @media print CSS query. When a user triggers the print command (Cmd + P on macOS or via the Share sheet on iOS), Safari immediately recalculates the document's styles, applying everything wrapped inside the @media print block before rendering the print preview.

Supported Features

  • Element Visibility: Hiding navigation bars, footers, and sidebars using display: none; works flawlessly.
  • Typography Adjustments: Changing font sizes to points (pt), switching font families, and forcing black text (color: #000;) are fully respected.
  • Background Graphics: By default, Safari strips background colors and images to save ink. However, Safari respects the -webkit-print-color-adjust: exact; and the standard print-color-adjust: exact; properties inside @media print, forcing the print preview to render backgrounds accurately.

Layout and Viewport Quirks

When generating a print preview, Safari calculates the printable area using a specific viewport width, which often mimics a narrow desktop or tablet screen. Because of this, standard responsive media queries (like @media (max-width: 768px)) may trigger simultaneously with @media print.

Furthermore, Safari's WebKit engine struggles with paginating modern CSS layouts. If a page relies heavily on CSS Grid or Flexbox, Safari’s print preview may slice content in half at the bottom of a page or overlap elements. Converting structural containers to display: block; inside the @media print rule is the most reliable way to ensure Safari calculates page height correctly.

How Safari Handles @page Rules

The @page rule is part of the CSS Paged Media module, designed to control the dimensions, orientation, and margins of the printed page itself. Safari has the weakest @page support among all major modern browsers.

Page Size and Orientation (size)

Safari largely ignores the size property inside the @page rule. If you declare @page { size: landscape; } or @page { size: A4; }, Safari's print preview will still default to the paper size and orientation defined by the user's operating system and printer settings. Users must manually toggle between Portrait and Landscape in the native macOS or iOS print dialog.

Page Margins (margin)

Safari offers partial support for @page margins. While you can define @page { margin: 2cm; }, Safari's native print dialog settings often override or conflict with these values. Additionally, Safari automatically injects its own headers and footers (displaying the webpage title, URL, and date) into the margin space unless the user manually unchecks "Print headers and footers" in the print preview dialog. Unlike Chromium browsers, setting @page { margin: 0; } in Safari does not automatically hide these native browser headers and footers.

Unrecognized @page Features

Safari completely ignores advanced CSS Paged Media features. The following will have no effect in a Safari print preview:

  • Margin Boxes: Rules like @top-center, @bottom-left, and @bottom-right used for custom running headers and page numbers are not supported.
  • Page Pseudo-classes: Pseudo-classes such as @page :first, @page :left, and @page :right (used for styling book-like spreads) are mostly ignored or inconsistently applied.

Controlling Page Breaks in Safari

Because @page support is minimal, controlling how content flows across multiple pages in a Safari print preview must be handled within the @media print block using break properties.

  • Forcing Breaks: Safari respects both legacy (page-break-before: always;, page-break-after: always;) and modern (break-before: page;, break-after: page;) properties. Using both together ensures maximum compatibility.
  • Preventing Breaks: To stop images, tables, or cards from being cut in half across two pages, Safari respects break-inside: avoid; and page-break-inside: avoid;. However, this only works reliably in Safari if the targeted element and its parent containers are standard block-level elements (display: block; or display: inline-block;), not Flex or Grid items.

Summary of Best Practices for Safari

To ensure the Safari print preview accurately reflects your intended design, follow these guidelines within your stylesheet:

  1. Use @media print for Margins: Instead of relying on @page { margin: ... }, apply padding or margins directly to the body element inside your @media print query.
  2. Flatten the Layout: Override display: flex; and display: grid; with display: block; inside @media print so Safari can calculate page breaks without overlapping text.
  3. Force Background Rendering: Always include -webkit-print-color-adjust: exact; and print-color-adjust: exact; on elements that require visible background colors or images in the print preview.
  4. Combine Break Properties: Declare both page-break-inside: avoid; and break-inside: avoid; on elements that must stay whole across page transitions.