Skip to content

Commit f7f942e

Browse files
fantasaifantasai
committed
[css-values] More normative definition of url(). Should hopefully fix #1014 
1 parent 8b5d98d commit f7f942e

File tree

2 files changed

+73
-73
lines changed

2 files changed

+73
-73
lines changed

‎css-values-3/Overview.bs

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -501,10 +501,11 @@ Quoted Strings: the <<string>> type</h3>
501501
<h3 id="urls">
502502
Resource Locators: the <<url>> type</h3>
503503

504-
A <dfn>URL</dfn> is a pointer to a resource
505-
and is a <a>functional notation</a>
506-
denoted by <<url>>.
507-
The syntax of a <<url>> is:
504+
The <dfn>url()</dfn> <a>functional notation</a>,
505+
denoted by <<url>>,
506+
represents a <dfn>URL</dfn>,
507+
which is a pointer to a resource.
508+
The typical syntax of a <<url>> is:
508509

509510
<pre class="prod"><dfn id="url-value">&lt;url></dfn> = url( <<string>> <<url-modifier>>* )</pre>
510511

@@ -514,44 +515,42 @@ Resource Locators: the <<url>> type</h3>
514515
<pre>body { background: url("http://www.example.com/pinkish.gif") }</pre>
515516
</div>
516517

517-
In addition to the syntax defined above,
518-
a <<url>> can sometimes be written in other ways:
519-
520-
* A <<url>> can be written without quotation marks around the URL itself.
521-
(This syntax is <a lt="consume a url token" spec=css-syntax-3>specially-parsed</a>
522-
as a <<url-token>>. [[!CSS3SYN]])
523-
524-
<div class="example">
525-
For example, the following declarations are identical:
526-
<pre>
527-
background: url("http://www.example.com/pinkish.gif");
528-
background: url(http://www.example.com/pinkish.gif);
529-
</pre>
530-
</div>
531-
532-
* Some CSS contexts (such as ''@import'') allow a <<url>> to be represented by a bare <<string>>,
533-
without the ''url()'' wrapper.
534-
In such cases the string behaves identically to a ''url()'' function containing that string.
535-
536-
<div class="example">
537-
For example, the following statements are identical:
538-
<pre>
539-
@import url("base-theme.css");
540-
@import "base-theme.css";
541-
</pre>
542-
</div>
543-
544-
Note: The special parsing rules for the legacy quotation-mark&ndash;less <<url>> syntax
545-
means that parentheses, <a href="https://www.w3.org/TR/css-syntax/#whitespace">whitespace</a> characters,
518+
A <<url>> may alternately be written without quotation marks around the URL itself,
519+
in which case it is <a lt="consume a url token" spec=css-syntax-3>specially-parsed</a>
520+
as a <<url-token>> [[!CSS3SYN]].
521+
522+
<div class="example">
523+
For example, the following declarations are identical:
524+
<pre>
525+
background: url("http://www.example.com/pinkish.gif");
526+
background: url(http://www.example.com/pinkish.gif);
527+
</pre>
528+
</div>
529+
530+
Note: This unquoted syntax is cannot accept a <<url-modifier>> argument
531+
and has extra escaping requirements:
532+
parentheses, <a href="https://www.w3.org/TR/css-syntax/#whitespace">whitespace</a> characters,
546533
single quotes (&#39;) and double quotes (") appearing in a URL
547534
must be escaped with a backslash,
548535
e.g. ''url(open\(parens)'', ''url(close\)parens)''.
536+
(In quoted <<string>> ''url()''s,
537+
only newlines and the character used to quote the string need to be escaped.)
549538
Depending on the type of URL,
550539
it might also be possible to write these characters as URL-escapes
551540
(e.g. ''url(open%28parens)'' or ''url(close%29parens)'')
552541
as described in [[URL]].
553-
Alternately, the URL can be quoted as a string,
554-
in which case only newlines and the character used to quote the string need to be escaped.
542+
543+
Some CSS contexts (such as ''@import'') also allow a <<url>>
544+
to be represented by a bare <<string>>, without the ''url()'' wrapper.
545+
In such cases the string behaves identically to a ''url()'' function containing that string.
546+
547+
<div class="example">
548+
For example, the following statements are identical:
549+
<pre>
550+
@import url("base-theme.css");
551+
@import "base-theme.css";
552+
</pre>
553+
</div>
555554

556555
<h4 id="relative-urls">
557556
Relative URLs</h4>
@@ -1393,7 +1392,7 @@ Images: the <<image>> type</h3>
13931392

13941393
The <dfn><<position>></dfn> value specifies the position of a object area (e.g. background image)
13951394
inside a positioning area (e.g. background positioning area).
1396-
It is interpreted as specified for 'background-position'. [[!CSS3-BACKGROUNDS]]
1395+
It is interpreted as specified for 'background-position'. [[!CSS3-BACKGROUND]]
13971396

13981397
<pre class=prod>
13991398
<<position>> = [
@@ -2089,8 +2088,10 @@ Changes</h2>
20892088
<li>Inlined the <<position>> definition and dropped the three-value syntaxes
20902089
to allow for unambiguous combination in complex grammars.
20912090
This effectively removes that syntax from 'object-position',
2092-
but allows <<position>> to be re-used e.g. in [[CSS-TRANSFORMS]] for 3D positions.
2091+
but allows <<position>> to be re-used e.g. in [[CSS-TRANSFORMS-1]] for 3D positions.
20932092
(See <a href="https://lists.w3.org/Archives/Public/www-style/2017Feb/0052.html">discussion</a>.)
2093+
<li>Clarified handling of font-relative units outside the context of an element.
2094+
<li>Clarified definition of ''url()'' to normatively accept unquoted syntax.
20942095
</ul>
20952096

20962097
Changes since the <a href="https://www.w3.org/TR/2015/CR-css-values-3-20150611/">11 June 2015 Candidate Recomendation</a> are:

‎css-values/Overview.bs

Lines changed: 35 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -491,10 +491,11 @@ Quoted Strings: the <<string>> type</h3>
491491
<h3 id="urls">
492492
Resource Locators: the <<url>> type</h3>
493493

494-
A <dfn>URL</dfn> is a pointer to a resource
495-
and is a <a>functional notation</a>
496-
denoted by <<url>>.
497-
The syntax of a <<url>> is:
494+
The <dfn>url()</dfn> <a>functional notation</a>,
495+
denoted by <<url>>,
496+
represents a <dfn>URL</dfn>,
497+
which is a pointer to a resource.
498+
The typical syntax of a <<url>> is:
498499

499500
<pre class="prod"><dfn id="url-value">&lt;url></dfn> = url( <<string>> <<url-modifier>>* )</pre>
500501

@@ -504,44 +505,42 @@ Resource Locators: the <<url>> type</h3>
504505
<pre>body { background: url("http://www.example.com/pinkish.gif") }</pre>
505506
</div>
506507

507-
In addition to the syntax defined above,
508-
a <<url>> can sometimes be written in other ways:
509-
510-
* A <<url>> can be written without quotation marks around the URL itself.
511-
(This syntax is <a lt="consume a url token" spec=css-syntax-3>specially-parsed</a>
512-
as a <<url-token>>. [[!CSS3SYN]])
513-
514-
<div class="example">
515-
For example, the following declarations are identical:
516-
<pre>
517-
background: url("http://www.example.com/pinkish.gif");
518-
background: url(http://www.example.com/pinkish.gif);
519-
</pre>
520-
</div>
521-
522-
* Some CSS contexts (such as ''@import'') allow a <<url>> to be represented by a bare <<string>>,
523-
without the ''url()'' wrapper.
524-
In such cases the string behaves identically to a ''url()'' function containing that string.
525-
526-
<div class="example">
527-
For example, the following statements are identical:
528-
<pre>
529-
@import url("base-theme.css");
530-
@import "base-theme.css";
531-
</pre>
532-
</div>
533-
534-
Note: The special parsing rules for the legacy quotation-mark&ndash;less <<url>> syntax
535-
means that parentheses, <a href="https://www.w3.org/TR/css-syntax/#whitespace">whitespace</a> characters,
508+
A <<url>> may alternately be written without quotation marks around the URL itself,
509+
in which case it is <a lt="consume a url token" spec=css-syntax-3>specially-parsed</a>
510+
as a <<url-token>> [[!CSS3SYN]].
511+
512+
<div class="example">
513+
For example, the following declarations are identical:
514+
<pre>
515+
background: url("http://www.example.com/pinkish.gif");
516+
background: url(http://www.example.com/pinkish.gif);
517+
</pre>
518+
</div>
519+
520+
Note: This unquoted syntax is cannot accept a <<url-modifier>> argument
521+
and has extra escaping requirements:
522+
parentheses, <a href="https://www.w3.org/TR/css-syntax/#whitespace">whitespace</a> characters,
536523
single quotes (&#39;) and double quotes (") appearing in a URL
537524
must be escaped with a backslash,
538525
e.g. ''url(open\(parens)'', ''url(close\)parens)''.
526+
(In quoted <<string>> ''url()''s,
527+
only newlines and the character used to quote the string need to be escaped.)
539528
Depending on the type of URL,
540529
it might also be possible to write these characters as URL-escapes
541530
(e.g. ''url(open%28parens)'' or ''url(close%29parens)'')
542531
as described in [[URL]].
543-
Alternately, the URL can be quoted as a string,
544-
in which case only newlines and the character used to quote the string need to be escaped.
532+
533+
Some CSS contexts (such as ''@import'') also allow a <<url>>
534+
to be represented by a bare <<string>>, without the ''url()'' wrapper.
535+
In such cases the string behaves identically to a ''url()'' function containing that string.
536+
537+
<div class="example">
538+
For example, the following statements are identical:
539+
<pre>
540+
@import url("base-theme.css");
541+
@import "base-theme.css";
542+
</pre>
543+
</div>
545544

546545
<h4 id="relative-urls">
547546
Relative URLs</h4>
@@ -2370,7 +2369,7 @@ Changes</h2>
23702369
Changes since <a href="http://www.w3.org/TR/css-values-3/">Level 3</a>:
23712370

23722371
<ul>
2373-
<li>Added the ''vi'', ''vb'', ''ic'', ''lh'' and ''rlh'' units.
2372+
<li>Added the ''vi'', ''vb'', ''ic'', ''cap'', ''lh'' and ''rlh'' units.
23742373
</ul>
23752374

23762375
<h2 class="no-num" id="sec-pri">

0 commit comments

Comments
 (0)