-webkit-print-color-adjust

  • Revision slug: CSS/-webkit-print-color-adjust
  • Revision title: -webkit-print-color-adjust
  • Revision id: 340707
  • Created:
  • Creator: Marcoos
  • Is current revision? No
  • Comment

Revision Content

{{CSSRef}}{{Non-standard_header}}

Summary

The -webkit-print-color-adjust property is a non-standard CSS extension that can be used to force printing of background colors and images in browsers based on the WebKit engine.

Syntax

-webkit-print-color-adjust: economy | exact

Values

economy
Normal behavior.  Background colors and images are only printed if the user explicitly allows it in their browser's print settings dialog.
exact
Background colors and images of the element to which this rule is applied are always printed, user's print settings are overridden.

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatVersionUnknown}}
Buggy
{{CompatNo}} {{CompatNo}} {{CompatNo}} 6.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatUnknown}}

Body element backgrounds are not printed

Currently neither Chrome nor Safari print backgrounds of the body element. If this property is set for the body element, it will apply only to its descendants.

Chrome clipped image bug

When background images are clipped (for example, when using background-image sprites), due to Chromium bug 131054, they will appear distorted when printed from the Chrome browser.

Revision Source

<div>
  {{CSSRef}}{{Non-standard_header}}</div>
<div>
  <h2 id="Summary" name="Summary">Summary</h2>
  The <code>-webkit-print-color-adjust</code> property is a non-standard CSS extension that can be used to force printing of background colors and images in browsers based on the WebKit engine.</div>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
-webkit-print-color-adjust: economy | exact
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    economy</dt>
  <dd>
    Normal behavior.&nbsp; Background colors and images are only printed if the user explicitly allows it in their browser's print settings dialog.</dd>
  <dt>
    exact</dt>
  <dd>
    Background colors and images of the element to which this rule is applied are always printed, user's print settings are overridden.</dd>
</dl>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatVersionUnknown}}<br />
          <span style="color:#ff0000;">Buggy</span></td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>6.0</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3>Body element backgrounds are not printed</h3>
<p>Currently neither Chrome nor Safari print backgrounds of the <a href="/en-US/docs/HTML/Element/body" title="/en-US/docs/HTML/Element/body">body</a> element. If this property is set for the body element, it will apply only to its descendants.</p>
<h3>Chrome clipped image bug</h3>
<p>When background images are clipped (for example, when using background-image sprites), due to <a href="http://code.google.com/p/chromium/issues/detail?id=131054" lang="en-US" title="http://code.google.com/p/chromium/issues/detail?id=131054">Chromium bug 131054</a>, they will appear distorted when printed from the Chrome browser.</p>
<dl>
</dl>
Revert to this revision