Wed, 10 Aug 2011 23:45:29 +0000
Generic Datatype Reorganization Part V: Strings and URLs
Also, create a cleaner split between this module and syntax.
howcome@1729 | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" |
howcome@1729 | 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
howcome@1729 | 3 | |
howcome@1729 | 4 | <html lang=en> |
howcome@1729 | 5 | <head><meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type> |
howcome@1729 | 6 | |
howcome@1729 | 7 | <title>CSS3 Values and Units</title> |
howcome@1729 | 8 | |
howcome@1729 | 9 | <style type="text/css"> |
howcome@1729 | 10 | .issue { color: red } |
howcome@1729 | 11 | table { border-collapse: collapse; border: 1px solid black; margin: 1em 0 } |
howcome@1729 | 12 | th, td { border: 1px solid black; padding: 0.2em; text-align: left } |
howcome@1729 | 13 | tt.declaration { white-space: nowrap } |
howcome@1729 | 14 | .del { text-decoration: line-through} |
howcome@1729 | 15 | .say { font-style: italic } |
fantasai@3286 | 16 | .value { font: inherit; white-space: pre-wrap; margin: 0; padding: 0; } |
fantasai@3286 | 17 | #propvalues td { text-align: right; } |
fantasai@3286 | 18 | #propvalues td + td { text-align: left; } |
fantasai@3286 | 19 | p { text-indent: 0 !important; margin: 1em 0 !important; } |
howcome@1729 | 20 | </style> |
howcome@1729 | 21 | <link href="../default.css" rel=stylesheet type="text/css"> |
howcome@1729 | 22 | <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet |
howcome@1729 | 23 | type="text/css"> |
howcome@1729 | 24 | |
howcome@1729 | 25 | <body> |
howcome@1729 | 26 | <div class=head> <!--begin-logo--> |
howcome@1729 | 27 | <p><a href="http://www.w3.org/"><img alt=W3C height=48 |
howcome@1729 | 28 | src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> |
howcome@1729 | 29 | |
howcome@1729 | 30 | <h1 id=css3-template>CSS3 Values and Units</h1> |
howcome@1729 | 31 | |
fantasai@3278 | 32 | <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 August 2011</h2> |
howcome@1729 | 33 | |
howcome@1729 | 34 | <dl> |
howcome@1729 | 35 | <dt>This version: |
howcome@1729 | 36 | |
howcome@1729 | 37 | <dd><a |
fantasai@3278 | 38 | href="http://www.w3.org/TR/2011/ED-css3-values-20110810/">http://www.w3.org/TR/2011/ED-css3-values-20110810/</a> |
howcome@1729 | 39 | |
howcome@1729 | 40 | <dt>Latest version: |
howcome@1729 | 41 | |
howcome@1729 | 42 | <dd><a |
howcome@1729 | 43 | href="http://www.w3.org/TR/css3-values">http://www.w3.org/TR/css3-values</a> |
howcome@1729 | 44 | |
howcome@1729 | 45 | <dt>Previous version: |
howcome@1729 | 46 | |
howcome@1729 | 47 | <dd><a |
howcome@1729 | 48 | href="http://www.w3.org/TR/2005/WD-css3-values-20050726">http://www.w3.org/TR/2005/WD-css3-values-20050726</a> |
howcome@1729 | 49 | |
howcome@1729 | 50 | <dt>Editors: |
howcome@1729 | 51 | |
howcome@1729 | 52 | <dd>Håkon Wium Lie, Opera Software <howcome@opera.com> |
howcome@1729 | 53 | |
fantasai@3285 | 54 | <dd>Tab Atkins, Google |
fantasai@3285 | 55 | |
fantasai@3285 | 56 | <dd>Elika J. Etemad, Invited Expert |
howcome@1729 | 57 | </dl> |
howcome@1729 | 58 | <!--begin-copyright--> |
howcome@1729 | 59 | <p class=copyright><a |
howcome@1729 | 60 | href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright" |
jackalmage@2532 | 61 | rel=license>Copyright</a> © 2011 <a |
howcome@1729 | 62 | href="http://www.w3.org/"><acronym title="World Wide Web |
howcome@1729 | 63 | Consortium">W3C</acronym></a><sup>®</sup> (<a |
howcome@1729 | 64 | href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute |
howcome@1729 | 65 | of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym |
howcome@1729 | 66 | title="European Research Consortium for Informatics and |
howcome@1729 | 67 | Mathematics">ERCIM</acronym></a>, <a |
howcome@1729 | 68 | href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a |
howcome@1729 | 69 | href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, |
howcome@1729 | 70 | <a |
howcome@1729 | 71 | href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> |
howcome@1729 | 72 | and <a |
howcome@1729 | 73 | href="http://www.w3.org/Consortium/Legal/copyright-documents">document |
howcome@1729 | 74 | use</a> rules apply.</p> |
howcome@1729 | 75 | <!--end-copyright--> |
howcome@1729 | 76 | <hr title="Separator for header"> |
howcome@1729 | 77 | </div> |
howcome@1729 | 78 | |
howcome@1729 | 79 | <h2 class="no-num no-toc" id=abstract>Abstract</h2> |
howcome@1729 | 80 | |
howcome@1729 | 81 | <p>This CSS3 module describes the various values and units that CSS |
howcome@1729 | 82 | properties accept. Also, it describes how values are computed from |
howcome@1729 | 83 | "specified" through "computed" and "used" into "actual" values. The main |
howcome@1729 | 84 | purpose of this module is to define common values and units in one |
howcome@1729 | 85 | specification which can be referred to by other modules. As such, it does |
howcome@1729 | 86 | not make sense to claim conformance with this module alone. |
howcome@1729 | 87 | |
howcome@1729 | 88 | <h2 class="no-num no-toc" id=status>Status of this document</h2> |
howcome@1729 | 89 | <!--begin-status--> |
howcome@1729 | 90 | |
howcome@1729 | 91 | <p>This is a public copy of the editors' draft. It is provided for |
howcome@1729 | 92 | discussion only and may change at any moment. Its publication here does |
howcome@1729 | 93 | not imply endorsement of its contents by W3C. Don't cite this document |
howcome@1729 | 94 | other than as work in progress. |
howcome@1729 | 95 | |
howcome@1729 | 96 | <p>The (<a |
howcome@1729 | 97 | href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public |
howcome@1729 | 98 | mailing list <a |
howcome@1729 | 99 | href="mailto:www-style@w3.org?Subject=%5Bcss3-values%5D%20PUT%20SUBJECT%20HERE"> |
howcome@1729 | 100 | www-style@w3.org</a> (see <a |
howcome@1729 | 101 | href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for |
howcome@1729 | 102 | discussion of this specification. When sending e-mail, please put the text |
howcome@1729 | 103 | “css3-values” in the subject, preferably like this: |
howcome@1729 | 104 | “[<!---->css3-values<!---->] <em>…summary of |
howcome@1729 | 105 | comment…</em>” |
howcome@1729 | 106 | |
howcome@1729 | 107 | <p>This document was produced by the <a href="/Style/CSS/members">CSS |
howcome@1729 | 108 | Working Group</a> (part of the <a href="/Style/">Style Activity</a>). |
howcome@1729 | 109 | |
howcome@1729 | 110 | <p>This document was produced by a group operating under the <a |
howcome@1729 | 111 | href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent |
howcome@1729 | 112 | Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status" |
howcome@1729 | 113 | rel=disclosure>public list of any patent disclosures</a> made in |
howcome@1729 | 114 | connection with the deliverables of the group; that page also includes |
howcome@1729 | 115 | instructions for disclosing a patent. An individual who has actual |
howcome@1729 | 116 | knowledge of a patent which the individual believes contains <a |
howcome@1729 | 117 | href="/Consortium/Patent-Policy-20040205/#def-essential">Essential |
howcome@1729 | 118 | Claim(s)</a> must disclose the information in accordance with <a |
howcome@1729 | 119 | href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the |
howcome@1729 | 120 | W3C Patent Policy</a>.</p> |
howcome@1729 | 121 | <!--end-status--> |
howcome@1729 | 122 | |
howcome@1729 | 123 | <p>All features described in this specification that also exist in CSS 2.1 |
howcome@1729 | 124 | <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> are intended |
howcome@1729 | 125 | to be backwards compatible. In case of conflict between this draft and |
howcome@1729 | 126 | CSS 2.1 <a href="#CSS21" |
howcome@1729 | 127 | rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, CSS 2.1 probably |
howcome@1729 | 128 | represents the intention of the CSS WG better than this draft (other than |
howcome@1729 | 129 | on values and units that are new to CSS3). |
howcome@1729 | 130 | |
howcome@1729 | 131 | <p>This is a draft of a <a href="http://www.w3.org/TR/css3-roadmap/">module |
howcome@1729 | 132 | of CSS level 3</a>. It will probably be bundled with some other modules |
howcome@1729 | 133 | before it becomes a <a href="http://www.w3.org/TR/#About">W3C |
howcome@1729 | 134 | Recommendation</a>. |
howcome@1729 | 135 | |
howcome@1729 | 136 | <h2 class="no-num no-toc" id=contents>Table of contents</h2> |
howcome@1729 | 137 | <!--begin-toc--> |
howcome@1729 | 138 | |
howcome@1729 | 139 | <ul class=toc> |
fantasai@3286 | 140 | <li><a href="#introduction"><span class=secno>1. </span>Introduction</a> |
fantasai@3286 | 141 | <ul class=toc> |
fantasai@3286 | 142 | <li><a href="#placement"><span class=secno>1.1. </span> Module |
fantasai@3286 | 143 | Interactions</a> |
fantasai@3286 | 144 | </ul> |
fantasai@3286 | 145 | |
fantasai@3286 | 146 | <li><a href="#value-defs"><span class=secno>2. </span> Value Definition |
fantasai@3286 | 147 | Syntax</a> |
fantasai@3286 | 148 | <ul class=toc> |
fantasai@3289 | 149 | <li><a href="#component-types"><span class=secno>2.1. </span> Component |
fantasai@3286 | 150 | value types</a> |
fantasai@3286 | 151 | |
fantasai@3289 | 152 | <li><a href="#component-combinators"><span class=secno>2.2. </span> |
fantasai@3289 | 153 | Component value combinators</a> |
fantasai@3289 | 154 | |
fantasai@3289 | 155 | <li><a href="#component-multipliers"><span class=secno>2.3. </span> |
fantasai@3289 | 156 | Component value multipliers</a> |
fantasai@3289 | 157 | |
fantasai@3289 | 158 | <li><a href="#component-whitespace"><span class=secno>2.4. </span> |
fantasai@3289 | 159 | Component values and white space</a> |
fantasai@3289 | 160 | |
fantasai@3289 | 161 | <li><a href="#value-examples"><span class=secno>2.5. </span> Property |
fantasai@3289 | 162 | value examples</a> |
fantasai@3286 | 163 | </ul> |
fantasai@3286 | 164 | |
fantasai@3286 | 165 | <li><a href="#syntax-and-terminology"><span class=secno>3. </span>Syntax |
howcome@1729 | 166 | and terminology</a> |
howcome@1729 | 167 | <ul class=toc> |
fantasai@3292 | 168 | <li><a href="#functional-notation"><span class=secno>3.1. |
howcome@1729 | 169 | </span>Functional notation</a> |
howcome@1729 | 170 | </ul> |
howcome@1729 | 171 | |
fantasai@3292 | 172 | <li><a href="#textual-values"><span class=secno>4. </span> Textual Data |
fantasai@3292 | 173 | Types</a> |
fantasai@3289 | 174 | <ul class=toc> |
fantasai@3289 | 175 | <li><a href="#keywords"><span class=secno>4.1. </span> Pre-defined |
fantasai@3289 | 176 | Keywords</a> |
fantasai@3289 | 177 | <ul class=toc> |
fantasai@3289 | 178 | <li><a href="#initial-inherit"><span class=secno>4.1.1. </span> The |
fantasai@3289 | 179 | ‘<code class=css>initial</code>’ and ‘<code |
fantasai@3289 | 180 | class=css>inherit</code>’ keywords</a> |
fantasai@3289 | 181 | </ul> |
fantasai@3289 | 182 | |
fantasai@3289 | 183 | <li><a href="#identifiers"><span class=secno>4.2. </span> User-defined |
fantasai@3289 | 184 | Identifiers: the ‘<code |
fantasai@3289 | 185 | class=css><identifier></code>’ type</a> |
fantasai@3292 | 186 | |
fantasai@3292 | 187 | <li><a href="#strings"><span class=secno>4.3. </span> Quoted Strings: |
fantasai@3292 | 188 | the ‘<code class=css><string></code>’ type</a> |
fantasai@3292 | 189 | |
fantasai@3292 | 190 | <li><a href="#urls"><span class=secno>4.4. </span> Resource Locators: |
fantasai@3292 | 191 | the ‘<code class=css><url></code>’ type</a> |
fantasai@3289 | 192 | </ul> |
fantasai@3286 | 193 | |
fantasai@3288 | 194 | <li><a href="#numeric-types"><span class=secno>5. </span> Numeric Data |
fantasai@3288 | 195 | Types</a> |
howcome@1729 | 196 | <ul class=toc> |
fantasai@3288 | 197 | <li><a href="#integers"><span class=secno>5.1. </span> Integers: the |
fantasai@3288 | 198 | ‘<code class=css><integer></code>’ type</a> |
fantasai@3288 | 199 | |
fantasai@3288 | 200 | <li><a href="#numbers"><span class=secno>5.2. </span> Numbers: the |
fantasai@3288 | 201 | ‘<code class=css><number></code>’ type</a> |
fantasai@3288 | 202 | |
fantasai@3288 | 203 | <li><a href="#percentages"><span class=secno>5.3. </span> Percentages: |
fantasai@3288 | 204 | the ‘<code class=css><percentage></code>’ type</a> |
fantasai@3290 | 205 | </ul> |
fantasai@3290 | 206 | |
fantasai@3290 | 207 | <li><a href="#lengths"><span class=secno>6. </span> Distance Units: the |
fantasai@3290 | 208 | ‘<code class=css><length></code>’ type</a> |
fantasai@3290 | 209 | <ul class=toc> |
fantasai@3290 | 210 | <li><a href="#relative-lengths"><span class=secno>6.1. </span> Relative |
fantasai@3290 | 211 | lengths</a> |
howcome@1729 | 212 | <ul class=toc> |
fantasai@3290 | 213 | <li><a href="#font-relative-lengths"><span class=secno>6.1.1. </span> |
fantasai@3290 | 214 | Font-relative lengths: the ‘<code class=css>em</code>’, |
fantasai@3290 | 215 | ‘<code class=css>ex</code>’, ‘<code |
fantasai@3290 | 216 | class=css>ch</code>’, ‘<code class=css>rem</code>’ |
fantasai@3290 | 217 | units</a> |
fantasai@3290 | 218 | |
fantasai@3290 | 219 | <li><a href="#viewport-relative-lengths"><span class=secno>6.1.2. |
fantasai@3290 | 220 | </span> Viewport-relative lengths: the ‘<code |
fantasai@3290 | 221 | class=css>vw</code>’, ‘<code class=css>vh</code>’, |
fantasai@3290 | 222 | ‘<code class=css>vm</code>’ units</a> |
fantasai@3290 | 223 | </ul> |
fantasai@3290 | 224 | |
fantasai@3290 | 225 | <li><a href="#absolute-lengths"><span class=secno>6.2. </span> Absolute |
fantasai@3290 | 226 | lengths: the ‘<code class=css>cm</code>’, ‘<code |
fantasai@3290 | 227 | class=css>mm</code>’, ‘<code class=css>in</code>’, |
fantasai@3290 | 228 | ‘<code class=css>pt</code>’, ‘<code |
fantasai@3290 | 229 | class=css>pc</code>’, ‘<code class=css>px</code>’ |
fantasai@3290 | 230 | units </a> |
fantasai@3290 | 231 | </ul> |
fantasai@3290 | 232 | |
fantasai@3291 | 233 | <li><a href="#other-units"><span class=secno>7. </span> Other Units</a> |
fantasai@3290 | 234 | <ul class=toc> |
fantasai@3291 | 235 | <li><a href="#angles"><span class=secno>7.1. </span> Angles: the |
fantasai@3291 | 236 | ‘<code class=css><angle></code>’ type and |
fantasai@3290 | 237 | ‘<code class=css>deg</code>’, ‘<code |
fantasai@3290 | 238 | class=css>grad</code>’, ‘<code class=css>rad</code>’, |
fantasai@3291 | 239 | ‘<code class=css>turn</code>’ units</a> |
fantasai@3291 | 240 | |
fantasai@3291 | 241 | <li><a href="#time"><span class=secno>7.2. </span> Times: the |
fantasai@3291 | 242 | ‘<code class=css><time></code>’ type and ‘<code |
fantasai@3291 | 243 | class=css>s</code>’, ‘<code class=css>ms</code>’ |
fantasai@3291 | 244 | units</a> |
fantasai@3291 | 245 | |
fantasai@3291 | 246 | <li><a href="#frequencies-the-ltfrequencygt-type-and-h"><span |
fantasai@3291 | 247 | class=secno>7.3. </span>Frequencies: the ‘<code |
fantasai@3291 | 248 | class=css><frequency></code>’ type and ‘<code |
fantasai@3291 | 249 | class=css>Hz</code>’, ‘<code class=css>kHz</code>’ |
fantasai@3291 | 250 | units</a> |
fantasai@3290 | 251 | <ul class=toc> |
fantasai@3290 | 252 | <li><a href="#the-calc-min-and-max-functions"><span class=secno>7.3.1. |
howcome@1729 | 253 | </span>The ‘<code class=property>calc</code>’, |
howcome@1729 | 254 | ‘<code class=property>min</code>’ and ‘<code |
howcome@1729 | 255 | class=property>max</code>’ functions</a> |
howcome@1729 | 256 | </ul> |
howcome@1729 | 257 | |
fantasai@3292 | 258 | <li><a href="#ltcolorgt"><span class=secno>7.4. </span><color></a> |
howcome@1729 | 259 | |
howcome@1729 | 260 | |
fantasai@3292 | 261 | <li><a href="#ltattrgt"><span class=secno>7.5. </span><attr></a> |
fantasai@3292 | 262 | |
fantasai@3292 | 263 | <li><a href="#ltimagegt"><span class=secno>7.6. </span><image></a> |
howcome@1729 | 264 | |
howcome@1729 | 265 | |
fantasai@3292 | 266 | <li><a href="#ltfractiongt"><span class=secno>7.7. |
howcome@1729 | 267 | </span><fraction></a> |
howcome@1729 | 268 | <ul class=toc> |
fantasai@3292 | 269 | <li><a href="#the-fr-unit"><span class=secno>7.7.1. </span>The |
howcome@1729 | 270 | ‘<code class=property>fr</code>’ unit</a> |
howcome@1729 | 271 | </ul> |
howcome@1729 | 272 | |
fantasai@3292 | 273 | <li><a href="#ltgridgt"><span class=secno>7.8. </span><grid></a> |
howcome@1729 | 274 | <ul class=toc> |
fantasai@3292 | 275 | <li><a href="#the-gr-unit"><span class=secno>7.8.1. </span>The |
howcome@1729 | 276 | ‘<code class=property>gr</code>’ unit</a> |
howcome@1729 | 277 | </ul> |
howcome@1729 | 278 | </ul> |
howcome@1729 | 279 | |
howcome@1729 | 280 | <li><a href="#specified-computed-used-and-actual-value"><span |
fantasai@3290 | 281 | class=secno>8. </span>Specified, computed, used, and actual values</a> |
howcome@1729 | 282 | <ul class=toc> |
fantasai@3290 | 283 | <li><a href="#finding-the-specified-value"><span class=secno>8.1. |
howcome@1729 | 284 | </span>Finding the specified value</a> |
howcome@1729 | 285 | |
fantasai@3290 | 286 | <li><a href="#finding-the-computed-value"><span class=secno>8.2. |
howcome@1729 | 287 | </span>Finding the computed value</a> |
howcome@1729 | 288 | |
fantasai@3290 | 289 | <li><a href="#finding-the-used-value"><span class=secno>8.3. |
howcome@1729 | 290 | </span>Finding the used value</a> |
howcome@1729 | 291 | |
fantasai@3290 | 292 | <li><a href="#finding-the-actual-value"><span class=secno>8.4. |
howcome@1729 | 293 | </span>Finding the actual value</a> |
howcome@1729 | 294 | </ul> |
howcome@1729 | 295 | |
howcome@1729 | 296 | <li class=no-num><a href="#acknowledgments">Acknowledgments</a> |
howcome@1729 | 297 | |
howcome@1729 | 298 | <li class=no-num><a href="#references">References</a> |
howcome@1729 | 299 | <ul class=toc> |
howcome@1729 | 300 | <li class=no-num><a href="#normative-references">Normative |
howcome@1729 | 301 | references</a> |
howcome@1729 | 302 | |
howcome@1729 | 303 | <li class=no-num><a href="#other-references">Other references</a> |
howcome@1729 | 304 | </ul> |
howcome@1729 | 305 | |
howcome@1729 | 306 | <li class=no-num><a href="#index">Index</a> |
howcome@1729 | 307 | </ul> |
howcome@1729 | 308 | <!--end-toc--> |
howcome@1729 | 309 | |
fantasai@3286 | 310 | <h2 id=introduction><span class=secno>1. </span>Introduction</h2> |
fantasai@3286 | 311 | |
fantasai@3286 | 312 | <p>The value definition field of each CSS property can contain keywords, |
fantasai@3286 | 313 | data types (which appear between ‘<code class=css><</code>’ |
fantasai@3286 | 314 | and ‘<code class=css>></code>’), and information on how they |
fantasai@3286 | 315 | can be combined. Generic data types (<a |
fantasai@3290 | 316 | href="#length-value"><code><length></code></a> being the most widely |
fantasai@3286 | 317 | used) that can be used by many properties are described in this |
fantasai@3286 | 318 | specification, while more specific data types (e.g., |
fantasai@3286 | 319 | <code><border-width></code>) are described in the corresponding |
fantasai@3286 | 320 | modules. </code> |
fantasai@3286 | 321 | |
fantasai@3286 | 322 | <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3> |
fantasai@3286 | 323 | |
fantasai@3286 | 324 | <p>This module replaces and extends the data type definitions in <a |
fantasai@3286 | 325 | href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> sections <a |
fantasai@3286 | 326 | href="http://www.w3.org/TR/CSS21/about.html#value-defs">1.4.2.1</a>, <a |
fantasai@3286 | 327 | href="http://www.w3.org/TR/CSS21/syndata.html#values">4.3</a>, and <a |
fantasai@3286 | 328 | href="http://www.w3.org/TR/CSS21/aural.html#aural-intro">A.2</a>. |
fantasai@3286 | 329 | |
fantasai@3286 | 330 | <h2 id=value-defs><span class=secno>2. </span> Value Definition Syntax</h2> |
fantasai@3286 | 331 | |
fantasai@3286 | 332 | <p>The syntax described here is used to define the set of valid values for |
fantasai@3286 | 333 | CSS properties. A property value can have one or more components. |
fantasai@3286 | 334 | |
fantasai@3289 | 335 | <h3 id=component-types><span class=secno>2.1. </span> Component value types</h3> |
fantasai@3286 | 336 | |
fantasai@3286 | 337 | <p>Component value types are designated in several ways: |
fantasai@3286 | 338 | |
fantasai@3286 | 339 | <ol> |
fantasai@3286 | 340 | <li><a href="#keyword">keyword</a> values (such as ‘<code |
fantasai@3286 | 341 | class=css>auto</code>’, ‘<code class=css>disc</code>’, |
fantasai@3286 | 342 | etc.), which appear literally, without quotes (e.g. <code>auto</code>) |
fantasai@3286 | 343 | |
fantasai@3286 | 344 | <li>basic data types, which appear between ‘<code |
fantasai@3286 | 345 | class=css><</code>’ and ‘<code |
fantasai@3286 | 346 | class=css>></code>’ (e.g., <a |
fantasai@3290 | 347 | href="#length-value"><code><length></code></a>, <a |
fantasai@3288 | 348 | href="#percentage-value"><code><percentage></code></a>, etc.). |
fantasai@3286 | 349 | |
fantasai@3286 | 350 | <li>types that have the same range of values as a property bearing the |
fantasai@3286 | 351 | same name (e.g., <code><'border-width'></code> |
fantasai@3286 | 352 | <code><'background-attachment'></code>, etc.). In this case, the |
fantasai@3286 | 353 | type name is the property name (complete with quotes) between the |
fantasai@3286 | 354 | brackets. Such a type does <em>not</em> include the value ‘<code |
fantasai@3286 | 355 | class=property>inherit</code>’. |
fantasai@3286 | 356 | |
fantasai@3286 | 357 | <li>non-terminals that do not share the same name as a property. In this |
fantasai@3286 | 358 | case, the non-terminal name appears between ‘<code |
fantasai@3286 | 359 | class=css><</code>’ and ‘<code |
fantasai@3286 | 360 | class=css>></code>’, as in <code><spacing></code>. Notice |
fantasai@3286 | 361 | the distinction between <code><border-width></code> and |
fantasai@3286 | 362 | <code><'border-width'></code>: the latter is defined as the value |
fantasai@3286 | 363 | of the ‘<code class=property>border-width</code>’ property, |
fantasai@3286 | 364 | the former requires an explicit expansion elsewhere. The definition of a |
fantasai@3286 | 365 | non-terminal is located near its first appearance in the specification. |
fantasai@3286 | 366 | </ol> |
fantasai@3286 | 367 | |
fantasai@3286 | 368 | <p>Some property value definitions also include the slash (/) and/or the |
fantasai@3286 | 369 | comma (,) as literals. These represent their corresponding tokens. |
fantasai@3286 | 370 | |
fantasai@3289 | 371 | <p>All CSS properties also accept the keyword values ‘<code |
fantasai@3289 | 372 | class=css>inherit</code>’ and ‘<code |
fantasai@3289 | 373 | class=css>initial</code>’ as their property value, but for |
fantasai@3289 | 374 | readability these are not listed explicitly in the property value syntax |
fantasai@3289 | 375 | definitions. These keywords cannot be combined with other component values |
fantasai@3289 | 376 | in same declaration; such a declaration is invalid. For example, |
fantasai@3289 | 377 | ‘<code class=css>background: url(corner.png) no-repeat, |
fantasai@3289 | 378 | inherit;</code>’ is invalid. |
fantasai@3289 | 379 | |
fantasai@3289 | 380 | <h3 id=component-combinators><span class=secno>2.2. </span> Component value |
fantasai@3286 | 381 | combinators</h3> |
fantasai@3286 | 382 | |
fantasai@3286 | 383 | <p>Component values can be arranged into property values as follows: |
howcome@1729 | 384 | |
howcome@1729 | 385 | <ul> |
fantasai@3286 | 386 | <li>Several juxtaposed words mean that all of them must occur, in the |
fantasai@3286 | 387 | given order. |
fantasai@3286 | 388 | |
fantasai@3286 | 389 | <li>A double ampersand (&&) separates two or more components, all of which |
fantasai@3286 | 390 | must occur, in any order. |
fantasai@3286 | 391 | |
fantasai@3286 | 392 | <li>A double bar (||) separates two or more options: one or more of them |
fantasai@3286 | 393 | must occur, in any order. |
fantasai@3286 | 394 | |
fantasai@3286 | 395 | <li>A bar (|) separates two or more alternatives: exactly one of them must |
fantasai@3286 | 396 | occur. |
fantasai@3286 | 397 | |
fantasai@3286 | 398 | <li>Brackets ([ ]) are for grouping. |
howcome@1729 | 399 | </ul> |
howcome@1729 | 400 | |
fantasai@3286 | 401 | <p>Juxtaposition is stronger than the double ampersand, the double |
fantasai@3286 | 402 | ampersand is stronger than the double bar, and the double bar is stronger |
fantasai@3286 | 403 | than the bar. Thus, the following lines are equivalent: |
fantasai@3286 | 404 | |
fantasai@3286 | 405 | <pre> |
fantasai@3286 | 406 | <!----> a b | c || d && e f |
fantasai@3286 | 407 | <!---->[ a b ] | [ c || [ d && [ e f ]]]</pre> |
fantasai@3286 | 408 | |
fantasai@3289 | 409 | <h3 id=component-multipliers><span class=secno>2.3. </span> Component value |
fantasai@3286 | 410 | multipliers</h3> |
fantasai@3286 | 411 | |
fantasai@3286 | 412 | <p>Every type, keyword, or bracketed group may be followed by one of the |
fantasai@3286 | 413 | following modifiers: |
fantasai@3286 | 414 | |
fantasai@3286 | 415 | <ul> |
fantasai@3286 | 416 | <li>An asterisk (*) indicates that the preceding type, word, or group |
fantasai@3286 | 417 | occurs zero or more times. |
fantasai@3286 | 418 | |
fantasai@3286 | 419 | <li>A plus (+) indicates that the preceding type, word, or group occurs |
fantasai@3286 | 420 | one or more times. |
fantasai@3286 | 421 | |
fantasai@3286 | 422 | <li>A question mark (?) indicates that the preceding type, word, or group |
fantasai@3286 | 423 | is optional. |
fantasai@3286 | 424 | |
fantasai@3286 | 425 | <li>A pair of numbers in curly braces ({<var>A</var>,<var>B</var>}) |
fantasai@3286 | 426 | indicates that the preceding type, word, or group occurs at least |
fantasai@3286 | 427 | <var>A</var> and at most <var>B</var> times. |
fantasai@3288 | 428 | |
fantasai@3288 | 429 | <li>A hash mark (#) indicates that the preceding type, word, or group |
fantasai@3288 | 430 | occurs one or more times, separated by comma tokens. |
fantasai@3286 | 431 | </ul> |
fantasai@3286 | 432 | |
fantasai@3289 | 433 | <h3 id=component-whitespace><span class=secno>2.4. </span> Component values |
fantasai@3289 | 434 | and white space</h3> |
fantasai@3286 | 435 | |
fantasai@3286 | 436 | <p>Component values are specified in terms of tokens, as described in <a |
fantasai@3286 | 437 | href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">Chapter 4</a> |
fantasai@3286 | 438 | of <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. As the |
fantasai@3286 | 439 | grammar allows spaces between tokens in the components of the |
fantasai@3286 | 440 | <code>value</code> production, spaces may appear between tokens in |
fantasai@3286 | 441 | property values. |
fantasai@3286 | 442 | |
fantasai@3286 | 443 | <p class=note>Note: In many cases, spaces will in fact be <em>required</em> |
fantasai@3286 | 444 | between tokens in order to distinguish them from each other. For example, |
fantasai@3286 | 445 | the value ‘<code class=css>1em2em</code>’ would be parsed as a |
fantasai@3286 | 446 | single <code>DIMEN</code> token with the number ‘<code |
fantasai@3286 | 447 | class=css>1</code>’ and the identifier ‘<code |
fantasai@3286 | 448 | class=css>em2em</code>’, which is an invalid unit. In this case, a |
fantasai@3286 | 449 | space would be required before the ‘<code class=css>2</code>’ |
fantasai@3286 | 450 | to get this parsed as the two lengths ‘<code |
fantasai@3286 | 451 | class=css>1em</code>’ and ‘<code class=css>2em</code>’. |
fantasai@3286 | 452 | |
fantasai@3289 | 453 | <h3 id=value-examples><span class=secno>2.5. </span> Property value |
fantasai@3289 | 454 | examples</h3> |
fantasai@3286 | 455 | |
fantasai@3286 | 456 | <p>Below are some examples of properties with their corresponding value |
fantasai@3286 | 457 | definition fields |
howcome@1729 | 458 | |
howcome@1729 | 459 | <div class=example> |
fantasai@3288 | 460 | <table class=data id=propvalues> |
fantasai@3288 | 461 | <thead> |
fantasai@3288 | 462 | <tr> |
fantasai@3288 | 463 | <th>Property |
fantasai@3288 | 464 | |
fantasai@3288 | 465 | <th>Value definition field |
fantasai@3288 | 466 | |
fantasai@3288 | 467 | <th>Example value |
fantasai@3288 | 468 | |
fantasai@3278 | 469 | <tbody> |
fantasai@3273 | 470 | <tr> |
fantasai@3288 | 471 | <td>‘<code class=property>orphans</code>’ |
fantasai@3288 | 472 | |
fantasai@3288 | 473 | <td><integer> |
fantasai@3288 | 474 | |
fantasai@3288 | 475 | <td>‘<code class=css>3</code>’ |
fantasai@3273 | 476 | |
howcome@1729 | 477 | <tr> |
fantasai@3288 | 478 | <td>‘<code class=property>text-align</code>’ |
fantasai@3288 | 479 | |
fantasai@3288 | 480 | <td>left | right | center | justify |
fantasai@3288 | 481 | |
fantasai@3288 | 482 | <td>‘<code class=css>center</code>’ |
howcome@1729 | 483 | |
howcome@1729 | 484 | <tr> |
fantasai@3288 | 485 | <td>‘<code class=property>padding-top</code>’ |
fantasai@3288 | 486 | |
fantasai@3288 | 487 | <td><length> | <percentage> |
fantasai@3288 | 488 | |
fantasai@3288 | 489 | <td>‘<code class=css>5%</code>’ |
howcome@1729 | 490 | |
howcome@1729 | 491 | <tr> |
fantasai@3288 | 492 | <td>‘<code class=property>outline-color</code>’ |
fantasai@3288 | 493 | |
fantasai@3288 | 494 | <td><color> | invert |
fantasai@3288 | 495 | |
fantasai@3288 | 496 | <td>‘<code class=css>#fefefe</code>’ |
howcome@1729 | 497 | |
howcome@1729 | 498 | <tr> |
fantasai@3288 | 499 | <td>‘<code class=property>text-decoration</code>’ |
fantasai@3288 | 500 | |
fantasai@3288 | 501 | <td>none | underline || overline || line-through || blink |
fantasai@3288 | 502 | |
fantasai@3288 | 503 | <td>‘<code class=css>overline underline</code>’ |
howcome@1729 | 504 | |
howcome@1729 | 505 | <tr> |
fantasai@3288 | 506 | <td>‘<code class=property>font-family</code>’ |
fantasai@3288 | 507 | |
fantasai@3288 | 508 | <td><family-name># |
fantasai@3288 | 509 | |
fantasai@3288 | 510 | <td>‘<code class=css>"Gill Sans", Futura, |
fantasai@3288 | 511 | sans-serif</code>’ |
fantasai@3288 | 512 | |
fantasai@3288 | 513 | <tr> |
fantasai@3288 | 514 | <td>‘<code class=property>border-width</code>’ |
fantasai@3288 | 515 | |
fantasai@3288 | 516 | <td>[ <length> | thick | medium | thin ]{1,4} |
fantasai@3288 | 517 | |
fantasai@3288 | 518 | <td>‘<code class=css>2px medium 4px</code>’ |
fantasai@3288 | 519 | |
fantasai@3288 | 520 | <tr> |
fantasai@3288 | 521 | <td>‘<code class=property>text-shadow</code>’ |
fantasai@3288 | 522 | |
fantasai@3288 | 523 | <td>[ inset? && [ <length>{2,4} && <color>? ] ]# | none |
fantasai@3288 | 524 | |
fantasai@3288 | 525 | <td>‘<code class=css>3px 3px rgba(50%, 50%, 50%, 50%), |
fantasai@3288 | 526 | lemonchiffon 0 0 4px inset</code>’ |
fantasai@3288 | 527 | |
fantasai@3288 | 528 | <tr> |
fantasai@3288 | 529 | <td>‘<code class=property>voice-pitch</code>’ |
fantasai@3288 | 530 | |
fantasai@3288 | 531 | <td> |
fantasai@3288 | 532 | <pre class=value><frequency> && absolute | |
fantasai@3288 | 533 | <!-- -->[[x-low | low | medium | high | x-high] || |
fantasai@3288 | 534 | <!-- --> [<frequency> | <semitones> | <percentage>]]</pre> |
fantasai@3288 | 535 | |
fantasai@3288 | 536 | <td>‘<code class=css>-2st x-low</code>’ |
howcome@1729 | 537 | </table> |
howcome@1729 | 538 | </div> |
howcome@1729 | 539 | |
fantasai@3286 | 540 | <h2 id=syntax-and-terminology><span class=secno>3. </span>Syntax and |
howcome@1729 | 541 | terminology</h2> |
howcome@1729 | 542 | |
howcome@1729 | 543 | <p>The generic data types described in the next sections use some common |
howcome@1729 | 544 | syntactic building blocks and terms that are described in this section. |
howcome@1729 | 545 | |
fantasai@3292 | 546 | <h3 id=functional-notation><span class=secno>3.1. </span>Functional |
howcome@1729 | 547 | notation</h3> |
howcome@1729 | 548 | |
howcome@1729 | 549 | <p>Some values use a <dfn id=functional-notation0>functional notation</dfn> |
howcome@1729 | 550 | to type values and to and lump values together. The syntax starts with the |
howcome@1729 | 551 | name of the function followed by a left parenthesis followed by optional |
howcome@1729 | 552 | whitespace followed by the argument(s) to the functions followed by |
howcome@1729 | 553 | optional whitespace followed by a right parenthesis. If a function takes |
howcome@1729 | 554 | more than one argument, the arguments are separated by a comma |
howcome@1729 | 555 | (‘<code class=css>,</code>’) with optional whitespace before |
howcome@1729 | 556 | and after the comma. |
howcome@1729 | 557 | |
howcome@1729 | 558 | <div class=example> background: url(http://www.example.org/image); color: |
howcome@1729 | 559 | rgb(100, 200, 50 );</div> |
howcome@1729 | 560 | |
howcome@1729 | 561 | <p>Some properties accept space- or comma-separated lists of values. A |
howcome@1729 | 562 | value that is composed of several values with spaces or commas between |
howcome@1729 | 563 | them, is called a <dfn id=compound-value>compound value</dfn>. A value |
howcome@1729 | 564 | that is not a compound value is a <dfn id=simple-value>simple value</dfn>. |
howcome@1729 | 565 | |
howcome@1729 | 566 | |
fantasai@3292 | 567 | <h2 id=textual-values><span class=secno>4. </span> Textual Data Types</h2> |
fantasai@3289 | 568 | |
fantasai@3289 | 569 | <p>An <dfn id=identifier>identifier</dfn> is a sequence of characters |
fantasai@3289 | 570 | conforming to the <code>IDENT</code> token in the <a |
fantasai@3289 | 571 | href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>. |
fantasai@3289 | 572 | <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> Identifiers |
fantasai@3289 | 573 | cannot be quoted; otherwise they would be interpreted as a string. |
fantasai@3289 | 574 | |
fantasai@3289 | 575 | <h3 id=keywords><span class=secno>4.1. </span> Pre-defined Keywords</h3> |
fantasai@3289 | 576 | |
fantasai@3289 | 577 | <p>In the value definition fields, keywords with a pre-defined meaning |
fantasai@3289 | 578 | appear literally. Keywords are CSS <i>identifiers</i> and are interpreted |
fantasai@3289 | 579 | case-insensitively within the ASCII range (i.e., [a-z] and [A-Z] are |
fantasai@3289 | 580 | equivalent). |
howcome@1729 | 581 | |
howcome@1729 | 582 | <div class=example> |
howcome@1729 | 583 | <p>For example, here is the value definition for the ‘<code |
howcome@1729 | 584 | class=property>border-collapse</code>’ property:</p> |
howcome@1729 | 585 | |
fantasai@3289 | 586 | <pre>Value: collapse | separate</pre> |
howcome@1729 | 587 | |
howcome@1729 | 588 | <p>And here is an example of its use:</p> |
howcome@1729 | 589 | |
fantasai@3289 | 590 | <pre>table { border-collapse: separate }</pre> |
howcome@1729 | 591 | </div> |
howcome@1729 | 592 | |
fantasai@3289 | 593 | <h4 id=initial-inherit><span class=secno>4.1.1. </span> The ‘<code |
fantasai@3289 | 594 | class=css>initial</code>’ and ‘<code |
fantasai@3289 | 595 | class=css>inherit</code>’ keywords</h4> |
fantasai@3289 | 596 | |
fantasai@3289 | 597 | <p>As defined <a href="#component-types">above</a>, all properties accept |
fantasai@3289 | 598 | the ‘<code class=css>initial</code>’ and ‘<code |
fantasai@3289 | 599 | class=css>inherit</code>’ keywords, which represent value concepts |
fantasai@3289 | 600 | common to all CSS properties. |
fantasai@3289 | 601 | |
fantasai@3289 | 602 | <p>The <dfn id=inherit>‘<code class=css>inherit</code>’</dfn> |
fantasai@3289 | 603 | keyword is <a |
fantasai@3289 | 604 | href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">defined</a> |
fantasai@3289 | 605 | in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. |
fantasai@3289 | 606 | |
fantasai@3289 | 607 | <p>The <dfn id=initial>‘<code class=css>initial</code>’</dfn> |
fantasai@3289 | 608 | keyword represents the value that is designated as the property's initial |
fantasai@3289 | 609 | value. <a href="#CSS3CASCADE" |
fantasai@3289 | 610 | rel=biblioentry>[CSS3CASCADE]<!--{{CSS3CASCADE}}--></a> |
fantasai@3289 | 611 | |
fantasai@3289 | 612 | <p class=issue>Should these keywords affect the specified or computed |
fantasai@3289 | 613 | value? See <a |
fantasai@3289 | 614 | href="http://lists.w3.org/Archives/Public/www-style/2011Jan/0075.html">various</a> |
fantasai@3289 | 615 | <a |
fantasai@3289 | 616 | href="http://lists.w3.org/Archives/Public/www-style/2011May/0402.html">issues</a>. |
fantasai@3289 | 617 | |
howcome@1729 | 618 | |
howcome@1729 | 619 | <p class=issue>Would it be useful to have a ‘<code |
fantasai@3289 | 620 | class=property>default</code>’ value, defined to be equivalent to <a |
fantasai@3289 | 621 | class=css href="#inherit">‘<code |
fantasai@3289 | 622 | class=property>inherit</code>’</a> for properties that are inherited |
fantasai@3289 | 623 | by default and equivalent to <a class=css href="#initial">‘<code |
fantasai@3289 | 624 | class=property>initial</code>’</a> for properties that are not |
fantasai@3289 | 625 | inherited by default? This might be easier for authors to use than <a |
fantasai@3289 | 626 | class=css href="#initial">‘<code |
fantasai@3289 | 627 | class=property>initial</code>’</a> and <a class=css |
fantasai@3289 | 628 | href="#inherit">‘<code class=property>inherit</code>’</a> |
fantasai@3289 | 629 | since it wouldn't require thinking about whether a property is inherited |
fantasai@3289 | 630 | by default or not (which isn't obvious for some properties, such as |
howcome@1729 | 631 | text-decoration and visibility). |
howcome@1729 | 632 | |
fantasai@3289 | 633 | <h3 id=identifiers><span class=secno>4.2. </span> User-defined Identifiers: |
fantasai@3289 | 634 | the ‘<a href="#identifier-value"><code |
fantasai@3289 | 635 | class=css><identifier></code></a>’ type</h3> |
fantasai@3289 | 636 | |
fantasai@3289 | 637 | <p>Some properties accept arbitrary user-defined identifiers as a component |
fantasai@3289 | 638 | value. This generic data type is denoted by <dfn |
fantasai@3289 | 639 | id=identifier-value><code><identifier></code></dfn>, and represents |
fantasai@3289 | 640 | any valid CSS <a href="#identifier"><i>identifier</i></a> that does not |
fantasai@3289 | 641 | otherwise appear as a pre-defined keyword in that property's value |
fantasai@3289 | 642 | definition. Such identifiers are fully case-sensitive, even in the ASCII |
fantasai@3289 | 643 | range (e.g. ‘<code class=css>example</code>’ and ‘<code |
fantasai@3289 | 644 | class=css>EXAMPLE</code>’ are two different, unrelated user-defined |
fantasai@3289 | 645 | identifiers). |
fantasai@3289 | 646 | |
fantasai@3292 | 647 | <h3 id=strings><span class=secno>4.3. </span> Quoted Strings: the ‘<a |
fantasai@3292 | 648 | href="#string-value"><code class=css><string></code></a>’ type</h3> |
fantasai@3292 | 649 | |
fantasai@3292 | 650 | <p>Strings are denoted by <dfn |
fantasai@3292 | 651 | id=string-value><code><string></code></dfn> and consist of a |
fantasai@3292 | 652 | sequence of characters delimited by double quotes or single quotes. They |
fantasai@3292 | 653 | correspond to the <code>STRING</code> token in the <a |
fantasai@3292 | 654 | href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>. |
fantasai@3292 | 655 | <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> |
fantasai@3292 | 656 | |
fantasai@3292 | 657 | <div class=example> |
fantasai@3292 | 658 | <p>Double quotes cannot occur inside double quotes, unless escaped (as |
fantasai@3292 | 659 | ‘<code class=css>\"</code>’ or as ‘<code |
fantasai@3292 | 660 | class=css>\22</code>’). Analogously for single quotes |
fantasai@3292 | 661 | ("\‘<code class=css>" or "\27"). </code> |
fantasai@3292 | 662 | |
fantasai@3292 | 663 | <pre> |
fantasai@3292 | 664 | <!-- -->content: "this is a ’string'."; |
fantasai@3292 | 665 | <!-- -->content: "this is a \"string\"."; |
fantasai@3292 | 666 | <!-- -->content: ‘<code class=css>this is a "string".</code>’; |
fantasai@3292 | 667 | <!-- -->content: ‘<code class=css>this is a \</code>’string\‘<code class=css>.</code>’;</pre> |
fantasai@3292 | 668 | </div> |
fantasai@3292 | 669 | |
fantasai@3292 | 670 | <p>It is possible to break strings over several lines, for aesthetic or |
fantasai@3292 | 671 | other reasons, but in such a case the newline itself has to be escaped |
fantasai@3292 | 672 | with a backslash (\). The newline is subsequently removed from the string. |
fantasai@3292 | 673 | For instance, the following two selectors are exactly the same: |
fantasai@3292 | 674 | |
fantasai@3292 | 675 | <div class=example> |
fantasai@3292 | 676 | <p style="display:none">Example(s):</p> |
fantasai@3292 | 677 | |
fantasai@3292 | 678 | <pre> |
fantasai@3292 | 679 | <!-- -->a[title="a not s\ |
fantasai@3292 | 680 | <!-- -->o very long title"] {/*...*/} |
fantasai@3292 | 681 | <!-- -->a[title="a not so very long title"] {/*...*/}</pre> |
fantasai@3292 | 682 | </div> |
fantasai@3292 | 683 | |
fantasai@3292 | 684 | <p>Since a string cannot directly represent a newline, to include a newline |
fantasai@3292 | 685 | in a string, use the escape "\A". (Hexadecimal A is the line feed |
fantasai@3292 | 686 | character in Unicode (U+000A), but represents the generic notion of |
fantasai@3292 | 687 | "newline" in CSS.) |
fantasai@3292 | 688 | |
fantasai@3292 | 689 | <h3 id=urls><span class=secno>4.4. </span> Resource Locators: the ‘<a |
fantasai@3292 | 690 | href="#url-value"><code class=css><url></code></a>’ type</h3> |
fantasai@3292 | 691 | |
fantasai@3292 | 692 | <p>A <dfn id=url>URL</dfn> is a pointer to a resource and is a <a |
fantasai@3292 | 693 | href="http://www.w3.org/TR/CSS21/syndata.html#uri">specially-parsed</a> <a |
fantasai@3292 | 694 | href="#functional-notation">functional notation</a> denoted by <dfn |
fantasai@3292 | 695 | id=url-value><code><url></code></dfn>. It corresponds to the |
fantasai@3292 | 696 | <code>URI</code> token in the <a |
fantasai@3292 | 697 | href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>. |
fantasai@3292 | 698 | <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> |
fantasai@3292 | 699 | |
fantasai@3292 | 700 | <div class=example> |
fantasai@3292 | 701 | <p>Below is an example of a URL being used as a background image: |
fantasai@3292 | 702 | |
fantasai@3292 | 703 | <pre>body { background: url("http://www.example.com/pinkish.gif") }</pre> |
fantasai@3292 | 704 | |
fantasai@3292 | 705 | <p>The same example can be written without quotes: |
fantasai@3292 | 706 | |
fantasai@3292 | 707 | <pre>body { background: url(http://www.example.com/pinkish.gif) }</pre> |
fantasai@3292 | 708 | </div> |
fantasai@3292 | 709 | |
fantasai@3292 | 710 | <p class=note>Note that in some CSS syntactic contexts (as defined by that |
fantasai@3292 | 711 | context), a URL can be represented as a <a |
fantasai@3292 | 712 | href="#string-value"><code><string></code></a> rather than by <a |
fantasai@3292 | 713 | href="#url-value"><code><URL></code></a>. An example of this is the |
fantasai@3292 | 714 | <a href="http://www.w3.org/TR/CSS21/cascade.html#at-import">‘<code |
fantasai@3292 | 715 | class=css>@import</code>’ rule</a>. |
fantasai@3292 | 716 | |
fantasai@3292 | 717 | <p>Parentheses, whitespace characters, single quotes (') and double |
fantasai@3292 | 718 | quotes (") appearing in a URL must be escaped with a backslash so that the |
fantasai@3292 | 719 | resulting value is a valid <a href="#url"><code>URL</code></a> token, e.g. |
fantasai@3292 | 720 | ‘<code class=css>url(open\(parens)</code>’, ‘<code |
fantasai@3292 | 721 | class=css>url(close\)parens)</code>’. Depending on the type of URL, |
fantasai@3292 | 722 | it might also be possible to write these characters as URI-escapes (where |
fantasai@3292 | 723 | <code>(</code> = <code>%28</code>, <code>)</code> = <code>%29</code>, |
fantasai@3292 | 724 | etc.) as described in <a href="#URI" |
fantasai@3292 | 725 | rel=biblioentry>[URI]<!--{{URI}}--></a>. Alternatively a URL containing |
fantasai@3292 | 726 | such characters may be represented as a quoted <a |
fantasai@3292 | 727 | href="#string">string</a> within the ‘<a href="#url"><code |
fantasai@3292 | 728 | class=css>url()</code></a>’ notation. |
fantasai@3292 | 729 | |
fantasai@3292 | 730 | <p>In order to create modular style sheets that are not dependent on the |
fantasai@3292 | 731 | absolute location of a resource, authors should use relative URIs. |
fantasai@3292 | 732 | Relative URIs (as defined in [[RFC3986]]) are resolved to full URIs using |
fantasai@3292 | 733 | a base URI. RFC 3986, section 3, defines the normative algorithm |
fantasai@3292 | 734 | for this process. For CSS style sheets, the base URI is that of the style |
fantasai@3292 | 735 | sheet, not that of the source document. |
fantasai@3292 | 736 | |
fantasai@3292 | 737 | <div class=example> |
fantasai@3292 | 738 | <p>For example, suppose the following rule: |
fantasai@3292 | 739 | |
fantasai@3292 | 740 | <pre>body { background: url("tile.png") }</pre> |
fantasai@3292 | 741 | |
fantasai@3292 | 742 | <p>is located in a style sheet designated by the URL:</p> |
fantasai@3292 | 743 | |
fantasai@3292 | 744 | <pre>http://www.example.org/style/basic.css</pre> |
fantasai@3292 | 745 | |
fantasai@3292 | 746 | <p>The background of the source document's <code><body></code> will |
fantasai@3292 | 747 | be tiled with whatever image is described by the resource designated by |
fantasai@3292 | 748 | the URL: |
fantasai@3292 | 749 | |
fantasai@3292 | 750 | <pre>http://www.example.org/style/tile.png</pre> |
fantasai@3292 | 751 | |
fantasai@3292 | 752 | <p>The same image will be used regardless of the URL of the source |
fantasai@3292 | 753 | document containing the <code><body<</code>. |
fantasai@3292 | 754 | </div> |
fantasai@3292 | 755 | |
fantasai@3288 | 756 | <h2 id=numeric-types><span class=secno>5. </span> Numeric Data Types</h2> |
fantasai@3288 | 757 | |
fantasai@3288 | 758 | <h3 id=integers><span class=secno>5.1. </span> Integers: the ‘<a |
fantasai@3288 | 759 | href="#integer-value"><code class=css><integer></code></a>’ |
fantasai@3288 | 760 | type</h3> |
fantasai@3288 | 761 | |
fantasai@3288 | 762 | <p>Integer values are denoted by <dfn |
fantasai@3288 | 763 | id=integer-value><code><integer></code></dfn>. An <dfn |
fantasai@3288 | 764 | id=integer>integer</dfn> is one or more decimal digits ‘<code |
fantasai@3288 | 765 | class=css>0</code>’ through ‘<code class=css>9</code>’ |
fantasai@3288 | 766 | and corresponds to a subset of the <a |
fantasai@3288 | 767 | href="#number"><code>NUMBER</code></a> token in the <a |
fantasai@3288 | 768 | href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>. |
fantasai@3288 | 769 | Integers may be immediately preceded by ‘<code |
fantasai@3288 | 770 | class=css>-</code>’ or ‘<code class=css>+</code>’ to |
fantasai@3288 | 771 | indicate the sign. |
fantasai@3288 | 772 | |
fantasai@3288 | 773 | <p>Properties may restrict the integer value to some range. If the value is |
fantasai@3288 | 774 | outside the allowed range, the declaration is invalid and must be <a |
fantasai@3288 | 775 | href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>. |
fantasai@3288 | 776 | |
fantasai@3288 | 777 | <h3 id=numbers><span class=secno>5.2. </span> Numbers: the ‘<a |
fantasai@3288 | 778 | href="#number-value"><code class=css><number></code></a>’ type</h3> |
fantasai@3288 | 779 | |
fantasai@3288 | 780 | <p>Number values are denoted by <dfn |
fantasai@3288 | 781 | id=number-value><code><number></code></dfn>. A <dfn |
fantasai@3288 | 782 | id=number>number</dfn> is either an <a href="#integer"><i>integer</i></a>, |
fantasai@3288 | 783 | or zero or more decimal digits followed by a dot (.) followed by one or |
fantasai@3288 | 784 | more decimal digits. It corresponds to the <a |
fantasai@3288 | 785 | href="#number"><code>NUMBER</code></a> token in the <a |
fantasai@3288 | 786 | href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>. |
fantasai@3288 | 787 | Like integers, numbers may also be immediately preceded by ‘<code |
fantasai@3288 | 788 | class=css>-</code>’ or ‘<code class=css>+</code>’ to |
fantasai@3288 | 789 | indicate the sign. |
fantasai@3288 | 790 | |
fantasai@3288 | 791 | <p>Properties may restrict the number value to some range. If the value is |
fantasai@3288 | 792 | outside the allowed range, the declaration is invalid and must be <a |
fantasai@3288 | 793 | href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>. |
fantasai@3288 | 794 | |
fantasai@3288 | 795 | <h3 id=percentages><span class=secno>5.3. </span> Percentages: the |
fantasai@3288 | 796 | ‘<a href="#percentage-value"><code |
fantasai@3288 | 797 | class=css><percentage></code></a>’ type</h3> |
fantasai@3288 | 798 | |
fantasai@3288 | 799 | <p>A percentage value is denoted by <dfn |
fantasai@3288 | 800 | id=percentage-value><code><percentage></code></dfn>, consists of a |
fantasai@3288 | 801 | <a href="#number-value"><i><number></i></a> immediately followed by |
fantasai@3288 | 802 | a percent sign ‘<code class=css>%</code>’. It corresponds to |
fantasai@3288 | 803 | the <code>PERCENTAGE</code> token in the <a |
fantasai@3288 | 804 | href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>. |
fantasai@3288 | 805 | |
fantasai@3288 | 806 | <p>Percentage values are always relative to another value, for example a |
fantasai@3288 | 807 | length. Each property that allows percentages also defines the value to |
fantasai@3288 | 808 | which the percentage refers. The value may be that of another property for |
fantasai@3288 | 809 | the same element, a property for an ancestor element, or a value of the |
fantasai@3288 | 810 | formatting context (e.g., the width of a <i>containing block</i>). When a |
fantasai@3288 | 811 | percentage value is set for a property of the <i>root</i> element and the |
fantasai@3288 | 812 | percentage is defined as referring to the inherited value of some |
fantasai@3288 | 813 | property, the resultant value is the percentage times the <i>initial |
fantasai@3288 | 814 | value</i> of that property. |
fantasai@3288 | 815 | |
fantasai@3288 | 816 | <p>Properties may restrict the percentage value to some range. If the value |
fantasai@3288 | 817 | is outside the allowed range, the declaration is invalid and must be <a |
fantasai@3288 | 818 | href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>. |
fantasai@3288 | 819 | |
fantasai@3290 | 820 | <h2 id=lengths><span class=secno>6. </span> Distance Units: the ‘<a |
fantasai@3290 | 821 | href="#length-value"><code class=css><length></code></a>’ type</h2> |
fantasai@3290 | 822 | |
fantasai@3290 | 823 | <p>Lengths refer to distance measurements and are denoted by <dfn |
fantasai@3290 | 824 | id=length-value><code><length></code></dfn> in the property |
fantasai@3290 | 825 | definitions. A length is a <a href="#dimension"><i>dimension</i></a>. A |
fantasai@3290 | 826 | zero length may be represented instead as the <a |
fantasai@3290 | 827 | href="#number-value"><code><number></code></a> ‘<code |
fantasai@3290 | 828 | class=css>0</code>’. (In other words, for zero lengths the unit |
fantasai@3290 | 829 | identifier is optional.) |
fantasai@3290 | 830 | |
fantasai@3290 | 831 | <p> A <dfn id=dimension>dimension</dfn> is a <a |
fantasai@3290 | 832 | href="#number"><i>number</i></a> immediately followed by a unit |
fantasai@3290 | 833 | identifier. It corresponds to the <a |
fantasai@3290 | 834 | href="#dimension"><code>DIMENSION</code></a> token in the <a |
fantasai@3290 | 835 | href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">grammar</a>. |
fantasai@3290 | 836 | <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> Like |
fantasai@3290 | 837 | keywords, unit identifiers are case-insensitive within the ASCII range. |
fantasai@3290 | 838 | |
fantasai@3290 | 839 | <p>Properties may restrict the length value to some range. If the value is |
fantasai@3290 | 840 | outside the allowed range, the declaration is invalid and must be <a |
fantasai@3290 | 841 | href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>. |
fantasai@3290 | 842 | |
fantasai@3290 | 843 | <p>While some properties allow negative length values, this may complicate |
howcome@1729 | 844 | the formatting and there may be implementation-specific limits. If a |
fantasai@3290 | 845 | negative length value is allowed but cannot be supported, it must be |
howcome@1729 | 846 | converted to the nearest value that can be supported. |
howcome@1729 | 847 | |
fantasai@3290 | 848 | <p>In cases where the <a href="#used-value">used</a> length cannot be |
fantasai@3290 | 849 | supported, user agents must approximate it in the <a |
fantasai@3290 | 850 | href="#actual-value">actual</a> value. |
fantasai@3290 | 851 | |
fantasai@3290 | 852 | <p>There are two types of length units: relative and absolute. |
fantasai@3290 | 853 | |
fantasai@3290 | 854 | <h3 id=relative-lengths><span class=secno>6.1. </span> Relative lengths</h3> |
fantasai@3290 | 855 | |
fantasai@3290 | 856 | <p><dfn id=relative-length-units title="relative length">Relative length |
fantasai@3290 | 857 | units</dfn> specify a length relative to another length. Style sheets that |
fantasai@3290 | 858 | use relative units can more easily scale from one output environment to |
fantasai@3290 | 859 | another. |
fantasai@3290 | 860 | |
fantasai@3290 | 861 | <p>The relative units are: |
fantasai@3290 | 862 | |
fantasai@3290 | 863 | <table class=data> |
fantasai@3290 | 864 | <caption>Informative Summary of Relative Units</caption> |
fantasai@3290 | 865 | |
fantasai@3290 | 866 | <thead> |
fantasai@3290 | 867 | <tr> |
fantasai@3290 | 868 | <th>unit |
fantasai@3290 | 869 | |
fantasai@3290 | 870 | <th>relative to |
fantasai@3290 | 871 | |
howcome@1729 | 872 | <tbody> |
howcome@1729 | 873 | <tr> |
fantasai@3290 | 874 | <td>‘<a href="#em-unit"><code class=css>em</code></a>’ |
fantasai@3290 | 875 | |
fantasai@3290 | 876 | <td>font size of the element |
fantasai@3290 | 877 | |
fantasai@3290 | 878 | <tr> |
fantasai@3290 | 879 | <td>‘<a href="#ex-unit"><code class=css>ex</code></a>’ |
fantasai@3290 | 880 | |
fantasai@3290 | 881 | <td><i>x-height</i> of the element's font |
fantasai@3290 | 882 | |
fantasai@3290 | 883 | <tr> |
fantasai@3290 | 884 | <td>‘<a href="#ch-unit"><code class=css>ch</code></a>’ |
fantasai@3290 | 885 | |
fantasai@3290 | 886 | <td>width of the "0" glyph in the element's font |
fantasai@3290 | 887 | |
fantasai@3290 | 888 | <tr> |
fantasai@3290 | 889 | <td>‘<a href="#rem-unit"><code class=css>rem</code></a>’ |
fantasai@3290 | 890 | |
fantasai@3290 | 891 | <td>font size of the root element |
fantasai@3290 | 892 | |
fantasai@3290 | 893 | <tr> |
fantasai@3290 | 894 | <td>‘<a href="#vw-unit"><code class=css>vw</code></a>’ |
fantasai@3290 | 895 | |
fantasai@3290 | 896 | <td>viewport's width |
fantasai@3290 | 897 | |
fantasai@3290 | 898 | <tr> |
fantasai@3290 | 899 | <td>‘<a href="#vh-unit"><code class=css>vh</code></a>’ |
fantasai@3290 | 900 | |
fantasai@3290 | 901 | <td>viewport's height |
fantasai@3290 | 902 | |
fantasai@3290 | 903 | <tr> |
fantasai@3290 | 904 | <td>‘<a href="#vm-unit"><code class=css>vm</code></a>’ |
fantasai@3290 | 905 | |
fantasai@3290 | 906 | <td>minimum of the viewport's height and width |
fantasai@3290 | 907 | </table> |
fantasai@3290 | 908 | |
fantasai@3290 | 909 | <p>Child elements do not inherit the relative values as specified for their |
fantasai@3290 | 910 | parent; they inherit the <a href="#computed-value">computed values</a>. |
fantasai@3290 | 911 | |
fantasai@3290 | 912 | <h4 id=font-relative-lengths><span class=secno>6.1.1. </span> Font-relative |
fantasai@3290 | 913 | lengths: the ‘<a href="#em-unit"><code |
fantasai@3290 | 914 | class=css>em</code></a>’, ‘<a href="#ex-unit"><code |
fantasai@3290 | 915 | class=css>ex</code></a>’, ‘<a href="#ch-unit"><code |
fantasai@3290 | 916 | class=css>ch</code></a>’, ‘<a href="#rem-unit"><code |
fantasai@3290 | 917 | class=css>rem</code></a>’ units</h4> |
fantasai@3290 | 918 | |
fantasai@3290 | 919 | <p>Aside from ‘<a href="#rem-unit"><code |
fantasai@3290 | 920 | class=css>rem</code></a>’ (which refers to the font-size of the root |
fantasai@3290 | 921 | element), the font-relative lengths refer to the computed font metrics of |
fantasai@3290 | 922 | the element on which they are used. The exception is when they occur in |
fantasai@3290 | 923 | the value of the ‘<code class=property>font-size</code>’ |
fantasai@3290 | 924 | property itself, in which case they refer to the font metrics of the |
fantasai@3290 | 925 | parent element (or the font metrics corresponding to the initial values of |
fantasai@3290 | 926 | the ‘<code class=property>font</code>’ property, if the |
fantasai@3290 | 927 | element has no parent). |
fantasai@3290 | 928 | |
fantasai@3290 | 929 | <dl> |
fantasai@3290 | 930 | <dt><dfn id=em-unit title=em>em unit</dfn> |
fantasai@3290 | 931 | |
fantasai@3290 | 932 | <dd> |
fantasai@3290 | 933 | <p>Equal to the computed value of the ‘<code |
fantasai@3290 | 934 | class=property>font-size</code>’ property of the element on which |
fantasai@3290 | 935 | it is used. |
fantasai@3290 | 936 | |
fantasai@3290 | 937 | <div class=example> |
fantasai@3290 | 938 | <p>The rule:</p> |
fantasai@3290 | 939 | |
fantasai@3290 | 940 | <pre>h1 { line-height: 1.2em }</pre> |
fantasai@3290 | 941 | |
fantasai@3290 | 942 | <p>means that the line height of <code>h1</code> elements will be 20% |
fantasai@3290 | 943 | greater than the font size of <code>h1</code> element. On the other |
fantasai@3290 | 944 | hand: |
fantasai@3290 | 945 | |
fantasai@3290 | 946 | <pre>h1 { font-size: 1.2em }</pre> |
fantasai@3290 | 947 | |
fantasai@3290 | 948 | <p>means that the font size of <code>h1</code> elements will be 20% |
fantasai@3290 | 949 | greater than the font size inherited by <code>h1</code> elements.</p> |
fantasai@3290 | 950 | </div> |
fantasai@3290 | 951 | |
fantasai@3290 | 952 | <dt><dfn id=ex-unit title=ex>ex unit</dfn> |
fantasai@3290 | 953 | |
fantasai@3290 | 954 | <dd> |
fantasai@3290 | 955 | <p>Equal to the font's x-height. The x-height is so called because it is |
fantasai@3290 | 956 | often equal to the height of the lowercase "x". However, an ‘<a |
fantasai@3290 | 957 | href="#ex-unit"><code class=css>ex</code></a>’ is defined even for |
fantasai@3290 | 958 | fonts that do not contain an "x". |
fantasai@3290 | 959 | |
fantasai@3290 | 960 | <p>The x-height of a font can be found in different ways. Some fonts |
fantasai@3290 | 961 | contain reliable metrics for the x-height. If reliable font metrics are |
fantasai@3290 | 962 | not available, UAs may determine the x-height from the height of a |
fantasai@3290 | 963 | lowercase glyph. One possible heuristic is to look at how far the glyph |
fantasai@3290 | 964 | for the lowercase "o" extends below the baseline, and subtract that |
fantasai@3290 | 965 | value from the top of its bounding box. In the cases where it is |
fantasai@3290 | 966 | impossible or impractical to determine the x-height, a value of 0.5em |
fantasai@3290 | 967 | must be assumed. |
fantasai@3290 | 968 | |
fantasai@3290 | 969 | <dt><dfn id=ch-unit title=ch>ch unit</dfn> |
fantasai@3290 | 970 | |
fantasai@3290 | 971 | <dd> |
fantasai@3290 | 972 | <p>Equal to the advance measure of the "0" (ZERO, U+0030) glyph found in |
fantasai@3290 | 973 | the font used to render it. |
fantasai@3290 | 974 | |
fantasai@3290 | 975 | <dt><dfn id=rem-unit title=rem>rem unit</dfn> |
fantasai@3290 | 976 | |
fantasai@3290 | 977 | <dd> |
fantasai@3290 | 978 | <p>Equal to the computed value of ‘<code |
fantasai@3290 | 979 | class=property>font-size</code>’ on the root element. |
fantasai@3290 | 980 | |
fantasai@3290 | 981 | <p>When specified on the ‘<code |
fantasai@3290 | 982 | class=property>font-size</code>’ property of the root element, the |
fantasai@3290 | 983 | ‘<a href="#rem-unit"><code class=css>rem</code></a>’ units |
fantasai@3290 | 984 | refer to the property's <em>initial value</em>.</p> |
fantasai@3290 | 985 | </dl> |
fantasai@3290 | 986 | |
fantasai@3290 | 987 | <h4 id=viewport-relative-lengths><span class=secno>6.1.2. </span> |
fantasai@3290 | 988 | Viewport-relative lengths: the ‘<a href="#vw-unit"><code |
fantasai@3290 | 989 | class=css>vw</code></a>’, ‘<a href="#vh-unit"><code |
fantasai@3290 | 990 | class=css>vh</code></a>’, ‘<a href="#vm-unit"><code |
fantasai@3290 | 991 | class=css>vm</code></a>’ units</h4> |
fantasai@3290 | 992 | |
fantasai@3290 | 993 | <p>The viewport-relative lengths are relative to the size of the initial |
fantasai@3290 | 994 | containing block. When the height or width of the viewport is changed, |
fantasai@3290 | 995 | they are scaled proportionally. |
fantasai@3290 | 996 | |
fantasai@3290 | 997 | <dl> |
fantasai@3290 | 998 | <dt><dfn id=vw-unit title=vw>vw unit</dfn> |
fantasai@3290 | 999 | |
fantasai@3290 | 1000 | <dd>Equal to 1/100th of the width of the initial containing block. |
fantasai@3290 | 1001 | <div class=example> |
fantasai@3290 | 1002 | <p>In the example below, if the width of the viewport is 200mm, the font |
fantasai@3290 | 1003 | size of <code>h1</code> elements will be 16mm (i.e. |
fantasai@3290 | 1004 | (8×200mm)/100). |
fantasai@3290 | 1005 | |
fantasai@3290 | 1006 | <pre>h1 { font-size: 8vw }</pre> |
fantasai@3290 | 1007 | </div> |
fantasai@3290 | 1008 | |
fantasai@3290 | 1009 | <dt><dfn id=vh-unit title=vh>vh unit</dfn> |
fantasai@3290 | 1010 | |
fantasai@3290 | 1011 | <dd>Equal to 1/100th of the height of the initial containing block. |
fantasai@3290 | 1012 | |
fantasai@3290 | 1013 | <dt><dfn id=vm-unit title=vm>vm unit</dfn> |
fantasai@3290 | 1014 | |
fantasai@3290 | 1015 | <dd>Equal to the smaller of ‘<a href="#vw-unit"><code |
fantasai@3290 | 1016 | class=css>vw</code></a>’ or ‘<a href="#vh-unit"><code |
fantasai@3290 | 1017 | class=css>vh</code></a>’. |
fantasai@3290 | 1018 | <p class=issue>Do we need this now that we have the min() function? |
fantasai@3290 | 1019 | </dl> |
fantasai@3290 | 1020 | |
fantasai@3290 | 1021 | <h3 id=absolute-lengths><span class=secno>6.2. </span> Absolute lengths: |
fantasai@3290 | 1022 | the ‘<code class=css>cm</code>’, ‘<code |
fantasai@3290 | 1023 | class=css>mm</code>’, ‘<code class=css>in</code>’, |
fantasai@3290 | 1024 | ‘<code class=css>pt</code>’, ‘<code |
fantasai@3290 | 1025 | class=css>pc</code>’, ‘<code class=css>px</code>’ units</h3> |
fantasai@3290 | 1026 | |
fantasai@3290 | 1027 | <p>The <dfn id=absolute-length-units>absolute length units</dfn> are fixed |
fantasai@3290 | 1028 | in relation to each other and anchored to some physical measurement. They |
fantasai@3290 | 1029 | are mainly useful when the output environment is known. The absolute units |
fantasai@3290 | 1030 | consist of the physical units (in, cm, mm, pt, pc) and the px unit: |
fantasai@3290 | 1031 | |
fantasai@3290 | 1032 | <table class=data> |
fantasai@3290 | 1033 | <thead> |
fantasai@3290 | 1034 | <tr> |
howcome@1729 | 1035 | <th>unit |
howcome@1729 | 1036 | |
howcome@1729 | 1037 | <th>definition |
howcome@1729 | 1038 | |
fantasai@3290 | 1039 | <tbody> |
howcome@1729 | 1040 | <tr> |
fantasai@3290 | 1041 | <td>‘<code class=css>cm</code>’ |
howcome@1729 | 1042 | |
howcome@1729 | 1043 | <td>centimeters |
howcome@1729 | 1044 | |
howcome@1729 | 1045 | <tr> |
fantasai@3290 | 1046 | <td>‘<code class=css>mm</code>’ |
howcome@1729 | 1047 | |
howcome@1729 | 1048 | <td>millimeters |
howcome@1729 | 1049 | |
howcome@1729 | 1050 | <tr> |
fantasai@3290 | 1051 | <td>‘<code class=css>in</code>’ |
fantasai@3290 | 1052 | |
fantasai@3290 | 1053 | <td>inches; 1in is equal to 2.54cm |
howcome@1729 | 1054 | |
howcome@1729 | 1055 | <tr> |
fantasai@3290 | 1056 | <td>‘<code class=css>px</code>’ |
fantasai@3290 | 1057 | |
fantasai@3290 | 1058 | <td>pixels; 1px is equal to 1/96th of 1in |
howcome@1729 | 1059 | |
howcome@1729 | 1060 | <tr> |
fantasai@3290 | 1061 | <td>‘<code class=css>pt</code>’ |
fantasai@3290 | 1062 | |
fantasai@3290 | 1063 | <td>points; 1pt is equal to 1/72nd of 1in |
fantasai@3290 | 1064 | |
fantasai@3290 | 1065 | <tr> |
fantasai@3290 | 1066 | <td>‘<code class=css>pc</code>’ |
fantasai@3290 | 1067 | |
fantasai@3290 | 1068 | <td>picas; 1pc is equal to 12pt |
howcome@1729 | 1069 | </table> |
howcome@1729 | 1070 | |
fantasai@3290 | 1071 | <pre class=example> |
howcome@1729 | 1072 | h1 { margin: 0.5in } /* inches */ |
howcome@1729 | 1073 | h2 { line-height: 3cm } /* centimeters */ |
howcome@1729 | 1074 | h3 { word-spacing: 4mm } /* millimeters */ |
howcome@1729 | 1075 | h4 { font-size: 12pt } /* points */ |
fantasai@3290 | 1076 | h4 { font-size: 1pc } /* picas */ |
fantasai@3290 | 1077 | p { font-size: 12px } /* px */</pre> |
fantasai@3290 | 1078 | |
fantasai@3290 | 1079 | <p>For a CSS device, these dimensions are either anchored (i) by relating |
fantasai@3290 | 1080 | the physical units to their physical measurements, or (ii) by relating the |
fantasai@3290 | 1081 | pixel unit to the <a href="#reference-pixel"><i>reference pixel</i></a>. |
fantasai@3290 | 1082 | For print media and similar high-resolution devices, the anchor unit |
fantasai@3290 | 1083 | should be one of the standard physical units (inches, centimeters, etc). |
fantasai@3290 | 1084 | For lower-resolution devices, and devices with unusual viewing distances, |
fantasai@3290 | 1085 | it is recommended instead that the anchor unit be the pixel unit. For such |
fantasai@3290 | 1086 | devices it is recommended that the pixel unit refer to the whole number of |
fantasai@3290 | 1087 | device pixels that best approximates the reference pixel. |
fantasai@3290 | 1088 | |
fantasai@3290 | 1089 | <p class=note>Note that if the anchor unit is the pixel unit, the physical |
fantasai@3290 | 1090 | units might not match their physical measurements. Alternatively if the |
fantasai@3290 | 1091 | anchor unit is a physical unit, the pixel unit might not map to a whole |
fantasai@3290 | 1092 | number of device pixels. |
fantasai@3290 | 1093 | |
fantasai@3290 | 1094 | <p class=note>Note that this definition of the pixel unit and the physical |
fantasai@3290 | 1095 | units differs from previous versions of CSS. In particular, in previous |
fantasai@3290 | 1096 | versions of CSS the pixel unit and the physical units were not related by |
fantasai@3290 | 1097 | a fixed ratio: the physical units were always tied to their physical |
fantasai@3290 | 1098 | measurements while the pixel unit would vary to most closely match the |
fantasai@3290 | 1099 | reference pixel. (This change was made because too much existing content |
fantasai@3290 | 1100 | relies on the assumption of 96dpi, and breaking that assumption breaks the |
fantasai@3290 | 1101 | content.) |
fantasai@3290 | 1102 | |
fantasai@3290 | 1103 | <p>The <dfn id=reference-pixel>reference pixel</dfn> is the visual angle of |
fantasai@3290 | 1104 | one pixel on a device with a pixel density of 96dpi and a distance from |
fantasai@3290 | 1105 | the reader of an arm's length. For a nominal arm's length of 28 inches, |
fantasai@3290 | 1106 | the visual angle is therefore about 0.0213 degrees. For reading at arm's |
fantasai@3290 | 1107 | length, 1px thus corresponds to about 0.26 mm (1/96 inch). |
fantasai@3290 | 1108 | |
fantasai@3290 | 1109 | <p>The image below illustrates the effect of viewing distance on the size |
fantasai@3290 | 1110 | of a reference pixel: a reading distance of 71 cm (28 inches) |
fantasai@3290 | 1111 | results in a reference pixel of 0.26 mm, while a reading distance of |
fantasai@3290 | 1112 | 3.5 m (12 feet) results in a reference pixel of 1.3 mm. |
fantasai@3290 | 1113 | |
fantasai@3290 | 1114 | <div class=figure> |
fantasai@3290 | 1115 | <p><img alt="This diagram illustrates how the definition of a pixel |
fantasai@3290 | 1116 | depends on the users distance from the viewing surface (paper or screen). |
fantasai@3290 | 1117 | The image depicts the user looking at two planes, one 28 inches (71 cm) |
fantasai@3290 | 1118 | from the user, the second 140 inches (3.5 m) from the user. An expanding |
fantasai@3290 | 1119 | cone is projected from the user's eye onto each plane. Where the cone |
fantasai@3290 | 1120 | strikes the first plane, the projected pixel is 0.26 mm high. Where the |
fantasai@3290 | 1121 | cone strikes the second plane, the projected pixel is 1.4 mm high." |
fantasai@3290 | 1122 | src=pixel1.png> |
fantasai@3290 | 1123 | |
fantasai@3290 | 1124 | <p class=caption>Showing that pixels must become larger if the viewing |
fantasai@3290 | 1125 | distance increases |
howcome@1729 | 1126 | </div> |
howcome@1729 | 1127 | |
fantasai@3290 | 1128 | <p>This second image illustrates the effect of a device's resolution on the |
fantasai@3290 | 1129 | pixel unit: an area of 1px by 1px is covered by a single dot in a |
fantasai@3290 | 1130 | low-resolution device (e.g. a typical computer display), while the same |
fantasai@3290 | 1131 | area is covered by 16 dots in a higher resolution device (such as a |
fantasai@3290 | 1132 | printer). |
fantasai@3290 | 1133 | |
fantasai@3290 | 1134 | <div class=figure> |
fantasai@3290 | 1135 | <p><img alt="This diagram illustrates the relationship between the |
fantasai@3290 | 1136 | reference pixel and device pixels (called "dots" below). The |
fantasai@3290 | 1137 | image depicts a high resolution (large dot density) laser printer output |
fantasai@3290 | 1138 | on the left and a low resolution monitor screen on the right. For the |
fantasai@3290 | 1139 | laser printer, one square reference pixel is implemented by 16 dots. For |
fantasai@3290 | 1140 | the monitor screen, one square reference pixel is implemented by a single |
fantasai@3290 | 1141 | dot." src=pixel2.png> |
fantasai@3290 | 1142 | |
fantasai@3290 | 1143 | <p class=caption>Showing that more device pixels (dots) are needed to |
fantasai@3290 | 1144 | cover a 1px by 1px area on a high-resolution device than on a low-res one |
fantasai@3290 | 1145 | |
howcome@1729 | 1146 | </div> |
howcome@1729 | 1147 | |
fantasai@3291 | 1148 | <h2 id=other-units><span class=secno>7. </span> Other Units</h2> |
fantasai@3291 | 1149 | |
fantasai@3291 | 1150 | <h3 id=angles><span class=secno>7.1. </span> Angles: the ‘<a |
fantasai@3291 | 1151 | href="#angle-value"><code class=css><angle></code></a>’ type |
fantasai@3291 | 1152 | and ‘<a href="#deg"><code class=css>deg</code></a>’, ‘<a |
fantasai@3290 | 1153 | href="#grad"><code class=css>grad</code></a>’, ‘<a |
fantasai@3290 | 1154 | href="#rad"><code class=css>rad</code></a>’, ‘<a |
fantasai@3291 | 1155 | href="#turn"><code class=css>turn</code></a>’ units</h3> |
fantasai@3290 | 1156 | |
fantasai@3290 | 1157 | <p>Angle values are <i>dimensions</i> denoted by <dfn |
fantasai@3290 | 1158 | id=angle-value><angle></dfn>. The angle unit identifiers are: |
fantasai@3290 | 1159 | |
fantasai@3290 | 1160 | <dl> |
fantasai@3290 | 1161 | <dt><dfn id=deg title=deg>deg</dfn> |
fantasai@3290 | 1162 | |
fantasai@3290 | 1163 | <dd>Degrees. There are 360 degrees in a full circle. |
fantasai@3290 | 1164 | |
fantasai@3290 | 1165 | <dt><dfn id=grad title=grad>grad</dfn> |
fantasai@3290 | 1166 | |
fantasai@3290 | 1167 | <dd>Gradians. There are 400 gradians in a full circle. |
fantasai@3290 | 1168 | |
fantasai@3290 | 1169 | <dt><dfn id=rad title=rad>rad</dfn> |
fantasai@3290 | 1170 | |
fantasai@3290 | 1171 | <dd>Radians. There are 2π radians in a full circle. <span |
fantasai@3290 | 1172 | class=issue>Who is going to use this anyway?</span> |
fantasai@3290 | 1173 | |
fantasai@3290 | 1174 | <dt><dfn id=turn title=turn>turn</dfn> |
fantasai@3290 | 1175 | |
fantasai@3290 | 1176 | <dd>Turns. There is 1 turn in a full circle. |
fantasai@3290 | 1177 | </dl> |
fantasai@3290 | 1178 | |
fantasai@3290 | 1179 | <p>For example, a right angle is ‘<code class=css>90deg</code>’ |
fantasai@3290 | 1180 | or ‘<code class=css>100grad</code>’ or ‘<code |
fantasai@3290 | 1181 | class=css>0.25turn</code>’ or approximately ‘<code |
fantasai@3290 | 1182 | class=css>1.570796326794897rad</code>’. |
fantasai@3290 | 1183 | |
fantasai@3291 | 1184 | <h3 id=time><span class=secno>7.2. </span> Times: the ‘<a |
fantasai@3291 | 1185 | href="#time-value"><code class=css><time></code></a>’ type and |
fantasai@3291 | 1186 | ‘<a href="#s"><code class=css>s</code></a>’, ‘<a |
fantasai@3291 | 1187 | href="#ms"><code class=css>ms</code></a>’ units</h3> |
fantasai@3290 | 1188 | |
fantasai@3290 | 1189 | <p>Time values are <i>dimensions</i> denoted by <dfn |
fantasai@3290 | 1190 | id=time-value><time></dfn>. The time unit identifiers are: |
fantasai@3290 | 1191 | |
fantasai@3290 | 1192 | <dl> |
fantasai@3290 | 1193 | <dt><dfn id=s title=s>s</dfn> |
fantasai@3290 | 1194 | |
fantasai@3290 | 1195 | <dd>Seconds. |
fantasai@3290 | 1196 | |
fantasai@3290 | 1197 | <dt><dfn id=ms title=ms>ms</dfn> |
fantasai@3290 | 1198 | |
fantasai@3290 | 1199 | <dd>Milliseconds. There are 1000 milliseconds in a second. |
fantasai@3290 | 1200 | </dl> |
fantasai@3290 | 1201 | |
fantasai@3290 | 1202 | <p>Properties may restrict the time value to some range. If the value is |
fantasai@3290 | 1203 | outside the allowed range, the declaration is invalid and must be <a |
fantasai@3290 | 1204 | href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignored</a>. |
fantasai@3290 | 1205 | |
fantasai@3291 | 1206 | <h3 id=frequencies-the-ltfrequencygt-type-and-h><span class=secno>7.3. |
fantasai@3291 | 1207 | </span>Frequencies: the ‘<a href="#frequency-value"><code |
fantasai@3291 | 1208 | class=css><frequency></code></a>’ type and ‘<a |
fantasai@3291 | 1209 | href="#hz"><code class=css>Hz</code></a>’, ‘<a |
fantasai@3291 | 1210 | href="#khz"><code class=css>kHz</code></a>’ units</h3> |
fantasai@3290 | 1211 | |
fantasai@3290 | 1212 | <p>Frequency values are <i>dimensions</i> denoted by <dfn |
fantasai@3290 | 1213 | id=frequency-value><frequency></dfn>. The frequency unit identifiers |
fantasai@3290 | 1214 | are: |
fantasai@3290 | 1215 | |
fantasai@3290 | 1216 | <dl> |
fantasai@3290 | 1217 | <dt><dfn id=hz title=Hz>Hz</dfn> |
fantasai@3290 | 1218 | |
fantasai@3290 | 1219 | <dd>Hertz. It represents the number of occurrences per second. |
fantasai@3290 | 1220 | |
fantasai@3290 | 1221 | <dt><dfn id=khz title=kHz>kHz</dfn> |
fantasai@3290 | 1222 | |
fantasai@3290 | 1223 | <dd>KiloHertz. A kiloHertz is 1000 Hertz. |
fantasai@3290 | 1224 | <p>For example, when representing sound pitches, 200Hz (or 200hz) is a |
fantasai@3290 | 1225 | bass sound, and 6kHz (or 6khz) is a treble sound.</p> |
fantasai@3290 | 1226 | |
fantasai@3290 | 1227 | <h4 id=the-calc-min-and-max-functions><span class=secno>7.3.1. </span>The |
fantasai@3290 | 1228 | ‘<a href="#calc"><code class=property>calc</code></a>’, |
fantasai@3290 | 1229 | ‘<a href="#min"><code class=property>min</code></a>’ and |
fantasai@3290 | 1230 | ‘<a href="#max"><code class=property>max</code></a>’ |
fantasai@3290 | 1231 | functions</h4> |
fantasai@3290 | 1232 | |
fantasai@3290 | 1233 | <p>The <dfn id=calc>calc()</dfn>, <dfn id=min>min()</dfn>, and <dfn |
fantasai@3290 | 1234 | id=max>max()</dfn> functions can be used wherever length, frequency, |
fantasai@3290 | 1235 | angle, time, or number values are allowed. |
fantasai@3290 | 1236 | |
fantasai@3290 | 1237 | <div class=example> |
fantasai@3290 | 1238 | <pre> |
howcome@1729 | 1239 | section { |
howcome@1729 | 1240 | float: left; |
howcome@1729 | 1241 | margin: 1em; border: solid 1px; |
howcome@1729 | 1242 | width: calc(100%/3 - 2*1em - 2*1px); |
howcome@1729 | 1243 | } |
howcome@1729 | 1244 | </pre> |
fantasai@3290 | 1245 | </div> |
fantasai@3290 | 1246 | |
fantasai@3290 | 1247 | <div class=example> |
fantasai@3290 | 1248 | <pre> |
howcome@1729 | 1249 | p { |
howcome@1729 | 1250 | margin: calc(1rem - 2px) calc(1rem - 1px); |
howcome@1729 | 1251 | } |
howcome@1729 | 1252 | </pre> |
fantasai@3290 | 1253 | </div> |
fantasai@3290 | 1254 | |
fantasai@3290 | 1255 | <div class=example> |
fantasai@3290 | 1256 | <pre> |
howcome@1729 | 1257 | p { font-size: min(10px, 3em) } |
howcome@1729 | 1258 | blockquote { font-size: max(30px, 3em) } |
howcome@1729 | 1259 | </pre> |
fantasai@3290 | 1260 | </div> |
fantasai@3290 | 1261 | |
fantasai@3290 | 1262 | <div class=example> |
fantasai@3290 | 1263 | <pre> |
howcome@1729 | 1264 | .box { width: min(10% + 20px, 300px) } |
howcome@1729 | 1265 | </pre> |
fantasai@3290 | 1266 | </div> |
fantasai@3290 | 1267 | |
fantasai@3290 | 1268 | <p>The expression language of these functions is described by the grammar |
fantasai@3290 | 1269 | and prose below. |
fantasai@3290 | 1270 | |
fantasai@3290 | 1271 | <pre> |
howcome@1729 | 1272 | S : calc | min | max; |
howcome@1729 | 1273 | calc : "calc(" S* sum ")" S*; |
howcome@1853 | 1274 | min : "min(" S* sum [ "," S* sum ]* ")" S*; |
howcome@1841 | 1275 | max : "max(" S* sum [ "," S* sum ]* ")" S*; |
howcome@1841 | 1276 | sum : product [ [ "+" | "-" ] S* product ]*; |
howcome@1729 | 1277 | product : unit [ [ "*" | "/" | "mod" ] S* unit ]*; |
howcome@1729 | 1278 | unit : ["+"|"-"]? [ NUMBER S* | DIMENSION S* | PERCENTAGE S* | |
howcome@1729 | 1279 | min | max | "(" S* sum ")" S* ]; |
howcome@1729 | 1280 | </pre> |
howcome@1853 | 1281 | |
fantasai@3290 | 1282 | <p>The context of the expression imposes a target type, which is one of |
fantasai@3290 | 1283 | length, frequency, angle, time, or number. NUMBER tokens are of type |
fantasai@3290 | 1284 | number. DIMENSION tokens have types of their units (‘<code |
fantasai@3290 | 1285 | class=property>cm</code>’ is length, ‘<a href="#deg"><code |
fantasai@3290 | 1286 | class=property>deg</code></a>’ is angle etc.); any DIMENSION whose |
fantasai@3290 | 1287 | type does not match the target type is not allowed and must be a parse |
fantasai@3290 | 1288 | error. If percentages are accepted in that context and convertible to |
fantasai@3290 | 1289 | the target type, a PERCENTAGE token in the expression has the target |
fantasai@3290 | 1290 | type; otherwise percentages are not allowed and must be a parse error. |
fantasai@3290 | 1291 | |
fantasai@3290 | 1292 | <p>To make expressions simpler, operators have restrictions on the types |
fantasai@3290 | 1293 | they accept. At each operator, the types of the left and right side have |
fantasai@3290 | 1294 | to be checked for these restrictions. If compatible, they return roughly |
fantasai@3290 | 1295 | as follows (the following ignores precedence rules on the operators for |
fantasai@3290 | 1296 | simplicity): |
fantasai@3290 | 1297 | |
fantasai@3290 | 1298 | <ol> |
fantasai@3290 | 1299 | <li>At ",", "+", "-":<br> |
fantasai@3290 | 1300 | check: both sides have the same type<br> |
fantasai@3290 | 1301 | return: that type |
fantasai@3290 | 1302 | |
fantasai@3290 | 1303 | <li>At "*":<br> |
fantasai@3290 | 1304 | check: at least one side is "number" <br> |
fantasai@3290 | 1305 | return: the type of the other side |
fantasai@3290 | 1306 | |
fantasai@3290 | 1307 | <li>At "/":<br> |
fantasai@3290 | 1308 | check: right side is "number"<br> |
fantasai@3290 | 1309 | return: the type of the left side |
fantasai@3290 | 1310 | </ol> |
fantasai@3290 | 1311 | |
fantasai@3290 | 1312 | <p>Division by zero is a parse error. |
fantasai@3290 | 1313 | |
fantasai@3290 | 1314 | <p>The value resulting from an expression must be clamped to the range |
fantasai@3290 | 1315 | allowed in the target context. |
fantasai@3290 | 1316 | |
fantasai@3290 | 1317 | <div class=example> These two are equivalentequivalent to ‘<code |
fantasai@3290 | 1318 | class=css>width: 0px</code>’ since widths smaller than 0px are not |
fantasai@3290 | 1319 | allowed. |
fantasai@3290 | 1320 | <pre> |
howcome@1853 | 1321 | width: calc(5px - 10px); |
howcome@1853 | 1322 | width: 0px; |
howcome@1853 | 1323 | </pre> |
fantasai@3290 | 1324 | </div> |
fantasai@3290 | 1325 | |
fantasai@3290 | 1326 | <p>Given the complexities of ‘<code |
fantasai@3290 | 1327 | class=property>width</code>’ and ‘<code |
fantasai@3290 | 1328 | class=property>height</code>’ on table cells and table elements, |
fantasai@3290 | 1329 | calc() expressions for ‘<code class=property>width</code>’ |
fantasai@3290 | 1330 | and ‘<code class=property>height</code>’ on table columns, |
fantasai@3290 | 1331 | table column groups, table rows, table row groups, and table cells in |
fantasai@3290 | 1332 | both auto and fixed layout tables are treated as if ‘<code |
fantasai@3290 | 1333 | class=property>auto</code>’ had been specified. |
fantasai@3290 | 1334 | |
fantasai@3292 | 1335 | <h3 id=ltcolorgt><span class=secno>7.4. </span><color></h3> |
fantasai@3290 | 1336 | |
fantasai@3290 | 1337 | <p><em>This section is not normative. The CSS3 Color module <a |
fantasai@3290 | 1338 | href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{!CSS3COLOR}}--></a> |
fantasai@3290 | 1339 | defines the CSS3 color values.</em> |
fantasai@3290 | 1340 | |
fantasai@3290 | 1341 | <p>Color values are denoted by <dfn id=ltcolorgt0><color></dfn> in |
fantasai@3290 | 1342 | the value definitions. |
fantasai@3290 | 1343 | |
fantasai@3290 | 1344 | <p>A <dfn id=color>color</dfn> value can either be a keyword, a numerical |
fantasai@3290 | 1345 | specification in a functional notation, or a numerical RGB specification |
fantasai@3290 | 1346 | in a hexadecimal notation. The hexadecimal notation is special shorthand |
fantasai@3290 | 1347 | format that allows compact color descriptions. |
fantasai@3290 | 1348 | |
fantasai@3290 | 1349 | <div class=example> |
fantasai@3290 | 1350 | <pre> |
howcome@1729 | 1351 | em { color: #F00 } |
howcome@1729 | 1352 | span.issue { color: red } |
howcome@1729 | 1353 | * { color: hsl(120, 75%, 75%) } |
howcome@1729 | 1354 | </pre> |
fantasai@3290 | 1355 | </div> |
fantasai@3290 | 1356 | |
fantasai@3292 | 1357 | <h3 id=ltattrgt><span class=secno>7.5. </span><attr></h3> |
fantasai@3290 | 1358 | |
fantasai@3290 | 1359 | <p class=issue>Describe the feature fully here, not just a delta from CSS |
fantasai@3290 | 1360 | 21. |
fantasai@3290 | 1361 | |
fantasai@3290 | 1362 | <p class=issue>When attr is set on a pseudo-element, it should apply to |
fantasai@3290 | 1363 | the originating element |
fantasai@3290 | 1364 | |
fantasai@3290 | 1365 | <p>In CSS2.1 <a href="#CSS21" |
fantasai@3290 | 1366 | rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, the ‘<code |
fantasai@3290 | 1367 | class=css>attr()</code>’ expression always returns a string. In |
fantasai@3290 | 1368 | CSS3, the ‘<code class=css>attr()</code>’ expression can |
fantasai@3290 | 1369 | return many different types. The new syntax for the attr() expression |
fantasai@3290 | 1370 | is: |
fantasai@3290 | 1371 | |
fantasai@3290 | 1372 | <pre> |
howcome@1729 | 1373 | 'attr(' ident [ ',' <type> [ ',' <value> ]? ]? ')' |
howcome@1729 | 1374 | </pre> |
howcome@1729 | 1375 | |
fantasai@3290 | 1376 | <p>The first argument represents the attribute name. The value of the |
fantasai@3290 | 1377 | attribute with that name on the element whose computed values are being |
fantasai@3290 | 1378 | computed is used as the value of the expression, according to the rules |
fantasai@3290 | 1379 | given below. |
fantasai@3290 | 1380 | |
fantasai@3290 | 1381 | <p>The first argument accepts an optional namespace prefix to identify |
fantasai@3290 | 1382 | the namespace of the attribute. The namespace prefix and the attribute |
fantasai@3290 | 1383 | name is separated by ‘<code class=css>|</code>’, with no |
fantasai@3290 | 1384 | whitespace before or after the separator <a href="#CSS3NAMESPACE" |
fantasai@3290 | 1385 | rel=biblioentry>[CSS3NAMESPACE]<!--{{CSS3NAMESPACE}}--></a>. |
fantasai@3290 | 1386 | |
fantasai@3290 | 1387 | <p>The second argument (which is optional but must be present if the |
fantasai@3290 | 1388 | third argument is present) is a <type> and tells the UA how to |
fantasai@3290 | 1389 | interpret the attribute value. It may be one of the values from the list |
fantasai@3290 | 1390 | below. |
fantasai@3290 | 1391 | |
fantasai@3290 | 1392 | <p>The third argument (which is optional) is a CSS value which must be |
fantasai@3290 | 1393 | valid where the attr() expression is placed. If it is not valid, then |
fantasai@3290 | 1394 | the whole attr() expression is invalid. |
fantasai@3290 | 1395 | |
fantasai@3290 | 1396 | <p>If the attribute named by the first argument is missing, cannot be |
fantasai@3290 | 1397 | parsed, or is invalid for the property, then the value returned by |
fantasai@3290 | 1398 | attr() will be the third argument, or, if the third argument is absent, |
fantasai@3290 | 1399 | will be the value given as the default for the relevant type in the list |
fantasai@3290 | 1400 | below. |
fantasai@3290 | 1401 | |
fantasai@3290 | 1402 | <dl> |
fantasai@3290 | 1403 | <dt>string |
fantasai@3290 | 1404 | |
fantasai@3290 | 1405 | <dd>The attribute value will be interpreted as the contents of a CSS |
fantasai@3290 | 1406 | string. The default is the empty string. |
fantasai@3290 | 1407 | |
fantasai@3290 | 1408 | <dt>color |
fantasai@3290 | 1409 | |
fantasai@3290 | 1410 | <dd>The attribute value will be interpreted as a CSS <color> value. |
fantasai@3290 | 1411 | The default is UA dependent but must be the same as the initial value |
fantasai@3290 | 1412 | of the ‘<a href="#color"><code |
fantasai@3290 | 1413 | class=property>color</code></a>’ property. |
fantasai@3290 | 1414 | |
fantasai@3290 | 1415 | <dt>url |
fantasai@3290 | 1416 | |
fantasai@3290 | 1417 | <dd>The attribute value will be interpreted as the URI part of a |
fantasai@3292 | 1418 | ‘<a href="#url"><code class=css>url()</code></a>’ |
fantasai@3292 | 1419 | expression. The default is a UA-dependent URI defined to point to a |
fantasai@3292 | 1420 | non-existent document with a generic error condition. (i.e. it |
fantasai@3292 | 1421 | shouldn't be an FTP URI that causes a DNS error, or an HTTP URI that |
fantasai@3292 | 1422 | results in a 404, it should be a nondescript error condition.) |
fantasai@3290 | 1423 | |
fantasai@3290 | 1424 | <dt>integer |
fantasai@3290 | 1425 | |
fantasai@3290 | 1426 | <dd>The attribute value will be interpreted as a CSS integer. The |
fantasai@3290 | 1427 | default is 0. The default should also be used if the property in |
fantasai@3290 | 1428 | question only accepts integers within a certain range and the attribute |
fantasai@3290 | 1429 | is out of range. |
fantasai@3290 | 1430 | |
fantasai@3290 | 1431 | <dt>number |
fantasai@3290 | 1432 | |
fantasai@3290 | 1433 | <dd>The attribute value will be interpreted as a CSS number. The default |
fantasai@3290 | 1434 | is 0.0. The default should also be used if the property in question |
fantasai@3290 | 1435 | only accepts numbers within a certain range and the attribute is out of |
fantasai@3290 | 1436 | range. |
fantasai@3290 | 1437 | |
fantasai@3290 | 1438 | <dt>length, angle, time, frequency |
fantasai@3290 | 1439 | |
fantasai@3290 | 1440 | <dd>The attribute value will be interpreted as a CSS length, angle, time |
fantasai@3290 | 1441 | or frequency (respectively), and the unit identifier (if any) will |
fantasai@3290 | 1442 | appear in the attribute value. The default is 0. The default should |
fantasai@3290 | 1443 | also be used if the property in question only accepts values within a |
fantasai@3290 | 1444 | certain range (e.g. positive lengths or angles from 0 to 90deg) and the |
fantasai@3290 | 1445 | attribute is out of range (e.g. a negative length or 180deg). |
fantasai@3290 | 1446 | |
fantasai@3290 | 1447 | <dt>em, ex, px, gr, rem, vw, vh, vm, mm, cm, in, pt, pc, deg, grad, rad, |
fantasai@3290 | 1448 | ms, s, Hz, kHz, % |
fantasai@3290 | 1449 | |
fantasai@3290 | 1450 | <dd>The attribute value will be interpreted as a float, with the given |
fantasai@3290 | 1451 | type suffixed as a unit. The default is 0 in the relevant units. |
fantasai@3290 | 1452 | </dl> |
fantasai@3290 | 1453 | |
fantasai@3290 | 1454 | <p class=issue>Should there also be a "keyword" type to, e.g., support |
fantasai@3290 | 1455 | ‘<code class=css>float: attr(align)</code>’</p> |
fantasai@3290 | 1456 | |
fantasai@3292 | 1457 | <p>If the <type> is missing, ‘<code |
fantasai@3292 | 1458 | class=property>string</code>’ is implied. |
fantasai@3290 | 1459 | |
fantasai@3290 | 1460 | <p class=issue>Ideally, it shouldn't be necessary to specify the type if |
fantasai@3290 | 1461 | it is obvious. For example, this should be valid: "<tt>background-image: |
fantasai@3290 | 1462 | attr(href);</tt>". This could be described as: <q>If the property only |
fantasai@3290 | 1463 | accepts one type of value (aside from ‘<code |
fantasai@3290 | 1464 | class=property>inherit</code>’ and ‘<code |
fantasai@3290 | 1465 | class=property>initial</code>’), that type is implied</q>. |
fantasai@3290 | 1466 | |
fantasai@3290 | 1467 | <p>The attr() form is only valid if the type given (or implied, if it is |
fantasai@3290 | 1468 | missing) is valid for the property. For example, all of the following |
fantasai@3290 | 1469 | are invalid and would cause a parse-time error (and thus cause the |
fantasai@3290 | 1470 | relevant declaration, in this case all of them, to be ignored): |
fantasai@3290 | 1471 | |
fantasai@3290 | 1472 | <div class="illegal example"> |
fantasai@3290 | 1473 | <p style="display:none">Illegal Examples: |
fantasai@3290 | 1474 | |
fantasai@3290 | 1475 | <pre> |
howcome@1729 | 1476 | content: attr(title, color); /* 'content' doesn't accept colors */ |
howcome@1729 | 1477 | |
howcome@1729 | 1478 | content: attr(end-of-quote, string, inherit) close-quote; /* the |
howcome@1729 | 1479 | 'inherit' value is not allowed there, since the result would be |
howcome@1729 | 1480 | 'inherit close-quote', which is invalid. */ |
howcome@1729 | 1481 | |
howcome@1729 | 1482 | margin: attr(vertical, length) attr(horizontal, deg); /* deg |
howcome@1729 | 1483 | units are not valid at that point */ |
howcome@1729 | 1484 | <!-- |
howcome@1729 | 1485 | font: attr(weight, integer) attr(size, length)/attr(height, |
howcome@1729 | 1486 | integer) attr(family, string); /* invalid because |
howcome@1729 | 1487 | <'font-weight'>s are not integers, but identifiers. */ |
howcome@1729 | 1488 | --> |
howcome@1729 | 1489 | color: attr(color); /* 'color' doesn't accept strings */ |
howcome@1729 | 1490 | </pre> |
fantasai@3290 | 1491 | </div> |
fantasai@3290 | 1492 | |
fantasai@3290 | 1493 | <p>The attr() expression cannot return everything, for example it cannot |
fantasai@3290 | 1494 | do counters, named strings, quotes, or values such as ‘<code |
fantasai@3290 | 1495 | class=property>auto</code>’, ‘<code |
fantasai@3290 | 1496 | class=property>nowrap</code>’, or ‘<code |
fantasai@3290 | 1497 | class=property>baseline</code>’. This is intentional, as the |
fantasai@3290 | 1498 | intent of the ‘<code class=css>attr()</code>’ expression is |
fantasai@3290 | 1499 | not to make it possible to describe a presentational language's |
fantasai@3290 | 1500 | formatting using CSS, but to enable CSS to take semantic data into |
fantasai@3290 | 1501 | account. |
fantasai@3290 | 1502 | |
fantasai@3290 | 1503 | <p>Note that the default value need not be of the type given. For |
fantasai@3290 | 1504 | instance, if the type required of the attribute by the author is |
fantasai@3290 | 1505 | ‘<code class=property>px</code>’, the default could still be |
fantasai@3290 | 1506 | ‘<code class=css>5em</code>’. |
fantasai@3290 | 1507 | |
fantasai@3290 | 1508 | <div class=example> |
fantasai@3290 | 1509 | <p>Examples: |
fantasai@3290 | 1510 | |
fantasai@3290 | 1511 | <pre> |
howcome@1729 | 1512 | <stock> |
howcome@1729 | 1513 | <wood length="12"/> |
howcome@1729 | 1514 | <wood length="5"/> |
howcome@1729 | 1515 | <metal length="19"/> |
howcome@1729 | 1516 | <wood length="4"/> |
howcome@1729 | 1517 | </stock> |
howcome@1729 | 1518 | |
howcome@1729 | 1519 | stock::before { |
howcome@1729 | 1520 | display: block; |
howcome@1729 | 1521 | content: "To scale, the lengths of materials in stock are:"; |
howcome@1729 | 1522 | } |
howcome@1729 | 1523 | stock > * { |
howcome@1729 | 1524 | display: block; |
howcome@1729 | 1525 | width: attr(length, em); /* default 0 */ |
howcome@1729 | 1526 | height: 1em; |
howcome@1729 | 1527 | border: solid thin; |
howcome@1729 | 1528 | margin: 0.5em; |
howcome@1729 | 1529 | } |
howcome@1729 | 1530 | wood { |
howcome@1729 | 1531 | background: orange url(wood.png); |
howcome@1729 | 1532 | } |
howcome@1729 | 1533 | metal { |
howcome@1729 | 1534 | background: silver url(metal.png); |
howcome@1729 | 1535 | } |
howcome@1729 | 1536 | |
howcome@1729 | 1537 | /* this also uses a possible extension to the 'content' property |
howcome@1729 | 1538 | to handle replaced content and alternatives to unavailable, |
howcome@1729 | 1539 | corrupted or unsupported content */ |
howcome@1729 | 1540 | img { |
howcome@1729 | 1541 | content: replaced attr(src, url), attr(alt, string, none); |
howcome@1729 | 1542 | height: attr(height, px, auto); |
howcome@1729 | 1543 | width: attr(width, px, auto); |
howcome@1729 | 1544 | } |
howcome@1729 | 1545 | </pre> |
fantasai@3290 | 1546 | </div> |
fantasai@3290 | 1547 | |
fantasai@3290 | 1548 | <p>The attr() expression cannot currently fall back onto another |
fantasai@3290 | 1549 | attribute. Future versions of CSS may extend attr() in this direction. |
fantasai@3290 | 1550 | |
fantasai@3290 | 1551 | <p class=issue>Should ‘<code class=css>attr()</code>’ be |
fantasai@3290 | 1552 | allowed on any property, in any source language? For example, do we |
fantasai@3290 | 1553 | expect UAs to honor this rule for HTML documents?: <tt>P[COLOR] { color: |
fantasai@3290 | 1554 | attr(COLOR, color) }</tt>. |
fantasai@3290 | 1555 | |
fantasai@3292 | 1556 | <h3 id=ltimagegt><span class=secno>7.6. </span><image></h3> |
fantasai@3290 | 1557 | |
fantasai@3290 | 1558 | <p>TBD. <!-- |
fantasai@3273 | 1559 | <h4>The 'counter' function</h4> |
howcome@1729 | 1560 | |
howcome@1729 | 1561 | <p><dfn title="<counter>, definition of">Counters</dfn> are denoted by |
fantasai@3273 | 1562 | identifiers (see the <span class="property">'counter-increment'</span> and |
fantasai@3273 | 1563 | <span class="property">'counter-reset'</span> properties). To refer to the |
fantasai@3273 | 1564 | value of a counter, the notation <dfn>'counter(<identifier>)'</dfn> or |
fantasai@3273 | 1565 | <dfn>'counter(<identifier>, <list-style-type>)'</dfn> is used. |
fantasai@3273 | 1566 | The default style is 'decimal'.</p> |
howcome@1729 | 1567 | |
howcome@1729 | 1568 | <p>To refer to a sequence of nested counters of the same name, the notation |
fantasai@3273 | 1569 | is 'counters(<identifier>, <string>)' or |
fantasai@3273 | 1570 | 'counters(<identifier>, <string>, <list-style-type>)'. See |
howcome@1729 | 1571 | "Nested counters and scope" [add ref] in the chapter on generated content |
howcome@1729 | 1572 | [add ref].</p> |
howcome@1729 | 1573 | |
howcome@1729 | 1574 | <p>In CSS2.1, the values of counters can only be referred to from the <span |
fantasai@3273 | 1575 | class="property">'content'</span> property. Note that 'none' is a possible |
fantasai@3273 | 1576 | <list-style-type>: 'counter(x, none)' yields an empty string.</p> |
howcome@1729 | 1577 | |
howcome@1729 | 1578 | <div class="example"> |
howcome@1729 | 1579 | <p style="display:none">Example(s):</p> |
howcome@1729 | 1580 | |
howcome@1729 | 1581 | <p>Here is a style sheet that numbers paragraphs (P) for each chapter (H1). |
howcome@1729 | 1582 | The paragraphs are numbered with roman numerals, followed by a period and a |
howcome@1729 | 1583 | space:</p> |
howcome@1729 | 1584 | |
howcome@1729 | 1585 | <pre> |
howcome@1729 | 1586 | p { counter-increment: par-num } |
howcome@1729 | 1587 | h1 { counter-reset: par-num } |
howcome@1729 | 1588 | p:before { content: counter(par-num, upper-roman) ". " } |
howcome@1729 | 1589 | </pre> |
howcome@1729 | 1590 | </div> |
howcome@1729 | 1591 | --> |
fantasai@3290 | 1592 | |
fantasai@3290 | 1593 | |
fantasai@3292 | 1594 | <h3 id=ltfractiongt><span class=secno>7.7. </span><fraction></h3> |
fantasai@3290 | 1595 | |
fantasai@3290 | 1596 | <p>Some properties accept a series of length values that, in sum, should |
fantasai@3290 | 1597 | add up to a certain length. To take up any remaining space, fractions |
fantasai@3290 | 1598 | can be used. |
fantasai@3290 | 1599 | |
fantasai@3292 | 1600 | <h4 id=the-fr-unit><span class=secno>7.7.1. </span>The ‘<code |
fantasai@3290 | 1601 | class=property>fr</code>’ unit</h4> |
fantasai@3290 | 1602 | |
fantasai@3290 | 1603 | <p>The <dfn id=fr title="fr (unit)">fr</dfn> unit is used to distribute |
fantasai@3290 | 1604 | any remaining space in a series of length values. If multiple fractions |
fantasai@3290 | 1605 | are specified, they take up space proportionally to their numeric value. |
fantasai@3290 | 1606 | |
fantasai@3290 | 1607 | |
fantasai@3290 | 1608 | <div class=example> |
fantasai@3290 | 1609 | <pre> |
howcome@1729 | 1610 | border-parts: 10px 1fr 10px; |
howcome@1729 | 1611 | border-parts: 10px 1fr 10px 1fr 10px; |
howcome@1729 | 1612 | border-parts: 10px 2fr 10px 2fr 10px; |
howcome@1729 | 1613 | </pre> |
fantasai@3290 | 1614 | </div> |
fantasai@3290 | 1615 | |
fantasai@3290 | 1616 | <p>The ‘<code class=css>fr</code>’ unit can only be used in |
fantasai@3290 | 1617 | combination with regular length units. |
fantasai@3290 | 1618 | |
fantasai@3292 | 1619 | <h3 id=ltgridgt><span class=secno>7.8. </span><grid></h3> |
fantasai@3290 | 1620 | |
fantasai@3290 | 1621 | <p>A grid is a set of invisible vertical and horizontal lines that can be |
fantasai@3290 | 1622 | used to align content. In CSS3, a grid lines can be established |
fantasai@3290 | 1623 | implicitly or explicitly <a href="#CSS3COL" |
fantasai@3290 | 1624 | rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> <a href="#CSS3GRID" |
fantasai@3290 | 1625 | rel=biblioentry>[CSS3GRID]<!--{{!CSS3GRID}}--></a>. In any case, the |
fantasai@3290 | 1626 | distance between grid lines can be referred to by the ‘<code |
fantasai@3290 | 1627 | class=css>gr</code>’ unit. |
fantasai@3290 | 1628 | |
fantasai@3292 | 1629 | <h4 id=the-gr-unit><span class=secno>7.8.1. </span>The ‘<code |
fantasai@3290 | 1630 | class=property>gr</code>’ unit</h4> |
fantasai@3290 | 1631 | |
fantasai@3290 | 1632 | <p>The <dfn id=gr title="gr (unit)">gr</dfn> unit is used to position |
fantasai@3290 | 1633 | elements in relation to grid lines. |
fantasai@3290 | 1634 | |
fantasai@3290 | 1635 | <div class=example> |
fantasai@3290 | 1636 | <pre> |
howcome@1729 | 1637 | img { |
howcome@1729 | 1638 | float: top left multicol; |
howcome@1729 | 1639 | float-offset: 2gr; |
howcome@1729 | 1640 | width: 1gr } |
howcome@1729 | 1641 | } |
howcome@1729 | 1642 | </pre> |
fantasai@3290 | 1643 | </div> |
fantasai@3290 | 1644 | |
fantasai@3290 | 1645 | <p>Grid lines can be laid out in uneven patterns. Therefore, the |
fantasai@3290 | 1646 | ‘<code class=css>gr</code>’ unit is not linear. |
fantasai@3290 | 1647 | |
fantasai@3290 | 1648 | <div class=example> |
fantasai@3290 | 1649 | <p>For example, "2gr" is not necessarily twice as long as "1gr". |
fantasai@3290 | 1650 | </div> |
fantasai@3290 | 1651 | <!-- |
howcome@1729 | 1652 | |
howcome@1729 | 1653 | <h3>Special cases</h3> |
howcome@1729 | 1654 | |
howcome@1729 | 1655 | <p>Two common types of values fall outside the types |
howcome@1729 | 1656 | described above: the value for font families and the hexadecimal color |
howcome@1729 | 1657 | notation. |
howcome@1729 | 1658 | |
howcome@1729 | 1659 | <h4>Font families</h4> |
howcome@1729 | 1660 | |
fantasai@3273 | 1661 | <p>The <span class="property">'font'</span> |
fantasai@3273 | 1662 | and <span class="property">'font-family'</span> properties accept a |
howcome@1729 | 1663 | comma-separated list of font families. Font families can either be the |
howcome@1729 | 1664 | name of a certain font, or it can be one of |
fantasai@3273 | 1665 | five <em class="index">generic font families</em>: 'serif', |
fantasai@3273 | 1666 | 'sans-serif', 'cursive','fantasy', and 'monospace'. Font family names |
howcome@1729 | 1667 | are like strings, except that the quotes around them may be omitted. |
howcome@1729 | 1668 | If quoting is omitted, any white space characters before and after the |
howcome@1729 | 1669 | font name are ignored and any sequence of white space characters |
howcome@1729 | 1670 | inside the font name is converted to a single space. Font family names |
fantasai@3273 | 1671 | that happen to be the same as a keyword value (e.g. 'initial', |
fantasai@3273 | 1672 | 'inherit', 'default', 'serif', 'sans-serif', 'monospace', 'fantasy', |
fantasai@3273 | 1673 | and 'cursive') must be quoted to prevent confusion with the keywords |
howcome@1729 | 1674 | with the same names. UAs must not consider these keywords as matching |
fantasai@3273 | 1675 | the ''<family-name>'' type. |
howcome@1729 | 1676 | |
howcome@1729 | 1677 | <p>Generic font family names are keywords and must not be quoted. |
howcome@1729 | 1678 | |
howcome@1729 | 1679 | <div class="example"> |
howcome@1729 | 1680 | <pre>body { font-family: "Helvetica", "Univers", "Arial", sans-serif }</pre> |
howcome@1729 | 1681 | </div> |
howcome@1729 | 1682 | --> |
fantasai@3290 | 1683 | |
fantasai@3290 | 1684 | <h2 id=specified-computed-used-and-actual-value><span class=secno>8. |
fantasai@3290 | 1685 | </span>Specified, computed, used, and actual values</h2> |
fantasai@3290 | 1686 | |
fantasai@3290 | 1687 | <p>The final value of a CSS3 property for a given element is the result |
fantasai@3290 | 1688 | of a four-step calculation. First, cascading and inheritance yields the |
fantasai@3290 | 1689 | <a href="#specified-value"><em>specified value</em></a> <a |
fantasai@3290 | 1690 | href="#CSS3CASCADE" |
fantasai@3290 | 1691 | rel=biblioentry>[CSS3CASCADE]<!--{{!CSS3CASCADE}}--></a>. Second, |
fantasai@3290 | 1692 | relative values are computed into absolute values as far as possible |
fantasai@3290 | 1693 | without formatting the document, thereby yielding the <a |
fantasai@3290 | 1694 | href="#computed-value"><em>computed value</em></a>. The computed value |
fantasai@3290 | 1695 | is transformed into the <a href="#used-value"><em>used value</em></a> in |
fantasai@3290 | 1696 | the formatting process. Finally, the computed value is transformed to |
fantasai@3290 | 1697 | the <a href="#actual-value"><em>actual value</em></a> based on |
fantasai@3290 | 1698 | constraints in the user agent.</p> |
fantasai@3290 | 1699 | |
fantasai@3290 | 1700 | <h3 id=finding-the-specified-value><span class=secno>8.1. </span>Finding |
fantasai@3290 | 1701 | the <dfn id=specified-value>specified value</dfn></h3> |
fantasai@3290 | 1702 | |
fantasai@3290 | 1703 | <p>The <a href="#specified-value"><em>specified value</em></a> is the |
fantasai@3290 | 1704 | output of the cascading and inheritance process <a href="#CSS3CASCADE" |
fantasai@3290 | 1705 | rel=biblioentry>[CSS3CASCADE]<!--{{!CSS3CASCADE}}--></a>. |
fantasai@3290 | 1706 | |
fantasai@3290 | 1707 | <h3 id=finding-the-computed-value><span class=secno>8.2. </span>Finding |
fantasai@3290 | 1708 | the <dfn id=computed-value>computed value</dfn></h3> |
fantasai@3290 | 1709 | |
fantasai@3290 | 1710 | <p>Specified values may be absolute (i.e., they are not specified |
fantasai@3290 | 1711 | relative to another value, as in ‘<code |
fantasai@3290 | 1712 | class=property>red</code>’ or ‘<code |
fantasai@3290 | 1713 | class=css>2mm</code>’) or relative (i.e., they are specified |
fantasai@3290 | 1714 | relative to another value, as in ‘<code |
fantasai@3290 | 1715 | class=property>auto</code>’, ‘<code |
fantasai@3290 | 1716 | class=css>2em</code>’). For absolute values, no processing is |
fantasai@3290 | 1717 | needed to find the computed value.</p> |
fantasai@3290 | 1718 | |
fantasai@3290 | 1719 | <p>For relative values, on the other hand, computation is necessary to |
fantasai@3290 | 1720 | find the computed values: percentages must be multiplied by a reference |
fantasai@3290 | 1721 | value (each property defines which value that is), values with relative |
fantasai@3290 | 1722 | units (em, ex, px) must be made absolute by multiplying with the |
fantasai@3290 | 1723 | appropriate font or pixel size, ‘<code |
fantasai@3290 | 1724 | class=property>auto</code>’ values must be computed by the |
fantasai@3290 | 1725 | formulas given with each property, certain keywords (e.g., ‘<code |
fantasai@3290 | 1726 | class=property>smaller</code>’, ‘<code |
fantasai@3290 | 1727 | class=property>bolder</code>’) must be replaced according to their |
fantasai@3290 | 1728 | definitions. See example (f), (g) and (h) in the table below.</p> |
fantasai@3290 | 1729 | |
fantasai@3290 | 1730 | <p>Also, relative URIs are computed into absolute URIs at this stage. The |
fantasai@3290 | 1731 | computed value of invalid and absolute URIs is the same as the specified |
fantasai@3290 | 1732 | value. |
fantasai@3290 | 1733 | |
fantasai@3290 | 1734 | <h3 id=finding-the-used-value><span class=secno>8.3. </span>Finding the |
fantasai@3290 | 1735 | <dfn id=used-value>used value</dfn></h3> |
fantasai@3290 | 1736 | |
fantasai@3290 | 1737 | <p>Computed values are processed as far as possible without formatting |
fantasai@3290 | 1738 | the document. Some values, however, can only be determined when the |
fantasai@3290 | 1739 | document is being laid out. For example, if the width of an element is |
fantasai@3290 | 1740 | set to be a certain percentage of its containing block, the width cannot |
fantasai@3290 | 1741 | be determined until the width of the containing block has been |
fantasai@3290 | 1742 | determined. The used value is the result of taking the computed value |
fantasai@3290 | 1743 | and resolving any remaining dependencies into an absolute value. |
fantasai@3290 | 1744 | |
fantasai@3290 | 1745 | <h3 id=finding-the-actual-value><span class=secno>8.4. </span>Finding the |
fantasai@3290 | 1746 | <dfn id=actual-value>actual value</dfn></h3> |
fantasai@3290 | 1747 | |
fantasai@3290 | 1748 | <p>A used value is in principle ready to be used, but a user agent may |
fantasai@3290 | 1749 | not be able to make use of the value in a given environment. For |
fantasai@3290 | 1750 | example, a user agent may only be able to render borders with integer |
fantasai@3290 | 1751 | pixel widths and may therefore have to approximate the computed width. |
fantasai@3290 | 1752 | Also, the font size of an element may need adjustment based on the |
fantasai@3290 | 1753 | availability of fonts or the value of the ‘<code |
fantasai@3290 | 1754 | class=property>font-size-adjust</code>’ property. The actual value |
fantasai@3290 | 1755 | is the computed value after adjustments have been made. |
fantasai@3290 | 1756 | |
fantasai@3290 | 1757 | <p>By probing the actual values of elements, much can be learned about |
fantasai@3290 | 1758 | how the document is laid out. However, not all information is recorded |
fantasai@3290 | 1759 | in the actual values. For example, the actual value of the ‘<code |
fantasai@3290 | 1760 | class=property>page-break-after</code>’ property does not reflect |
fantasai@3290 | 1761 | whether there is a page break or not after the element. Similarly, the |
fantasai@3290 | 1762 | actual value of ‘<code class=property>orphans</code>’ does |
fantasai@3290 | 1763 | not reflect how many orphan lines there is in a certain element. See |
fantasai@3290 | 1764 | examples (j) and (k) in the table below. |
fantasai@3290 | 1765 | |
fantasai@3290 | 1766 | <table> |
fantasai@3290 | 1767 | <tbody> |
fantasai@3290 | 1768 | <tr> |
fantasai@3290 | 1769 | <th>Example |
fantasai@3290 | 1770 | |
fantasai@3290 | 1771 | <th>Winning declaration |
fantasai@3290 | 1772 | |
fantasai@3290 | 1773 | <th>Property</th> |
fantasai@3290 | 1774 | <!-- <th>Cascaded value</th> --> |
fantasai@3290 | 1775 | |
fantasai@3290 | 1776 | <th>Specified value |
fantasai@3290 | 1777 | |
fantasai@3290 | 1778 | <th>Computed value |
fantasai@3290 | 1779 | |
fantasai@3290 | 1780 | <th>Used value |
fantasai@3290 | 1781 | |
fantasai@3290 | 1782 | <th>Actual value |
fantasai@3290 | 1783 | |
fantasai@3290 | 1784 | <tr> |
fantasai@3290 | 1785 | <td>a |
fantasai@3290 | 1786 | |
fantasai@3290 | 1787 | <td><tt class=declaration>text-align: left</tt> |
fantasai@3290 | 1788 | |
fantasai@3290 | 1789 | <td>text-align</td> |
fantasai@3290 | 1790 | <!-- <td>left</td>--> |
fantasai@3290 | 1791 | |
fantasai@3290 | 1792 | <td>left |
fantasai@3290 | 1793 | |
fantasai@3290 | 1794 | <td>left |
fantasai@3290 | 1795 | |
fantasai@3290 | 1796 | <td>left |
fantasai@3290 | 1797 | |
fantasai@3290 | 1798 | <td>left |
fantasai@3290 | 1799 | |
fantasai@3290 | 1800 | <tr> |
fantasai@3290 | 1801 | <td>b |
fantasai@3290 | 1802 | |
fantasai@3290 | 1803 | <td><tt class=declaration>border-width: inherit</tt> |
fantasai@3290 | 1804 | |
fantasai@3290 | 1805 | <td>border-top-width, border-right-width, border-bottom-width, |
fantasai@3290 | 1806 | border-left-width</td> |
fantasai@3290 | 1807 | <!-- <td>inherit</td> --> |
fantasai@3290 | 1808 | |
fantasai@3290 | 1809 | <td class=say>4.2px |
fantasai@3290 | 1810 | |
fantasai@3290 | 1811 | <td>4.2px |
fantasai@3290 | 1812 | |
fantasai@3290 | 1813 | <td>4.2px |
fantasai@3290 | 1814 | |
fantasai@3290 | 1815 | <td>4px |
fantasai@3290 | 1816 | |
fantasai@3290 | 1817 | <tr> |
fantasai@3290 | 1818 | <td>c |
fantasai@3290 | 1819 | |
fantasai@3290 | 1820 | <td>(no winning declaration) |
fantasai@3290 | 1821 | |
fantasai@3290 | 1822 | <td>width</td> |
fantasai@3290 | 1823 | <!-- <td>(no specified value)</td>--> |
fantasai@3290 | 1824 | |
fantasai@3290 | 1825 | <td>auto (initial value) |
fantasai@3290 | 1826 | |
fantasai@3290 | 1827 | <td>auto |
fantasai@3290 | 1828 | |
fantasai@3290 | 1829 | <td>120px |
fantasai@3290 | 1830 | |
fantasai@3290 | 1831 | <td>120px |
fantasai@3290 | 1832 | |
fantasai@3290 | 1833 | <tr> |
fantasai@3290 | 1834 | <td>d |
fantasai@3290 | 1835 | |
fantasai@3290 | 1836 | <td><tt class=declaration>list-style-position: inherit</tt> |
fantasai@3290 | 1837 | |
fantasai@3290 | 1838 | <td>list-style-position</td> |
fantasai@3290 | 1839 | <!-- <td>inherit</td> --> |
fantasai@3290 | 1840 | |
fantasai@3290 | 1841 | <td class=say>inside |
fantasai@3290 | 1842 | |
fantasai@3290 | 1843 | <td>inside |
fantasai@3290 | 1844 | |
fantasai@3290 | 1845 | <td>inside |
fantasai@3290 | 1846 | |
fantasai@3290 | 1847 | <td>inside |
fantasai@3290 | 1848 | |
fantasai@3290 | 1849 | <tr> |
fantasai@3290 | 1850 | <td>e |
fantasai@3290 | 1851 | |
fantasai@3290 | 1852 | <td><tt class=declaration>list-style-position: initial</tt> |
fantasai@3290 | 1853 | |
fantasai@3290 | 1854 | <td>list-style-position</td> |
fantasai@3290 | 1855 | <!-- <td>initial</td>--> |
fantasai@3290 | 1856 | |
fantasai@3290 | 1857 | <td>outside (initial value) |
fantasai@3290 | 1858 | |
fantasai@3290 | 1859 | <td>outside |
fantasai@3290 | 1860 | |
fantasai@3290 | 1861 | <td>outside |
fantasai@3290 | 1862 | |
fantasai@3290 | 1863 | <td>outside |
fantasai@3290 | 1864 | |
fantasai@3290 | 1865 | <tr> |
fantasai@3290 | 1866 | <td>f |
fantasai@3290 | 1867 | |
fantasai@3290 | 1868 | <td><tt class=declaration>font-size: 1.2em</tt> |
fantasai@3290 | 1869 | |
fantasai@3290 | 1870 | <td>font-size</td> |
fantasai@3290 | 1871 | <!-- <td>1.2em</td>--> |
fantasai@3290 | 1872 | |
fantasai@3290 | 1873 | <td>1.2em |
fantasai@3290 | 1874 | |
fantasai@3290 | 1875 | <td class=say>14.1px |
fantasai@3290 | 1876 | |
fantasai@3290 | 1877 | <td>14.1px |
fantasai@3290 | 1878 | |
fantasai@3290 | 1879 | <td>14px |
fantasai@3290 | 1880 | |
fantasai@3290 | 1881 | <tr> |
fantasai@3290 | 1882 | <td>g |
fantasai@3290 | 1883 | |
fantasai@3290 | 1884 | <td><tt class=declaration>width: 80%</tt> |
fantasai@3290 | 1885 | |
fantasai@3290 | 1886 | <td>width</td> |
fantasai@3290 | 1887 | <!-- <td>80%</td>--> |
fantasai@3290 | 1888 | |
fantasai@3290 | 1889 | <td>80% |
fantasai@3290 | 1890 | |
fantasai@3290 | 1891 | <td>80% |
fantasai@3290 | 1892 | |
fantasai@3290 | 1893 | <td class=say>354.2px |
fantasai@3290 | 1894 | |
fantasai@3290 | 1895 | <td>354px |
fantasai@3290 | 1896 | |
fantasai@3290 | 1897 | <tr> |
fantasai@3290 | 1898 | <td>h |
fantasai@3290 | 1899 | |
fantasai@3290 | 1900 | <td><tt class=declaration>width: auto</tt> |
fantasai@3290 | 1901 | |
fantasai@3290 | 1902 | <td>width</td> |
fantasai@3290 | 1903 | <!-- <td>auto</td>--> |
fantasai@3290 | 1904 | |
fantasai@3290 | 1905 | <td>auto |
fantasai@3290 | 1906 | |
fantasai@3290 | 1907 | <td>auto |
fantasai@3290 | 1908 | |
fantasai@3290 | 1909 | <td class=say>134px |
fantasai@3290 | 1910 | |
fantasai@3290 | 1911 | <td>134px |
fantasai@3290 | 1912 | |
fantasai@3290 | 1913 | <tr> |
fantasai@3290 | 1914 | <td>i |
fantasai@3290 | 1915 | |
fantasai@3290 | 1916 | <td><tt class=declaration>height: auto</tt> |
fantasai@3290 | 1917 | |
fantasai@3290 | 1918 | <td>height</td> |
fantasai@3290 | 1919 | <!-- <td>auto</td>--> |
fantasai@3290 | 1920 | |
fantasai@3290 | 1921 | <td>auto |
fantasai@3290 | 1922 | |
fantasai@3290 | 1923 | <td>auto |
fantasai@3290 | 1924 | |
fantasai@3290 | 1925 | <td class=say>176px |
fantasai@3290 | 1926 | |
fantasai@3290 | 1927 | <td>176px |
fantasai@3290 | 1928 | |
fantasai@3290 | 1929 | <tr> |
fantasai@3290 | 1930 | <td>j |
fantasai@3290 | 1931 | |
fantasai@3290 | 1932 | <td>(no winning declaration) |
fantasai@3290 | 1933 | |
fantasai@3290 | 1934 | <td>page-break-after</td> |
fantasai@3290 | 1935 | <!-- <td>(no specified value)</td>--> |
fantasai@3290 | 1936 | |
fantasai@3290 | 1937 | <td>auto (initial value) |
fantasai@3290 | 1938 | |
fantasai@3290 | 1939 | <td>auto |
fantasai@3290 | 1940 | |
fantasai@3290 | 1941 | <td>auto |
fantasai@3290 | 1942 | |
fantasai@3290 | 1943 | <td>auto |
fantasai@3290 | 1944 | |
fantasai@3290 | 1945 | <tr> |
fantasai@3290 | 1946 | <td>k |
fantasai@3290 | 1947 | |
fantasai@3290 | 1948 | <td><tt class=declaration>orphans: 3</tt> |
fantasai@3290 | 1949 | |
fantasai@3290 | 1950 | <td>orphans</td> |
fantasai@3290 | 1951 | <!-- <td>3</td>--> |
fantasai@3290 | 1952 | |
fantasai@3290 | 1953 | <td>3 |
fantasai@3290 | 1954 | |
fantasai@3290 | 1955 | <td>3 |
fantasai@3290 | 1956 | |
fantasai@3290 | 1957 | <td>3 |
fantasai@3290 | 1958 | |
fantasai@3290 | 1959 | <td>3 |
fantasai@3290 | 1960 | </table> |
fantasai@3290 | 1961 | |
fantasai@3290 | 1962 | <h2 class=no-num id=acknowledgments>Acknowledgments</h2> |
fantasai@3290 | 1963 | |
fantasai@3290 | 1964 | <p>Comments and suggestions from Giovanni Campagna, Christoph Päper, |
fantasai@3290 | 1965 | Keith Rarick, Alex Mogilevsky, Ian Hickson, David Baron, Edward |
fantasai@3290 | 1966 | Welbourne, Boris Zbarsky, Björn Höhrmann and Michael Day |
fantasai@3290 | 1967 | improved this module. <!-- |
howcome@1729 | 1968 | |
howcome@1729 | 1969 | Ian's proposal: |
howcome@1729 | 1970 | http://lists.w3.org/Archives/Member/w3c-css-wg/2002OctDec/0141.html |
howcome@1729 | 1971 | David's proposal |
howcome@1729 | 1972 | http://lists.w3.org/Archives/Member/w3c-css-wg/2002OctDec/0191.html |
howcome@1729 | 1973 | |
howcome@1729 | 1974 | --> |
fantasai@3290 | 1975 | |
fantasai@3290 | 1976 | |
fantasai@3290 | 1977 | <h2 class=no-num id=references>References</h2> |
fantasai@3290 | 1978 | |
fantasai@3290 | 1979 | <h3 class=no-num id=normative-references>Normative references</h3> |
fantasai@3290 | 1980 | <!--begin-normative--> <!-- Sorted by label --> |
fantasai@3290 | 1981 | <dl class=bibliography> |
fantasai@3290 | 1982 | <dt style="display: |
fantasai@3290 | 1983 | none"><!-- keeps the doc valid if the DL is empty --> <!----> |
fantasai@3290 | 1984 | |
fantasai@3290 | 1985 | <dt id=CSS21>[CSS21] |
fantasai@3290 | 1986 | |
fantasai@3290 | 1987 | <dd>Bert Bos; et al. <a |
fantasai@3290 | 1988 | href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading |
fantasai@3290 | 1989 | Style Sheets Level 2 Revision 1 (CSS 2.1) |
fantasai@3290 | 1990 | Specification.</cite></a> 7 June 2011. W3C Recommendation. URL: <a |
fantasai@3290 | 1991 | href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a> |
fantasai@3290 | 1992 | </dd> |
fantasai@3290 | 1993 | <!----> |
fantasai@3290 | 1994 | |
fantasai@3290 | 1995 | <dt id=CSS3CASCADE>[CSS3CASCADE] |
fantasai@3290 | 1996 | |
fantasai@3290 | 1997 | <dd>Håkon Wium Lie. <a |
fantasai@3290 | 1998 | href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215"><cite>CSS3 |
fantasai@3290 | 1999 | module: Cascading and inheritance.</cite></a> 15 December 2005. W3C |
fantasai@3290 | 2000 | Working Draft. (Work in progress.) URL: <a |
fantasai@3290 | 2001 | href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215">http://www.w3.org/TR/2005/WD-css3-cascade-20051215</a> |
fantasai@3290 | 2002 | </dd> |
fantasai@3290 | 2003 | <!----> |
fantasai@3290 | 2004 | |
fantasai@3290 | 2005 | <dt id=CSS3COL>[CSS3COL] |
fantasai@3290 | 2006 | |
fantasai@3290 | 2007 | <dd>Håkon Wium Lie. <a |
fantasai@3290 | 2008 | href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412"><cite>CSS |
fantasai@3290 | 2009 | Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate |
fantasai@3290 | 2010 | Recommendation. (Work in progress.) URL: <a |
fantasai@3290 | 2011 | href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a> |
fantasai@3290 | 2012 | </dd> |
fantasai@3290 | 2013 | <!----> |
fantasai@3290 | 2014 | |
fantasai@3290 | 2015 | <dt id=CSS3COLOR>[CSS3COLOR] |
fantasai@3290 | 2016 | |
fantasai@3290 | 2017 | <dd>Tantek Çelik; Chris Lilley; L. David Baron. <a |
fantasai@3290 | 2018 | href="http://www.w3.org/TR/2011/REC-css3-color-20110607"><cite>CSS |
fantasai@3290 | 2019 | Color Module Level 3.</cite></a> 7 June 2011. W3C Recommendation. URL: |
fantasai@3290 | 2020 | <a |
fantasai@3290 | 2021 | href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a> |
fantasai@3290 | 2022 | </dd> |
fantasai@3290 | 2023 | <!----> |
fantasai@3290 | 2024 | |
fantasai@3290 | 2025 | <dt id=CSS3GRID>[CSS3GRID] |
fantasai@3290 | 2026 | |
fantasai@3290 | 2027 | <dd>Alex Mogilevsky; Markus Mielke. <a |
fantasai@3290 | 2028 | href="http://www.w3.org/TR/2007/WD-css3-grid-20070905"><cite>CSS Grid |
fantasai@3290 | 2029 | Positioning Module Level 3.</cite></a> 5 September 2007. W3C |
fantasai@3290 | 2030 | Working Draft. (Work in progress.) URL: <a |
fantasai@3290 | 2031 | href="http://www.w3.org/TR/2007/WD-css3-grid-20070905">http://www.w3.org/TR/2007/WD-css3-grid-20070905</a> |
fantasai@3290 | 2032 | </dd> |
fantasai@3290 | 2033 | <!----> |
fantasai@3290 | 2034 | </dl> |
fantasai@3290 | 2035 | <!--end-normative--> |
fantasai@3290 | 2036 | <h3 class=no-num id=other-references>Other references</h3> |
fantasai@3290 | 2037 | <!--begin-informative--> <!-- Sorted by label --> |
fantasai@3290 | 2038 | <dl class=bibliography> |
fantasai@3290 | 2039 | <dt style="display: |
fantasai@3290 | 2040 | none"><!-- keeps the doc valid if the DL is empty --> <!----> |
fantasai@3290 | 2041 | |
fantasai@3290 | 2042 | <dt id=CSS3CASCADE>[CSS3CASCADE] |
fantasai@3290 | 2043 | |
fantasai@3290 | 2044 | <dd>Håkon Wium Lie. <a |
fantasai@3290 | 2045 | href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215"><cite>CSS3 |
fantasai@3290 | 2046 | module: Cascading and inheritance.</cite></a> 15 December 2005. W3C |
fantasai@3290 | 2047 | Working Draft. (Work in progress.) URL: <a |
fantasai@3290 | 2048 | href="http://www.w3.org/TR/2005/WD-css3-cascade-20051215">http://www.w3.org/TR/2005/WD-css3-cascade-20051215</a> |
fantasai@3290 | 2049 | </dd> |
fantasai@3290 | 2050 | <!----> |
fantasai@3290 | 2051 | |
fantasai@3290 | 2052 | <dt id=CSS3NAMESPACE>[CSS3NAMESPACE] |
fantasai@3290 | 2053 | |
fantasai@3290 | 2054 | <dd>Elika J. Etemad; Anne van Kesteren. <a |
fantasai@3290 | 2055 | href="http://www.w3.org/TR/2008/CR-css3-namespace-20080523/"><cite>CSS |
fantasai@3290 | 2056 | Namespaces Module.</cite></a> 23 May 2008. W3C Candidate |
fantasai@3290 | 2057 | Recommendation. (Work in progress.) URL: <a |
fantasai@3290 | 2058 | href="http://www.w3.org/TR/2008/CR-css3-namespace-20080523/">http://www.w3.org/TR/2008/CR-css3-namespace-20080523/</a> |
fantasai@3290 | 2059 | </dd> |
fantasai@3290 | 2060 | <!----> |
fantasai@3290 | 2061 | |
fantasai@3292 | 2062 | <dt id=URI>[URI] |
fantasai@3292 | 2063 | |
fantasai@3292 | 2064 | <dd>T. Berners-Lee; R. Fielding; L. Masinter. <a |
fantasai@3292 | 2065 | href="http://www.ietf.org/rfc/rfc3986.txt"><cite>Uniform Resource |
fantasai@3292 | 2066 | Identifiers (URI): generic syntax.</cite></a> January 2005. Internet |
fantasai@3292 | 2067 | RFC 3986. URL: <a |
fantasai@3292 | 2068 | href="http://www.ietf.org/rfc/rfc3986.txt">http://www.ietf.org/rfc/rfc3986.txt</a> |
fantasai@3290 | 2069 | </dd> |
fantasai@3290 | 2070 | <!----> |
fantasai@3290 | 2071 | </dl> |
fantasai@3290 | 2072 | <!--end-informative--> |
fantasai@3290 | 2073 | <h2 class=no-num id=index>Index</h2> |
fantasai@3290 | 2074 | <!--begin-index--> |
fantasai@3290 | 2075 | <ul class=indexlist> |
fantasai@3290 | 2076 | <li>absolute length units, <a href="#absolute-length-units" |
fantasai@3290 | 2077 | title="absolute length units"><strong>6.2.</strong></a> |
fantasai@3290 | 2078 | |
fantasai@3290 | 2079 | <li>actual value, <a href="#actual-value" title="actual |
fantasai@3290 | 2080 | value"><strong>8.4.</strong></a> |
fantasai@3290 | 2081 | |
fantasai@3290 | 2082 | <li><angle>, <a href="#angle-value" |
fantasai@3290 | 2083 | title="<angle>"><strong>7.1.</strong></a> |
fantasai@3290 | 2084 | |
fantasai@3290 | 2085 | <li>calc(), <a href="#calc" title="calc()"><strong>7.3.1.</strong></a> |
fantasai@3290 | 2086 | |
fantasai@3290 | 2087 | <li>ch, <a href="#ch-unit" title=ch><strong>6.1.1.</strong></a> |
fantasai@3290 | 2088 | |
fantasai@3292 | 2089 | <li>color, <a href="#color" title=color><strong>7.4.</strong></a> |
fantasai@3290 | 2090 | |
fantasai@3290 | 2091 | <li><color>, <a href="#ltcolorgt0" |
fantasai@3292 | 2092 | title="<color>"><strong>7.4.</strong></a> |
fantasai@3290 | 2093 | |
fantasai@3290 | 2094 | <li>compound value, <a href="#compound-value" title="compound |
fantasai@3292 | 2095 | value"><strong>3.1.</strong></a> |
fantasai@3290 | 2096 | |
fantasai@3290 | 2097 | <li>computed value, <a href="#computed-value" title="computed |
fantasai@3290 | 2098 | value"><strong>8.2.</strong></a> |
fantasai@3290 | 2099 | |
fantasai@3290 | 2100 | <li>deg, <a href="#deg" title=deg><strong>7.1.</strong></a> |
fantasai@3290 | 2101 | |
fantasai@3290 | 2102 | <li>dimension, <a href="#dimension" |
fantasai@3290 | 2103 | title=dimension><strong>6.</strong></a> |
fantasai@3290 | 2104 | |
fantasai@3290 | 2105 | <li>em, <a href="#em-unit" title=em><strong>6.1.1.</strong></a> |
fantasai@3290 | 2106 | |
fantasai@3290 | 2107 | <li>ex, <a href="#ex-unit" title=ex><strong>6.1.1.</strong></a> |
fantasai@3290 | 2108 | |
fantasai@3290 | 2109 | <li><frequency>, <a href="#frequency-value" |
fantasai@3290 | 2110 | title="<frequency>"><strong>7.3.</strong></a> |
fantasai@3290 | 2111 | |
fantasai@3290 | 2112 | <li>fr (unit), <a href="#fr" title="fr |
fantasai@3292 | 2113 | (unit)"><strong>7.7.1.</strong></a> |
fantasai@3290 | 2114 | |
fantasai@3290 | 2115 | <li>functional notation, <a href="#functional-notation0" |
fantasai@3292 | 2116 | title="functional notation"><strong>3.1.</strong></a> |
fantasai@3290 | 2117 | |
fantasai@3290 | 2118 | <li>grad, <a href="#grad" title=grad><strong>7.1.</strong></a> |
fantasai@3290 | 2119 | |
fantasai@3290 | 2120 | <li>gr (unit), <a href="#gr" title="gr |
fantasai@3292 | 2121 | (unit)"><strong>7.8.1.</strong></a> |
fantasai@3290 | 2122 | |
fantasai@3290 | 2123 | <li>Hz, <a href="#hz" title=Hz><strong>7.3.</strong></a> |
fantasai@3290 | 2124 | |
fantasai@3290 | 2125 | <li>identifier, <a href="#identifier" |
fantasai@3290 | 2126 | title=identifier><strong>4.</strong></a> |
fantasai@3290 | 2127 | |
fantasai@3290 | 2128 | <li><a href="#identifier-value"><code><identifier></code></a>, <a |
fantasai@3290 | 2129 | href="#identifier-value" |
fantasai@3290 | 2130 | title="<identifier>"><strong>4.2.</strong></a> |
fantasai@3290 | 2131 | |
fantasai@3290 | 2132 | <li>‘<code class=css>inherit</code>’, <a href="#inherit" |
fantasai@3290 | 2133 | title="''inherit''"><strong>4.1.1.</strong></a> |
fantasai@3290 | 2134 | |
fantasai@3290 | 2135 | <li>‘<code class=css>initial</code>’, <a href="#initial" |
fantasai@3290 | 2136 | title="''initial''"><strong>4.1.1.</strong></a> |
fantasai@3290 | 2137 | |
fantasai@3290 | 2138 | <li>integer, <a href="#integer" title=integer><strong>5.1.</strong></a> |
fantasai@3290 | 2139 | |
fantasai@3290 | 2140 | <li><a href="#integer-value"><code><integer></code></a>, <a |
fantasai@3290 | 2141 | href="#integer-value" title="<integer>"><strong>5.1.</strong></a> |
fantasai@3290 | 2142 | |
fantasai@3290 | 2143 | |
fantasai@3290 | 2144 | <li>kHz, <a href="#khz" title=kHz><strong>7.3.</strong></a> |
fantasai@3290 | 2145 | |
fantasai@3290 | 2146 | <li><a href="#length-value"><code><length></code></a>, <a |
fantasai@3290 | 2147 | href="#length-value" title="<length>"><strong>6.</strong></a> |
fantasai@3290 | 2148 | |
fantasai@3290 | 2149 | <li>max(), <a href="#max" title="max()"><strong>7.3.1.</strong></a> |
fantasai@3290 | 2150 | |
fantasai@3290 | 2151 | <li>min(), <a href="#min" title="min()"><strong>7.3.1.</strong></a> |
fantasai@3290 | 2152 | |
fantasai@3290 | 2153 | <li>ms, <a href="#ms" title=ms><strong>7.2.</strong></a> |
fantasai@3290 | 2154 | |
fantasai@3290 | 2155 | <li>number, <a href="#number" title=number><strong>5.2.</strong></a> |
fantasai@3290 | 2156 | |
fantasai@3290 | 2157 | <li><a href="#number-value"><code><number></code></a>, <a |
fantasai@3290 | 2158 | href="#number-value" title="<number>"><strong>5.2.</strong></a> |
fantasai@3290 | 2159 | |
fantasai@3290 | 2160 | <li><a href="#percentage-value"><code><percentage></code></a>, <a |
fantasai@3290 | 2161 | href="#percentage-value" |
fantasai@3290 | 2162 | title="<percentage>"><strong>5.3.</strong></a> |
fantasai@3290 | 2163 | |
fantasai@3290 | 2164 | <li>rad, <a href="#rad" title=rad><strong>7.1.</strong></a> |
fantasai@3290 | 2165 | |
fantasai@3290 | 2166 | <li>reference pixel, <a href="#reference-pixel" title="reference |
fantasai@3290 | 2167 | pixel"><strong>6.2.</strong></a> |
fantasai@3290 | 2168 | |
fantasai@3290 | 2169 | <li>relative length, <a href="#relative-length-units" title="relative |
fantasai@3290 | 2170 | length"><strong>6.1.</strong></a> |
fantasai@3290 | 2171 | |
fantasai@3290 | 2172 | <li>rem, <a href="#rem-unit" title=rem><strong>6.1.1.</strong></a> |
fantasai@3290 | 2173 | |
fantasai@3290 | 2174 | <li>s, <a href="#s" title=s><strong>7.2.</strong></a> |
fantasai@3290 | 2175 | |
fantasai@3290 | 2176 | <li>simple value, <a href="#simple-value" title="simple |
fantasai@3292 | 2177 | value"><strong>3.1.</strong></a> |
fantasai@3290 | 2178 | |
fantasai@3290 | 2179 | <li>specified value, <a href="#specified-value" title="specified |
fantasai@3290 | 2180 | value"><strong>8.1.</strong></a> |
fantasai@3290 | 2181 | |
fantasai@3292 | 2182 | <li><a href="#string-value"><code><string></code></a>, <a |
fantasai@3292 | 2183 | href="#string-value" title="<string>"><strong>4.3.</strong></a> |
fantasai@3290 | 2184 | |
fantasai@3290 | 2185 | <li><time>, <a href="#time-value" |
fantasai@3290 | 2186 | title="<time>"><strong>7.2.</strong></a> |
fantasai@3290 | 2187 | |
fantasai@3290 | 2188 | <li>turn, <a href="#turn" title=turn><strong>7.1.</strong></a> |
fantasai@3290 | 2189 | |
fantasai@3292 | 2190 | <li>URL, <a href="#url" title=URL><strong>4.4.</strong></a> |
fantasai@3292 | 2191 | |
fantasai@3292 | 2192 | <li><a href="#url-value"><code><url></code></a>, <a |
fantasai@3292 | 2193 | href="#url-value" title="<url>"><strong>4.4.</strong></a> |
fantasai@3290 | 2194 | |
fantasai@3290 | 2195 | <li>used value, <a href="#used-value" title="used |
fantasai@3290 | 2196 | value"><strong>8.3.</strong></a> |
fantasai@3290 | 2197 | |
fantasai@3290 | 2198 | <li>vh, <a href="#vh-unit" title=vh><strong>6.1.2.</strong></a> |
fantasai@3290 | 2199 | |
fantasai@3290 | 2200 | <li>vm, <a href="#vm-unit" title=vm><strong>6.1.2.</strong></a> |
fantasai@3290 | 2201 | |
fantasai@3290 | 2202 | <li>vw, <a href="#vw-unit" title=vw><strong>6.1.2.</strong></a> |
fantasai@3290 | 2203 | </ul> |
fantasai@3290 | 2204 | <!--end-index--> |
howcome@1729 | 2205 | </dl> |