Skip to content

Commit 09c6c2a

Browse files
committed
[css-values] Rewrite url() to recognize that it's now an ordinary function most of the time.
--HG-- extra : rebase_source : 5947bcdd4521625135d45a25619ec5f743823ca2
1 parent 9075850 commit 09c6c2a

File tree

2 files changed

+568
-498
lines changed

2 files changed

+568
-498
lines changed

css-values/Overview.bs

Lines changed: 67 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ Component value types</h3>
138138
If commas were not implicitly omittable,
139139
the grammar would have to be much more complicated
140140
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.
142142
</div>
143143

144144
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>
450450
Resource Locators: the <<url>> type</h3>
451451

452452
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">&lt;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">&lt;url></dfn> = url( <<string>> <<url-modifier>>* )</pre>
458+
457459

458460
<div class="example">
459461
Below is an example of a URL being used as a background image:
460462

461463
<pre>body { background: url("http://www.example.com/pinkish.gif") }</pre>
464+
</div>
462465

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:
464468

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.
467475

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.
471478

472-
Parentheses, whitespace characters, single quotes (&#39;) 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 (&#39;) and double quotes (") appearing in a URL
481+
must be escaped with a backslash,
475482
e.g. ''url(open\(parens)'', ''url(close\)parens)''.
476483
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
478485
(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>
481492

482493
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&nbsp;3986, section&nbsp;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&nbsp;3986, section&nbsp;3, defines the normative
486497
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,
488499
not that of the styled source document.
489500
Style sheets embedded within a document have
490501
the base URL associated with their container.
491502

492503
When a <<url>> appears in the computed value of a property,
493504
it is resolved to an absolute URL,
494505
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.
496507

497508
<div class="example">
498509
For example, suppose the following rule:
@@ -511,6 +522,17 @@ Resource Locators: the <<url>> type</h3>
511522
The same image will be used regardless of the URL of the source document containing the <code>&lt;body></code>.
512523
</div>
513524

525+
<h4 id='url-modifiers'>
526+
URL Modifiers</h4>
527+
528+
The ''url()'' function supports specifying additional <dfn>&lt;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+
514536
<h2 id="numeric-types">
515537
Numeric Data Types</h2>
516538

@@ -681,7 +703,7 @@ Font-relative lengths: the ''em'', ''ex'', ''ch'', ''rem'' units</h4>
681703
The x-height of a font can be found in different ways. Some fonts
682704
contain reliable metrics for the x-height. If reliable font metrics
683705
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
685707
the glyph for the lowercase "o" extends below the baseline, and
686708
subtract that value from the top of its bounding box. In the cases
687709
where it is impossible or impractical to determine the x-height,
@@ -993,22 +1015,22 @@ Images: the <<image>> type</h3>
9931015
<h2 id="functional-notation">
9941016
Functional Notations</h2>
9951017

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.
10121034

10131035
<div class="example">
10141036
<pre>
@@ -1059,7 +1081,7 @@ Mathematical Expressions: ''calc()''</h3>
10591081

10601082
<div class="example">
10611083
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.
10631085

10641086
<pre>
10651087
:root {
@@ -1482,7 +1504,7 @@ Ian's proposal:
14821504
<dd>
14831505
The attribute value is taken as the contents of a CSS <<string>>.
14841506
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
14861508
to a non-existent document with a generic error condition.
14871509
Relative URLs must be made absolute
14881510
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>
16981720
<h3 id='about-invalid'>
16991721
Registration for the <code>about:invalid</code> URL scheme</h3>
17001722

1701-
This sections defines and registers the <code>about:invalid</code> URI,
1723+
This sections defines and registers the <code>about:invalid</code> URL,
17021724
in accordance with the registration procedure defined in [[RFC6694]].
17031725

17041726

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>.
17061728

17071729
<table class="data define">
17081730
<tr>
@@ -1711,8 +1733,8 @@ Registration for the <code>about:invalid</code> URL scheme</h3>
17111733
<tr>
17121734
<th>Intended Usage
17131735
<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.
17161738
<tr>
17171739
<th>Contact/Change controller
17181740
<td>CSS WG &lt;<a href="mailto:www-style@w3.org">www-style@w3.org</a>> (on behalf of W3C)

0 commit comments

Comments
 (0)