@@ -138,7 +138,7 @@ Component value types</h3>
138
138
If commas were not implicitly omittable,
139
139
the grammar would have to be much more complicated
140
140
to properly express the ways that the arguments can be omitted,
141
- greatly obscuring the simplicity of the feature.
141
+ greatly obscURLng the simplicity of the feature.
142
142
</div>
143
143
144
144
All CSS properties also accept the <a href="#common-keywords">CSS-wide keyword values</a>
@@ -450,49 +450,60 @@ Quoted Strings: the <<string>> type</h3>
450
450
Resource Locators: the <<url>> type</h3>
451
451
452
452
A <dfn>URL</dfn> is a pointer to a resource
453
- and is a <a title="consume a url token" spec=css-syntax>specially-parsed</a> <a href="#functional-notation">functional notation</a>
454
- denoted by <dfn id="url-value"><url></dfn> .
455
- It corresponds to the <<url-token>> production
456
- in the <a href="http://www.w3.org/TR/css-syntax/">CSS Syntax Module</a> [[!CSS3SYN]] .
453
+ and is a <a href="#functional-notation">functional notation</a>
454
+ denoted by <<url>> .
455
+ The syntax of a <<url>> is:
456
+
457
+ <pre class="prod"><dfn id="url-value"><url></dfn> = url( <<string>> <<url-modifier>> * )</pre>
458
+
457
459
458
460
<div class="example">
459
461
Below is an example of a URL being used as a background image:
460
462
461
463
<pre> body { background: url("http://www.example.com/pinkish.gif") }</pre>
464
+ </div>
462
465
463
- The same example can be written without quotes:
466
+ In addition to the syntax defined above,
467
+ a <<url>> can sometimes be written in other ways:
464
468
465
- <pre> body { background: url(http://www.example.com/pinkish.gif) }</pre>
466
- </div>
469
+ * For legacy reasons,
470
+ a <<url>> can be written without quotation marks around the URL itself.
471
+ This syntax is <a title="consume a url token" spec=css-syntax>specially-parsed</a> ,
472
+ and produces a <<url-token>> rather than a <a>function</a> syntactically. [[!CSS3SYN]]
473
+ * Some CSS contexts, such as ''@import'' , allow a <<url>> to be represented by a <<string>> instead.
474
+ This behaves identically to writing a ''url()'' function containing that string.
467
475
468
- Note: Note that in some CSS syntactic contexts (as defined by that context),
469
- a URL can be represented as a <<string>> rather than by <<url>> .
470
- An example of this is the ''@import'' rule.
476
+ Because these alternate ways of writing a <<url>> are not <a>functional notations</a> ,
477
+ they cannot accept any <<url-modifier>> s.
471
478
472
- Parentheses, whitespace characters, single quotes (') and double quotes (") appearing in a URL
473
- must be escaped with a backslash
474
- so that the resulting value is a valid <<url-token>> ,
479
+ Note: The special parsing rules for the legacy quotation mark-less <<url>> syntax
480
+ means that parentheses, whitespace characters, single quotes (') and double quotes (") appearing in a URL
481
+ must be escaped with a backslash ,
475
482
e.g. ''url(open\(parens)'' , ''url(close\)parens)'' .
476
483
Depending on the type of URL,
477
- it might also be possible to write these characters as URI -escapes
484
+ it might also be possible to write these characters as URL -escapes
478
485
(e.g. ''url(open%28parens)'' or ''url(close%29parens)'' )
479
- as described in [[URI]] .
480
- Alternatively a URL containing such characters may be represented as a quoted <a>string</a> within the ''url()'' notation.
486
+ as described in [[URL]] .
487
+ (If written as a normal function containing a string, ordinary string escaping rules apply;
488
+ only newlines and the character used to quote the string need to be escaped.)
489
+
490
+ <h4 id="relative-urls">
491
+ Relative URLs</h4>
481
492
482
493
In order to create modular style sheets that are not dependent on
483
- the absolute location of a resource, authors should use relative URIs .
484
- Relative URIs (as defined in [[!URI ]] ) are resolved to full URIs
485
- using a base URI . RFC 3986, section 3, defines the normative
494
+ the absolute location of a resource, authors should use relative URLs .
495
+ Relative URLs (as defined in [[!URL ]] ) are resolved to full URLs
496
+ using a base URL . RFC 3986, section 3, defines the normative
486
497
algorithm for this process.
487
- For CSS style sheets, the base URI is that of the style sheet itself,
498
+ For CSS style sheets, the base URL is that of the style sheet itself,
488
499
not that of the styled source document.
489
500
Style sheets embedded within a document have
490
501
the base URL associated with their container.
491
502
492
503
When a <<url>> appears in the computed value of a property,
493
504
it is resolved to an absolute URL,
494
505
as described in the preceding paragraph.
495
- The computed value of a URI that the UA cannot resolve to an absolute URI is the specified value.
506
+ The computed value of a URL that the UA cannot resolve to an absolute URL is the specified value.
496
507
497
508
<div class="example">
498
509
For example, suppose the following rule:
@@ -511,6 +522,17 @@ Resource Locators: the <<url>> type</h3>
511
522
The same image will be used regardless of the URL of the source document containing the <code> <body></code> .
512
523
</div>
513
524
525
+ <h4 id='url-modifiers'>
526
+ URL Modifiers</h4>
527
+
528
+ The ''url()'' function supports specifying additional <dfn><url-modifier></dfn> s,
529
+ which change the meaning or the interpretation of the URL somehow.
530
+ A <<url-modifier>> is either an <<ident>> or a <a>function</a> .
531
+
532
+ This specification does not define any <<url-modifier>> s,
533
+ but other specs may do so.
534
+
535
+
514
536
<h2 id="numeric-types">
515
537
Numeric Data Types</h2>
516
538
@@ -681,7 +703,7 @@ Font-relative lengths: the ''em'', ''ex'', ''ch'', ''rem'' units</h4>
681
703
The x-height of a font can be found in different ways. Some fonts
682
704
contain reliable metrics for the x-height. If reliable font metrics
683
705
are not available, UAs may determine the x-height from the height
684
- of a lowercase glyph. One possible heuristic is to look at how far
706
+ of a lowercase glyph. One possible heURLstic is to look at how far
685
707
the glyph for the lowercase "o" extends below the baseline, and
686
708
subtract that value from the top of its bounding box. In the cases
687
709
where it is impossible or impractical to determine the x-height,
@@ -993,22 +1015,22 @@ Images: the <<image>> type</h3>
993
1015
<h2 id="functional-notation">
994
1016
Functional Notations</h2>
995
1017
996
- A <dfn>functional notation</dfn> is a type of component value
997
- that can represent more complex types or invoke special processing.
998
- The syntax starts with the name of the function
999
- immediately followed by a left parenthesis
1000
- (i.e. a <<function-token>> )
1001
- followed by the argument(s) to the notation
1002
- followed by a right parenthesis.
1003
- White space is allowed, but optional, immediately inside the parentheses.
1004
- Functions can take multiple arguments,
1005
- which are formatted similarly to a CSS property value.
1006
-
1007
- Some legacy functional notations, such as ''rgba()'' , use commas unnecessarily,
1008
- but generally commas are only used to separate items in a list,
1009
- or pieces of a grammar that would be ambiguous otherwise.
1010
- If a comma is used to separate arguments,
1011
- whitespace is optional before and after the comma.
1018
+ A <dfn>functional notation</dfn> is a type of component value
1019
+ that can represent more complex types or invoke special processing.
1020
+ The syntax starts with the name of the function
1021
+ immediately followed by a left parenthesis
1022
+ (i.e. a <<function-token>> )
1023
+ followed by the argument(s) to the notation
1024
+ followed by a right parenthesis.
1025
+ White space is allowed, but optional, immediately inside the parentheses.
1026
+ Functions can take multiple arguments,
1027
+ which are formatted similarly to a CSS property value.
1028
+
1029
+ Some legacy functional notations, such as ''rgba()'' , use commas unnecessarily,
1030
+ but generally commas are only used to separate items in a list,
1031
+ or pieces of a grammar that would be ambiguous otherwise.
1032
+ If a comma is used to separate arguments,
1033
+ whitespace is optional before and after the comma.
1012
1034
1013
1035
<div class="example">
1014
1036
<pre>
@@ -1059,7 +1081,7 @@ Mathematical Expressions: ''calc()''</h3>
1059
1081
1060
1082
<div class="example">
1061
1083
The following sets the 'font-size' so that exactly 40em fits within the viewport,
1062
- ensuring that roughly the same amount of text always fills the screen no matter the screen size.
1084
+ ensURLng that roughly the same amount of text always fills the screen no matter the screen size.
1063
1085
1064
1086
<pre>
1065
1087
:root {
@@ -1482,7 +1504,7 @@ Ian's proposal:
1482
1504
<dd>
1483
1505
The attribute value is taken as the contents of a CSS <<string>> .
1484
1506
It is interpreted as a quoted string within the ''url()'' notation.
1485
- The default is ''about:invalid'' , which is a URI defined (<a href="#about-invalid">in Appendix A</a> ) to point
1507
+ The default is ''about:invalid'' , which is a URL defined (<a href="#about-invalid">in Appendix A</a> ) to point
1486
1508
to a non-existent document with a generic error condition.
1487
1509
Relative URLs must be made absolute
1488
1510
according to the rules of the document language as applied to URLs originating from the element;
@@ -1698,11 +1720,11 @@ Appendix A: IANA Considerations</h2>
1698
1720
<h3 id='about-invalid'>
1699
1721
Registration for the <code>about:invalid</code> URL scheme</h3>
1700
1722
1701
- This sections defines and registers the <code> about:invalid</code> URI ,
1723
+ This sections defines and registers the <code> about:invalid</code> URL ,
1702
1724
in accordance with the registration procedure defined in [[RFC6694]] .
1703
1725
1704
1726
1705
- The official record of this registration can be found at <a href="http://www.iana.org/assignments/about-uri -tokens/about-uri -tokens.xml">http://www.iana.org/assignments/about-uri -tokens/about-uri -tokens.xml</a> .
1727
+ The official record of this registration can be found at <a href="http://www.iana.org/assignments/about-URL -tokens/about-URL -tokens.xml">http://www.iana.org/assignments/about-URL -tokens/about-URL -tokens.xml</a> .
1706
1728
1707
1729
<table class="data define">
1708
1730
<tr>
@@ -1711,8 +1733,8 @@ Registration for the <code>about:invalid</code> URL scheme</h3>
1711
1733
<tr>
1712
1734
<th> Intended Usage
1713
1735
<td>
1714
- The <code> about:invalid</code> URI references a non-existent document with a generic error condition.
1715
- It can be used when a URI is necessary, but the default value shouldn't be resolveable as any type of document.
1736
+ The <code> about:invalid</code> URL references a non-existent document with a generic error condition.
1737
+ It can be used when a URL is necessary, but the default value shouldn't be resolveable as any type of document.
1716
1738
<tr>
1717
1739
<th> Contact/Change controller
1718
1740
<td> CSS WG <<a href="mailto:www-style@w3.org">www-style@w3.org</a> > (on behalf of W3C)
0 commit comments