You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2926 lines
121 KiB
2926 lines
121 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
|
|
<html lang=en>
|
|
<head profile="http://www.w3.org/2006/03/hcard"><meta
|
|
content="text/html; charset=utf-8" http-equiv=Content-Type>
|
|
|
|
<title>CSS Image Values and Replaced Content Module Level 3</title>
|
|
<link href=default.css rel=stylesheet type="text/css">
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
|
|
type="text/css">
|
|
|
|
<body>
|
|
<div class=head> <!--begin-logo-->
|
|
<p><a href="http://www.w3.org/"><img alt=W3C height=48
|
|
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
|
|
|
|
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
|
|
|
|
<h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 12 January
|
|
2012</h2>
|
|
|
|
<dl>
|
|
<dt>This Version:</dt>
|
|
<!--<dd><a href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>-->
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2012/WD-css3-images-20120112/">http://www.w3.org/TR/2012/WD-css3-images-20120112/</a>
|
|
|
|
|
|
<dt>Latest Version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/css3-images/">http://www.w3.org/TR/css3-images/</a>
|
|
|
|
<dt>Editor's Draft:
|
|
|
|
<dd><a
|
|
href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
|
|
|
|
|
|
<dt>Previous Version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2011/WD-css3-images-20111206/">http://www.w3.org/TR/2011/WD-css3-images-20111206/</a>
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2011/WD-css3-images-20110908/">http://www.w3.org/TR/2011/WD-css3-images-20110908/</a>
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2011/WD-css3-images-20110712/">http://www.w3.org/TR/2011/WD-css3-images-20110712/</a>
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2011/WD-css3-images-20110217/">http://www.w3.org/TR/2011/WD-css3-images-20110217/</a>
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2009/WD-css3-images-20090723/">http://www.w3.org/TR/2009/WD-css3-images-20090723/</a>
|
|
|
|
<dt>Issues List:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/Style/CSS/Tracker/products/27">http://www.w3.org/Style/CSS/Tracker/products/27</a>
|
|
|
|
|
|
<dt>Discussion:
|
|
|
|
<dd><a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">www-style@w3.org</a>
|
|
with subject line “<kbd>[css3-images] <var>… message topic
|
|
…</var></kbd>”
|
|
|
|
<dt>Editors:
|
|
|
|
<dd class=vcard> <a class="url fn"
|
|
href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a> (<span
|
|
class=org>Mozilla</span>)
|
|
|
|
<dd class=vcard> <a class="url fn"
|
|
href="http://www.xanthir.com/contact/">Tab Atkins Jr.</a> (<span
|
|
class=org>Google</span>)
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class=copyright><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
|
|
rel=license>Copyright</a> © 2012 <a
|
|
href="http://www.w3.org/"><acronym
|
|
title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a
|
|
href="http://www.csail.mit.edu/"><acronym
|
|
title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
|
|
href="http://www.ercim.eu/"><acronym
|
|
title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
|
|
<a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
|
|
and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> rules apply.</p>
|
|
<!--end-copyright-->
|
|
<hr title="Separator for header">
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
|
|
|
|
<p>CSS is a language for describing the rendering of structured documents
|
|
(such as HTML and XML) on screen, on paper, in speech, etc. This module
|
|
contains the features of CSS level 3 relating to the <image> type
|
|
and replaced elements. It includes and extends the functionality of CSS
|
|
level 2 <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, which builds on CSS
|
|
level 1 <a href="#CSS1" rel=biblioentry>[CSS1]<!--{{CSS1}}--></a>.
|
|
The main extensions compared to level 2 are the generalization of the
|
|
<url> type to the <image> type, several additions to the ‘<a
|
|
href="#ltimage"><code class=css><image></code></a>’ type, a
|
|
generic sizing algorithm for images and other replaced content in CSS, and
|
|
several properties controlling the interaction of replaced elements and
|
|
CSS's layout models.
|
|
|
|
<h2 class="no-num no-toc" id=status>Status of this document</h2>
|
|
<!--begin-status-->
|
|
|
|
<p><em>This section describes the status of this document at the time of
|
|
its publication. Other documents may supersede this document. A list of
|
|
current W3C publications and the latest revision of this technical report
|
|
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
|
|
index at http://www.w3.org/TR/.</a></em>
|
|
|
|
<p>Publication as a Working Draft does not imply endorsement by the W3C
|
|
Membership. This is a draft document and may be updated, replaced or
|
|
obsoleted by other documents at any time. It is inappropriate to cite this
|
|
document as other than work in progress.
|
|
|
|
<p>The (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
|
|
mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
|
|
<a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
|
|
for discussion of this specification. When sending e-mail, please put the
|
|
text “css3-images” in the subject, preferably like this:
|
|
“[<!---->css3-images<!---->] <em>…summary of
|
|
comment…</em>”
|
|
|
|
<p>This document was produced by the <a
|
|
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
|
|
the <a href="http://www.w3.org/Style/">Style Activity</a>).
|
|
|
|
<p>This document was produced by a group operating under the <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
|
|
2004 W3C Patent Policy</a>. W3C maintains a <a
|
|
href="http://www.w3.org/2004/01/pp-impl/32061/status"
|
|
rel=disclosure>public list of any patent disclosures</a> made in
|
|
connection with the deliverables of the group; that page also includes
|
|
instructions for disclosing a patent. An individual who has actual
|
|
knowledge of a patent which the individual believes contains <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
|
|
Claim(s)</a> must disclose the information in accordance with <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
|
|
6 of the W3C Patent Policy</a>.</p>
|
|
<!--end-status-->
|
|
|
|
<p>​​​​​This specification is a <strong>Last
|
|
Call Working Draft</strong>. All persons are encouraged to review this
|
|
document and <strong>send comments to the <a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">www-style</a>
|
|
mailing list</strong> as described above. The <strong>deadline for
|
|
comments</strong> is <strong>7 February 2012</strong>.
|
|
|
|
<p>The following features are at risk: …
|
|
|
|
<ol>
|
|
<li>The <a href="#image-notation">image() function</a>
|
|
|
|
<li>The <a href="#element-reference">element() function</a>
|
|
|
|
<li>The "none" and "scale-down" values for ‘<a
|
|
href="#object-fit0"><code class=property>object-fit</code></a>’
|
|
|
|
<li>The ‘<a href="#image-orientation0"><code
|
|
class=property>image-orientation</code></a>’ property
|
|
|
|
<li>The "snap" keyword for ‘<a href="#image-resolution0"><code
|
|
class=property>image-resolution</code></a>’
|
|
</ol>
|
|
|
|
<h2 class="no-num no-toc" id=contents>Table of contents</h2>
|
|
<!--begin-toc-->
|
|
|
|
<ul class=toc>
|
|
<li><a href="#intro"><span class=secno>1. </span> Introduction</a>
|
|
<ul class=toc>
|
|
<li><a href="#placement"><span class=secno>1.1. </span> Module
|
|
Interactions</a>
|
|
|
|
<li><a href="#values"><span class=secno>1.2. </span> Values</a>
|
|
</ul>
|
|
|
|
<li><a href="#resolution-units"><span class=secno>2. </span> Resolution
|
|
Units: the <resolution> type</a>
|
|
|
|
<li><a href="#image"><span class=secno>3. </span> Image Values: the
|
|
<image> type</a>
|
|
<ul class=toc>
|
|
<li><a href="#url"><span class=secno>3.1. </span> Image References and
|
|
Image Slices: the ‘<code class=css>url()</code>’
|
|
notation</a>
|
|
|
|
<li><a href="#image-notation"><span class=secno>3.2. </span> Image
|
|
Fallbacks and Annotations: the ‘<code
|
|
class=css>image()</code>’ notation</a>
|
|
|
|
<li><a href="#element-reference"><span class=secno>3.3. </span> Using
|
|
Elements as Images: the ‘<code class=css>element()</code>’
|
|
notation</a>
|
|
</ul>
|
|
|
|
<li><a href="#gradients"><span class=secno>4. </span> Gradients</a>
|
|
<ul class=toc>
|
|
<li><a href="#linear-gradients"><span class=secno>4.1. </span> Linear
|
|
Gradients: the ‘<code class=css>linear-gradient()</code>’
|
|
notation</a>
|
|
|
|
<li><a href="#radial-gradients"><span class=secno>4.2. </span> Radial
|
|
Gradients: the ‘<code class=css>radial-gradient()</code>’
|
|
notation</a>
|
|
|
|
<li><a href="#repeating-gradients"><span class=secno>4.3. </span>
|
|
Repeating Gradients: the ‘<code
|
|
class=css>repeating-linear-gradient()</code>’ and ‘<code
|
|
class=css>repeating-radial-gradient()</code>’ notations</a>
|
|
|
|
<li><a href="#color-stop-syntax"><span class=secno>4.4. </span> Gradient
|
|
Color-Stops</a>
|
|
</ul>
|
|
|
|
<li><a href="#sizing"><span class=secno>5. </span> Sizing Images and
|
|
Objects in CSS</a>
|
|
<ul class=toc>
|
|
<li><a href="#sizing-terms"><span class=secno>5.1. </span> Object-Sizing
|
|
Terminology</a>
|
|
|
|
<li><a href="#object-negotiation"><span class=secno>5.2. </span>
|
|
CSS⇋Object Negotiation</a>
|
|
|
|
<li><a href="#default-sizing"><span class=secno>5.3. </span> Default
|
|
Concrete Object Size Resolution</a>
|
|
|
|
<li><a href="#object-fit"><span class=secno>5.4. </span> Sizing Objects:
|
|
the ‘<code class=property>object-fit</code>’ property</a>
|
|
|
|
<li><a href="#object-position"><span class=secno>5.5. </span>
|
|
Positioning Objects: the ‘<code
|
|
class=property>object-position</code>’ property</a>
|
|
</ul>
|
|
|
|
<li><a href="#image-processing"><span class=secno>6. </span> Image
|
|
Processing</a>
|
|
<ul class=toc>
|
|
<li><a href="#image-resolution"><span class=secno>6.1. </span>
|
|
Overriding Image Resolutions: the ‘<code
|
|
class=property>image-resolution</code>’ property</a>
|
|
|
|
<li><a href="#image-orientation"><span class=secno>6.2. </span>
|
|
Orienting an Image on the Page: the ‘<code
|
|
class=property>image-orientation</code>’ property</a>
|
|
</ul>
|
|
|
|
<li><a href="#conformance"><span class=secno>7. </span> Conformance</a>
|
|
<ul class=toc>
|
|
<li><a href="#conventions"><span class=secno>7.1. </span> Document
|
|
Conventions</a>
|
|
|
|
<li><a href="#conformance-classes"><span class=secno>7.2. </span>
|
|
Conformance Classes</a>
|
|
|
|
<li><a href="#partial"><span class=secno>7.3. </span> Partial
|
|
Implementations</a>
|
|
|
|
<li><a href="#experimental"><span class=secno>7.4. </span> Experimental
|
|
Implementations</a>
|
|
|
|
<li><a href="#testing"><span class=secno>7.5. </span>Non-Experimental
|
|
Implementations</a>
|
|
|
|
<li><a href="#cr-exit-criteria"><span class=secno>7.6. </span> CR Exit
|
|
Criteria</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
|
|
|
|
<li class=no-num><a href="#references">References</a>
|
|
<ul class=toc>
|
|
<li class=no-num><a href="#normative-references">Normative
|
|
references</a>
|
|
|
|
<li class=no-num><a href="#other-references">Other references</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#index">Index</a>
|
|
|
|
<li class=no-num><a href="#property-index">Property index</a>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<h2 id=intro><span class=secno>1. </span> Introduction</h2>
|
|
|
|
<p><em>This section is not normative.</em>
|
|
|
|
<p>In CSS Levels 1 and 2, image values, such as those used in the
|
|
‘<code class=property>background-image</code>’ property, could
|
|
only be given by a single URL value. This module introduces additional
|
|
ways of representing 2D images, for example as <a href="#image-notation">a
|
|
list of URIs denoting fallbacks</a>, as <a href="#element-reference">a
|
|
reference to an element</a>, or as <a href="#gradients">a gradient</a>.
|
|
|
|
<p>This module also defines several properties for <a
|
|
href="#image-processing">manipulating raster images</a> and for <a
|
|
href="#object-fit">sizing</a> or <a
|
|
href="#object-position">positioning</a> replaced elements such as images
|
|
within the box determined by the CSS layout algorithms. It also defines in
|
|
a generic way CSS's <a href="#sizing">sizing algorithm</a> for images and
|
|
other replaced elements.
|
|
|
|
<h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3>
|
|
|
|
<p>This module defines and extends the ‘<a href="#ltimage"><code
|
|
class=css><image></code></a>’ value type defined in <a
|
|
href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>.
|
|
Furthermore it replaces the ‘<code class=css><url></code>’
|
|
type in the ‘<code class=property>background-image</code>’ and
|
|
‘<code class=property>list-style-image</code>’ definitions in
|
|
CSS1 and CSS2 and adds ‘<a href="#ltimage"><code
|
|
class=css><image></code></a>’ as an alternative to ‘<code
|
|
class=css><url></code>’ in the ‘<code
|
|
class=property>content</code>’ property's value. It is presumed that
|
|
CSS specifications beyond CSS2.1 will use the ‘<a
|
|
href="#ltimage"><code class=css><image></code></a>’ notation in
|
|
place of ‘<code class=css><url></code>’ where 2D images are
|
|
expected. (See e.g. <a href="#CSS3BG"
|
|
rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>.)
|
|
|
|
<h3 id=values><span class=secno>1.2. </span> Values</h3>
|
|
|
|
<p>This specification follows the <a
|
|
href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
|
|
definition conventions</a> from <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
|
|
this specification are defined in CSS Level 2 Revision 1 <a
|
|
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
|
|
modules may expand the definitions of these value types: for example <a
|
|
href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
|
|
when combined with this module, expands the definition of the <color>
|
|
value type as used in this specification.
|
|
|
|
<p>In addition to the property-specific values listed in their definitions,
|
|
all properties defined in this specification also accept the <a
|
|
href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
|
|
keyword as their property value. For readability it has not been repeated
|
|
explicitly.
|
|
|
|
<h2 id=resolution-units><span class=secno>2. </span> Resolution Units: the
|
|
<resolution> type</h2>
|
|
|
|
<p>This specification defines the following units as part of the <dfn
|
|
id=ltresolution><resolution></dfn> value type:
|
|
|
|
<dl>
|
|
<dt><dfn id=dpi>‘<code class=css>dpi</code>’</dfn>
|
|
|
|
<dd>dots per inch
|
|
|
|
<dt><dfn id=dpcm>‘<code class=css>dpcm</code>’</dfn>
|
|
|
|
<dd>dots per centimeter
|
|
|
|
<dt><dfn id=dppx>‘<code class=css>dppx</code>’</dfn>
|
|
|
|
<dd>dots per ‘<code class=css>px</code>’ unit
|
|
</dl>
|
|
|
|
<p>The <resolution> unit represents the size of a single "dot" in a
|
|
graphical representation by indicating how many of these dots fit in a CSS
|
|
‘<code class=property>in</code>’, ‘<code
|
|
class=property>cm</code>’, or ‘<code
|
|
class=property>px</code>’. For uses, see e.g. the ‘<code
|
|
class=css>resolution</code>’ media query in <a href="#MEDIAQ"
|
|
rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a> or the ‘<a
|
|
href="#image-resolution0"><code
|
|
class=property>image-resolution</code></a>’ property defined below.
|
|
|
|
<p class=note>Note that due to the 1:96 fixed ratio of CSS ‘<code
|
|
class=css>in</code>’ to CSS ‘<code class=css>px</code>’,
|
|
‘<code class=css>1dppx</code>’ is equivalent to ‘<code
|
|
class=css>96dpi</code>’. This corresponds to the default resolution
|
|
of images displayed in CSS: see ‘<code
|
|
class=property>image-reslution</code>’.
|
|
<!-- ====================================================================== -->
|
|
|
|
|
|
<h2 id=image><span class=secno>3. </span> Image Values: the <image> type</h2>
|
|
|
|
<p>The <image> value type denotes a 2D image. It represents either a <a
|
|
href="#url">url reference</a>, <a href="#image-notation">image
|
|
notation</a>, <a href="#element-reference">element reference</a>, or <a
|
|
href="#gradients">gradient notation</a>. Syntactically it is defined as
|
|
|
|
<pre class=prod><dfn id=ltimage><image></dfn> = <i><url></i> | <a
|
|
href="#ltimage-list"><i><image-list></i></a> | <a
|
|
href="#ltelement-reference"><i><element-reference></i></a> | <a
|
|
href="#ltgradient"><i><gradient></i></a></pre>
|
|
|
|
<p>Image values can be used in many CSS properties, including the
|
|
‘<code class=property>background-image</code>’, ‘<code
|
|
class=property>list-style-image</code>’, ‘<code
|
|
class=property>cursor</code>’ properties <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
|
|
<!-- ====================================================================== -->
|
|
|
|
|
|
<h3 id=url><span class=secno>3.1. </span> Image References and Image
|
|
Slices: the ‘<code class=css>url()</code>’ notation</h3>
|
|
|
|
<p>The simplest way to indicate an image is to reference an image file by
|
|
URL. This is done with the <a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#uri">‘<code
|
|
class=css>url()</code>’ notation</a>, defined in <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
|
|
|
|
<div class=example>
|
|
<p>In the example below, a background image is specified with ‘<code
|
|
class=css>url()</code>’ syntax:</p>
|
|
|
|
<pre>background-image: url(wavy.png);</pre>
|
|
</div>
|
|
|
|
<p>A portion of an image may be referenced (clipped out and used as a
|
|
standalone image) by use of <a
|
|
href="http://www.w3.org/TR/media-frags/#naming-space">media fragment
|
|
identifiers</a>. <a href="#MEDIA-FRAGS"
|
|
rel=biblioentry>[MEDIA-FRAGS]<!--{{!MEDIA-FRAGS}}--></a>
|
|
|
|
<div class=example>
|
|
<p>For example, given the following image* and CSS:</p>
|
|
<a href=sprites.svg> <img alt="[9 circles, with 0 to 8 eighths filled in]"
|
|
height=20 src=sprites.svg width=180> </a>
|
|
<pre>background-image: url('sprites.svg#xywh=40,0,20,20')</pre>
|
|
|
|
<p>...the background of the element will be the portion of the image that
|
|
starts at (40px,0px) and is 20px wide and tall, which is just the circle
|
|
with a quarter filled in.</p>
|
|
|
|
<p><small>* SVG-in-<img> support required. Click the picture to view
|
|
the SVG directly.</small></p>
|
|
</div>
|
|
|
|
<p class=note>Note that a legacy UA that doesn't understand the media
|
|
fragments notation will ignore the fragment and simply display the
|
|
entirety of an image specified with ‘<code
|
|
class=css>url</code>’. However, since URLs with media fragment
|
|
identifiers can also be used in the ‘<code
|
|
class=css>image()</code>’ notation defined below, authors can take
|
|
advantage of CSS's forward-compatible parsing rules to provide a fallback
|
|
when using an image fragment URL:
|
|
|
|
<div class=example>
|
|
<p>In the example below, the ‘<code class=css>image()</code>’
|
|
notation is used together with the media fragment syntax, so that UAs
|
|
that don't support media fragments fail to parse the second declaration
|
|
and use the first.</p>
|
|
|
|
<pre>
|
|
<!-- -->background-image: url('swirl.png'); /* old UAs */
|
|
<!-- -->background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */</pre>
|
|
</div>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h3 id=image-notation><span class=secno>3.2. </span> Image Fallbacks and
|
|
Annotations: the ‘<code class=css>image()</code>’ notation</h3>
|
|
|
|
<p>The ‘<code class=css>image()</code>’ function allows an
|
|
author to specify an image with fallback images to be used if the original
|
|
image can't be decoded or is a type that the browser doesn't recognize.
|
|
Additionally, the author can specify a color as an ultimate fallback to be
|
|
used when none of the images can be.
|
|
|
|
<p>So that authors can take advantage of CSS's forwards-compatible parsing
|
|
rules to provide a fallback for image slices, implementations that support
|
|
the ‘<code class=css>image()</code>’ notation <em>must</em>
|
|
support the <code>xywh=#,#,#,#</code> form of media fragment identifiers
|
|
for images. <a href="#MEDIA-FRAGS"
|
|
rel=biblioentry>[MEDIA-FRAGS]<!--{{!MEDIA-FRAGS}}--></a>
|
|
|
|
<p>The ‘<code class=css>image()</code>’ notation is defined as:
|
|
|
|
|
|
<pre class=prod><dfn
|
|
id=ltimage-list><image-list></dfn> = image( [ <image-decl> , ]* [ <image-decl> | <color> ] )
|
|
<dfn
|
|
id=ltimage-decl><image-decl></dfn> = <string> [ ltr | rtl ]?</pre>
|
|
|
|
<p>Each <code><string></code> must represent a <a
|
|
href="http://dev.w3.org/csswg/css3-values/#urls">URL</a>.
|
|
|
|
<p>Multiple arguments can be given separated by commas, in which case the
|
|
function represents the first <string> representing an image that the
|
|
browser can successfully load and display. The final argument can specify
|
|
a <color> to serve as an ultimate fallback; this can be used, e.g. for
|
|
‘<code class=property>background-image</code>’, to ensure
|
|
adequate contrast if none of the preceding <image-decl>s can be used.
|
|
If the final argument is a <color>, it represents a solid-color image
|
|
of the given color with no <a href="#intrinsic-dimensions"><i>intrinsic
|
|
dimensions</i></a>.
|
|
|
|
<div class=example>
|
|
<p>The rule below would tell the UA to load ‘<code
|
|
class=css>wavy.svg</code>’ if it can; failing that to load
|
|
‘<code class=css>wavy.png</code>’; failing that to display
|
|
‘<code class=css>wavy.gif</code>’. For example, the browser
|
|
might not understand how to render SVG images, and the PNG may be
|
|
temporarily 404 (returning an HTML 404 page, which the browser can't
|
|
decode as an image) due to a server move, so the GIF is used until one of
|
|
the previous problems corrects itself.</p>
|
|
|
|
<pre>background-image: image("wavy.svg", 'wavy.png' , "wavy.gif");</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>The fallback color can be used to ensure that text is still readable
|
|
even when the image fails to load. For example, the following code works
|
|
fine if the image is rectangular and has no transparency:</p>
|
|
|
|
<pre>
|
|
body { color: black; background: white; }
|
|
p.special { color: white; background: url("dark.png") black; }</pre>
|
|
|
|
<p>When the image doesn't load, the background color is still there to
|
|
ensure that the white text is readable. However, if the image has some
|
|
transparency, the black will be visible behind it, which is probably not
|
|
desired. The ‘<code class=css>image()</code>’ function
|
|
addresses this:</p>
|
|
|
|
<pre>
|
|
body { color: black; background: white; }
|
|
p.special { color: white; background: image("dark.png", black); }</pre>
|
|
|
|
<p>Now, the black won't show at all if the image loads, but if for
|
|
whatever reason the image fails, it'll pop in and prevent the white text
|
|
from being set against a white background.</p>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>At times, one may need a solid-color image for a property or function
|
|
that does not accept the <color> type directly. The ‘<code
|
|
class=css>image()</code>’ function can be used for this: by
|
|
specifying <em>only</em> a color without any URLs, the function
|
|
immediately falls back to representing a solid-color image of the chosen
|
|
color.
|
|
|
|
<pre>background-image: image(rgba(0,0,255,.5)), url("bg-image.png");</pre>
|
|
|
|
<p>In the above, the background is the image "bg-image.png", overlaid with
|
|
partially-transparent blue.
|
|
</div>
|
|
|
|
<p>Along with each URL, the author may specify a directionality, similar to
|
|
adding a <code>dir</code> attribute to an element in HTML. The image
|
|
represented by the function takes on the directionality of the used URL.
|
|
If a directional image is used on or in an element with opposite <a
|
|
href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction">direction</a>,
|
|
the image must be flipped in the inline direction (as if it was
|
|
transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is
|
|
the X axis).
|
|
|
|
<div class=example>
|
|
<p>A list may use an arrow for a bullet that points into the content. If
|
|
the list can contain both LTR and RTL text, though, the bullet may be on
|
|
the left or the right, and an image designed to point into the text on
|
|
one side will point out of the text on the other side. This can be fixed
|
|
with code like:</p>
|
|
|
|
<pre>
|
|
<ul style="list-style-image: image("arrow.png" ltr);">
|
|
<li dir='ltr'>My bullet is on the left!</li>
|
|
<li dir='rtl'>MY BULLET IS ON THE RIGHT!</li>
|
|
</ul></pre>
|
|
|
|
<p>This should render something like:</p>
|
|
|
|
<pre>
|
|
⇒ My bullet is on the left!
|
|
!THGIR EHT NO SI TELLUB YM ⇐</pre>
|
|
|
|
<p>In LTR list items, the image will be used as-is. In the RTL list items,
|
|
however, it will be flipped in the inline direction, so it still points
|
|
into the content.</p>
|
|
</div>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h3 id=element-reference><span class=secno>3.3. </span> Using Elements as
|
|
Images: the ‘<code class=css>element()</code>’ notation</h3>
|
|
|
|
<p>The ‘<code class=css>element()</code>’ function allows an
|
|
author to use an element in the document as an image. As the referenced
|
|
element changes appearance, the image changes as well. This can be used,
|
|
for example, to create live previews of the next/previous slide in a
|
|
slideshow, or to reference a canvas element for a fancy generated gradient
|
|
or even an animated background. The syntax for ‘<code
|
|
class=css>element()</code>’ is:
|
|
|
|
<pre class=prod><dfn
|
|
id=ltelement-reference><element-reference></dfn> = element( [<id-selector> | <identifier> ] )</pre>
|
|
|
|
<p>where <id-selector> is an ID selector <a href="#SELECT"
|
|
rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, and <identifier> is an
|
|
identifer <a href="#CSS3VAL"
|
|
rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>.
|
|
|
|
<p>If the argument to the ‘<code class=css>element()</code>’
|
|
function is an ID selector, the function references the element matched by
|
|
the selector. If it's an identifier, the function references the element
|
|
whose <dfn id=css-element-reference-identifier>CSS element reference
|
|
identifier</dfn> is the given identifier. (CSS does not define how an
|
|
element acquires a <a href="#css-element-reference-identifier"><i>CSS
|
|
element reference identifier</i></a>; that is determined by the host
|
|
language.)
|
|
|
|
<div class=example>
|
|
<p>The ‘<code class=css>element()</code>’ function can be put
|
|
to many uses. For example, it can be used to show a preview of the
|
|
previous or next slide in a slideshow:</p>
|
|
|
|
<pre>
|
|
<!DOCTYPE html>
|
|
<script>
|
|
function navigateSlides() {
|
|
var currentSlide = ...;
|
|
var prevSlide = currentSlide.previousElementSibling;
|
|
var nextSlide = currentSlide.nextElementSibling;
|
|
document.CSSElementMap['prev-slide'] = prevSlide;
|
|
document.CSSElementMap['next-slide'] = nextSlide;
|
|
}
|
|
</script>
|
|
<style>
|
|
#prev-preview, #next-preview {
|
|
position: fixed;
|
|
...
|
|
}
|
|
#prev-preview { background: element(prev-slide); }
|
|
#next-preview { background: element(next-slide); }
|
|
</style>
|
|
<div id='prev-preview'></div>
|
|
<div id='next-preview'></div>
|
|
<section class='slide'>...</section>
|
|
<section class='slide current-slide'>...</section>
|
|
...</pre>
|
|
|
|
<p>In this example, the <code>navigateSlides</code> function updates
|
|
HTML's <code>CSSElementMap</code> to always point to the next and
|
|
previous slides, which are then displayed in small floating boxes
|
|
alongside the slides. Since you can't interact with the slides through
|
|
the ‘<code class=css>element()</code>’ function (it's just an
|
|
image), you could even use <code>click</code> handlers on the preview
|
|
boxes to help navigate through the page.
|
|
|
|
<p class=note>Note: A future version of this specification may allow more
|
|
than just ID selectors to be passed to ‘<code
|
|
class=css>element()</code>’, allowing an example like this to be
|
|
done with even less javascript - something like ‘<code
|
|
class=css>background: element(.current-slide + .slide);</code>’.</p>
|
|
</div>
|
|
|
|
<p>The image represented by the ‘<code
|
|
class=css>element()</code>’ function can vary based on a number of
|
|
factors. The function must represent the image described by the first set
|
|
of conditions, following, that are true:
|
|
|
|
<dl>
|
|
<dt>The function doesn't reference an element
|
|
|
|
<dd>The function represents a solid-color transparent-black image with no
|
|
intrinsic dimensions.
|
|
|
|
<dt>The function references an element that is not rendered, but which <a
|
|
href="#paint-source"><i title=paint-source>provides a paint
|
|
source</i></a>
|
|
|
|
<dd>
|
|
<p>The function represents an image with the dimensions and appearance of
|
|
the <a href="#paint-source"><i title=paint-source>paint source</i></a>.
|
|
The host language defines the dimensions and appearance of paint
|
|
sources.
|
|
|
|
<div class=example>
|
|
<p>For example, the ‘<code class=css>element()</code>’
|
|
function can reference an SVG <pattern> element in an HTML document:</p>
|
|
|
|
<pre>
|
|
<!DOCTYPE html>
|
|
<svg>
|
|
<defs>
|
|
<pattern id='pattern1'>
|
|
<path d='...'>
|
|
</pattern>
|
|
</defs>
|
|
</svg>
|
|
<p style="background: element(#pattern1)">
|
|
I'm using the pattern as a background!
|
|
If the pattern is changed or animated,
|
|
my background will be updated too!
|
|
</p></pre>
|
|
|
|
<p>HTML also defines that a handful of elements, such as <canvas>,
|
|
<img>, and <video>, provide a paint source. This means that CSS
|
|
can, for example, reference a canvas that's being drawn into, but not
|
|
included in the page:</p>
|
|
|
|
<pre>
|
|
<!DOCTYPE html>
|
|
<script>
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = 20; canvas.height = 20;
|
|
document.CSSElementMap.foo = canvas;
|
|
drawAnimation(canvas);
|
|
</script>
|
|
<ul style="list-style-image: element(foo);">
|
|
<li>I'm using the canvas as a bullet!</li>
|
|
<li>So am I!</li>
|
|
<li>As the canvas is changed over time with Javascript,
|
|
we'll all update our bullet image with it!</li>
|
|
</ul></pre>
|
|
</div>
|
|
|
|
<dt>The function references an element that is not rendered
|
|
|
|
<dt>The function references an element that is a descendant of a replaced
|
|
element
|
|
|
|
<dd>
|
|
<p>The function represents a solid-color transparent-black image with no
|
|
intrinsic dimensions.</p>
|
|
|
|
<div class=example>
|
|
<p>For example, all of the following ‘<code
|
|
class=css>element()</code>’ uses will result in a transparent
|
|
background:</p>
|
|
|
|
<pre>
|
|
<!DOCTYPE html>
|
|
<script>
|
|
var p = document.createElement('p');
|
|
p.textContent = "one";
|
|
document.CSSElementMap.one = p;
|
|
</script>
|
|
<p id='two' style="display:none;">two</p>
|
|
<iframe src="http://example.com">
|
|
<p id='three'>I'm fallback content!</p>
|
|
</iframe>
|
|
<ul>
|
|
<li style="background: element(one);">
|
|
A P element doesn't provide a paint source,
|
|
and it's not rendered unless it's in a document.
|
|
</li>
|
|
<li style="background: element(#two);">
|
|
Similarly, a display:none element isn't rendered, and
|
|
P still doesn't provide a paint source.
|
|
</li>
|
|
<li style="background: element(#three);">
|
|
The descendants of a replaced element like an IFRAME
|
|
can't be used in element() either.
|
|
</li>
|
|
</ul></pre>
|
|
</div>
|
|
|
|
<dt>Otherwise
|
|
|
|
<dd>
|
|
<p>The function represents an image with width and height equal to the
|
|
bounding box of the referenced element. The image must be constructed by
|
|
rendering the referenced element and its descendants at the same size
|
|
that the element would be in its document, over an infinite
|
|
transparent-black canvas, positioned so that the edges of the referenced
|
|
element's bounding box is flush with the edges of the image. <span
|
|
class=note>Note: Because images clip anything outside their bounds by
|
|
default, this means that decorations that extend outside the bounding
|
|
box, like box-shadows or some border-images, may be clipped.</span></p>
|
|
|
|
<p>If the referenced element has a transform applied to it or an
|
|
ancestor, the transform must be ignored when rendering the element as an
|
|
image. If the referenced element is broken across pages, the element
|
|
must be displayed as if the page content areas were joined flush in the
|
|
pagination direction (elements broken across lines or columns just
|
|
render with their bounding box, as normal, which may have unintended
|
|
visual effects).</p>
|
|
|
|
<div class=example>
|
|
<p>As a somewhat silly example, a <p> element can be reused as a
|
|
background elsewhere in the document:</p>
|
|
|
|
<pre>
|
|
<style>
|
|
#src { color: white; background: lime; width: 300px; height: 40px; }
|
|
#dst { color: black; background: element(#src); padding: 20px; margin: 20px 0; }
|
|
</style>
|
|
<p id='src'>I'm an ordinary element!</p>
|
|
<p id='dst'>I'm using the previous element as my background!</p></pre>
|
|
<img alt="" src=element-function.png></div>
|
|
</dl>
|
|
|
|
<p>Implementations may either re-use existing bitmap data generated for the
|
|
referenced element or regenerate the display of the element to maximize
|
|
quality at the image's size (for example, if the implementation detects
|
|
that the referenced element is an SVG fragment); in the latter case, the
|
|
layout of the referenced element in the image must not be changed by the
|
|
regeneration process. That is, the image must look identical to the
|
|
referenced element, modulo rasterization quality.
|
|
|
|
<p>Host languages may define that some elements provide a <dfn
|
|
id=paint-source title=paint-source>paint source</dfn>. Paint sources have
|
|
an intrinsic width, height, and appearance, separate from the process of
|
|
rendering, and so may be used as images even when they're not being
|
|
rendered. Examples of elements that provide paint sources are the
|
|
<linearGradient>, <radialGradient>, and <pattern> elements in
|
|
SVG, or the <img>, <video>, and <canvas> elements in HTML.</p>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h4 class="no-num no-toc" id=element-cycles> Detecting and Resolving
|
|
Circular Relationships Introduced by ‘<code
|
|
class=css>element()</code>’</h4>
|
|
|
|
<p>The ‘<code class=css>element()</code>’ function can produce
|
|
nonsensical circular relationships, such as an element using itself as its
|
|
own background. These relationships can be easily and reliably detected
|
|
and resolved, however, by keeping track of a dependency graph and using
|
|
common cycle-detection algorithms.
|
|
|
|
<p>Populate the dependency graph initially by having every element depend
|
|
on each of its children. Then, whenever a property on an element A uses
|
|
the ‘<code class=css>element()</code>’ function to refer to an
|
|
element B, add an edge to the graph by having A depend on B. If a
|
|
dependency cycle is detected, any ‘<code
|
|
class=css>element()</code>’ functions that produced a dependency in
|
|
the cycle must represent a fully transparent image with no intrinsic
|
|
dimensions.
|
|
|
|
<p class=issue>Someone else needs to review this and make sure that I'm not
|
|
missing any cycles.
|
|
|
|
<h2 id=gradients><span class=secno>4. </span> Gradients</h2>
|
|
|
|
<p>A gradient is an image that smoothly fades from one color to another.
|
|
These are commonly used for subtle shading in background images, buttons,
|
|
and many other things. The two functions described in this section allow
|
|
an author to specify such an image in a terse syntax, so that the UA can
|
|
generate the image automatically when rendering the page. The syntax of a
|
|
<a href="#ltgradient"><i><gradient></i></a> is:
|
|
|
|
<pre class=prod><dfn
|
|
id=ltgradient><gradient></dfn> = [ <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> ]</pre>
|
|
|
|
<p>where <a href="#ltlinear-gradient"><i><linear-gradient></i></a>,
|
|
<i><radial-gradient></i>, <i><repeating-linear-gradient></i>, and
|
|
<i><repeating-radial-gradient></i> are defined in their applicable
|
|
sections below.
|
|
|
|
<p>Gradients are a type of image, and can be used anywhere an image can,
|
|
such as in the ‘<code class=property>background-image</code>’
|
|
or ‘<code class=property>list-style-image</code>’ properties.
|
|
|
|
<div class=example>
|
|
<p>As with the other <a href="#ltimage"><i><image></i></a> types
|
|
defined in this specification, gradients can be used in any property that
|
|
accepts images. For example:</p>
|
|
|
|
<ul>
|
|
<li><code>background: linear-gradient(white, gray);</code>
|
|
|
|
<li><code>list-style-image: radial-gradient(circle, #006, #00a 90%,
|
|
#0000af 100%, white 100%)</code>
|
|
</ul>
|
|
</div>
|
|
|
|
<p>A gradient is drawn into a box with the dimensions of the <a
|
|
href="#concrete-object-size"><i>concrete object size</i></a>, referred to
|
|
as the <dfn id=gradient-box>gradient box</dfn>. However, the gradient
|
|
itself has no <a href="#intrinsic-dimensions"><i>intrinsic
|
|
dimensions</i></a>.
|
|
|
|
<div class=example>
|
|
<p>For example, if you use a gradient as a background, by default the
|
|
gradient will draw into a <a href="#gradient-box"><i>gradient box</i></a>
|
|
the size of the element's padding box. If ‘<code
|
|
class=property>background-size</code>’ is explicitly set to a value
|
|
such as ‘<code class=css>100px 200px</code>’, then the <a
|
|
href="#gradient-box"><i>gradient box</i></a> will be 100px wide and 200px
|
|
tall. Similarly, for a gradient used as a ‘<code
|
|
class=property>list-style-image</code>’, the box would be a 1em
|
|
square, which is the <a href="#default-object-size"><i>default object
|
|
size</i></a> for that property.</p>
|
|
</div>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h3 id=linear-gradients><span class=secno>4.1. </span> Linear Gradients:
|
|
the ‘<code class=css>linear-gradient()</code>’ notation</h3>
|
|
|
|
<p>A linear gradient is created by specifying a gradient-line and then
|
|
several colors placed along that line. The image is constructed by
|
|
creating an infinite canvas and painting it with lines perpendicular to
|
|
the gradient-line, with the color of the painted line being the color of
|
|
the gradient-line where the two intersect. This produces a smooth fade
|
|
from each color to the next, progressing in the specified direction.</p>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h4 class=no-toc id=linear-gradient-syntax><span class=secno>4.1.1. </span>
|
|
linear-gradient() syntax</h4>
|
|
|
|
<pre class=prod><code>
|
|
<dfn
|
|
id=ltlinear-gradient><linear-gradient></dfn> = linear-gradient(
|
|
[ [ <angle> | to <side-or-corner> ] ,]?
|
|
<color-stop>[, <color-stop>]+
|
|
)
|
|
|
|
<dfn
|
|
id=side-or-corner><side-or-corner></dfn> = [left | right] || [top | bottom]</code></pre>
|
|
|
|
<p>The first argument to the function specifies the <dfn
|
|
id=gradient-line>gradient-line</dfn>, which gives the gradient a direction
|
|
and determines how color-stops are positioned. It may be omitted; if so,
|
|
it defaults to "to bottom".
|
|
|
|
<p>The <a href="#gradient-line"><i>gradient-line</i></a> may be specified
|
|
in two different ways. The first is by specifying the angle the <a
|
|
href="#gradient-line"><i>gradient-line</i></a> should assume; for the
|
|
purposes of this argument, 0deg points upwards, 90deg points toward the
|
|
right, and positive angles go clockwise. The starting-point and
|
|
ending-point of the <a href="#gradient-line"><i>gradient-line</i></a> are
|
|
determined by extending a line in both directions from the center of the
|
|
<a href="#gradient-box"><i>gradient box</i></a> at the angle specified. In
|
|
the direction of the angle, the ending-point is the point on the <a
|
|
href="#gradient-line"><i>gradient-line</i></a> where a line drawn
|
|
perpendicular to the <a href="#gradient-line"><i>gradient-line</i></a>
|
|
would intersect the corner of the <a href="#gradient-box"><i>gradient
|
|
box</i></a> in that direction. The starting-point is determined
|
|
identically, except in the opposite direction of the angle.
|
|
|
|
<p>Alternately, the direction may be specified with keywords that denote
|
|
the direction. If the argument is ‘<code class=css>to
|
|
top</code>’, ‘<code class=css>to right</code>’,
|
|
‘<code class=css>to bottom</code>’, or ‘<code
|
|
class=css>to left</code>’, the gradient must be rendered identically
|
|
to ‘<code class=css>0deg</code>’, ‘<code
|
|
class=css>90deg</code>’, ‘<code
|
|
class=css>180deg</code>’, or ‘<code
|
|
class=css>270deg</code>’, respectively. If the argument specifies a
|
|
corner to angle towards, the gradient must be rendered identically to an
|
|
angle-based gradient with an angle chosen such that the endpoint of the
|
|
gradient is in the same quadrant as the indicated corner, and a line drawn
|
|
perpendicular to the gradient-line through the center of the <a
|
|
href="#gradient-box"><i>gradient box</i></a> intersects the two
|
|
neighboring corners.
|
|
|
|
<p class=note>It is expected that the next level of this module will
|
|
provide the ability to define the gradient's direction relative to the
|
|
current text direction and writing-mode.
|
|
|
|
<p>
|
|
|
|
<div class=example>
|
|
<div style="overflow: hidden"> <img
|
|
alt="[An image showing a box with a background shading gradually from white in the bottom-left corner to black in the top-right corner. There is a line, illustrating the gradient-line, angled at 45 degrees and passing through the center of the box. The starting-point and ending-point of the gradient-line are indicated by the intersection of the gradient-line with two additional lines that pass through the bottom-left and top-right corners of the box.]"
|
|
src=gradient-diagram.png style="float: right; margin-left: 1em;">
|
|
<p>This example illustrates visually how to calculate the <a
|
|
href="#gradient-line"><i>gradient-line</i></a> from the rules above.
|
|
This shows the starting and ending-point of the <a
|
|
href="#gradient-line"><i>gradient-line</i></a>, along with the actual
|
|
gradient, produced by an element with ‘<code class=css>background:
|
|
linear-gradient(45deg, white, black);</code>’.</p>
|
|
|
|
<p>Notice how, though the starting-point and ending-point are outside of
|
|
the box, they're positioned precisely right so that the gradient is pure
|
|
white <em>exactly</em> at the corner, and pure black <em>exactly</em> at
|
|
the opposite corner. That's intentional, and will always be true for
|
|
linear gradients.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p>The gradient's color stops are typically placed between the
|
|
starting-point and ending-point on the <a
|
|
href="#gradient-line"><i>gradient-line</i></a>, but this isn't required -
|
|
the <a href="#gradient-line"><i>gradient-line</i></a> extends infinitely
|
|
in both directions. The starting-point and ending-point are merely
|
|
arbitrary location markers - the starting-point defines where 0%, 0px, etc
|
|
are located when specifying color-stops, and the ending-point defines
|
|
where 100% is located. Color-stops are allowed to have positions before 0%
|
|
or after 100%.</p>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h4 class=no-toc id=linear-gradient-examples><span class=secno>4.1.2.
|
|
</span> Linear Gradient Examples</h4>
|
|
|
|
<p>All of the following ‘<code
|
|
class=css>linear-gradient()</code>’ examples are presumed to be
|
|
backgrounds applied to a box that is 200px wide and 100px tall.
|
|
|
|
<div class=example>
|
|
<p>Below are various ways of specifying a basic vertical gradient:</p>
|
|
|
|
<pre><code>linear-gradient(yellow, blue);
|
|
linear-gradient(to bottom, yellow, blue);
|
|
linear-gradient(180deg, yellow, blue);
|
|
linear-gradient(to top, blue, yellow);
|
|
linear-gradient(to bottom, yellow 0%, blue 100%);</code></pre>
|
|
|
|
<p><img alt="" src=linear1.png></p>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This demonstrates the use of an angle in the gradient. Note that,
|
|
though the angle is not exactly the same as the angle between the
|
|
corners, the <a href="#gradient-line"><i>gradient-line</i></a> is still
|
|
sized so as to make the gradient yellow exactly at the upper-left corner,
|
|
and blue exactly at the lower-right corner.</p>
|
|
|
|
<pre><code>linear-gradient(135deg, yellow, blue);
|
|
linear-gradient(-45deg, blue, yellow);</code></pre>
|
|
|
|
<p><img alt="" src=linear3.png></p>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This demonstrates a 3-color gradient, and how to specify the location
|
|
of a stop explicitly:</p>
|
|
|
|
<pre><code>linear-gradient(yellow, blue 20%, #0f0);</code></pre>
|
|
|
|
<p><img alt="" src=linear4.png></p>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This demonstrates* a corner-to-corner gradient specified with keywords.
|
|
Note how the gradient is red and blue exactly in the bottom-left and
|
|
top-right corners, respectively, exactly like the second example.
|
|
Additionally, the angle of the gradient is automatically computed so that
|
|
the color at 50% (in this case, white) stretches across the top-left and
|
|
bottom-right corners.</p>
|
|
|
|
<pre><code>linear-gradient(to top right, red, white, blue)</code></pre>
|
|
|
|
<p><object data=gradient1.svg height=100 width=200>(Image requires
|
|
SVG)</object></p>
|
|
|
|
<p><small>* SVG-in-HTML support required to view the image.</small></p>
|
|
</div>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h3 id=radial-gradients><span class=secno>4.2. </span> Radial Gradients:
|
|
the ‘<code class=css>radial-gradient()</code>’ notation</h3>
|
|
|
|
<p>In a radial gradient, rather than colors smoothly fading from one side
|
|
of the <a href="#gradient-box"><i>gradient box</i></a> to the other as
|
|
with linear gradients, they instead emerge from a single point and
|
|
smoothly spread outward in a circular or elliptical shape.
|
|
|
|
<p>A radial gradient is specified by indicating the center of the gradient
|
|
(where the 0% ellipse will be) and the size and shape of the <dfn
|
|
id=ending-shape>ending shape</dfn> (the 100% ellipse). Color stops are
|
|
given as a list, just as for ‘<code
|
|
class=css>linear-gradient()</code>’. Starting from the <i>center</i>
|
|
and progressing towards (and potentially beyond) the <a
|
|
href="#ending-shape"><i>ending shape</i></a> concentric ellipses are drawn
|
|
and colored according to the specified color stops.</p>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h4 class=no-toc id=radial-gradient-syntax><span class=secno>4.2.1. </span>
|
|
radial-gradient() Syntax</h4>
|
|
|
|
<p>The radial gradient syntax is defined as follows:
|
|
|
|
<pre>
|
|
<radial-gradient> = radial-gradient(
|
|
[ [ <shape> || <size> ] [ at <position> ]? , |
|
|
at <position>,
|
|
]?
|
|
<color-stop> [ , <color-stop> ]+
|
|
)</pre>
|
|
|
|
<div class=example>
|
|
<p>Here is an example of a circular radial gradient 5em wide and
|
|
positioned with its center in the top left corner:
|
|
|
|
<pre>radial-gradient(5em circle at top left, yellow, blue)</pre>
|
|
</div>
|
|
|
|
<p>The arguments are defined as follows:
|
|
|
|
<dl>
|
|
<dt id=radial-position><dfn id=ltposition><position></dfn>
|
|
|
|
<dd>Determines the center of the gradient. The
|
|
<!-- FIXME a href="//www.w3.org/TR/css3-values/#position"--><a
|
|
href="#ltposition"><i><position></i></a><!--/a--> value type (which is
|
|
also used for ‘<code
|
|
class=property>background-position</code>’) is defined in <a
|
|
href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>, and is
|
|
resolved using the center-point as the object area and the <a
|
|
href="#gradient-box"><i>gradient box</i></a> as the positioning area. If
|
|
this argument is omitted, it defaults to ‘<code
|
|
class=css>center</code>’.
|
|
|
|
<dt id=radial-shape><dfn id=ltshape><shape></dfn>
|
|
|
|
<dd>Can be either ‘<code class=css>circle</code>’ or
|
|
‘<code class=css>ellipse</code>’; determines whether the
|
|
gradient's <a href="#ending-shape"><i>ending shape</i></a> is a circle or
|
|
an ellipse, respectively. If <a href="#ltshape"><i><shape></i></a> is
|
|
omitted, the <a href="#ending-shape"><i>ending shape</i></a> defaults to
|
|
a circle if the <a href="#ltsize"><i><size></i></a> is a single
|
|
<length>, and to an ellipse otherwise.
|
|
|
|
<dt id=radial-size><dfn id=ltsize><size></dfn>
|
|
|
|
<dd>
|
|
<p>Determines the size of the gradient's <a
|
|
href="#ending-shape"><i>ending shape</i></a>. If omitted it defaults to
|
|
‘<code class=css>farthest-corner</code>’. It can be given
|
|
explicitly or by keyword. For the purpose of the keyword definitions,
|
|
consider the <a href="#gradient-box"><i>gradient box</i></a> edges as
|
|
extending infinitely in both directions, rather than being finite line
|
|
segments.
|
|
|
|
<p>Both ‘<code class=css>circle</code>’ and ‘<code
|
|
class=css>ellipse</code>’ gradients accept the following keywords
|
|
as their <a href="#ltsize"><i><size></i></a>:
|
|
|
|
<dl>
|
|
<dt><dfn id=radial-closest-side>‘<code
|
|
class=css>closest-side</code>’</dfn>
|
|
|
|
<dd>The <a href="#ending-shape"><i>ending shape</i></a> is sized so that
|
|
that it exactly meets the side of the <a
|
|
href="#gradient-box"><i>gradient box</i></a> closest to the gradient's
|
|
center. If the shape is an ellipse, it exactly meets the closest side
|
|
in each dimension.
|
|
|
|
<dt><dfn id=radial-farthest-side>‘<code
|
|
class=css>farthest-side</code>’</dfn>
|
|
|
|
<dd>Same as ‘<code class=css>closest-side</code>’, except
|
|
the <a href="#ending-shape"><i>ending shape</i></a> is sized based on
|
|
the farthest side(s).
|
|
|
|
<dt><dfn id=radial-closest-corner>‘<code
|
|
class=css>closest-corner</code>’</dfn>
|
|
|
|
<dd>The <a href="#ending-shape"><i>ending shape</i></a> is sized so that
|
|
that it passes through the corner of the <a
|
|
href="#gradient-box"><i>gradient box</i></a> closest to the gradient's
|
|
center. If the shape is an ellipse, the <a
|
|
href="#ending-shape"><i>ending shape</i></a> is given the same
|
|
aspect-ratio it would have if ‘<code
|
|
class=css>closest-side</code>’ were specified.
|
|
|
|
<dt><dfn id=radial-farthest-corner>‘<code
|
|
class=css>farthest-corner</code>’</dfn>
|
|
|
|
<dd>Same as ‘<code class=css>closest-corner</code>’, except
|
|
the <a href="#ending-shape"><i>ending shape</i></a> is sized based on
|
|
the farthest corner. If the shape is an ellipse, the <a
|
|
href="#ending-shape"><i>ending shape</i></a> is given the same aspect
|
|
ratio it would have if ‘<code
|
|
class=css>farthest-side</code>’ were specified.
|
|
</dl>
|
|
|
|
<p>If <a href="#ltshape"><i><shape></i></a> is specified as
|
|
‘<code class=css>circle</code>’ or is omitted, the <a
|
|
href="#ltsize"><i><size></i></a> may be given explicitly as:
|
|
|
|
<dl>
|
|
<dt><dfn id=radial-size-circle><length></dfn>
|
|
|
|
<dd>
|
|
<p>Gives the radius of the circle explicitly. Negative values are
|
|
invalid.</p>
|
|
|
|
<p class=note>Note that percentages are <em>not</em> allowed here; they
|
|
can only be used to specify the size of an elliptical gradient, not a
|
|
circular one. This restriction exists because there is are multiple
|
|
reasonable answers as to which dimension the percentage should be
|
|
relative to. A future level of this module may provide the ability to
|
|
size circles with percentages, perhaps with more explicit controls
|
|
over which dimension is used.</p>
|
|
</dl>
|
|
|
|
<p>If <a href="#ltshape"><i><shape></i></a> is specified as
|
|
‘<code class=css>ellipse</code>’ or is omitted,
|
|
<i><extent></i> may instead be given explicitly as:
|
|
|
|
<dl>
|
|
<dt><dfn id=radial-size-ellipse>[<length> | <percentage>]{2}</dfn>
|
|
|
|
<dd>Gives the size of the ellipse explicitly. The first value represents
|
|
the horizontal radius, the second the vertical radius. Percentages
|
|
values are relative to the corresponding dimension of the <a
|
|
href="#gradient-box"><i>gradient box</i></a>. Negative values are
|
|
invalid.
|
|
</dl>
|
|
</dl>
|
|
|
|
<div class=note>
|
|
<p>Expanded with the above definitions, the grammar becomes:
|
|
|
|
<pre>
|
|
<radial-gradient> = radial-gradient(
|
|
[ [ circle || <length> ] [ at <position> ]? , |
|
|
[ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]? , |
|
|
[ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , |
|
|
at <position> ,
|
|
]?
|
|
<color-stop> [ , <color-stop> ]+
|
|
)
|
|
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side</pre>
|
|
</div>
|
|
|
|
<h4 class=no-toc id=radial-color-stops><span class=secno>4.2.2. </span>
|
|
Placing Color Stops</h4>
|
|
|
|
<p>Color-stops are placed on a <dfn id=gradient-ray>gradient-ray</dfn>,
|
|
similar to the <a href="#gradient-line"><i>gradient-line</i></a> of linear
|
|
gradients. The <a href="#gradient-ray"><i>gradient-ray</i></a> is anchored
|
|
at the center of the gradient and extends toward the right. The 0%
|
|
location is at the start of the <a
|
|
href="#gradient-ray"><i>gradient-ray</i></a>, and the 100% location is on
|
|
the point where the <a href="#gradient-ray"><i>gradient-ray</i></a>
|
|
intersects the <a href="#ending-shape"><i>ending shape</i></a>. Negative
|
|
locations can be specified; though negative locations are never directly
|
|
consulted for rendering, they can affect the color of non-negative
|
|
locations on the <a href="#gradient-ray"><i>gradient-ray</i></a> through
|
|
interpolation. For example, ‘<code class=css>radial-gradient(red
|
|
-50px, yellow 100px)</code>’ produces an elliptical gradient that
|
|
starts with a reddish-orange color in the center (specifically, #f50) and
|
|
transitions to yellow. Locations greater than 100% simply specify a
|
|
location a correspondingly greater distance from the center of the
|
|
gradient.
|
|
|
|
<p>When drawing the concentric ellipses of the gradient, the color of each
|
|
ellipse is the color of the <a
|
|
href="#gradient-ray"><i>gradient-ray</i></a> at the point where the
|
|
ellipse intersects the ray.
|
|
|
|
<h4 class=no-toc id=degenerate-radials><span class=secno>4.2.3. </span>
|
|
Degenerate Radial Gradients</h4>
|
|
|
|
<p>Some combinations of position, size, and shape will produce a circle or
|
|
ellipse with a radius of 0. This will occur, for example, if the center is
|
|
on a <a href="#gradient-box"><i>gradient box</i></a> edge and ‘<code
|
|
class=css>closest-side</code>’ or ‘<code
|
|
class=css>closest-corner</code>’ is specified or if the size and
|
|
shape are given explicitly and either of the radiuses is zero. In these
|
|
degenerate cases, the gradient must be be rendered as follows:
|
|
|
|
<dl>
|
|
<dt>If the <a href="#ending-shape"><i>ending shape</i></a> is a circle
|
|
with zero width or height:
|
|
|
|
<dd>Render as if the <a href="#ending-shape"><i>ending shape</i></a> was a
|
|
circle whose radius was an arbitrary very small number greater than zero.
|
|
<span class=note>This will make the gradient continue to look like a
|
|
circle.</span>
|
|
|
|
<dt>If the <a href="#ending-shape"><i>ending shape</i></a> has zero width
|
|
(regardless of the height):
|
|
|
|
<dd>Render as if the <a href="#ending-shape"><i>ending shape</i></a> was
|
|
an ellipse whose height was an arbitrary very large number and whose
|
|
width was an arbitrary very small number greater than zero. <span
|
|
class=note>This will make the gradient look similar to a horizontal
|
|
linear gradient that is mirrored across the center of the ellipse. It
|
|
also means that all color-stop positions specified with a percentage
|
|
resolve to ‘<code class=css>0px</code>’.</span>
|
|
|
|
<dt>Otherwise, if the <a href="#ending-shape"><i>ending shape</i></a> has
|
|
zero height:
|
|
|
|
<dd>Render as if the <a href="#ending-shape"><i>ending shape</i></a> was
|
|
an ellipse whose width was an arbitrary very large number and whose
|
|
height was an arbitrary very small number greater than zero. <span
|
|
class=note>This will make the gradient look like a solid-color image
|
|
equal to the color of the last color-stop, or equal to the average color
|
|
of the gradient if it's repeating.</span>
|
|
</dl>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h4 class=no-toc id=radial-gradient-examples><span class=secno>4.2.4.
|
|
</span> Radial Gradient Examples</h4>
|
|
|
|
<p>All of the following examples are applied to a box that is 200px wide
|
|
and 100px tall.
|
|
|
|
<div class=example>
|
|
<p>These examples demonstrate different ways to write the basic syntax for
|
|
radial gradients:</p>
|
|
|
|
<pre><code>radial-gradient(yellow, green);
|
|
radial-gradient(ellipse at center, yellow 0%, green 100%);
|
|
radial-gradient(farthest-corner at 50% 50%, yellow, green);</code></pre>
|
|
|
|
<p><img alt="" src=radial1.png></p>
|
|
|
|
<pre><code>radial-gradient(circle, yellow, green);</code></pre>
|
|
|
|
<p><img alt="" src=radial2.png></p>
|
|
|
|
<pre><code>radial-gradient(red, yellow, green);</code></pre>
|
|
|
|
<p><img alt="" src=radial3.png></p>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This image shows a gradient originating from somewhere other than the
|
|
center of the box:</p>
|
|
|
|
<pre><code>radial-gradient(farthest-side at left bottom, red, yellow 50px, green);</code></pre>
|
|
|
|
<p><img alt="" src=radial4.png></p>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Here we illustrate a ‘<code
|
|
class=property>closest-side</code>’ gradient.</p>
|
|
|
|
<pre><code>radial-gradient(closest-side at 20px 30px, red, yellow, green);
|
|
radial-gradient(20px 30px at 20px 30px, red, yellow, green);</code></pre>
|
|
|
|
<p><img alt="" src=radial6.png></p>
|
|
|
|
<pre><code>radial-gradient(closest-side circle at 20px 30px, red, yellow, green);
|
|
radial-gradient(20px 20px at 20px 30px, red, yellow, green);</code></pre>
|
|
|
|
<p><img alt="" src=radial7.png></p>
|
|
</div>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h3 id=repeating-gradients><span class=secno>4.3. </span> Repeating
|
|
Gradients: the ‘<code
|
|
class=css>repeating-linear-gradient()</code>’ and ‘<code
|
|
class=css>repeating-radial-gradient()</code>’ notations</h3>
|
|
|
|
<p>In addition to the ‘<code
|
|
class=css>linear-gradient()</code>’ and ‘<code
|
|
class=css>radial-gradient()</code>’ functions, this specification
|
|
defines ‘<code class=css>repeating-linear-gradient()</code>’
|
|
and ‘<code class=css>repeating-radial-gradient()</code>’
|
|
functions. These two functions take the same values and are interpreted
|
|
the same as their respective non-repeating siblings defined previously.
|
|
|
|
<p>When rendered, however, the color-stops are repeated infinitely in both
|
|
directions, with their positions shifted by multiples of the difference
|
|
between the last specified color-stop's position and the first specified
|
|
color-stop's position. For example, ‘<code
|
|
class=css>repeating-linear-gradient(red 10px, blue 50px)</code>’ is
|
|
equivalent to ‘<code class=css>linear-gradient(..., red -30px, blue
|
|
10px, red 10px, blue 50px, red 50px, blue 90px, ...)</code>’. Note
|
|
that the last color-stop and first color-stop will always coincide at the
|
|
boundaries of each group, which will produce sharp transitions if the
|
|
gradient does not start and end with the same color.
|
|
|
|
<div class=example>
|
|
<p>Repeating gradient syntax is basically identical to that of
|
|
non-repeating gradients:</p>
|
|
|
|
<pre><code>repeating-linear-gradient(red, blue 20px, red 40px)</code></pre>
|
|
|
|
<p><img alt="" src=repeating1.png></p>
|
|
|
|
<pre><code>repeating-radial-gradient(red, blue 20px, red 40px)</code></pre>
|
|
|
|
<p><img alt="" src=repeating2.png></p>
|
|
|
|
<pre><code>repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)</code></pre>
|
|
|
|
<p><img alt="" src=repeating3.png></p>
|
|
</div>
|
|
|
|
<p>If the distance between the first and last color-stops is non-zero, but
|
|
is small enough that the implementation knows that the physical resolution
|
|
of the output device is insufficient to faithfully render the gradient,
|
|
the implementation must <a href="#find-the-average-color-of-a-gradient"><i
|
|
title=gradient-average-color>find the average color of the
|
|
gradient</i></a> and render the gradient as a solid-color image equal to
|
|
the average color.
|
|
|
|
<p>If the distance between the first and last color-stops is zero (or
|
|
rounds to zero due to implementation limitations), the implementation must
|
|
<a href="#find-the-average-color-of-a-gradient"><i
|
|
title=gradient-average-color>find the average color</i></a> of a gradient
|
|
with the same number and color of color-stops, but with the first and last
|
|
color-stop an arbitrary non-zero distance apart, and the remaining
|
|
color-stops equally spaced between them. Then it must render the gradient
|
|
as a solid-color image equal to that average color.
|
|
|
|
<p>If the height of a repeating radial gradient is zero, or is close enough
|
|
to zero that the implementation knows that the physical resolution of the
|
|
output device is insufficient to faithfully render the gradient, the
|
|
implementation must <a href="#find-the-average-color-of-a-gradient"><i
|
|
title=gradient-average-color>find the average color of the
|
|
gradient</i></a> and render the gradient as a solid-color image equal to
|
|
the average color.
|
|
|
|
<p>To <dfn id=find-the-average-color-of-a-gradient
|
|
title=gradient-average-color>find the average color of a gradient</dfn>,
|
|
run these steps:
|
|
|
|
<ol>
|
|
<li>Define <var>list</var> as an initially-empty list of premultiplied
|
|
RGBA colors, and <var>total-length</var> as the distance between first
|
|
and last color stops.
|
|
|
|
<li>For each adjacent pair of color-stops, define <var>weight</var> as
|
|
half the distance between the two color-stops, divided by
|
|
<var>total-length</var>. Add two entries to <var>list</var>, the first
|
|
obtained by representing the color of the first color-stop in
|
|
premultiplied sRGBA and scaling all of the components by
|
|
<var>weight</var>, and the second obtained in the same way with the
|
|
second color-stop.
|
|
|
|
<li>Sum the entries of <var>list</var> component-wise to produce the
|
|
average color, and return it.
|
|
</ol>
|
|
|
|
<p class=note>As usual, implementations may use whatever algorithm they
|
|
wish, so long as it produces the same result as the above.
|
|
|
|
<div class=example>
|
|
<p>For example, the following gradient is rendered as a solid light-purple
|
|
image (equal to <code>rgb(75%,50%,75%)</code>):</p>
|
|
|
|
<pre class=css>repeating-linear-gradient(red 0px, white 0px, blue 0px);</pre>
|
|
|
|
<p>The following gradient would render the same as the previous under
|
|
normal circumstances (because desktop monitors can't faithfully render
|
|
color-stops 1/10th of a pixel apart), but would render as a normal
|
|
repeating gradient if, for example, the author applied "zoom:100;" to the
|
|
element on which the gradient appears:</p>
|
|
|
|
<pre class=css>repeating-linear-gradient(red 0px, white .1px, blue .2px);</pre>
|
|
</div>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h3 id=color-stop-syntax><span class=secno>4.4. </span> Gradient
|
|
Color-Stops</h3>
|
|
|
|
<pre class=prod><code><dfn
|
|
id=ltcolor-stop><color-stop></dfn> = <color> [ <percentage> | <length> ]?</code></pre>
|
|
|
|
<p>Color-stops are points placed along the line defined by the <a
|
|
href="#gradient-line"><i>gradient-line</i></a> at the beginning of the
|
|
rule. Color-stops must be specified in order. Percentages refer to the
|
|
length of the gradient-line, with 0% being at the starting point and 100%
|
|
being at the ending point. Lengths are measured from the starting-point in
|
|
the direction of the ending-point. Color-stops are usually placed between
|
|
the starting-point and ending-point, but that's not required; the
|
|
gradient-line extends infinitely in both directions, and a color-stop can
|
|
be placed at any position on the line.
|
|
|
|
<p>At each color-stop, the line is the color of the color-stop. Between two
|
|
color-stops, the line's color is linearly interpolated between the colors
|
|
of the two color-stops, with the interpolation taking place in
|
|
premultiplied RGBA space. Before the first color-stop, the line is the
|
|
color of the first color-stop. After the last color-stop, the line is the
|
|
color of the last color-stop.
|
|
|
|
<p>The following steps must be applied <em>in order</em> to process the
|
|
list of color-stops. After applying these rules, all color-stops will have
|
|
a definite position and they will be in ascending order:
|
|
|
|
<ol>
|
|
<li>If the first color-stop does not have a position, set its position to
|
|
0%. If the last color-stop does not have a position, set its position to
|
|
100%.
|
|
|
|
<li>If a color-stop has a position that is less than the specified
|
|
position of any color-stop before it in the list, set its position to be
|
|
equal to the largest specified position of any color-stop before it.
|
|
|
|
<li>If any color-stop still does not have a position, then, for each run
|
|
of adjacent color-stops without positions, set their positions so that
|
|
they are evenly spaced between the preceding and following color-stops
|
|
with positions.
|
|
</ol>
|
|
|
|
<p>If multiple color-stops have the same position, they produce an
|
|
infinitesimal transition from the one specified first in the rule to the
|
|
one specified last. In effect, the color suddenly changes at that position
|
|
rather than smoothly transitioning.
|
|
|
|
<div class=example>
|
|
<p>Below are several pairs of gradients. The latter of each pair is a
|
|
manually "fixed-up" version of the former, obtained by applying the above
|
|
rules. For each pair, both gradients will render identically. <span
|
|
class=note>The numbers in each arrow specify which fixup steps are
|
|
invoked in the transformation.</span></p>
|
|
|
|
<pre><code>
|
|
1. linear-gradient(red, white 20%, blue)
|
|
=1=>
|
|
linear-gradient(red 0%, white 20%, blue 100%)
|
|
|
|
2. linear-gradient(red 40%, white, black, blue)
|
|
=13=>
|
|
linear-gradient(red 40%, white 60%, black 80%, blue 100%)
|
|
|
|
3. linear-gradient(red -50%, white, blue)
|
|
=13=>
|
|
linear-gradient(red -50%, white 25%, blue 100%)
|
|
|
|
4. linear-gradient(red -50px, white, blue)
|
|
=13=>
|
|
linear-gradient(red -50px, white calc(-25px + 50%), blue 100%)
|
|
|
|
5. linear-gradient(red 20px, white 0px, blue 40px)
|
|
=2=>
|
|
linear-gradient(red 20px, white 20px, blue 40px)
|
|
|
|
6. linear-gradient(red, white -50%, black 150%, blue)
|
|
=12=>
|
|
linear-gradient(red 0%, white 0%, black 150%, blue 150%)
|
|
|
|
7. linear-gradient(red 80px, white 0px, black, blue 100px)
|
|
=23=>
|
|
linear-gradient(red 80px, white 80px, black 90px, blue 100px)</code></pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>The following example illustrates* the difference between a gradient
|
|
transitioning in pre-multiplied sRGBA and one transitioning (incorrectly)
|
|
in non-premultiplied. In both of these example, the gradient is drawn
|
|
over a white background. Both gradients could be written with the
|
|
following value:</p>
|
|
|
|
<pre><code>linear-gradient(90deg, red, transparent, blue)</code></pre>
|
|
|
|
<p>In premultiplied space, transitions to or from "transparent" always
|
|
look nice:</p>
|
|
|
|
<p><object data=gradient2.svg height=100 width=200>(Image requires
|
|
SVG)</object></p>
|
|
|
|
<p>On the other hand, if a gradient were to incorrectly transition in
|
|
non-premultiplied space, the colors near "transparent" would noticeably
|
|
darken to a grayish color, because "transparent" is actually a shorthand
|
|
for ‘<code class=css>rgba(0,0,0,0)</code>’, or transparent
|
|
black:</p>
|
|
|
|
<p><object data=gradient3.svg height=100 width=200>(Image requires
|
|
SVG)</object></p>
|
|
|
|
<p><small>* SVG-in-HTML support required to view the images.</small></p>
|
|
</div>
|
|
|
|
<p class=note>Note: It is recommended that authors not mix different types
|
|
of units, such as px, em, or %, in a single rule, as this can cause a
|
|
color-stop to unintentionally try to move before an earlier one. For
|
|
example, the rule ‘<code class=css>background-image:
|
|
linear-gradient(yellow 100px, blue 50%)</code>’ wouldn't require any
|
|
fix-up as long as the background area is at least 200px tall. If it was
|
|
150px tall, however, the blue color-stop's position would be equivalent to
|
|
"75px", which precedes the yellow color-stop, and would be corrected to a
|
|
position of 100px.
|
|
|
|
<p class=note>Note: The definition and implications of "premultiplied"
|
|
color spaces are given elsewhere in the technical literature, but a quick
|
|
primer is given here to illuminate the process. Given a color expressed as
|
|
an rgba() 4-tuple, one can convert this to a premultiplied representation
|
|
by multiplying the red, green, and blue components by the alpha component.
|
|
For example, a partially-transparent blue may be given as
|
|
rgba(0,0,255,.5), which would then be expressed as [0, 0, 127.5, .5] in
|
|
its premultiplied representation. Interpolating colors using the
|
|
premultiplied representations rather than the plain rgba representations
|
|
tends to produce more attractive transitions, particularly when
|
|
transitioning from a fully opaque color to fully transparent. Note that
|
|
transitions where either the transparency or the color are held constant
|
|
(for example, transitioning between rgba(255,0,0,100%) and
|
|
rgba(0,0,255,100%) or rgba(255,0,0,100%) and rgba(255,0,0,0%)) have
|
|
identical results whether the color interpolation is done in premultiplied
|
|
or non-premultiplied color-space. Differences only arise when both the
|
|
color and transparency differ between the two endpoints.</p>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h2 id=sizing><span class=secno>5. </span> Sizing Images and Objects in CSS</h2>
|
|
|
|
<p>Images used in CSS may come from a number of sources, from binary image
|
|
formats (such as gif, jpeg, etc), dedicated markup formats (such as SVG),
|
|
and CSS-specific formats (such as the linear-gradient() value type defined
|
|
in this specification). As well, a document may contain many other types
|
|
of objects, such as video, plugins, or nested documents. These images and
|
|
objects (just <dfn id=objects>objects</dfn> hereafter) may offer many
|
|
types of sizing information to CSS, or none at all. This section defines
|
|
generically the size negotiation model between the object and the CSS
|
|
layout algorithms.</p>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h3 id=sizing-terms><span class=secno>5.1. </span> Object-Sizing
|
|
Terminology</h3>
|
|
|
|
<p>In order to define this handling, we define a few terms, to make it
|
|
easier to refer to various concepts:
|
|
|
|
<dl>
|
|
<dt><dfn id=intrinsic-dimensions>intrinsic dimensions</dfn>
|
|
|
|
<dd>
|
|
<p>An object's intrinsic dimensions are its preferred, natural width,
|
|
height, and aspect ratio, if they exist. There can be an <dfn
|
|
id=intrinsic-height>intrinsic height</dfn> and <dfn
|
|
id=intrinsic-width>intrinsic width</dfn>, defining a definite rectangle
|
|
and an <a href="#intrinsic-aspect-ratio"><i>intrinsic aspect
|
|
ratio</i></a>. (Most bitmap images fall into this category.) There can
|
|
be only an <dfn id=intrinsic-aspect-ratio>intrinsic aspect ratio</dfn>
|
|
defining the relation of the width to the height, but no definite size.
|
|
(SVG images designed to scale may fall into this category.) There can be
|
|
just an intrinsic height or width. Or there can be no intrinsic
|
|
dimensions at all, implying that the object has no preferred size or
|
|
aspect ratio. (Embedded documents are often assumed to have no intrinsic
|
|
size, as are CSS gradients, defined in this specification.)</p>
|
|
|
|
<p>If an object (such as an icon) has multiple sizes, then the largest
|
|
size is taken as its intrinsic size. If it has multiple aspect ratios at
|
|
that size, or has multiple aspect ratios and no size, then the aspect
|
|
ratio closest to the aspect ratio of the <a
|
|
href="#default-object-size"><i>default object size</i></a> is used.</p>
|
|
|
|
<dt><dfn id=specified-size>specified size</dfn>
|
|
|
|
<dd>The specified size of an object is given by CSS, such as through the
|
|
‘<code class=property>width</code>’ and ‘<code
|
|
class=property>height</code>’ or ‘<code
|
|
class=property>background-size</code>’ properties. The specified
|
|
size can be a definite width and height, a set of constraints, or a
|
|
combination thereof.
|
|
|
|
<dt><dfn id=concrete-object-size>concrete object size</dfn>
|
|
|
|
<dd>The <a href="#concrete-object-size"><i>concrete object size</i></a> is
|
|
the result of transforming the <a
|
|
href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a> into a
|
|
concrete size, based on the <a href="#specified-size"><i>specified
|
|
size</i></a> and the <a href="#default-object-size"><i>default object
|
|
size</i></a>. A <a href="#concrete-object-size"><i>concrete object
|
|
size</i></a> always has a definite height and width.
|
|
|
|
<dt><dfn id=default-object-size>default object size</dfn>
|
|
|
|
<dd>
|
|
<p>The <a href="#default-object-size"><i>default object size</i></a> is a
|
|
rectangle with a definite height and width used to determine the <a
|
|
href="#concrete-object-size"><i>concrete object size</i></a> when both
|
|
the <a href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a> and
|
|
<a href="#specified-size"><i>specified size</i></a> are missing
|
|
dimensions. It varies based on the context in which that the image is
|
|
being laid out.</p>
|
|
|
|
<p>The following list defines the <a
|
|
href="#default-object-size"><i>default object size</i></a> of properties
|
|
and contexts that appear in CSS 2.1, plus ‘<code
|
|
class=property>border-image</code>’ from CSS 3 Backgrounds &
|
|
Borders. Newer modules that accept an ‘<a href="#ltimage"><code
|
|
class=css><image></code></a>’ component value in a new context
|
|
must define the <a href="#default-object-size"><i>default object
|
|
size</i></a> in that context.</p>
|
|
|
|
<dl>
|
|
<dt>‘<code class=property>background-image</code>’
|
|
|
|
<dd>The <a href="#default-object-size"><i>default object size</i></a> is
|
|
the size of the element's <a
|
|
href="http://www.w3.org/TR/css3-background/#background-positioning-area">background
|
|
positioning area</a>. <a href="#CSS3BG"
|
|
rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>
|
|
|
|
<dt>‘<code class=property>list-style-image</code>’
|
|
|
|
<dd>The <a href="#default-object-size"><i>default object size</i></a> is
|
|
a 1em square. <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<dt>‘<code class=property>border-image</code>’
|
|
|
|
<dd>The <a href="#default-object-size"><i>default object size</i></a> is
|
|
the size of the element's <a
|
|
href="http://www.w3.org/TR/css3-background/#border-image-area">border
|
|
image area</a>. <a href="#CSS3BG"
|
|
rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>
|
|
|
|
<dt>‘<code class=property>cursor</code>’
|
|
|
|
<dd>The <a href="#default-object-size"><i>default object size</i></a> is
|
|
a UA-defined size that should be based on the size of a typical cursor
|
|
on the UA's operating system. <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
|
|
<dt>replaced elements
|
|
|
|
<dd>The <a href="#default-object-size"><i>default object size</i></a> is
|
|
a rectangle 300px wide and 150px tall. <a href="#CSS21"
|
|
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
|
|
</dl>
|
|
</dl>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h3 id=object-negotiation><span class=secno>5.2. </span> CSS⇋Object
|
|
Negotiation</h3>
|
|
|
|
<p>Objects in CSS are sized and rendered as follows:
|
|
|
|
<ol>
|
|
<li>When an image or object is specified in a document, such as through a
|
|
‘<code class=css>url()</code>’ value in a ‘<code
|
|
class=property>background-image</code>’ property or an
|
|
<code>src</code> attribute on an <code><img></code> element, CSS
|
|
queries the object for its <a href="#intrinsic-dimensions"><i>intrinsic
|
|
dimensions</i></a>.
|
|
|
|
<li>Using the <a href="#intrinsic-dimensions"><i>intrinsic
|
|
dimensions</i></a>, the <a href="#specified-size"><i>specified
|
|
size</i></a>, and the <a href="#default-object-size"><i>default object
|
|
size</i></a> for the context the image or object is used in, CSS then
|
|
computes a <a href="#concrete-object-size"><i>concrete object
|
|
size</i></a>. (See the <a href="#default-sizing">following section</a>.)
|
|
This defines the size and position of the region the object will render
|
|
in.
|
|
|
|
<li>CSS asks the object to render itself at the <a
|
|
href="#concrete-object-size"><i>concrete object size</i></a>. CSS does
|
|
not define how objects render when the <a
|
|
href="#concrete-object-size"><i>concrete object size</i></a> is different
|
|
from the object's <a href="#intrinsic-dimensions"><i>intrinsic
|
|
dimensions</i></a>. The object may adjust itself to match the <a
|
|
href="#concrete-object-size"><i>concrete object size</i></a> in some way,
|
|
or even render itself larger or smaller than the <a
|
|
href="#concrete-object-size"><i>concrete object size</i></a> to satisfy
|
|
sizing constraints of its own.
|
|
|
|
<li>Unless otherwise specified by CSS, the object is then clipped to the
|
|
<a href="#concrete-object-size"><i>concrete object size</i></a>.
|
|
</ol>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h3 id=default-sizing><span class=secno>5.3. </span> Default Concrete
|
|
Object Size Resolution</h3>
|
|
|
|
<p>In the absence of more specific rules, an object's <a
|
|
href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a> are resolved
|
|
to a <a href="#concrete-object-size"><i>concrete object size</i></a> as
|
|
follows:
|
|
|
|
<ul>
|
|
<li>If the <a href="#specified-size"><i>specified size</i></a> is a
|
|
definite width and height, the <a
|
|
href="#concrete-object-size"><i>concrete object size</i></a> is given
|
|
that width and height.
|
|
|
|
<li>If the <a href="#specified-size"><i>specified size</i></a> has only a
|
|
width or height, but not both, then the <a
|
|
href="#concrete-object-size"><i>concrete object size</i></a> is given
|
|
that specified width or height. The other dimension is calculated as
|
|
follows:
|
|
<ol>
|
|
<li>If the object has an <a href="#intrinsic-aspect-ratio"><i>intrinsic
|
|
aspect ratio</i></a>, the missing dimension of the <a
|
|
href="#concrete-object-size"><i>concrete object size</i></a> is
|
|
calculated using the <i>intrinsic aspect-ratio</i> and the present
|
|
dimension.
|
|
|
|
<li>Otherwise, if the missing dimension is present in the object's <a
|
|
href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>, the
|
|
missing dimension is taken from the object's <a
|
|
href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>.
|
|
|
|
<li>Otherwise, the missing dimension of the <a
|
|
href="#concrete-object-size"><i>concrete object size</i></a> is taken
|
|
from the <a href="#default-object-size"><i>default object size</i></a>.
|
|
</ol>
|
|
|
|
<li>If the <a href="#specified-size"><i>specified size</i></a> has neither
|
|
a definite width nor height, and has no additional contraints, the
|
|
dimensions of the <a href="#concrete-object-size"><i>concrete object
|
|
size</i></a> are calculated as follows:
|
|
<ol>
|
|
<li>If the object has only an <a
|
|
href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a>, the
|
|
<a href="#concrete-object-size"><i>concrete object size</i></a> must
|
|
have that aspect ratio, and additionally be as large as possible
|
|
without either its height or width exceeding the height or width of the
|
|
<a href="#default-object-size"><i>default object size</i></a>.
|
|
Otherwise, the width and height of the <a
|
|
href="#concrete-object-size"><i>concrete object size</i></a> is the
|
|
same as the object's <a href="#intrinsic-width"><i>intrinsic
|
|
width</i></a> and <a href="#intrinsic-height"><i>intrinsic
|
|
height</i></a>, if they exist.
|
|
|
|
<li>If the <a href="#concrete-object-size"><i>concrete object
|
|
size</i></a> is still missing a width or height, and the object has an
|
|
<a href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a>,
|
|
the missing dimension is calculated from the present dimension and the
|
|
<a href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a>.
|
|
Otherwise, the missing dimension is taken from the <a
|
|
href="#default-object-size"><i>default object size</i></a>.
|
|
</ol>
|
|
</ul>
|
|
|
|
<p>If the <a href="#specified-size"><i>specified size</i></a> has
|
|
additional constraints, the <a href="#concrete-object-size"><i>concrete
|
|
object size</i></a> must be sized to satisfy those constraints. For
|
|
example, the ‘<code class=property>min-width</code>’,
|
|
‘<code class=property>min-height</code>’, ‘<code
|
|
class=property>max-width</code>’, and ‘<code
|
|
class=property>max-height</code>’ properties specify slightly more
|
|
complex handling for sizing replaced elements, and ‘<code
|
|
class=css>background-repeat: round</code>’ can further adjust the
|
|
size calculated by ‘<code
|
|
class=property>background-size</code>’ so that the image fits a
|
|
whole number of times into the background positioning area.</p>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h3 id=object-fit><span class=secno>5.4. </span> Sizing Objects: the
|
|
‘<a href="#object-fit0"><code
|
|
class=property>object-fit</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<thead>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=object-fit0>object-fit</dfn>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>fill | contain | cover | none | scale-down
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>fill
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>replaced elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>The ‘<a href="#object-fit0"><code
|
|
class=property>object-fit</code></a>’ property specifies how the
|
|
contents of a replaced element should be scaled relative to the box
|
|
established by its used height and width. It also enables scaling a
|
|
replaced element up to a specified maximum size or down to a specified
|
|
minimum size while preserving its aspect ratio.
|
|
|
|
<p>Not all replaced elements can be scaled, but images typically can.
|
|
|
|
<p>If the replaced element's content does not have an <a
|
|
href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a>, all of
|
|
the values for ‘<a href="#object-fit0"><code
|
|
class=property>object-fit</code></a>’ are treated as ‘<code
|
|
class=css>fill</code>’. Otherwise, the object is scaled as follows:
|
|
|
|
<dl>
|
|
<dt>‘<code class=css>fill</code>’
|
|
|
|
<dd>
|
|
<p>Set the object's size to the <a
|
|
href="#concrete-object-size"><i>concrete object size</i></a> obtained by
|
|
running the <a href="#default-sizing">object sizing algorithm</a> with a
|
|
<a href="#specified-size"><i>specified size</i></a> and a <a
|
|
href="#default-object-size"><i>default object size</i></a> equal to the
|
|
replaced element's used width and height.</p>
|
|
|
|
<p>This will make the contents exactly fill the replaced element's
|
|
content box.</p>
|
|
|
|
<dt>‘<code class=css>contain</code>’
|
|
|
|
<dd>
|
|
<p>Determine the used ‘<code class=property>height</code>’
|
|
and ‘<code class=property>width</code>’ of the element as
|
|
usual, except: If both ‘<code class=property>height</code>’
|
|
and ‘<code class=property>width</code>’ are ‘<code
|
|
class=css>auto</code>’, and the used value of at least one of
|
|
‘<code class=property>max-width</code>’ and ‘<code
|
|
class=property>max-height</code>’ is not ‘<code
|
|
class=css>none</code>’, then compute the element's used width and
|
|
used height as though the intrinsic dimensions of the contents were
|
|
infinitely large numbers whose ratio is the actual intrinsic ratio of
|
|
the contents. This will proportionally scale the used width and height
|
|
up to the given maximum constraints.</p>
|
|
|
|
<p>Set the <a href="#concrete-object-size"><i>concrete object
|
|
size</i></a> to the largest width and height that has the same aspect
|
|
ratio as the object's intrinsic aspect ratio, and additionally has
|
|
neither width nor height larger than the replaced element's used width
|
|
and height, respectively.</p>
|
|
|
|
<dt>‘<code class=css>cover</code>’
|
|
|
|
<dd>
|
|
<p>Determine the used ‘<code class=property>height</code>’
|
|
and ‘<code class=property>width</code>’ of the element as
|
|
usual, except: If both ‘<code class=property>height</code>’
|
|
and ‘<code class=property>width</code>’ are ‘<code
|
|
class=css>auto</code>’, and the used value of at least one of
|
|
‘<code class=property>min-width</code>’ and ‘<code
|
|
class=property>min-height</code>’ is not ‘<code
|
|
class=css>none</code>’, then compute the element's used width and
|
|
used height as though the intrinsic dimensions of the contents were
|
|
infinitely small numbers whose ratio is the actual intrinsic ratio of
|
|
the contents. This will proportionally scale the used width and height
|
|
down to the given minimum constraints.</p>
|
|
|
|
<p>Set the <a href="#concrete-object-size"><i>concrete object
|
|
size</i></a> to the smallest width and height that has the same aspect
|
|
ratio as the object's intrinsic aspect ratio, and additionally has
|
|
neither width nor height smaller than the replaced element's used width
|
|
and height, respectively.</p>
|
|
|
|
<dt>‘<code class=css>none</code>’
|
|
|
|
<dd>
|
|
<p>Set the content's size to the <a
|
|
href="#concrete-object-size"><i>concrete object size</i></a> obtained by
|
|
running the <i title=default-sizing>object sizing algorithm</i> with no
|
|
<a href="#specified-size"><i>specified size</i></a>, and a <a
|
|
href="#default-object-size"><i>default object size</i></a> equal to the
|
|
replaced element's used width and height.</p>
|
|
|
|
<dt>‘<code class=css>scale-down</code>’
|
|
|
|
<dd>
|
|
<p>Size the content as if ‘<code class=css>none</code>’ or
|
|
‘<code class=css>contain</code>’ were specified, whichever
|
|
would result in a smaller <a href="#concrete-object-size"><i>concrete
|
|
object size</i></a>.</p>
|
|
|
|
<p class=note>Note that both ‘<code class=css>none</code>’
|
|
and ‘<code class=css>contain</code>’ respect the content's
|
|
intrinsic aspect ratio, so the concept of "smaller" is well-defined.</p>
|
|
</dl>
|
|
|
|
<p>If the content does not completely fill the replaced element's content
|
|
box, the unfilled space shows the replaced element's background. Since
|
|
replaced elements always clip their contents to the content box, the
|
|
content will never overflow. See the ‘<a
|
|
href="#object-position0"><code
|
|
class=property>object-position</code></a>’ property for positioning
|
|
the object with respect to the content box.
|
|
|
|
<div class=figure>
|
|
<p><img alt="" src="img_scale.png" style="border: thin solid black;"></p>
|
|
|
|
<p class=caption>An example showing how four of the values of ‘<a
|
|
href="#object-fit0"><code class=property>object-fit</code></a>’
|
|
cause the replaced element (blue figure) to be scaled to fit its
|
|
height/width box (shownwith a green background), using the initial value
|
|
for ‘<a href="#object-position0"><code
|
|
class=property>object-position</code></a>’. The fifth value,
|
|
‘<code class=css><span class=css>scale-down</span>, in this case
|
|
looks identical to </code>’<span class=css>contain</span>.</p>
|
|
</div>
|
|
|
|
<p class=issue>Find some good use-cases and make examples out of them.
|
|
|
|
<p class=note>Note: the ‘<a href="#object-fit0"><code
|
|
class=property>object-fit</code></a>’ property has similar semantics
|
|
to the <code>fit</code> attribute in <a href="#SMIL10"
|
|
rel=biblioentry>[SMIL10]<!--{{SMIL10}}--></a>.
|
|
|
|
<p class=note>Note: Per the <i title=object-negotiation>CSS⇋Object
|
|
Negotiation</i> algorithm, the <a href="#concrete-object-size"><i>concrete
|
|
object size</i></a> (or, in this case, the size of the content) does not
|
|
directly scale the object itself - it is merely passed to the object as
|
|
information about the size of the visible canvas. How to then draw into
|
|
that size is up to the image format. In particular, raster images always
|
|
scale to the given size, while SVG uses the given size as the size of the
|
|
"SVG Viewport" (a term defined by SVG) and then uses the values of several
|
|
attributes on the root <svg> element to determine how to draw itself.
|
|
|
|
<p>User agents MAY accept ‘<code
|
|
class=property>image-fit</code>’ as an alias for ‘<a
|
|
href="#object-fit0"><code class=property>object-fit</code></a>’, as
|
|
a previous version of this specification used that name. Authors must not
|
|
use ‘<code class=property>image-fit</code>’ in their
|
|
stylesheets.</p>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h3 id=object-position><span class=secno>5.5. </span> Positioning Objects:
|
|
the ‘<a href="#object-position0"><code
|
|
class=property>object-position</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<thead>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=object-position0>object-position</dfn>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><position>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>50% 50%
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>replaced elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Percentages:
|
|
|
|
<td>refer to width and height of box itself
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>The ‘<a href="#object-position0"><code
|
|
class=property>object-position</code></a>’ property determines the
|
|
alignment of the replaced element inside its box. The
|
|
<!-- FIXME a href="//www.w3.org/TR/css3-values/#position"--><a
|
|
href="#ltposition"><i><position></i></a><!--/a--> value type (which is
|
|
also used for ‘<code
|
|
class=property>background-position</code>’) is defined in <a
|
|
href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>, and is
|
|
resolved using the <a href="#concrete-object-size"><i>concrete object
|
|
size</i></a> as the object area and the content box as the positioning
|
|
area.
|
|
|
|
<p class=note>Note that areas of the box not covered by the replaced
|
|
element will show the element's background.
|
|
|
|
<p class=issue>Find some good use-cases and make examples out of them.
|
|
|
|
<p>User agents MAY accept ‘<code
|
|
class=property>image-position</code>’ as an alias for ‘<a
|
|
href="#object-position0"><code
|
|
class=property>object-position</code></a>’, as a previous version of
|
|
this specification used that name. Authors must not use ‘<code
|
|
class=property>image-position</code>’ in their stylesheets.</p>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h2 id=image-processing><span class=secno>6. </span> Image Processing</h2>
|
|
|
|
<h3 id=image-resolution><span class=secno>6.1. </span> Overriding Image
|
|
Resolutions: the ‘<a href="#image-resolution0"><code
|
|
class=property>image-resolution</code></a>’ property</h3>
|
|
|
|
<p>The <i>image resolution</i> is defined as the number of image pixels per
|
|
unit length, e.g., pixels per inch. Some image formats can record
|
|
information about the resolution of images. This information can be
|
|
helpful when determining the actual size of the image in the formatting
|
|
process. However, the information can also be wrong, in which case it
|
|
should be ignored. By default, CSS assumes a resolution of one image pixel
|
|
per CSS ‘<code class=css>px</code>’ unit; however, the
|
|
‘<a href="#image-resolution0"><code
|
|
class=property>image-resolution</code></a>’ property allows using
|
|
some other resolution.
|
|
|
|
<table class=propdef>
|
|
<thead>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=image-resolution0>image-resolution</dfn>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td>[from-image || <resolution>] && snap?
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>1dppx
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>as specified, except with <resolution> possibly altered by
|
|
computing for ‘<code class=css>snap</code>’ (see below)
|
|
</table>
|
|
|
|
<p>The ‘<a href="#image-resolution0"><code
|
|
class=property>image-resolution</code></a>’ property specifies the
|
|
intrinsic resolution of all raster images used in or on the element. (As
|
|
vector formats such as SVG do not have an intrinsic resolution, this
|
|
property has no effect on vector images.) The <dfn
|
|
id=intrinsic-resolution>intrinsic resolution</dfn> of an image is used to
|
|
determine the image's <i>intrinsic size</i>. Affected images include
|
|
images in the element's content (e.g. replaced elements and/or generated
|
|
content), background images, list markers, etc. Values have the following
|
|
meanings:
|
|
|
|
<dl>
|
|
<dt>‘<a href="#ltresolution"><code
|
|
class=css><resolution></code></a>’
|
|
|
|
<dd>Specifies the intrinsic resolution explicitly.
|
|
|
|
<dt>‘<code class=css>from-image</code>’
|
|
|
|
<dd>The image's intrinsic resolution is taken as that specified by the
|
|
image format. If the image does not specify its own resolution, the
|
|
explicitly specified resolution is used (if given), else it defaults to
|
|
‘<code class=css>1ddpx</code>’.
|
|
|
|
<dt>‘<code class=css>snap</code>’
|
|
|
|
<dd>If the "snap" keyword is provided, the computed ‘<a
|
|
href="#ltresolution"><code class=css><resolution></code></a>’
|
|
(if any) is the specified resolution rounded to the nearest value that
|
|
would map one image pixel to an integer number of device pixels. If the
|
|
resolution is taken from the image, then the used intrinsic resolution is
|
|
the image's native resolution similarly adjusted.
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<p>Printers tend to have substantially higher resolution than computer
|
|
monitors; due to this, an image that looks fine on the screen may look
|
|
pixellated when printed out. The ‘<a
|
|
href="#image-resolution0"><code
|
|
class=property>image-resolution</code></a>’ property can be used to
|
|
embed a high-resolution image into the document and maintain an
|
|
appropriate size, ensuring attractive display both on screen and on
|
|
paper:</p>
|
|
|
|
<pre class=css><code>
|
|
img.high-res {
|
|
image-resolution: 300dpi;
|
|
}</code></pre>
|
|
|
|
<p>With this set, an image meant to be 5 inches wide at 300dpi will
|
|
actually display as 5in wide; without this set, the image would display
|
|
as approximately 15.6in wide since the image is 15000 image pixels
|
|
across, and by default CSS displays 96 image pixels per inch.</p>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Some image formats can encode the image resolution into the image data.
|
|
This rule specifies that the UA should use the image resolution found in
|
|
the image itself, falling back to 1 image pixel per CSS ‘<code
|
|
class=css>px</code>’ unit.</p>
|
|
|
|
<pre class=css>img { image-resolution: from-image }</pre>
|
|
|
|
<p>These rules both specify that the UA should use the image resolution
|
|
found in the image itself, but if the image has no resolution, the
|
|
resolution is set to 300dpi instead of the default ‘<code
|
|
class=css>1dppx</code>’.</p>
|
|
|
|
<pre>
|
|
img { image-resolution: from-image 300dpi }
|
|
img { image-resolution: 300dpi from-image }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Using this rule, the image resolution is set to 300dpi. (The resolution
|
|
in the image, if any, is ignored.)</p>
|
|
|
|
<pre>img { image-resolution: 300dpi }</pre>
|
|
|
|
<p>This rule, on the other hand, if used when the screen's resolution is
|
|
96dpi, would instead render the image at 288dpi (so that 3 image pixels
|
|
map to 1 device pixel):</p>
|
|
|
|
<pre>img { image-resolution: 300dpi snap; }</pre>
|
|
|
|
<p>The ‘<code class=css>snap</code>’ keyword can also be used
|
|
when the resolution is taken from the image. In this rule:
|
|
|
|
<pre>img { image-resolution: snap from-image; }</pre>
|
|
|
|
<p>An image declaring itself as 300dpi will, in the situation above,
|
|
display at 288dpi (3 image pixels per device pixel) whereas an image
|
|
declaring 72dpi will render at 96dpi (1 image pixel per device pixel).
|
|
</div>
|
|
<!-- ====================================================================== -->
|
|
|
|
<h3 id=image-orientation><span class=secno>6.2. </span> Orienting an Image
|
|
on the Page: the ‘<a href="#image-orientation0"><code
|
|
class=property>image-orientation</code></a>’ property</h3>
|
|
|
|
<p>Sometimes images from camera phones, digital cameras or scanners are
|
|
encoded sideways. For example, the first row of image data can represent
|
|
the leftmost or rightmost column of image pixels. Furthermore, often such
|
|
devices have limited resources, and do not have the capability to rotate
|
|
the image into an upright orientation. However, this type of device may
|
|
have internal knowledge or can accept input from its user as to the
|
|
rotational correction to perform. The ‘<a
|
|
href="#image-orientation0"><code
|
|
class=property>image-orientation</code></a>’ property provides a way
|
|
to apply an ”out-of-band“ rotation to image source data to
|
|
correctly orient an image.
|
|
|
|
<p class=note>Note this facility is not intended to specify layout
|
|
transformations such as arbitrary rotation or flipping the image in the
|
|
horizontal or vertical direction. (See <a href="#CSS3-2D-TRANSFORMS"
|
|
rel=biblioentry>[CSS3-2D-TRANSFORMS]<!--{{CSS3-2D-TRANSFORMS}}--></a> for
|
|
a feature designed to do that.) It is also not needed to correctly orient
|
|
an image when printing in landscape versus portrait orientation, as that
|
|
rotation is done as part of layout. (See <a href="#CSS3PAGE"
|
|
rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>.) It should only be used
|
|
to correct incorrectly-oriented images.
|
|
|
|
<table class=propdef>
|
|
<thead>
|
|
<tr>
|
|
<th>Name:
|
|
|
|
<td><dfn id=image-orientation0>image-orientation</dfn>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th>Value:
|
|
|
|
<td><angle>
|
|
|
|
<tr>
|
|
<th>Initial:
|
|
|
|
<td>0deg
|
|
|
|
<tr>
|
|
<th>Applies to:
|
|
|
|
<td>images
|
|
|
|
<tr>
|
|
<th>Inherited:
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<th>Media:
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<th>Computed value:
|
|
|
|
<td>specified value, rounded and normalized (see text)
|
|
</table>
|
|
|
|
<p>This property specifies an orthogonal rotation to be applied to an image
|
|
before it is laid out. CSS layout processing applies to the image
|
|
<em>after</em> rotation. This implies, for example:
|
|
|
|
<ul>
|
|
<li>The intrinsic height and width are derived from the rotated rather
|
|
than the original image dimensions.
|
|
|
|
<li>The height (width) property applies to the vertical (horizontal)
|
|
dimension of the image, <em>after</em> rotation.
|
|
</ul>
|
|
|
|
<p>Positive values cause the image to be rotated to the right (in a
|
|
clockwise direction), while negative values cause a rotation to the left.
|
|
The computed value of the property is calculated by rounding the specified
|
|
angle to the nearest quarter-turn (90deg, 100grad, .25turn, etc.),
|
|
rounding away from 0 (that is, 45deg is rounded to 90deg, while -45deg is
|
|
rounded to -90deg), then moduloing the value by 1 turn (360deg, 400grad,
|
|
etc.).
|
|
|
|
<p>If the image itself is transformed in some way (for example, if the
|
|
content of an element is provided by the ‘<code
|
|
class=css>image()</code>’ function with a directionality opposite
|
|
the element's directionality), the image's transformation must be applied
|
|
before ‘<a href="#image-orientation0"><code
|
|
class=property>image-orientation</code></a>’ is. As well, ‘<a
|
|
href="#image-orientation0"><code
|
|
class=property>image-orientation</code></a>’ must be applied before
|
|
any further transformation of the element, such as through CSS Transforms.
|
|
|
|
<p class=note>Note that in CSS, orientation data encoded in the image (e.g.
|
|
EXIF data) is ignored. <span class=issue>Is this an issue? What do
|
|
printers do?</span>
|
|
|
|
<div class=example>
|
|
<p>The following example rotates the image 90 degrees clockwise:</p>
|
|
|
|
<pre>
|
|
img.ninety { image-orientation: 90deg }
|
|
...
|
|
<img class="ninety" src=... />
|
|
</pre>
|
|
|
|
<p>The same effect could be achieved with, for example, an angle of
|
|
-270deg or 450deg.</p>
|
|
</div>
|
|
|
|
<h2 id=conformance><span class=secno>7. </span> Conformance</h2>
|
|
|
|
<h3 id=conventions><span class=secno>7.1. </span> Document Conventions</h3>
|
|
|
|
<p>Conformance requirements are expressed with a combination of descriptive
|
|
assertions and RFC 2119 terminology. The key words “MUST”, “MUST
|
|
NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
|
|
“SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
|
|
normative parts of this document are to be interpreted as described in RFC
|
|
2119. However, for readability, these words do not appear in all uppercase
|
|
letters in this specification.
|
|
|
|
<p>All of the text of this specification is normative except sections
|
|
explicitly marked as non-normative, examples, and notes. <a
|
|
href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
|
|
|
|
<p>Examples in this specification are introduced with the words “for
|
|
example” or are set apart from the normative text with
|
|
<code>class="example"</code>, like this:
|
|
|
|
<div class=example>
|
|
<p>This is an example of an informative example.</p>
|
|
</div>
|
|
|
|
<p>Informative notes begin with the word “Note” and are set apart from
|
|
the normative text with <code>class="note"</code>, like this:
|
|
|
|
<p class=note>Note, this is an informative note.
|
|
|
|
<h3 id=conformance-classes><span class=secno>7.2. </span> Conformance
|
|
Classes</h3>
|
|
|
|
<p>Conformance to CSS Image Values and Replaced Content Module Level 3 is
|
|
defined for three conformance classes:
|
|
|
|
<dl>
|
|
<dt><dfn id=style-sheet title="style sheet!!as conformance class">style
|
|
sheet</dfn>
|
|
|
|
<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
|
|
style sheet</a>.
|
|
|
|
<dt><dfn id=renderer>renderer</dfn>
|
|
|
|
<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
|
|
that interprets the semantics of a style sheet and renders documents that
|
|
use them.
|
|
|
|
<dt><dfn id=authoring-tool>authoring tool</dfn>
|
|
|
|
<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
|
|
that writes a style sheet.
|
|
</dl>
|
|
|
|
<p>A style sheet is conformant to CSS Image Values and Replaced Content
|
|
Module Level 3 if all of its statements that use syntax defined in this
|
|
module are valid according to the generic CSS grammar and the individual
|
|
grammars of each feature defined in this module.
|
|
|
|
<p>A renderer is conformant to CSS Image Values and Replaced Content Module
|
|
Level 3 if, in addition to interpreting the style sheet as defined by the
|
|
appropriate specifications, it supports all the features defined by CSS
|
|
Image Values and Replaced Content Module Level 3 by parsing them correctly
|
|
and rendering the document accordingly. However, the inability of a UA to
|
|
correctly render a document due to limitations of the device does not make
|
|
the UA non-conformant. (For example, a UA is not required to render color
|
|
on a monochrome monitor.)
|
|
|
|
<p>An authoring tool is conformant to CSS Image Values and Replaced Content
|
|
Module Level 3 if it writes style sheets that are syntactically correct
|
|
according to the generic CSS grammar and the individual grammars of each
|
|
feature in this module, and meet all other conformance requirements of
|
|
style sheets as described in this module.
|
|
|
|
<h3 id=partial><span class=secno>7.3. </span> Partial Implementations</h3>
|
|
|
|
<p>So that authors can exploit the forward-compatible parsing rules to
|
|
assign fallback values, CSS renderers <strong>must</strong> treat as
|
|
invalid (and <a
|
|
href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
|
|
appropriate</a>) any at-rules, properties, property values, keywords, and
|
|
other syntactic constructs for which they have no usable level of support.
|
|
In particular, user agents <strong>must not</strong> selectively ignore
|
|
unsupported component values and honor supported values in a single
|
|
multi-value property declaration: if any value is considered invalid (as
|
|
unsupported values must be), CSS requires that the entire declaration be
|
|
ignored.
|
|
|
|
<h3 id=experimental><span class=secno>7.4. </span> Experimental
|
|
Implementations</h3>
|
|
|
|
<p>To avoid clashes with future CSS features, the CSS2.1 specification
|
|
reserves a <a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
|
|
syntax</a> for proprietary and experimental extensions to CSS.
|
|
|
|
<p>Prior to a specification reaching the Candidate Recommendation stage in
|
|
the W3C process, all implementations of a CSS feature are considered
|
|
experimental. The CSS Working Group recommends that implementations use a
|
|
vendor-prefixed syntax for such features, including those in W3C Working
|
|
Drafts. This avoids incompatibilities with future changes in the draft.
|
|
|
|
<h3 id=testing><span class=secno>7.5. </span>Non-Experimental
|
|
Implementations</h3>
|
|
|
|
<p>Once a specification reaches the Candidate Recommendation stage,
|
|
non-experimental implementations are possible, and implementors should
|
|
release an unprefixed implementation of any CR-level feature they can
|
|
demonstrate to be correctly implemented according to spec.
|
|
|
|
<p>To establish and maintain the interoperability of CSS across
|
|
implementations, the CSS Working Group requests that non-experimental CSS
|
|
renderers submit an implementation report (and, if necessary, the
|
|
testcases used for that implementation report) to the W3C before releasing
|
|
an unprefixed implementation of any CSS features. Testcases submitted to
|
|
W3C are subject to review and correction by the CSS Working Group.
|
|
|
|
<p>Further information on submitting testcases and implementation reports
|
|
can be found from on the CSS Working Group's website at <a
|
|
href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
|
|
Questions should be directed to the <a
|
|
href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
|
|
mailing list.
|
|
|
|
<h3 id=cr-exit-criteria><span class=secno>7.6. </span> CR Exit Criteria</h3>
|
|
|
|
<p>For this specification to be advanced to Proposed Recommendation, there
|
|
must be at least two independent, interoperable implementations of each
|
|
feature. Each feature may be implemented by a different set of products,
|
|
there is no requirement that all features be implemented by a single
|
|
product. For the purposes of this criterion, we define the following
|
|
terms:
|
|
|
|
<dl>
|
|
<dt>independent
|
|
|
|
<dd>each implementation must be developed by a different party and cannot
|
|
share, reuse, or derive from code used by another qualifying
|
|
implementation. Sections of code that have no bearing on the
|
|
implementation of this specification are exempt from this requirement.
|
|
|
|
<dt>interoperable
|
|
|
|
<dd>passing the respective test case(s) in the official CSS test suite,
|
|
or, if the implementation is not a Web browser, an equivalent test. Every
|
|
relevant test in the test suite should have an equivalent test created if
|
|
such a user agent (UA) is to be used to claim interoperability. In
|
|
addition if such a UA is to be used to claim interoperability, then there
|
|
must one or more additional UAs which can also pass those equivalent
|
|
tests in the same way for the purpose of interoperability. The equivalent
|
|
tests must be made publicly available for the purposes of peer review.
|
|
|
|
<dt>implementation
|
|
|
|
<dd>a user agent which:
|
|
<ol class=inline>
|
|
<li>implements the specification.
|
|
|
|
<li>is available to the general public. The implementation may be a
|
|
shipping product or other publicly available version (i.e., beta
|
|
version, preview release, or “nightly build”). Non-shipping product
|
|
releases must have implemented the feature(s) for a period of at least
|
|
one month in order to demonstrate stability.
|
|
|
|
<li>is not experimental (i.e., a version specifically designed to pass
|
|
the test suite and is not intended for normal usage going forward).
|
|
</ol>
|
|
</dl>
|
|
|
|
<p>The specification will remain Candidate Recommendation for at least six
|
|
months.
|
|
|
|
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
|
|
|
|
<p>Thanks to the Webkit team, Brad Kemper, Brian Manthos, and Alan Gresley
|
|
for their contributions to the definition of gradients; to Melinda Grant
|
|
for her work on ‘<a href="#object-fit0"><code
|
|
class=property>object-fit</code></a>’, ‘<a
|
|
href="#object-position0"><code
|
|
class=property>object-position</code></a>’, and ‘<a
|
|
href="#image-orientation0"><code
|
|
class=property>image-orientation</code></a>’; to Robert O'Callahan
|
|
for the definition of ‘<code class=css>element()</code>’; and
|
|
to Michael Day, Håkon Lie, and Shinyu Murakami for ‘<a
|
|
href="#image-resolution0"><code
|
|
class=css>image-resolution</code></a>’.
|
|
|
|
<h2 class=no-num id=references>References</h2>
|
|
|
|
<h3 class=no-num id=normative-references>Normative references</h3>
|
|
<!--begin-normative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS21>[CSS21]
|
|
|
|
<dd>Bert Bos; et al. <a
|
|
href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
|
|
Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
|
|
2011. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3VAL>[CSS3VAL]
|
|
|
|
<dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-values-20110906/"><cite>CSS
|
|
Values and Units Module Level 3.</cite></a> 6 September 2011. W3C Working
|
|
Draft. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2011/WD-css3-values-20110906/">http://www.w3.org/TR/2011/WD-css3-values-20110906/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=MEDIA-FRAGS>[MEDIA-FRAGS]
|
|
|
|
<dd>Raphaël Troncy; et al. <a
|
|
href="http://www.w3.org/TR/2011/CR-media-frags-20111201/"><cite>Media
|
|
Fragments URI 1.0.</cite></a> 1 December 2011. W3C Candidate
|
|
Recommendation. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2011/CR-media-frags-20111201/">http://www.w3.org/TR/2011/CR-media-frags-20111201/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=RFC2119>[RFC2119]
|
|
|
|
<dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
|
|
words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
|
|
RFC 2119. URL: <a
|
|
href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=SELECT>[SELECT]
|
|
|
|
<dd>Tantek Çelik; et al. <a
|
|
href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/"><cite>Selectors
|
|
Level 3.</cite></a> 29 September 2011. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-normative-->
|
|
|
|
<h3 class=no-num id=other-references>Other references</h3>
|
|
<!--begin-informative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS1>[CSS1]
|
|
|
|
<dd>Håkon Wium Lie; Bert Bos. <a
|
|
href="http://www.w3.org/TR/2008/REC-CSS1-20080411"><cite>Cascading Style
|
|
Sheets (CSS1) Level 1 Specification.</cite></a> 11 April 2008. W3C
|
|
Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2008/REC-CSS1-20080411">http://www.w3.org/TR/2008/REC-CSS1-20080411</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3-2D-TRANSFORMS>[CSS3-2D-TRANSFORMS]
|
|
|
|
<dd>Dean Jackson; David Hyatt; Chris Marrin. <a
|
|
href="http://www.w3.org/TR/2009/WD-css3-2d-transforms-20091201"><cite>CSS
|
|
2D Transforms Module Level 3.</cite></a> 1 December 2009. W3C Working
|
|
Draft. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2009/WD-css3-2d-transforms-20091201">http://www.w3.org/TR/2009/WD-css3-2d-transforms-20091201</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3BG>[CSS3BG]
|
|
|
|
<dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
|
|
href="http://www.w3.org/TR/2011/CR-css3-background-20110215"><cite>CSS
|
|
Backgrounds and Borders Module Level 3.</cite></a> 15 February 2011. W3C
|
|
Candidate Recommendation. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2011/CR-css3-background-20110215">http://www.w3.org/TR/2011/CR-css3-background-20110215</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3COLOR>[CSS3COLOR]
|
|
|
|
<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a
|
|
href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS Color
|
|
Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3PAGE>[CSS3PAGE]
|
|
|
|
<dd>Håkon Wium Lie; Melinda Grant. <a
|
|
href="http://www.w3.org/TR/2006/WD-css3-page-20061010"><cite>CSS3 Module:
|
|
Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in
|
|
progress.) URL: <a
|
|
href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=MEDIAQ>[MEDIAQ]
|
|
|
|
<dd>Håkon Wium Lie; et al. <a
|
|
href="http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/"><cite>Media
|
|
Queries.</cite></a> 27 July 2010. W3C Candidate Recommendation. (Work in
|
|
progress.) URL: <a
|
|
href="http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/">http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=SMIL10>[SMIL10]
|
|
|
|
<dd>Philipp Hoschka. <a
|
|
href="http://www.w3.org/TR/1998/REC-smil-19980615"><cite>Synchronized
|
|
Multimedia Integration Language (SMIL) 1.0 Specification.</cite></a> 15
|
|
June 1998. W3C Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/1998/REC-smil-19980615">http://www.w3.org/TR/1998/REC-smil-19980615</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-informative-->
|
|
|
|
<h2 class=no-num id=index>Index</h2>
|
|
<!--begin-index-->
|
|
|
|
<ul class=indexlist>
|
|
<li>authoring tool, <a href="#authoring-tool"
|
|
title="authoring tool"><strong>7.2.</strong></a>
|
|
|
|
<li>‘<code class=css>closest-corner</code>’, <a
|
|
href="#radial-closest-corner"
|
|
title="''closest-corner''"><strong>4.2.1.</strong></a>
|
|
|
|
<li>‘<code class=css>closest-side</code>’, <a
|
|
href="#radial-closest-side"
|
|
title="''closest-side''"><strong>4.2.1.</strong></a>
|
|
|
|
<li><color-stop>, <a href="#ltcolor-stop"
|
|
title="<color-stop>"><strong>4.4.</strong></a>
|
|
|
|
<li>concrete object size, <a href="#concrete-object-size"
|
|
title="concrete object size"><strong>5.1.</strong></a>
|
|
|
|
<li>CSS element reference identifier, <a
|
|
href="#css-element-reference-identifier"
|
|
title="CSS element reference identifier"><strong>3.3.</strong></a>
|
|
|
|
<li>default object size, <a href="#default-object-size"
|
|
title="default object size"><strong>5.1.</strong></a>
|
|
|
|
<li>‘<code class=css>dpcm</code>’, <a href="#dpcm"
|
|
title="''dpcm''"><strong>2.</strong></a>
|
|
|
|
<li>‘<code class=css>dpi</code>’, <a href="#dpi"
|
|
title="''dpi''"><strong>2.</strong></a>
|
|
|
|
<li>‘<code class=css>dppx</code>’, <a href="#dppx"
|
|
title="''dppx''"><strong>2.</strong></a>
|
|
|
|
<li><element-reference>, <a href="#ltelement-reference"
|
|
title="<element-reference>"><strong>3.3.</strong></a>
|
|
|
|
<li>ending shape, <a href="#ending-shape"
|
|
title="ending shape"><strong>4.2.</strong></a>
|
|
|
|
<li>‘<code class=css>farthest-corner</code>’, <a
|
|
href="#radial-farthest-corner"
|
|
title="''farthest-corner''"><strong>4.2.1.</strong></a>
|
|
|
|
<li>‘<code class=css>farthest-side</code>’, <a
|
|
href="#radial-farthest-side"
|
|
title="''farthest-side''"><strong>4.2.1.</strong></a>
|
|
|
|
<li><gradient>, <a href="#ltgradient"
|
|
title="<gradient>"><strong>4.</strong></a>
|
|
|
|
<li>gradient-average-color, <a
|
|
href="#find-the-average-color-of-a-gradient"
|
|
title=gradient-average-color><strong>4.3.</strong></a>
|
|
|
|
<li>gradient box, <a href="#gradient-box"
|
|
title="gradient box"><strong>4.</strong></a>
|
|
|
|
<li>gradient-line, <a href="#gradient-line"
|
|
title=gradient-line><strong>4.1.1.</strong></a>
|
|
|
|
<li>gradient-ray, <a href="#gradient-ray"
|
|
title=gradient-ray><strong>4.2.2.</strong></a>
|
|
|
|
<li><image>, <a href="#ltimage"
|
|
title="<image>"><strong>3.</strong></a>
|
|
|
|
<li><image-decl>, <a href="#ltimage-decl"
|
|
title="<image-decl>"><strong>3.2.</strong></a>
|
|
|
|
<li><image-list>, <a href="#ltimage-list"
|
|
title="<image-list>"><strong>3.2.</strong></a>
|
|
|
|
<li>image-orientation, <a href="#image-orientation0"
|
|
title=image-orientation><strong>6.2.</strong></a>
|
|
|
|
<li>image-resolution, <a href="#image-resolution0"
|
|
title=image-resolution><strong>6.1.</strong></a>
|
|
|
|
<li>intrinsic aspect ratio, <a href="#intrinsic-aspect-ratio"
|
|
title="intrinsic aspect ratio"><strong>5.1.</strong></a>
|
|
|
|
<li>intrinsic dimensions, <a href="#intrinsic-dimensions"
|
|
title="intrinsic dimensions"><strong>5.1.</strong></a>
|
|
|
|
<li>intrinsic height, <a href="#intrinsic-height"
|
|
title="intrinsic height"><strong>5.1.</strong></a>
|
|
|
|
<li>intrinsic resolution, <a href="#intrinsic-resolution"
|
|
title="intrinsic resolution"><strong>6.1.</strong></a>
|
|
|
|
<li>intrinsic width, <a href="#intrinsic-width"
|
|
title="intrinsic width"><strong>5.1.</strong></a>
|
|
|
|
<li><length>, <a href="#radial-size-circle"
|
|
title="<length>"><strong>4.2.1.</strong></a>
|
|
|
|
<li>[<length> | <percentage>]{2}, <a href="#radial-size-ellipse"
|
|
title="[<length> | <percentage>]{2}"><strong>4.2.1.</strong></a>
|
|
|
|
<li><linear-gradient>, <a href="#ltlinear-gradient"
|
|
title="<linear-gradient>"><strong>4.1.1.</strong></a>
|
|
|
|
<li>object-fit, <a href="#object-fit0"
|
|
title=object-fit><strong>5.4.</strong></a>
|
|
|
|
<li>object-position, <a href="#object-position0"
|
|
title=object-position><strong>5.5.</strong></a>
|
|
|
|
<li>objects, <a href="#objects" title=objects><strong>5.</strong></a>
|
|
|
|
<li>paint-source, <a href="#paint-source"
|
|
title=paint-source><strong>3.3.</strong></a>
|
|
|
|
<li><position>, <a href="#ltposition"
|
|
title="<position>"><strong>4.2.1.</strong></a>
|
|
|
|
<li>renderer, <a href="#renderer" title=renderer><strong>7.2.</strong></a>
|
|
|
|
|
|
<li><resolution>, <a href="#ltresolution"
|
|
title="<resolution>"><strong>2.</strong></a>
|
|
|
|
<li><shape>, <a href="#ltshape"
|
|
title="<shape>"><strong>4.2.1.</strong></a>
|
|
|
|
<li><side-or-corner>, <a href="#side-or-corner"
|
|
title="<side-or-corner>"><strong>4.1.1.</strong></a>
|
|
|
|
<li><size>, <a href="#ltsize"
|
|
title="<size>"><strong>4.2.1.</strong></a>
|
|
|
|
<li>specified size, <a href="#specified-size"
|
|
title="specified size"><strong>5.1.</strong></a>
|
|
|
|
<li>style sheet
|
|
<ul>
|
|
<li>as conformance class, <a href="#style-sheet"
|
|
title="style sheet, as conformance class"><strong>7.2.</strong></a>
|
|
</ul>
|
|
</ul>
|
|
<!--end-index-->
|
|
|
|
<h2 class=no-num id=property-index>Property index</h2>
|
|
<!--begin-properties-->
|
|
|
|
<table class=proptable>
|
|
<thead>
|
|
<tr>
|
|
<th>Property
|
|
|
|
<th>Values
|
|
|
|
<th>Initial
|
|
|
|
<th>Applies to
|
|
|
|
<th>Inh.
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media
|
|
|
|
<tbody>
|
|
<tr>
|
|
<th><span class=property>Name:</span>
|
|
|
|
<td>Value:
|
|
|
|
<td>Initial:
|
|
|
|
<td>Applies to:
|
|
|
|
<td>Inherited:
|
|
|
|
<td>Media:
|
|
|
|
<td>Computed value:
|
|
|
|
<tr>
|
|
<th><span class=property>Name:</span>
|
|
|
|
<td>Value:
|
|
|
|
<td>Initial:
|
|
|
|
<td>Applies to:
|
|
|
|
<td>Inherited:
|
|
|
|
<td>Media:
|
|
|
|
<td>Computed value:
|
|
|
|
<tr>
|
|
<th><span class=property>Name:</span>
|
|
|
|
<td>Value:
|
|
|
|
<td>Initial:
|
|
|
|
<td>Applies to:
|
|
|
|
<td>Inherited:
|
|
|
|
<td>Percentages:
|
|
|
|
<td>Media:
|
|
|
|
<tr>
|
|
<th><span class=property>Name:</span>
|
|
|
|
<td>Value:
|
|
|
|
<td>Initial:
|
|
|
|
<td>Applies to:
|
|
|
|
<td>Inherited:
|
|
|
|
<td>Percentages:
|
|
|
|
<td>Media:
|
|
</table>
|
|
<!--end-properties-->
|
|
</html>
|
|
<!-- Keep this comment at the end of the file
|
|
Local variables:
|
|
mode: sgml
|
|
sgml-declaration:"~/SGML/HTML4.decl"
|
|
sgml-default-doctype-name:"html"
|
|
sgml-minimize-attributes:t
|
|
sgml-nofill-elements:("pre" "style" "br")
|
|
sgml-live-element-indicator:t
|
|
sgml-omittag:nil
|
|
sgml-shorttag:nil
|
|
sgml-namecase-general:t
|
|
sgml-general-insert-case:lower
|
|
sgml-always-quote-attributes:t
|
|
sgml-indent-step:nil
|
|
sgml-indent-data:t
|
|
sgml-parent-document:nil
|
|
sgml-exposed-tags:nil
|
|
sgml-local-catalogs:nil
|
|
sgml-local-ecat-files:nil
|
|
End:
|
|
-->
|