Revision 926041 of -webkit-print-color-adjust

<div>{{CSSRef}}{{Non-standard_header}}</div>

<p>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.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">
-webkit-print-color-adjust: economy | exact
</pre>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>economy</code></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><code>exact</code></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="Inheritance">Inheritance</h2>

<p>This property is <a href="/en-US/docs/CSS/Getting_Started/Cascading_and_inheritance">inherited</a>.</p>

<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}}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>6.0<sup>[2]</sup></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>

<p>[1] Chrome does not print backgrounds of the <a href="/en-US/docs/HTML/Element/body">body</a> element. If this property is set to <code>exact</code> for the body element, it will apply only to its descendants.</p>

<p>When background images are clipped (for example, when using background-image sprites), due to <a href="https://code.google.com/p/chromium/issues/detail?id=131054">Chromium bug 131054</a>, they will appear distorted when printed from the Chrome browser with <code>-webkit-print-color-adjust: exact</code>. Solid backgrounds and background images that are not clipped (i.e. have lower width and height than the element to which they are applied) are printed correctly.</p>

<p>[2] Safari does not print backgrounds of the <a href="/en-US/docs/HTML/Element/body">body</a> element. If this property is set to <code>exact</code> for the body element, it will apply only to its descendants.</p>

<h2 id="External_links">External links</h2>

<ul>
 <li>WebKit <a href="https://bugs.webkit.org/show_bug.cgi?id=64583">bug 64583</a>: "WIP: Add CSS property to control printing of backgrounds for individual elements"</li>
 <li>CSSWG wiki: "<a href="https://wiki.csswg.org/ideas/print-backgrounds">print-background</a>" - a proposal to standardize this property</li>
 <li>CSS Color Module Level 4:&nbsp; the '<a href="https://drafts.csswg.org/css-color-4/#color-adjust">color-adjust</a>' property - a newer proposal to standardize this property</li>
</ul>