10BC0 [css-images] Fix/update some references. · w3c/csswg-drafts@2121683 · GitHub
Skip to content

Commit 2121683

Browse files
fantasaifantasai
committed
[css-images] Fix/update some references.
1 parent 43a5c04 commit 2121683

1 file changed

Lines changed: 51 additions & 37 deletions

File tree

‎css-images/Overview.bs‎

Lines changed: 51 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/
1111
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
1212
Editor: Lea Verou, Invited Expert, http://lea.verou.me/about, w3cid 52258
1313
Abstract: This module contains the features of CSS level 3 relating to the <<image>> type and some replaced elements.
14-
It includes and extends the functionality of CSS level 2 [[CSS21]].
14+
It includes and extends the functionality of CSS level 2 [[CSS2]].
1515
The main extensions compared to CSS2.1 are the generalization of the <<url>> type to the <<image>> type,
1616
several additions to the <<image>> type, a generic sizing algorithm for images and other replaced content in CSS,
1717
definitions for interpolating several <<image>> types,
@@ -45,29 +45,38 @@ Introduction {#intro}
4545

4646
<em>This subsection (above) is not normative.</em>
4747

48-
<h3 id="placement">
49-
Module Interactions</h3>
48+
Module Interactions {#placement}
49+
--------------------------------
5050

51-
This module defines and extends the ''&lt;image> 10BC0 '' value type
52-
defined in [[!css-values-3]].
53-
Furthermore it replaces the ''&lt;url>'' type in
54-
the 'background-image' and 'list-style-image' definitions in CSS1 and CSS2
55-
and adds ''&lt;image>'' as an alternative to ''&lt;url>''
51+
This module defines and extends the <<image>> value type
52+
defined in [[!CSS-VALUES-3]].
53+
It also replaces the <<url>> type with <<image>>
54+
in the 'background-image', 'cursor', and 'list-style-image' definitions in CSS1 and CSS2
55+
and adds <<image>> as an alternative to <<url>>
5656
in the 'content' property's value.
5757
It is presumed that CSS specifications beyond CSS2.1
58-
will use the ''&lt;image>'' notation in place of ''&lt;url>''
58+
will use the <<image>> notation in place of <<url>>
5959
where 2D images are expected.
6060
(See e.g. [[CSS3BG]].)
6161

62-
None of the properties defined in this module
63-
apply to <code>::first-line</code> and <code>::first-letter</code>.
62+
None of the properties defined in this module, only 'image-rendering'
63+
applies to <code>::first-line</code> and <code>::first-letter</code>.
6464

65-
<h3 id="values">
66-
Values</h3>
65+
Values {#values}
66+
----------------
6767

68-
This specification follows the <a href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from [[!CSS21]]. Value types not defined in this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. Other CSS modules may expand the definitions of these value types: for example [[CSS3COLOR]], when combined with this module, expands the definition of the &lt;color> value type as used in this specification.</p>
68+
This specification follows
69+
the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]].
70+
Value types not defined in this specification are defined in CSS Level 2 Revision 1 [[!CSS2]].
71+
Other CSS modules may expand the definitions of these value types:
72+
for example [[CSS-VALUES-3]], when combined with this module,
73+
adds the ''initial'' keyword as a possible property value.
6974

70-
In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the <a href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a> keyword as their property value. For readability it has not been repeated explicitly.
75+
In addition to the property-specific values listed in their definitions,
76+
all properties defined in this specification also accept the
77+
<a href="https://www.w3.org/TR/CSS2/cascade.html#value-def-inherit">inherit</a>
78+
keyword as their property value.
79+
For readability it has not been repeated explicitly.
7180

7281
<!--
7382
██ ████ ██ ██ ███ ██████ ████████ ██
@@ -86,20 +95,25 @@ Image Values: the <<image>> type {#image-values}
8695
It can be a
8796
<a href="#url-notation">url reference</a>,
8897
a <a href="#cross-fade-function">cross-fade expression combining two images</a>,
89-
an <!-- <a href="#image-notation">image notation</a>, -->
98+
<!-- an <a href="#image-notation">image notation</a>, -->
9099
<!-- <a href="#element-reference">element reference</a>, -->
91100
or a <a href="#gradients">color gradient</a>.
92101
Its syntax is:
93102

94103
<pre class="prod"><dfn>&lt;image></dfn> = <<url>> | <<cross-fade()>> | <<gradient>></pre>
95104

96105
An <<image>> can be used in many CSS properties,
97-
including the 'background-image', 'list-style-image', 'cursor' properties [[!CSS21]]
106+
including the 'background-image', 'list-style-image', 'cursor' properties [[!CSS2]]
98107
(where it replaces the <<url>> component in the property's value).
99108

100109
In some cases, an image is invalid,
101110
such as a <<url>> pointing to a resource that is not a valid image format.
102111
An <dfn export lt="invalid image|valid image">invalid image</dfn> is rendered as a solid-color ''transparent'' image with no intrinsic dimensions.
112+
However, <a>invalid images</a> can trigger error-handling clauses
113+
in some contexts.
114+
For example, an <a>invalid image</a> in 'list-style-image'
115+
is treated as ''list-style-type/none'',
116+
allowing the 'list-style-type' to render in its place. [[CSS2]]
103117

104118

105119
<!--
@@ -117,7 +131,7 @@ Image References: the ''url()'' notation {#url-notation}
117131
------------------------------------------------------------------------------------------
118132

119133
The simplest way to indicate an image is to reference an image file by URL.
120-
This can be done with the ''url()'' notation, defined in [[css-values-3]].
134+
This can be done with the ''url()'' notation, defined in [[CSS-VALUES-3]].
121135

122136
<div class="example">
123137
In the example below, a background image is specified with ''url()''syntax:
@@ -247,7 +261,7 @@ Gradients {#gradients}
247261
Gradients are specified by defining the <dfn>starting point</dfn> and <dfn>ending point</dfn>
248262
of a <dfn export>gradient line</dfn>
249263
(which, depending on the type of gradient,
250-
may be technically a line, or a ray, or a spiral),
264+
may geometrically be a line, or a ray, or a spiral),
251265
and then specifying colors at points along this line.
252266
The colors are smoothly blended to fill in the rest of the line,
253267
and then each type of gradient defines how to use the color of the <a>gradient line</a> to produce the actual gradient.
@@ -276,7 +290,7 @@ Linear Gradients: the ''linear-gradient()'' notation {#linear-gradients}
276290

277291
<h4 class='no-toc' id='linear-gradient-syntax'>linear-gradient() syntax</h4>
278292

279-
The linear gradient syntax is:
293+
The linear gradient syntax is:
280294

281295
<pre class=prod>
282296
<dfn>linear-gradient()</dfn> = linear-gradient(
@@ -477,10 +491,10 @@ Radial Gradients: the ''radial-gradient()'' notation {#radial-gradients}
477491
<dl dfn-type=value dfn-for="radial-gradient(), repeating-radial-gradient()">
478492
<dt><dfn><<position>></dfn>
479493
<dd>
480-
Determines the <dfn dfn>gradient center</dfn> of the gradient.
494+
Determines the <dfn dfn lt="gradient center">center</dfn> of the gradient.
481495
The <<position>> value type
482496
(which is also used for 'background-position')
483-
is defined in [[!css-values-3]],
497+
is defined in [[!CSS-VALUES-3]],
484498
and is resolved using the center-point as the object area
485499
and the <a>gradient box</a> as the positioning area.
486500
If this argument is omitted,
@@ -1171,19 +1185,19 @@ Examples of CSS Object Sizing {#object-sizing-examples}
11711185
-------------------------------------------------------
11721186

11731187
<div class="example">
1174-
The following examples show how the <a href="https://www.w3.org/TR/CSS21/">CSS 2.1</a>
1188+
The following examples show how the <a href="https://www.w3.org/TR/CSS2/">CSS 2.1</a>
11751189
and <a href="https://www.w3.org/TR/css3-background/">CSS3 Backgrounds &amp; Borders</a> sizing algorithms
11761190
correspond to concepts defined in this specification.
11771191

11781192
<dl>
11791193
<dt>'background-image'
11801194
<dd>
11811195
The rules for calculating the <a>concrete object size</a> of a background
1182-
are defined in <a href="https://www.w3.org/TR/CSS21/colors.html#background-properties">CSS2.1§14.2.1</a>
1196+
are defined in <a href="https://www.w3.org/TR/CSS2/colors.html#background-properties">CSS2.1§14.2.1</a>
11831197
and <a href="https://www.w3.org/TR/css3-background/#the-background-size">CSS3BG§3.9</a>.
11841198
CSS2.1 uses the <a>default sizing algorithm</a>
11851199
with no <a>specified size</a>
1186-
and the <a>background positioning area</a> as the <a>default object size</a>. [[!CSS21]]
1200+
and the <a>background positioning area</a> as the <a>default object size</a>. [[!CSS2]]
11871201
In CSS3, 'background-size' property can give a sizing constraint,
11881202
invoking either the <a>default sizing algorithm</a>
11891203
or one of the <a lt="contain constraint">contain</a> or <a lt="cover constraint">cover</a> constraints.
@@ -1192,7 +1206,7 @@ Examples of CSS Object Sizing {#object-sizing-examples}
11921206
<dt>'list-style-image'
11931207
<dd>
11941208
The rules for calculating the <a>concrete object size</a> of a list-style image
1195-
are defined in <a href="https://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image">CSS2.1§12.5.1</a>.
1209+
are defined in <a href="https://www.w3.org/TR/CSS2/generate.html#propdef-list-style-image">CSS2.1§12.5.1</a>.
11961210
They use the <a>default sizing algorithm</a>
11971211
with no <a>specified size</a>
11981212
and a <a>default object size</a> of 1em square.
@@ -1217,26 +1231,26 @@ Examples of CSS Object Sizing {#object-sizing-examples}
12171231
<dt>'cursor'
12181232
<dd>
12191233
The rules for calculating the <a>concrete object size</a> of a cursor
1220-
are defined in <a href="https://www.w3.org/TR/CSS21/ui.html#cursor-props">CSS2.1 § 18.1: Cursors</a>.
1234+
are defined in <a href="https://www.w3.org/TR/CSS2/ui.html#cursor-props">CSS2.1 § 18.1: Cursors</a>.
12211235
The <a>default object size</a> is a UA-defined size
1222-
that should be based on the size of a typical cursor on the UA's operating system. [[!CSS21]]
1236+
that should be based on the size of a typical cursor on the UA's operating system. [[!CSS2]]
12231237

12241238
<dt>'content'
12251239
<dd>
12261240
Objects inserted via the CSS2.1 'content' property
1227-
are anonymous <a href="https://www.w3.org/TR/CSS21/conform.html#replaced-element">replaced elements</a>,
1228-
and are sized the same way. [[!CSS21]]
1241+
are anonymous <a href="https://www.w3.org/TR/CSS2/conform.html#replaced-element">replaced elements</a>,
1242+
and are sized the same way. [[!CSS2]]
12291243
Note that such anonymous elements have all their non-inherited properties (including 'width', 'height', etc.)
12301244
set to their initial values.
12311245

1232-
<dt><a href="https://www.w3.org/TR/CSS21/conform.html#replaced-element">replaced elements</a>
1246+
<dt><a href="https://www.w3.org/TR/CSS2/conform.html#replaced-element">replaced elements</a>
12331247
<dd>
1234-
<a href="https://www.w3.org/TR/CSS21/">CSS 2.1</a> defines the sizing of replaced elements
1235-
(including those inserted as <a href="https://www.w3.org/TR/CSS21/generate.html#content">generated content</a> via 'content')
1236-
in sections <a href="https://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width">10.3.2</a>,
1248+
<a href="https://www.w3.org/TR/CSS2/">CSS 2.1</a> defines the sizing of replaced elements
1249+
(including those inserted as <a href="https://www.w3.org/TR/CSS2/generate.html#content">generated content</a> via 'content')
1250+
in sections <a href="https://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width">10.3.2</a>,
12371251
<a href="https://www.w3.org/TR/CSS2/visudet.html#min-max-widths">10.4</a>,
1238-
<a href="https://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height">10.6.2</a>,
1239-
and <a href="https://www.w3.org/TR/CSS2/visudet.html#min-max-heights">10.7</a>. [[!CSS21]]
1252+
<a href="https://www.w3.org/TR/CSS2/visudet.html#inline-replaced-height">10.6.2</a>,
1253+
and <a href="https://www.w3.org/TR/CSS2/visudet.html#min-max-heights">10.7</a>. [[!CSS2]]
12401254
The 'object-fit' property defined below defines how the <a>concrete object size</a> corresponds to the element's used width and height;
12411255
by default they coincide.
12421256
</dl>
@@ -1369,7 +1383,7 @@ Positioning Objects: the 'object-position' property {#the-object-position}
13691383
The 'object-position' property determines the alignment of the replaced element inside its box.
13701384
The <<position>> value type
13711385
(which is also used for 'background-position')
1372-
is defined in [[!css-values-3]],
1386+
is defined in [[!CSS-VALUES-3]],
13731387
and is resolved using the <a>concrete object size</a> as the object area
13741388
and the content box as the positioning area.
13751389

0 commit comments

Comments
 (0)