The 'timeline-trigger' [=shorthand property=]
diff --git a/css-align-3/Overview.bs b/css-align-3/Overview.bs
index cfebde4ea8e3..023b07495c7c 100644
--- a/css-align-3/Overview.bs
+++ b/css-align-3/Overview.bs
@@ -2036,186 +2036,23 @@ Default Alignment Shorthand: the 'place-items' property
Gaps Between Boxes
- While 'margin' and 'padding' can be used to specify visual spacing around individual boxes,
- it's sometimes more convenient to globally specify spacing
- between adjacent boxes within a given layout context,
- particularly when the spacing is different between sibling boxes
- as opposed to between the first/last box and the container's edge.
-
- The 'gap' property,
- and its 'row-gap' and 'column-gap' sub-properties,
- provide this functionality for
- multi-column,
- flex,
- and grid layout.
-
-
-Row and Column Gutters: the 'row-gap' and 'column-gap' properties
-
-
- Name: row-gap, column-gap
- Value: normal | <> | <>
- Initial: normal
- Applies to: multi-column containers, flex containers, grid containers
- Inherited: no
- Percentages: see [[#gap-percent]]
- Computed value: specified keyword, else a computed <> value
- Animation type: by computed value type
-
-
- These properties specify fixed-length gutters
- between items in the container,
- adding space between them--
- in a manner similar to the ''justify-content/space-between'' keyword
- of the content-distribution properties,
- but of a fixed size instead of as a fraction of remaining space.
- The 'column-gap' property specifies spacing between “columns”,
- separating boxes in the container's inline axis
- similar to inline-axis margin;
- while 'row-gap' indicates spacing between “rows”,
- separating boxes in the container's block axis.
-
- Values have the following meanings:
-
-
- : <>
- : <>
- ::
- Specifies a gap between “rows” or “columns”,
- as defined by the layout modes to which it applies;
- see subsections below for details.
-
- Negative values are invalid.
- For percentages,
- see [[#gap-percent]].
-
- : normal
- :: The value ''gap/normal'' represents
- a used value of ''1em'' on multi-column containers,
- and a used value of ''0px'' in all other contexts.
-
-
- Gutters effect a minimum spacing between items:
- additional spacing may be added by 'justify-content'/'align-content'.
- Such additional space effectively increases the size of these gutters.
-
- The exact handling of these properties varies by layout container:
-
-
- 'column-gap' specifies the [=gutter=] between adjacent column boxes,
- see [[CSS-MULTICOL-1]].
- 'row-gap' specifies the [=gutter=] between the rows of [=column boxes=] established by 'column-height',
- see [[CSS-MULTICOL-2]].
-
-
- When applied to the main axis
- (e.g. 'column-gap' in a ''flex-flow/row'' flex container),
- indicates the [=gutter=] between items
- (as if an additional fixed-size margin were inserted
- between adjacent flex items
- in a single line).
-
- When applied to the cross axis
- (e.g. 'row-gap' in a ''flex-flow/row'' flex container),
- indicates the [=gutter=] between adjacent flex lines.
-
-
- The 'row-gap' and 'column-gap' properties,
- when specified on a grid container,
- define the [=gutters=] between grid rows and grid columns,
- respectively.
- See [[css-grid-1#gutters]] for precise details.
-
-
- In all cases, the [=gutter=] disappears when it coincides with
- a [=fragmentation break=]. [[CSS-BREAK-3]]
-
- Note: Table boxes do not use the 'gap' properties
- to specify separation between their cells.
- Instead, they use the 'border-spacing' property,
- which has slightly different functionality:
- it inherits,
- and it also specifies the additional spacing between the outermost cells
- and the border of the table
- (similar to ''space-evenly'' rather than ''space-between'').
-
-
-Gap Shorthand: the 'gap' property
-
-
- Name: gap
- Value: <<'row-gap'>> <<'column-gap'>>?
- Initial: see individual properties
- Applies to: multi-column containers, flex containers, grid containers
- Inherited: no
- Percentages: refer to corresponding dimension of the content area
- Computed value: see individual properties
- Animation type: by computed value type
-
-
- This property is a shorthand that sets 'row-gap' and 'column-gap' in one declaration.
- If <<'column-gap'>> is omitted,
- it's set to the same value as <<'row-gap'>>.
-
-
-
-
-
-
- Note: The 'gap' property is only one component of the visible “gutter” or “alley” created between boxes.
- Margins, padding, or the use of distributed alignment
- may increase the visible separation between boxes
- beyond what is specified in 'gap'.
-
-
-
-Percentages In 'gap' Properties
-
- In general,
- gaps introduced by the 'gap' properties
- are intended to act like an empty item/track/etc
- with the gap's size;
- in other words,
- an author should be able to reproduce the effects of 'gap'
- by just inserting additional empty items/tracks/etc
- into the container.
-
- 'gap' always resolves percentages against
- the corresponding size of the [=content box=]
- of the element.
- When this size is definite,
- the behavior is well-defined
- and consistent across layout modes.
- But since different layout modes treat [=cyclic percentage sizes=] for items/tracks/etc differently,
- 'gap' does as well:
-
- : In Grid Layout
- ::
- As in the min size properties and margins/paddings [[CSS-SIZING-3]],
- [=cyclic percentage sizes=] resolve against zero
- for determining intrinsic size contributions,
- but resolve against the box’s content box
- when laying out the box’s contents.
-
- : In Flex Layout
- ::
- [=Cyclic percentage sizes=] resolve against zero in all cases.
-
-
-Legacy Gap Properties: the 'grid-row-gap', 'grid-column-gap', and 'grid-gap' properties
-
- The Grid Layout module was originally written with its own set of [=gutter=] properties,
- before all such properties were unified into the existing 'row-gap'/'column-gap' naming.
- For compatibility with legacy content,
- these grid-prefixed names must be supported as follows:
-
- * grid-row-gap as a [=legacy name alias=] of the 'row-gap' property
- * grid-column-gap as a [=legacy name alias=] of the 'column-gap' property
- * grid-gap as a [=legacy name alias=] of the 'gap' property
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This section has been moved to [[CSS-GAPS-1#gaps]].
+
+ 4. Otherwise, if the row is not empty,
+ [=synthesize=] from the lowest and highest [=content edges=]
+ of all the cells in the row.
+ See [[css2#height-layout]].
+
+ 5. Otherwise,
+ use the [=block-start=] [=content edge=] of the [=table row box=] itself
+ as the [=alignment baseline=].
+
+ For this purpose,
+ any [=table cell=] that spans multiple rows
+ is ignored if it’s span does not start in this row;
+ except that for step 2,
+ it's ignored if its span does not end in this row.
+
+ Last baselines are analogous
+ (with “first”/“last” and “start”/“end” inverted).
Spanning cells participate only in the first/last row that they span
for the purpose of ''first baseline''/''last baseline''.
@@ -2555,6 +2420,8 @@ Changes
* Defined that 'justify-self' affects the [=automatic size=] of block-level boxes
the same way it does for flex and grid items.
(Issue 12102)
+ * Moved the gap properties to [[!CSS-GAPS-1]].
+ (Issue 13089)
See also previous changes.
diff --git a/css-anchor-position-1/Overview.bs b/css-anchor-position-1/Overview.bs
index d47895cfcd54..8a8911346c51 100644
--- a/css-anchor-position-1/Overview.bs
+++ b/css-anchor-position-1/Overview.bs
@@ -2,7 +2,7 @@
Title: CSS Anchor Positioning Module Level 1
Shortname: css-anchor-position
Level: 1
-Status: ED
+Status: WD
Group: csswg
Work Status: refining
ED: https://drafts.csswg.org/css-anchor-position-1/
@@ -31,6 +31,7 @@ spec:css-cascade-5; type:dfn; text:property
spec:dom; type:dfn; text:shadow tree
spec:css-align-3; type:value; text:center
spec:css-values-5; type:dfn; text:invalid at computed-value time
+spec:css-env-1; type:function; text:env()
@@ -457,7 +458,7 @@ in anchor positioning.
if all of the following are true:
* |possible anchor| is either an [=element=]
- or a fully styleable [=tree-abiding pseudo-element=].
+ or a [=fully styleable pseudo-elements=].
* |possible anchor| is in scope for |positioned el|,
per the effects of 'anchor-scope' on |possible anchor|
@@ -572,6 +573,12 @@ is the box's default anchor box.
+If an element has a [=default anchor element=],
+then the [=scrollable containing block=] is used in place of the [=local containing block=]
+when the [=absolute-position containing block=] is generated by a [=scroll container=],
+so that the entire [=scrollable overflow area=] (typically) is available
+for positioning.
+
### Implicit Anchor Elements ### {#implicit}
Some specifications can define that,
@@ -686,10 +693,6 @@ what area of this [=position-area grid=] to lay out the positioned box in.
Values other than ''position-area/none'' have the following additional effects:
-* The [=scrollable containing block=] is used in place of the [=local containing block=]
- when the [=absolute-position containing block=] is generated by a [=scroll container=],
- so that the entire [=scrollable overflow area=] (typically) is available
- for positioning.
* The [=used value=] of any ''top/auto'' [=inset properties=]
and ''margin/auto'' [=margin properties=]
resolves to ''0''.
@@ -1365,10 +1368,7 @@ then it is centered (insofar as possible)
over the [=default anchor box=]
in the relevant axis.
Additionally:
-* The [=scrollable containing block=] is used in place of the [=local containing block=]
- where applicable,
- so that the entire [=scrollable overflow area=] (typically) is available
- for positioning.
+
* The [=used value=] of any ''top/auto'' [=inset properties=]
and ''margin/auto'' [=margin properties=]
resolves to ''0''.
@@ -1503,12 +1503,12 @@ or being positioned partially off screen.
To ameliorate this, an [=absolutely positioned=] box
can use the 'position-try-fallbacks' property
-to specify additional [=position options=]
+to specify additional position options
(variant sets of positioning/alignment properties
generated from the box's existing styles,
or specified in ''@position-try'' rules)
that the UA can try if the box overflows its initial position.
-Each is applied to the box,
+Each [=position option=] is applied to the box,
one by one in the order specified by 'position-try-order',
and the first that doesn't cause the box
to overflow its [=containing block=]
@@ -1562,17 +1562,18 @@ Applies to: [=absolutely positioned boxes=]
Animation type: discrete
-This property provides a list of alternate positioning styles
-to try when the [=absolutely positioned box=]
-overflows its [=inset-modified containing block=].
-This position options list
-initially contains a single [=position option=]
-generated from the element's fallback base styles,
-i.e. the [=computed values|computed styles=] without applying 'position-try-fallbacks'.
+This property provides a list of additional, alternative [=position options=]
+to try in order to prevent the [=absolutely positioned box=]
+from overflowing its [=inset-modified containing block=].
-Each comma-separated entry in the list is a separate option:
+Each comma-separated entry in the list is a separate [=position option=]:
either the name of a ''@position-try'' block,
-or a <> representing an automatic transformation of the box's existing computed style.
+or a <> representing an automatic transformation
+of the box's existing computed style (its fallback base styles).
+Together with the [=fallback base styles=],
+these options form the position options list
+from which the effective style is chosen,
+see [[#fallback-apply]].
Values have the following meanings:
@@ -1580,7 +1581,8 @@ Values have the following meanings:
: none
::
The property has no effect;
- the box's [=position options list=] is empty.
+ the box's [=position options list=]
+ consists only of the [=fallback base styles=].
: <>
::
@@ -1596,8 +1598,8 @@ Values have the following meanings:
::
Automatically creates a [=position option=]
by [=executing a try-tactic|executing the specified try tactic=]
- to the box's [=base styles=],
- then adding the constructed [=position option=]
+ on the box's [=base styles=],
+ then adding this constructed [=position option=]
to the box's [=position options list=].
@@ -1684,10 +1686,10 @@ Inherited: no
Animation Type: discrete
-This property allows an element to sort its [=position options=]
-by the available space they define,
-if it's more important for the box to have as much space as possible
-rather than strictly following the order declared in 'position-try-fallbacks'.
+This property allows an element to sort its [=position option list=]
+by the available space they produce.
+This allows the box to prioritize having more layout space
+over strictly following the order declared in 'position-try-fallbacks'.
<> = most-width | most-height | most-block-size | most-inline-size
@@ -1845,11 +1847,10 @@ The ''@position-try'' Rule {#fallback-rule}
-------------------------------
The @position-try rule
-defines a position option
-with a given name,
+defines a [=position option=] with a given name,
specifying one or more sets of positioning properties
that can be applied to a box
-via 'position-try-fallbacks',
+via 'position-try-fallbacks'.
The syntax of the ''@position-try'' rule is:
@@ -1862,10 +1863,10 @@ The syntax of the ''@position-try'' rule is:
The <> specified in the prelude
is the rule's name.
If multiple ''@position-try'' rules are declared with the same name,
-they [=cascade=] the same as ''@keyframe'' rules do.
+they [=cascade=] (overriding each other) the same as ''@keyframes'' rules do.
-The ''@position-try'' rule only accepts
-the following [=properties=]:
+The ''@position-try'' rule only accepts
+the following accepted @position-try properties:
* [=inset properties=]
* [=margin properties=]
@@ -2034,7 +2035,7 @@ and thus trigger special behavior. These fallback-sensitive changes i
have been added, removed, or mutated.
For this purpose, only changes to the computed base style are considered,
- i.e. the [=computed style=] ignoring any declarations originating
+ i.e. the [=computed value=] ignoring any declarations originating
from the Transitions or Animations [=cascade origins=].
@@ -2218,8 +2219,8 @@ Conditional Hiding: the 'position-visibility' property {#position-visibility}
Name: position-visibility
-Value: always | [ anchors-valid || anchors-visible || no-overflow ]
-Initial: anchors-visible
+Value: always | [ anchor-valid || anchor-visible || no-overflow ]
+Initial: anchor-visible
Applies to: [=absolutely positioned boxes=]
Percentages: n/a
Inherited: no
@@ -2238,23 +2239,14 @@ depending on some commonly needed layout conditions.
(The box is displayed without regard for its anchors
or its overflowing status.)
- : anchors-valid
+ : anchor-valid
::
- If any of the box's [=required anchor references=]
- do not resolve to a [=target anchor element=],
+ If the box references the [=default anchor box=]
+ (e.g. using 'position-area', 'anchor()' or 'anchor-size()' functions, or ''anchor-center''),
+ but the [=default anchor box=] cannot be resolved,
the box's 'visibility' property computes to ''force-hidden''.
- Issue: What is a required anchor reference?
- ''anchor()'' functions that don't have a fallback value;
- the default anchor *sometimes*?
- Need more detail here.
-
- Issue: Any anchors are missing,
- or all anchors are missing?
- I can see use-cases for either, potentially.
- Do we want to make a decision here, or make it controllable somehow?
-
- : anchors-visible
+ : anchor-visible
::
If the box has a [=default anchor box=]
but that [=anchor box=] is [=invisible=] or [=clipped by intervening boxes=],
@@ -2308,6 +2300,10 @@ depending on some commonly needed layout conditions.
rather than also floating in a nonsensical location.
+User agents may recognize anchors-valid and anchors-visible
+as [=legacy value aliases=] of ''anchor-valid'' and ''anchor-visible''
+(but are not required to).
+
+
Moved the animation-trigger property to a new spec, animation-triggers-1
+ (PR 13571)
+
Added ''animation-duration/auto'' as the [=initial value=] of 'animation-duration'.
diff --git a/css-cascade-3/Overview.bs b/css-cascade-3/Overview.bs
index b206c0776e71..c337b916047b 100644
--- a/css-cascade-3/Overview.bs
+++ b/css-cascade-3/Overview.bs
@@ -343,7 +343,7 @@ Value Processing
it must assign,
to every element in the tree,
and correspondingly to every box in the formatting structure,
- a value to every property that applies to the target media type.
+ a value to every property that applies to the target [=media type=].
The final value of a CSS property for a given element or box
is the result of a multi-step calculation:
diff --git a/css-cascade-4/Overview.bs b/css-cascade-4/Overview.bs
index 5fc5a0310bef..3e6dec6c1daa 100644
--- a/css-cascade-4/Overview.bs
+++ b/css-cascade-4/Overview.bs
@@ -524,7 +524,7 @@ Value Processing
it must assign,
to every element in the [=flat tree=],
and correspondingly to every box in the formatting structure,
- a value to every property that applies to the target media type.
+ a value to every property that applies to the target [=media type=].
The final value of a CSS property for a given element or box
is the result of a multi-step calculation:
diff --git a/css-cascade-5/Overview.bs b/css-cascade-5/Overview.bs
index 9afe53cdd0a8..aad064f4251d 100644
--- a/css-cascade-5/Overview.bs
+++ b/css-cascade-5/Overview.bs
@@ -492,7 +492,7 @@ Value Processing
it must assign,
to every element in the [=flat tree=],
and correspondingly to every box in the formatting structure,
- a value to every property that applies to the target media type.
+ a value to every property that applies to the target [=media type=].
The final value of a CSS property for a given element or box
is the result of a multi-step calculation:
@@ -1264,10 +1264,10 @@ Cascade Layers
and come first in the order of appearance.
- Name-defining [=at-rules=]
- such as ''@keyframes'' or ''@font-face''
+ [=At-rules=]
+ (such as ''@keyframes'', ''@font-face'', ''@page'', etc.)
that are defined inside [=cascade layers=]
- also use the layer order when resolving name collisions.
+ also use the layer order when resolving collisions or [=cascading=].
For example,
diff --git a/css-cascade-6/Overview.bs b/css-cascade-6/Overview.bs
index 0dae54baf1c4..8cd75053a1ba 100644
--- a/css-cascade-6/Overview.bs
+++ b/css-cascade-6/Overview.bs
@@ -771,7 +771,8 @@ Identifying Scoping Roots and Limits
: Finding any [=scoping limits=]
:: For each [=scope=] created by a [=scoping root=],
its [=scoping limits=] are set to all elements
- that are [=in scope=] and that match <>,
+ that are [=descendants=] of the [=scoping root=]
+ and that match <>,
interpreting '':scope'' and ''&''
exactly as in [=scoped style rules=].
diff --git a/css-color-4/Overview.bs b/css-color-4/Overview.bs
index 8f867a21f1c6..4d2f44d2c4c7 100644
--- a/css-color-4/Overview.bs
+++ b/css-color-4/Overview.bs
@@ -42,6 +42,13 @@ spec: css-backgrounds-3; type: property; text: border-bottom-color
spec: css-backgrounds-3; type: property; text: border-right-color
spec: css-ui-4; type: dfn; text: accent color
spec: css-ui-4; type: property; text: accent-color
+spec:css-color-5; type:value; for:oklab();
+ text:a
+ text:b
+ text:l
+spec:css-color-5; type:value; for:oklch();
+ text:c
+ text:h
@@ -784,7 +791,7 @@ Transparency: the 'opacity' property
These rules about z-order do not apply to SVG elements,
since SVG has its own rendering model ([[!SVG11]], Chapter 3).
- The value of the 'opacity' property
+ The value of the 'opacity' property
does not affect hit testing.
@@ -1025,7 +1032,7 @@ Representing Colors: the <> type
- ''rgb()'' and ''rgba()''
- ''hsl()'' and ''hsla()''
-
+
The <>, <>, <>, <>, and <> [=color functions=]
are [=cylindrical polar color=] representations using a <> angle;
the other [=color functions=] use [=rectangular orthogonal color=] representations.
@@ -1118,15 +1125,15 @@ This number is normalized
to the range [0,360).
- For example, in ''hsl(-540 0 0)''
- or ''hsl(540 0 0)'',
+ For example, in ''hsl(-540 0 0)''
+ or ''hsl(540 0 0)'',
the <> component is normalized to 180 degrees.
-
+
In ''hsl(360 0 0)''
the <> component is normalized to 0 degrees.
- In ''hsl(calc(-infinity) 0 0)''
- or ''hsl(calc(infinity) 0 0)'',
+ In ''hsl(calc(-infinity) 0 0)''
+ or ''hsl(calc(infinity) 0 0)'',
the <> component is again normalized to 0 degrees.
@@ -1142,7 +1149,7 @@ and prophoto-rgb green is 141.04 degrees
(because these are all different shades of green).
<> components are the most common components to become [=powerless=];
-any color sufficiently close to the central achromatic axis
+any color sufficiently close to the central achromatic axis
will have a [=powerless=] hue component.
@@ -1151,7 +1158,7 @@ will have a [=powerless=] hue component.
In certain cases,
a color can have one or more
- missing color components.
+ missing color components.
In this specification,
this happens automatically due to [[#hue-interpolation|hue-based interpolation]]
@@ -1261,7 +1268,7 @@ will have a [=powerless=] hue component.
If a [=powerless component=] is manually specified,
it acts as normal;
the fact that it's [=powerless=] has no effect.
-
+
However, if a color is automatically produced by color space conversion,
then any [=powerless components=] in the result must instead be set to [=missing=],
instead of whatever value was produced by the conversion process.
@@ -1304,10 +1311,10 @@ Parsing a <> Value
Note: This algorithm is not intented
-to parse a CSS <> value
+to parse a CSS <> value
specified in a CSS stylesheet
or with a CSSOM interface,
-but in other places
+but in other places
like HTML attributes or Canvas interfaces.
@@ -1919,8 +1926,8 @@ System Colors
They are typically used in the browser default stylesheet, for this reason.
To maintain legibility,
- the <> keywords also respond to
- the [=used color scheme=].
+ the <> keywords also respond to
+ the [=element color scheme=].
@@ -4717,7 +4724,7 @@ To prepare a color |col1| for conversion:
If |src| is in a cylindrical polar color representation,
convert |col1|
to the corresponding rectangular orthogonal color representation
- and let this be the new |col1|.
+ and let this be the new |col1|.
@@ -4770,6 +4777,85 @@ where |src| and |dest| are different:
+
+
+
+Comparing <> Values
+
+ Two <> values are equivalent colors
+ when they compare as equal using the algorithm below.
+ This comparison is used,
+ for example,
+ by ''style()'' container queries [[CSS-CONDITIONAL-5]]
+ and by CSS Transitions [[CSS-TRANSITIONS-1]]
+ to determine whether a color value has changed.
+
+ Given two <> values C1 and C2,
+ they are [=equivalent colors=] if and only if
+ the following algorithm returns true:
+
+
+
+ For each of C1 and C2,
+ convert any [=powerless component=]s to [=missing component=]s.
+
+
+ If C1 and C2 share the same <>:
+
+
+ Compare their components one by one,
+ including the alpha channel.
+ A [=missing component=] is only equal to
+ another [=missing component=].
+ Two numeric components are considered equal
+ if they differ by no more than a small
+ implementation-defined ε.
+
+
+ Return true if and only if
+ all components compare as equal.
+
+
+
+
+ Otherwise, C1 and C2 are in different <>s.
+ If either color has at least one [=missing component=],
+ return false.
+
+
+ Otherwise, neither color has any [=missing component=].
+ Convert both C1 and C2 to ''oklab'',
+ then return true if and only if
+ all components (including alpha) of the converted colors
+ compare as equal,
+ using a standardized Oklab ε of 0.00001.
+
+
+
+ Note: Two colors that are expressed in different <>s
+ but are colorimetrically identical—for example,
+ ''red'' and ''color(srgb 1 0 0)''—are [=equivalent colors=]
+ by step 4 of this algorithm,
+ since they convert to the same ''oklab'' value.
+
+ For the purposes of this comparison,
+ ''rgb()'', ''rgba()'', ''hsl()'', ''hsla()'', ''hwb()'',
+ [=hex colors=], [=named colors=], and [=system colors=]
+ are all considered to be in the ''srgb'' <>.
+
+
+ query-style-color.html
+
+
+
CSS serialization of sRGB values
- Corresponding sRGB values use either the ''rgb()'' or ''rgba()'' form
+ If the value has no [=missing color components=],
+ corresponding sRGB values use either the ''rgb()'' or ''rgba()'' form
(depending on whether the (clamped) alpha is exactly 1, or not),
with all ASCII lowercase
letters for the function name.
@@ -6932,7 +7085,77 @@ Serializing sRGB values
to separate the blue component of ''rgba()''
from the alpha value.
-
+ However, the legacy color syntax with comma separators
+ cannot represent ''none''.
+ If the value has at least one [=missing color component=],
+ the serialization form is chosen
+ to preserve those components as the ''none'' keyword,
+ based on the color function of the [=declared value=]:
+
+ * For ''rgb()'' and ''rgba()'' values
+ (the only sRGB form in this list whose syntax accepts ''none'';
+ [=hex colors=], [=named colors=], [=system colors=],
+ deprecated-colors,
+ and ''transparent'' have no parametric syntax
+ and so never have [=missing color components=]),
+ the value is serialized as a ''color()'' function
+ in the ''srgb'' [=color space=]
+ rather than as the modern space-separated form of ''rgb()'',
+ even though that form would also accept ''none'':
+ "color(srgb"
+ followed by a single space,
+ followed by a space-separated list of the three
+ non-alpha components serialized as <>s
+ in the [0, 1] reference range
+ (or as ''none'' if [=missing=]),
+ followed (only if the alpha is non-unity or [=missing=])
+ by " / "
+ and the alpha component
+ (serialized per the
+ alpha rules,
+ or as ''none'' if [=missing=]),
+ followed by ")".
+
+ * For ''hsl()'' and ''hsla()'' values,
+ the value is serialized using the
+ modern (whitespace-separated) ''hsl()'' syntax,
+ with a slash before the alpha component when present.
+ The function name is "hsl" (in
+ ASCII lowercase)
+ regardless of whether the value was authored
+ using the ''hsla()'' alias.
+ The hue is serialized as a canonicalized <> in degrees,
+ the saturation and lightness as <>s,
+ and the alpha
+ (included only if non-unity or [=missing=])
+ per the alpha rules;
+ any [=missing component=] is serialized as the ''none'' keyword.
+
+ * For ''hwb()'' values,
+ the value is serialized using the
+ modern (whitespace-separated) ''hwb()'' syntax,
+ with a slash before the alpha component when present.
+ The function name is "hwb"
+ in ASCII lowercase.
+ The hue is serialized as a canonicalized <> in degrees,
+ the whiteness and blackness as <>s,
+ and the alpha
+ (included only if non-unity or [=missing=])
+ per the alpha rules;
+ any [=missing component=] is serialized as the ''none'' keyword.
+
+ Note: this means that an ''hsl()'' or ''hwb()'' value
+ containing ''none'' round-trips through serialization
+ in its own color function,
+ rather than degrading to ''rgba()'' (whose legacy form cannot represent ''none''),
+ while an ''rgb()'' value containing ''none''
+ is serialized via ''color(srgb …)''.
+ The modern space-separated form of ''rgb()'' could itself represent ''none'',
+ but the [[#serializing-color-values|sRGB CSS serialization]] uses ''color(srgb …)'' instead
+ for consistency with how all other [=color spaces=] are serialized
+ in their non-legacy form.
+ This parallels the behavior of relative color syntax
+ defined in [[css-color-5#serial-origin-color]].
For example, the serialized value of
@@ -6964,6 +7187,34 @@ Serializing sRGB values
+
+ For example, the author-supplied value
+
+
hwb(20 none 30% / none)
+
+ contains [=missing color components=]
+ (both the whiteness and the alpha are ''none''),
+ so it is not serialized through ''rgba()''.
+ Instead, it is serialized using the modern ''hwb()'' syntax as
+
+
hwb(20 none 30% / none)
+
+ preserving each ''none'' value.
+
+
+
+ Similarly, the author-supplied value
+
+
rgb(none 0 0)
+
+ is serialized as
+
+
color(srgb none 0 0)
+
+ because ''rgb()'' (in its serialized legacy comma form)
+ cannot represent ''none''.
+
+
Note: contrary to CSS Color 3,
the parameters of the ''rgb()'' function
are of type <>, not <>.
@@ -7320,14 +7571,14 @@ Serializing other colors
The serialized form of ''currentColor'' is the string "currentcolor".
-
@@ -7341,10 +7592,10 @@ Serializing <>
(i.e. does not use ''calc()'')
it should be serialized as the equivalent
<> (0% maps to 0, 100% maps to 1) value.
- value.
- Otherwise, the specified value
- for an opacity value
- should serialize using
+ value.
+ Otherwise, the specified value
+ for an opacity value
+ should serialize using
the standard serialization for the grammar.
+
+
For color comparisons in Oklab, standardized ε to be 0.00001
+ (Issue 13157)
+
+
Added a new section defining when two <> values are [=equivalent colors=],
+ covering same-color-space component comparison, the treatment of [=missing component=]s,
+ and cross-color-space comparison via ''oklab''.
+ (Issue 13157)
+
+
Clarified in the main Color interpolation section that, if the hue interpolaton method is not specified, shorter is the default. (This was already specified in the Hue Interpolation section).
+ (Issue 13788)
+
+
Expanded the concept of analogous components to analogous sets of components, to minimize ''none'' → ''0'' conversions
+ (Issue 10210)
+
Split color conversion into two stages
(Issue 10211)
@@ -7870,7 +8137,7 @@ Changes
Added a diagram showing imaginary colors in CIE Lab
Differentiated between out of gamut but physically realizable colors, and imaginary colors
-
More even-handed description of clipping,
+
More even-handed description of clipping,
showing some cases which give acceptable results
(Issue 10579)
@@ -7887,13 +8154,13 @@ Changes
Added display-p3-linear to predefined colorspaces
(Issue 11250)
-
Clarified serializing opacity values with calc()
+
Clarified serializing opacity values with calc()
(Issue 10426)
Interpolation between legacy sRGB colors is (once again) in sRGB space, for compatibility
(Issue 7949)
-
Clarified real-world CIE Lab range for a and b
+
Clarified real-world CIE Lab range for a and b
(Issue 12208)
Clarified that Opacity value does not affect hit testing
@@ -7904,7 +8171,6 @@ Changes
Clarified that inside the color property, it is the resolved inherited value (not the raw inherited value) that is used
Listed categories of colors, such as those that resolve to sRGB or support legacy color syntax
Added hue normalization examples
diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs
index d761508e31ef..240843095d65 100644
--- a/css-color-5/Overview.bs
+++ b/css-color-5/Overview.bs
@@ -18,6 +18,7 @@ Abstract: This module extends CSS Color [[css-color-4]] to add color modificatio
Repository: w3c/csswg-drafts
WPT Path Prefix: css/css-color/
WPT Display: open
+At Risk: Custom Color Spaces, '@color-profile', 'device-cmyk()', Relative Alpha Colors
@@ -294,12 +295,14 @@ Otherwise, use the specified colorspace for mixing.
1. [=Normalize mix percentages=] from the list of [=mix items=] passed to the function,
with the "forced normalization" flag set to true,
letting |items| and |leftover| be the result.
+
+ 2. Let |alpha mult| be 1 - |leftover|,
interpreting |leftover| as a number between 0 and 1.
- 4. If |items| is length 1,
+ 3. If |items| is length 1,
set |color| to the color of that sole item,
converted to the specified interpolation <>.
@@ -313,7 +316,10 @@ Otherwise, use the specified colorspace for mixing.
Let |combined percentage| be the sum of |a| and |b|’s percentages.
2. Interpolate |a| and |b|’s colors
as described in [[css-color-4#interpolation]],
- with a progress percentage equal to (|b|’s percentage) / |combined percentage|).
+ with a progress percentage equal to
+ (|b|’s percentage) / |combined percentage|),
+ if |combined percentage| is greater than 0,
+ and 0.5 otherwise.
If the specified color space is a [=cylindrical polar color=] space,
then the <> controls the
interpolation of hue, as described in
@@ -324,8 +330,8 @@ Otherwise, use the specified colorspace for mixing.
and a percentage of |combined percentage|,
and [=stack/push=] it onto |item stack|.
3. Set |color| to the color of the sole remaining item in |item stack|.
- 5. Multiply the alpha component of |color| by |alpha mult|.
- 6. Return |color|.
+ 4. Multiply the alpha component of |color| by |alpha mult|.
+ 5. Return |color|.
Note: In [=cylindrical polar color=] spaces,
mixing is order-dependent,
@@ -2780,7 +2786,7 @@ or any other color or monochrome output device which has been characterized.
Reacting to the used color-scheme: the ''light-dark()'' Function
- System colors have the ability to react to the current used ''color-scheme'' value.
+ [=System colors=] have the ability to react to an element's [=color scheme=].
The ''light-dark()'' function exposes the same capability to authors.
There are two forms of this function: one takes a pair of colors
@@ -2799,23 +2805,18 @@ or any other color or monochrome output device which has been characterized.
For the color form, this function computes to the computed value of the first color,
- if the used color scheme is ''light'' or unknown,
+ if the element color scheme is ''light'',
or to the computed value of the second color,
- if the used color scheme is ''dark''.
+ if the element color scheme is ''dark''.
For the image form, this function returns the first image,
- if the used color scheme is ''light'' or unknown,
+ if the element color scheme is ''light'',
or the second image,
- if the used color scheme is ''dark''.
- The none keyword
- produces a fully transparent image
- with no natural size.
-
- It is equivalent to a single-stop gradient whose stop color is ''transparent''':
+ if the element color scheme is ''dark''.
-
- linear-gradient(transparent)
-
+ The none keyword
+ computes to ''image(transparent)''
+ (a fully transparent image with no natural size).
For example, to maintain a legible contrast on links,
@@ -2837,35 +2838,41 @@ or any other color or monochrome output device which has been characterized.
is used in dark mode.
(WCAG contrast 13.28:1, AAA pass).
-
-
Legible link text
-
Illegible link text
-
Legible link text
-
+
+
Legible link text
+
Illegible link text
+
Legible link text
+
-
- For example, to provide easily visible list bullets
- for light mode and dark mode:
+
+ For example, to provide easily visible list bullets
+ for light mode and dark mode:
-
@@ -2873,6 +2880,8 @@ or any other color or monochrome output device which has been characterized.
light-dark-basic.html
light-dark-currentcolor.html
light-dark-image.html
+ light-dark-image-none-interpolation.html
+ light-dark-image-none.html
light-dark-inheritance.html
light-dark-currentcolor-in-color.html
/css/css-pseudo/highlight-styling-004.html
@@ -2939,7 +2948,9 @@ or any other color or monochrome output device which has been characterized.
Color Space for Interpolation
- The <> is extended to allow use of the
+ The <>,
+ as defined in [[css-color-4#interpolation-space]],
+ is extended to allow use of the
custom color spaces:
@@ -3139,65 +3150,103 @@ an implicit value of 1 (fully opaque) is the default.
Serializing color-mix()
-The serialization of the declared value of a ''color-mix()'' function
-is the string "color-mix(in ",
-followed by the specified <> in all-lowercase,
-followed by ", ",
-followed by the first specified color,
-followed by a space,
-followed by the serialization of the first percentage (see below)
-followed by ", ",
-followed by the second specified color,
-followed by the serialization of the second percentage (see below),
+The serialization of the declared value of a ''color-mix()'' function is
+the string "color-mix(",
+followed by, unless the <> is ''oklab''
+(whether explicitly specified or defaulted):
+ the string "in ",
+ followed by the <> in all-lowercase,
+ followed by, if a <> was specified
+ and is not ''shorter hue'',
+ " " and the <> in all-lowercase,
+ followed by ", ",
+followed by the serialization of each color argument (see below),
+separated by ", ",
followed by ")".
-The serialization of the first percentage of a declared value of a ''color-mix()'' function is defined as:
-
- - If BOTH the first percentage |p1| and second percentage |p2| are specified:
- - if both |p1| equals 50% and |p2| equals 50%, nothing is serialized.
- - else, |p1| is serialized as is.
- - else if ONLY the first percentage |p1| is specified:
- - if |p1| is equal to 50%, nothing is serialized.
- - else, |p1| is serialized as is.
- - else if ONLY the second percentage |p2| is specified:
- - if |p2| equals 50%, nothing is serialized.
- - if |p2| is not ''calc()'', the value of 100% - |p2| is serialized.
- - else, nothing is serialized.
- - else if NEITHER is specified:
- - nothing is serialized.
-
-The serialization of the second percentage of a declared value of a ''color-mix()'' function is defined as:
-
- - If BOTH the first percentage p1 and second percentages p2 are specified:
- - if neither p1 nor p2 is calc(), and p1 + p2 equals 100%, nothing is serialized.
- - else, p2 is serialized as is.
- - else if ONLY the first percentage p1 is specified:
- - nothing is serialized.
- - else if ONLY the second percentage p2 is specified:
- - if p2 equals 50%, nothing is serialized.
- - if p2 is not calc(), nothing is serialized.
- - else, p2 is serialized as is.
- - else if NEITHER is specified:
- - nothing is serialized.
-
-Note: ''calc()'' values are consider to be unknown,
-so are never equal 50%,
-and never sum with something else to equal 100%.
+Each color argument is serialized as
+the serialized <>,
+followed by, if a percentage is serialized for this argument (see below),
+ " " and the serialized percentage.
+
+Each color argument is serialized individually;
+in particular,
+identical colors are not collapsed into a single argument.
+
+The serialized percentages
+of the declared value of a ''color-mix()'' function
+are determined as follows.
+Let |N| be the number of color arguments.
+
+For each argument,
+let its effective percentage be:
+ - its specified <>,
+ if one was explicitly provided
+ and is not a ''calc()'' expression;
+ - if its <> was omitted,
+ and none of the other specified <>s
+ are ''calc()'' expressions:
+ (100% − |specified sum|) / |omitted count|,
+ where |specified sum| is the sum of the explicitly specified <>s
+ and |omitted count| is the number of arguments
+ with omitted <>s;
+ - otherwise, unknown.
+
+If all [=effective percentage=]s are known
+and equal to 100% / |N|,
+no percentages are serialized.
+Otherwise, each argument's percentage is serialized as follows:
+ - If a <> was explicitly specified,
+ it is serialized as-is.
+ - If a <> was omitted
+ and none of the other specified <>s
+ are ''calc()'' expressions:
+ the value
+ (100% − |specified sum|) / |omitted count|
+ is serialized,
+ where |specified sum| and |omitted count| are as defined above.
+ - Otherwise (a <> was omitted
+ but another argument has a ''calc()'' <>):
+ nothing is serialized.
+
+Note: ''calc()'' values are considered unknown,
+so are never equal to 100% / |N|,
+and prevent computation of omitted <>s.
For example, the serialized declared value of
color-mix(in oklab, teal, peru 40%)
- would be the string "color-mix(in oklab, teal 60%, peru)".
+ would be the string "color-mix(teal 60%, peru 40%)":
+ the color space is omitted because it is the default (''oklab''),
+ and all percentages are serialized
+ because they are not all equal to 100%/2 = 50%.
The serialized declared value of
color-mix(in oklab, teal 50%, peru 50%)
- would be the string "color-mix(in oklab, teal, peru)".
+ would be the string "color-mix(teal, peru)":
+ both percentages equal 100%/2 = 50%, so they are all omitted.
The serialized declared value of
color-mix(in oklab, teal 70%, peru 70%)
- would be the string "color-mix(in oklab, teal 70%, peru 70%)"
- because the fact that these normalize to 50% each
- is only discovered after percentage normalization.
+ would be the string "color-mix(teal 70%, peru 70%)":
+ the specified percentages are 70%, not 50%,
+ so they are not omitted,
+ even though they normalize to 50% each during computation.
+
+ The serialized declared value of
+
color-mix(in oklch longer hue, red, green, blue)
+ would be the string "color-mix(in oklch longer hue, red, green, blue)":
+ the color space (''oklch'') is not the default,
+ the hue interpolation method (''longer'') is not the default (''shorter''),
+ and all percentages equal 100%/3, so they are all omitted.
+
+ The serialized declared value of
+
color-mix(red 50%, green, blue)
+ would be the string "color-mix(red 50%, green 25%, blue 25%)":
+ the percentages are not all equal to 100%/3,
+ so all are serialized,
+ including the omitted ones
+ which each get (100% − 50%) / 2 = 25%.
The serialization of the result of a ''color-mix()'' function
@@ -3284,6 +3333,16 @@ depends on the color space specified with "in":
+However, if the result of mixing in the ''hsl'' or ''hwb'' [=color space=]
+has at least one [=missing color component=]
+(including a [=missing=] alpha [=carried forward=]
+per [[css-color-4#interpolation-missing]]),
+the form used is the modern ''hsl(h s l / a)'' or ''hwb(h w b / a)'' syntax respectively,
+preserving the original color function and each ''none'' value
+per [[css-color-4#css-serialization-of-srgb]],
+rather than degrading to ''color(srgb r g b)'' (which would lose
+the ''hsl''/''hwb'' identity).
+
parsing/color-valid-color-mix-function.html
color-mix-currentcolor-visited-getcomputedstyle.html
@@ -3467,6 +3526,23 @@ while the serialization of the computed value
is the string "color(srgb 0.55 0.45 0.45)".
+
+For example, the serialization of the declared value of
+
+
hsl(from rebeccapurple none none none / none);
+
+is the string "hsl(from rebeccapurple none none none / none)".
+
+The computed value carries forward the [=missing=] alpha
+(alpha is its own [=analogous components|analogous component=]),
+giving an ''hsl()'' [=relative color=]
+whose hue, saturation, lightness, and alpha are all [=missing=].
+Because the resolved value contains [=missing color components=],
+the serialization uses the modern ''hsl()'' form,
+yielding the string "hsl(none none none / none)"
+rather than ''color(srgb 0 0 0 / none)''.
+
+
For example, the serialization of the declared value of
@@ -3575,6 +3651,19 @@ depends on the color space of the [=relative color=]:
+However, if the resolved value of an ''hsl()'' or ''hwb()'' [=relative color=]
+has at least one [=missing color component=]
+(including a [=missing=] alpha [=carried forward=]
+from the [=origin color=] per [[css-color-4#interpolation-missing]]),
+the form used is the modern ''hsl(h s l / a)'' or ''hwb(h w b / a)'' syntax respectively,
+preserving the original color function and each ''none'' value,
+rather than degrading to ''color(srgb r g b)'' (which would lose
+the ''hsl''/''hwb'' identity).
+This parallels [[#serial-origin-color]],
+which always emits the modern slash syntax for origin colors,
+and follows the general sRGB serialization rules in
+[[css-color-4#css-serialization-of-srgb]].
+
@@ -3821,6 +3910,20 @@ This specification adds a way to ensure adequate contrast for text whose backgro
+
Removed special casing of 100% from the color-mix() algorithm,
+ thus avoiding a discontinuity near fully-transparent colors
+ (Issue 14014),
+ (Issue 13996)
+
+
+ Guarded against division by zero in the color-mix() algorithm
+ (Issue 14013),
+ (Issue 13996)
+
+
Added a backlink from Color Interpolation in this specification,
+ to the same section in CSS Color 4 where most of this is defined
+ (Issue 13788)
+
Added a second form of the light-dark() function,
which takes a pair of images rather than a pair of colors
(Issue 12513)
@@ -3829,6 +3932,14 @@ This specification adds a way to ensure adequate contrast for text whose backgro
(Issue 12513)
Added a color-mix() example with three colors, now that it is no longer restricted to just two.
+
Updated color-mix() serialization:
+ omit color space when it is the default (oklab),
+ serialize hue interpolation method when non-default,
+ generalize percentage rules for N colors
+ (omit all when equal to 100%/N, otherwise serialize all),
+ and clarify that identical colors are not collapsed
+ (Issue 13320)
+
diff --git a/css-color-adjust-1/Overview.bs b/css-color-adjust-1/Overview.bs
index ab79a23479fd..6add2cb7d4d6 100644
--- a/css-color-adjust-1/Overview.bs
+++ b/css-color-adjust-1/Overview.bs
@@ -20,7 +20,6 @@ Editor: Tab Atkins Jr., Google, http://www.xanthir.com/contact/, w3cid 42199
Abstract: This module introduces a model and controls over automatic color adjustment by the user agent to handle user preferences, such as "Dark Mode", contrast adjustment, or specific desired color schemes.
Ignored Terms: -webkit-tap-highlight-color, name, the head element
WPT Path Prefix: css/css-color-adjust/
-WPT Display: open
spec:css2; type:dfn; text:canvas
@@ -124,30 +123,131 @@ Preferred Color Schemes {#preferred}
consists of the opposite,
with dark background colors and light foreground/text colors.
- Advisement: The [=light=] and [=dark color schemes=]
- don't represent an exact color palette (such as black-and-white),
+ Note: [=Light=] and [=dark=] [=color schemes=]
+ are not specific color palettes,
but a range of possible palettes.
- To guarantee specific colors, authors must specify those colors themselves.
+ For example,
+ a stark black-on-white scheme and a sepia dark-on-tan scheme
+ would both be considered [=light color schemes=].
+ To guarantee specific colors, authors must specify those colors themselves.
Note also that, consequently,
pairing default or <> colors with author-specified colors
cannot guarantee any particular contrast level;
- it might be necessary to set both foreground and background colors together
- to ensure legibility [[WCAG22]].
-
- To enable pages to adapt to the user's [=preferred color scheme=],
- user agents will match the '@media/prefers-color-scheme' media query
- to the user's [=preferred color scheme=].
- [[!MEDIAQUERIES-5]]
- Complementing this, the 'color-scheme' property defined here
- lets the author indicate appropriate [=color schemes=]
- for UA-provided UI and colors in the page.
+ to ensure legibility,
+ generally either both foreground and background should be paired [=system colors=]
+ or both be manually specified colors.
+ [[WCAG22]]
+
+ The user's [=preferred color scheme=]
+ is then combined with the [=page's supported color schemes=]
+ to produce a page color scheme.
+ The [=page color scheme=] also records whether it's default or not.
+ The [=page color scheme=] is queryable with the '@media/prefers-color-scheme' [=media query=]. [[!MEDIAQUERIES-5]]
+
+ Individual elements have an element color scheme,
+ which by default matches the [=page color scheme=],
+ but can be overriden using the 'color-scheme' property.
+ The [=element color scheme=] affects things such as the value of [=system colors=] on the element,
+ the value of the ''light-dark()'' function,
+ and how user interface elements (like scrollbars) render.
+ (See [[#color-scheme-effect]].)
User agents may support additional [=color schemes=],
however CSS does not support negotiation of additional [=color schemes=]:
user agents should pursue standardization of these schemes,
so that '@media/prefers-color-scheme' and 'color-scheme' can reflect the additional values.
-Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme-prop}
+ Note: Because many pages were authored before [=color scheme=] support existed,
+ and thus pages were authored with the assumption of the default ([=light=]) color scheme,
+ user agents cannot automatically adapt the colors used in elements under their control,
+ as it might cause unreadable color contrast with the surrounding page.
+ Pages have to opt into [=color scheme=] support
+ by setting the [=page color scheme=],
+ or manually setting the 'color-scheme' property on individual elements.
+
+Opting Into a Preferred Color Scheme {#color-scheme-page}
+------------------------------------
+
+ The [=page color scheme=]
+ represents the [=color scheme=] that will be used for the page overall
+ (queryable with the ''prefers-color-scheme'' [=media feature=])
+ and for all elements that don't specifically override the [=page color scheme=] with the 'color-scheme' property.
+ See [[#color-scheme-effect]] for a full description of what the [=color scheme=] effects.
+
+ Note: In HTML, the <{meta/name/color-scheme|color-scheme <meta>}>
+ sets the [=page color scheme=].
+
+ Authors should generally set the [=page color scheme=],
+ rather than using the 'color-scheme' property,
+ so that the '@media/prefers-color-scheme' [=media feature=]
+ is consistent with the elements on the page.
+
+ The [=page color scheme=] is determined by finding the [=used color scheme=],
+ given the [=preferred color scheme=]
+ and the page's supported color schemes
+ (a [=color scheme support=]).
+
+ In embedded documents
+ (such as an <{iframe}> or an SVG <{img}>),
+ the embedding element's [=element color scheme=]
+ is used as the embedded document's [=preferred color scheme=]
+ (treated as a normal [=color scheme preference=]),
+ rather than the user's preference.
+ This allows embedded documents to match the negotiated color scheme
+ for the page or an element,
+ similar to other elements in the parent document.
+
+
+
+ A page that responds to user preferences for light or dark display
+ by using the ''@media/prefers-color-scheme'' media feature
+ to alter the colors it uses
+ can easily opt the browser-controlled UI
+ (scrollbars, inputs, etc)
+ to match
+ with a simple global declaration:
+
+
+ <meta name=color-scheme contents="light dark">
+
+
+ (Or, in languages that don't have a way to set the [=page color scheme=] directly,
+ a '':root { color-scheme: light dark;}'' rule.)
+
+ If a page limits itself to using only the <>s,
+ the 'color-scheme' declaration
+ will support the user's preferred color scheme
+ even without the author needing to use ''@media'' at all.
+
+
+
+ If a page cannot reasonably accommodate all color schemes,
+ such as for branding or theatrical reasons,
+ <{meta/name/color-scheme}> or 'color-scheme'
+ can still indicate which color schemes the page can support,
+ causing the UI to match.
+
+ If the page's color scheme is primarily light,
+ the following will indicate that explicitly:
+
+
+ <meta name=color-scheme contents="light">
+
+
+ While if the page is primarily dark,
+ indicating that explicitly will make the page look more coherent as well:
+
+
+ <meta name=color-scheme contents="dark">
+
+
+ However, it is better to support both color schemes,
+ of course.
+
+
+
+
+Overriding the Page Color Scheme: the 'color-scheme' property {#color-scheme-prop}
-----------------------------------------------------------------
@@ -156,7 +256,7 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
Initial: normal
Applies to: all elements and text
Inherited: yes
- Computed Value: the keyword ''normal'', or an ordered list of specified color scheme keywords
+ Computed Value: the keyword ''normal'', or a [=color scheme support=]
Animation type: discrete
@@ -184,48 +284,34 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
rendering/dark-color-scheme/color-scheme-visited-link-initial.html
- While the prefers-color-scheme media feature
- allows an author to adapt the page’s colors to the user’s preferred color scheme,
- many parts of the page are not under the author's control
- (such as form controls, scrollbars, etc).
- The 'color-scheme' property allows an element to indicate
- which [=color schemes=] it is designed to be rendered with.
- These values are negotiated with the user's preferences,
- resulting in a used color scheme
- that affects things such as
- the default colors of form controls and scrollbars.
- (See [[#color-scheme-effect]].)
-
- Note: Because many pages were authored before color scheme support existed,
- user agents cannot automatically adapt the colors used in elements under their control,
- as it might cause unreadable color contrast with the surrounding page.
-
- Host languages can define the page's supported color schemes,
- a list of [=color schemes=] supported by default for all elements on that page.
-
- Note: [[HTML]] specifies a
- color-scheme
- <{meta}> tag which can be used to set the [=page's supported color schemes=].
-
+ While the [=page color scheme=] should generally be used
+ to control what [=color scheme=] a page uses,
+ occasionally there is need to override that [=color scheme=]
+ on a particular subtree.
+ The 'color-scheme' property allows this,
+ manually setting the [=element color scheme=]
+ for an element and its descendants.
Values are defined as follows:
: normal
::
- Indicates that the element supports the [=page's supported color schemes=],
- if they are set, or that it supports no [=color schemes=] at all otherwise.
+ The [=element color scheme=] is the same as the [=page color scheme=].
+ (This includes noting whether the [=color scheme=] was [=color scheme/defaulted=].)
: light
- ::
- Indicates that the element supports a [=light color scheme=].
-
: dark
::
- Indicates that the element supports a [=dark color scheme=].
+ Indicates that the element supports a [=light=] and/or [=dark=] color scheme,
+ as appropriate.
+ The element's [=color scheme support=] will include the keywords,
+ in the order they're specified.
: only
::
Forbids the user agent from [=overriding the color scheme=] for the element.
+ The element's [=color scheme support=] will have a flag
+ indicating sole support.
: <>
::
@@ -245,95 +331,11 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
are not valid <>s in this property.
- Note: [=Light=] and [=dark=] [=color schemes=]
- are not specific color palettes.
- For example,
- a stark black-on-white scheme and a sepia dark-on-tan scheme
- would both be considered [=light color schemes=].
- To ensure particular foreground or background colors,
- they need to be specified explicitly.
-
-
- To determine the used color scheme of an element:
-
- 1. If the user's [=preferred color scheme=],
- as indicated by the prefers-color-scheme media feature,
- is present among the listed [=color schemes=],
- and is supported by the user agent,
- that's the element's [=used color scheme=].
-
- 2. Otherwise,
- if the user has indicated an overriding preference for their chosen color scheme,
- and the ''only'' keyword is not present in 'color-scheme' for the element,
- the user agent must [=override the color scheme=]
- with the user's [=preferred color scheme=].
- See [[#color-scheme-override]].
-
- 3. Otherwise,
- if the user agent supports at least one of the listed [=color schemes=],
- the [=used color scheme=] is
- the first supported [=color scheme=] in the list.
-
- 4. Otherwise,
- the [=used color scheme=] is the browser default.
- (Same as ''color-scheme/normal''.)
-
-
- Note: User agents are not required
- to support any particular [=color scheme=],
- so only using a single keyword,
- such as ''color-scheme: dark'',
- to indicate a required [=color scheme=]
- is still not guaranteed to have any effect on the rendering of the element.
-
-
- A page that responds to user preferences for light or dark display
- by using the prefers-color-scheme media feature
- to alter the colors it uses
- can easily opt the browser-controlled UI
- (scrollbars, inputs, etc)
- to match
- with a simple global declaration:
-
-
- :root {
- color-scheme: light dark;
- }
-
-
- If a page limits itself to using only the <>s,
- the 'color-scheme' declaration, above,
- will support the user's preferred color scheme
- even without the author needing to use ''@media'' at all.
-
-
-
- If a page cannot reasonably accommodate all color schemes,
- such as for branding or theatrical reasons,
- 'color-scheme' can still indicate which color schemes the page can support,
- causing the UI to match.
-
- If the page's color scheme is primarily light,
- the following will indicate that explicitly:
-
-
- :root {
- color-scheme: light;
- }
-
-
- While if the page is primarily dark,
- indicating that explicitly will make the page look more coherent as well:
-
-
- :root {
- color-scheme: dark;
- }
-
-
- However, it is better to support both color schemes,
- of course.
-
+ If an element has any value other than ''color-scheme: normal'',
+ its [=element color scheme=] is determined by finding the [=used color scheme=],
+ given the user's [=preferred color scheme=]
+ and the element's [=color scheme support=]
+ specified by this property.
A page might be generally capable of handling multiple color schemes,
@@ -344,22 +346,21 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
showing off the light or dark theme specifically.
This can be indicated as:
-
- :root {
- color-scheme: light dark;
- }
-
- .light-theme-example {
- color-scheme: light;
- }
+
+ <meta name=color-scheme content="light dark">
+ <style>
+ .light-theme-example {
+ color-scheme: light;
+ }
- .dark-theme-example {
- color-scheme: dark;
- }
- </pre>
+ .dark-theme-example {
+ color-scheme: dark;
+ }
+ </style>
+
Only the subsections rooted at ''.light-theme-example'' or ''.dark-theme-example''
- will be opted into the ''light'' or ''dark'' themes specifically;
+ will be opted into the [=light=] or [=dark=] themes specifically;
the rest of the page will respect the user's preference.
@@ -368,33 +369,125 @@ Opting Into a Preferred Color Scheme: the 'color-scheme' property {#color-scheme
beyond what the first instance of the keyword provides.
+Resolving Color Schemes {#color-scheme-resolution}
+-----------------------
+
+ While it's important for a page to respect the user's preferred [=color scheme=],
+ it's also important to only use a [=color scheme=] the page author expects,
+ or else it is very easy to render a page unreadable
+ by causing the foreground and background elements to accidentally have minimal (or zero!) contrast.
+
+ For example, an author expecting the default light color scheme
+ might set the page background to a light cream
+ while leaving the text color unset,
+ expecting it to use the default black text color.
+ If the page unexpectedly opted into a user's preferred [=dark color scheme=],
+ however,
+ and adjusted the default text color to white,
+ that would make the text virtually unreadable.
+
+ To balance these competing concerns,
+ a user's [=color scheme preference=]
+ is compared against a page's [=color scheme support=]
+ to produce a used [=color scheme=].
+
+ A color scheme preference
+ is either no preference,
+ a [=color scheme=] preference ([=light=] or [=dark=]),
+ or an overriding [=color scheme=] preference.
+
+ A color scheme support
+ is null,
+ or an ordered list of one or more supported [=color schemes=],
+ along with a flag indicating whether or not it solely supports the indicated [=color schemes=].
+
+
+ To determine the used color scheme,
+ given a [=color scheme support=] |support|
+ and a [=color scheme preference=] |preference|:
+
+ 1. If |support| is null,
+ or none of the [=color schemes=] in |support|
+ are supported by the UA,
+ return the UA default [=color scheme=],
+ and annotate that this [=color scheme=] was [=color scheme/defaulted=].
+
+ 1. If |preference| is no preference,
+ return the first supported [=color scheme=] in |support|.
+
+ 1. If |preference|'s [=color scheme=] is in |support|
+ and supported by the UA,
+ return that [=color scheme=].
+
+ 1. If |support| is flagged as sole support,
+ return the first supported [=color scheme=] in |support|.
+
+ 1. If |preference| is an [=overriding preference=],
+ return |preference|'s [=color scheme=].
+ If this [=color scheme=] is used as an [=element color scheme=],
+ also [=override the color scheme=] on the element
+ to this [=color scheme=].
+
+ 1. Otherwise,
+ return the first supported [=color scheme=] in |support|.
+
+ Note: The basic logic here is that,
+ if the page hasn't opted into color schemes at all (null |supports|),
+ we go with the safe UA default that it was probably implicitly designed for.
+ If there is a usable |supports|,
+ and it matches |preference|,
+ we use the preference.
+ Otherwise |preference| and |supports| disagree,
+ and we go back and forth down the preference hierarchy to see who wins:
+ sole support in |support| wins,
+ then overriding preference in |preference| wins
+ (and we adjust the element's colors to make sure this actually works),
+ then |support| finally wins.
+
+
+ Note: User agents are not required
+ to support any particular [=color scheme=],
+ so only using a single keyword,
+ such as ''color-scheme: dark'',
+ to indicate a required [=color scheme=]
+ is still not guaranteed to have any effect on the rendering of the element.
+
+ Note: User agents might not actually support preference levels in a [=color scheme preferences=].
+ At the time of writing,
+ UAs generally only support an ordinary [=light=] or [=dark=] preference,
+ which considerably simplifies the above logic.
+
+
Effects of the Used Color Scheme {#color-scheme-effect}
--------------------------------
For all elements,
- the user agent must match the following to the [=used color scheme=]:
+ the user agent must match the following to the [=element color scheme=]:
* the default colors of scrollbars and other interaction UI
* the default colors of form controls and other "specially-rendered" elements
* the default colors of other browser-provided UI, such as "spellcheck" underlines
+ * the value of [=system colors=]
+ * the value of the ''light-dark()'' function
On the root element,
- the [=used color scheme=] additionally must affect
+ the [=element color scheme=] additionally must affect
the surface color of the [=canvas=],
and the viewport's scrollbars.
In order to preserve expected color contrasts,
in the case of embedded documents typically rendered over a transparent [=canvas=]
(such as provided via an HTML <{iframe}> element),
- if the [=used color scheme=] of the element
- and the [=used color scheme=] of the embedded document’s root element
+ if the [=element color scheme=] of the element
+ and the [=element color scheme=] of the embedded document’s root element
do not match,
then the UA must use an opaque [=canvas=] of the ''Canvas'' color
- appropriate to the embedded document’s [=used color scheme=]
+ appropriate to the embedded document’s root element's [=element color scheme=]
instead of a transparent canvas.
This rule does not apply to documents embedded
via elements intended for graphics
- (such as <{img}> elements embedding an SVG document).
+ (such as <{img}> elements embedding an SVG document);
+ their canvases remain the default transparent regardless.
Note: Aside from the small list of adjustments given above,
user agents generally do not further adjust a page
@@ -408,12 +501,11 @@ Effects of the Used Color Scheme {#color-scheme-effect}
Overriding the Color Scheme {#color-scheme-override}
---------------------------
-If the user has indicated an overriding preference for a particular color scheme,
+If the user has indicated an [=color scheme/overriding preference=] for a particular color scheme that the author does not explicitly support,
and the author has not disallowed this (by using the ''only'' keyword),
-the user agent may override the color scheme,
-forcing the [=used color scheme=] to the user's [=preferred color scheme=].
-If the element does not support that [=color scheme=],
-the user agent must also auto-adjust other colors into this chosen [=color scheme=],
+the user agent must override the color scheme:
+in addition to the effects described in [[#color-scheme-effect]],
+it must also auto-adjust other colors into this chosen [=color scheme=],
such as by inverting their brightness,
while preserving any color contrast necessary for readability of the page.
In this case, UA may also auto-adjust colors within replaced elements, background images, and other external resources as appropriate.
@@ -1193,6 +1285,15 @@ Privacy Considerations {#privacy}
for discussion on this topic.
+ Embedded documents (even cross-origin ones)
+ recieve their embedding element's [=element color scheme=]
+ as their [=preferred color scheme=],
+ which is technically a bit of cross-site communication.
+ This was not considered a significant problem by browser security reviewers,
+ and the user benefit of having pages and, particularly, SVG images
+ automatically adapt to the parent page's color scheme
+ was considered valuable enought to warrant it.
+
Security Considerations {#security}
===================================
diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs
index 98a3121bd922..f48574071950 100644
--- a/css-conditional-5/Overview.bs
+++ b/css-conditional-5/Overview.bs
@@ -212,11 +212,26 @@ At-rules
Named features
A CSS processor is considered to
- support an named feature
+ support a named feature
if it supports the named feature based on the feature definition
described in the following list:
- [ No features are currently defined. ]
+
+ : anchor-position-follows-transforms
+ :: Anchoring to a transformed element automatically takes into account the anchor's transforms,
+ causing the positioned element to shift to match it.
+ [[CSS-ANCHOR-POSITIONING]]
+
+ (An earlier version of the specification did not take transforms into account.)
+
+ : single-axis-scroll-container
+ :: The ability to have [=single-axis scroll containers=],
+ where one axis is scrollable and the other is ''overflow/clip''.
+ [[CSS-OVERFLOW-4]]
+
+ (Previously, specifying ''overflow/clip'' alongside a scrollable value caused it to compute to ''overflow/hidden'',
+ which is still a scrollable value even if it doesn't generate a scrollbar.)
+
If the feature is not listed the processor does not support the named feature.
@@ -467,7 +482,7 @@ Container Queries
There are cases where the box for a [=pseudo-element=] is generated as a
sibling box of its originating element's box. If we allowed querying the size
of a sibling box, it would introduce layout cycles.
-
+
For example, the ''::scroll-marker-group'' and ''::scroll-button()'' pseudo-elements
generate sibling boxes of their originating element's box.
These pseudo-elements will not be able to query their originating scroller
@@ -1027,7 +1042,7 @@ Container Queries: the ''@container'' rule
is a [=conditional group rule=] whose condition contains
a container query,
which is a boolean combination of [=container size queries=] and/or [=container style queries=].
- Style declarations within the <> block of an ''@container'' rule
+ Style declarations within the ''@container'' rule
are [[css-cascade-4#filtering|filtered]] by its condition
to only match when the [=container query=]
is true for their element’s [=query container=].
@@ -1036,7 +1051,7 @@ Container Queries: the ''@container'' rule
@container <># {
- <>
+ <>
}
@@ -1854,8 +1869,8 @@ Container Relative Lengths: the ''cqw'', ''cqh'', ''cqi'', ''cqb'', ''cqmin'', '
For each element,
[=container query length=] units are evaluated
- as [=container size queries=] on the relevant axis (or axes)
- described by the unit.
+ using the same rules as [=container size queries=]
+ on the relevant axis (or axes) described by the unit.
The [=query container=] for each axis
is the nearest ancestor container
that accepts [=container size queries=] on that axis.
diff --git a/css-contain-2/Overview.bs b/css-contain-2/Overview.bs
index 0d7ff0280603..bb532e301f94 100644
--- a/css-contain-2/Overview.bs
+++ b/css-contain-2/Overview.bs
@@ -112,7 +112,7 @@ Strong Containment: the 'contain' property
Initial: none
Inherited: no
Applies to: See below
- Computed value: the keyword ''contain/none'' or one or more of ''size'', ''layout'', ''paint''
+ Computed value: the keyword ''contain/none'' or one or more of ''size'', ''layout'', ''style'', ''paint''
Animation type: not animatable
@@ -1374,7 +1376,7 @@ Display Order: the 'order' property
<article class="sale-item">
- <h1>Computer Starter Kit</h1>
+ <h3>Computer Starter Kit</h3>
<p>This is the best computer money can buy, if you don’t have much money.
<ul>
<li>Computer
@@ -1391,7 +1393,7 @@ Display Order: the 'order' property
-
Computer Starter Kit
+
Computer Starter Kit
This is the best computer money can buy,
if you don't have much money.
@@ -2055,8 +2057,8 @@ Appendix A: Glossary
* (very loosely) any block-level box that establishes a new [=formatting context=]
(other than an inline formatting context)
-
out-of-flow
-
in-flow
+
out-of-flow
+
in-flow
A box is out-of-flow if it is
extracted from its expected position and interaction with surrounding content
diff --git a/css-display-4/Overview.bs b/css-display-4/Overview.bs
index f4b3f780698d..22b6f3e30743 100644
--- a/css-display-4/Overview.bs
+++ b/css-display-4/Overview.bs
@@ -2600,8 +2600,8 @@ Appendix A: Glossary
* (very loosely) any block-level box that establishes a new [=formatting context=]
(other than an inline formatting context)
-
out-of-flow
-
in-flow
+
out-of-flow
+
in-flow
A box is out-of-flow if it is
extracted from its expected position and interaction with surrounding content
diff --git a/css-easing-2/images/linear-easing-curve.svg b/css-easing-2/images/linear-easing-curve.svg
index 909eb6720f73..3b05d35594b4 100644
--- a/css-easing-2/images/linear-easing-curve.svg
+++ b/css-easing-2/images/linear-easing-curve.svg
@@ -103,7 +103,7 @@
0
-
+ P1
diff --git a/css-env-1/Overview.bs b/css-env-1/Overview.bs
index b0b9e172538f..f5f0429a216e 100644
--- a/css-env-1/Overview.bs
+++ b/css-env-1/Overview.bs
@@ -78,9 +78,13 @@ A CSS environment variable is a name associated with a
(a sequence of zero more CSS tokens, with almost no restrictions on what tokens can exist),
similar to a [=custom property=].
[=Environment variables=] can be defined by the user agent,
-or by the user.
-(In the latter case, the names are <>s,
-and start with `--` per standard for custom identifiers.)
+or by the author.
+
+If author-defined,
+they are a custom environment variable.
+The name of a [=custom environment variable=]
+must conform to the <> grammar.
+This specification does not yet define how authors can define [=custom environment variables=].
Issue: Is the set of UA-defined [=environment variables=] visible to script?
If so, define an API on {{Document}} to expose them.
diff --git a/css-flexbox-1/Overview.bs b/css-flexbox-1/Overview.bs
index 526fb26b9511..610af7882949 100644
--- a/css-flexbox-1/Overview.bs
+++ b/css-flexbox-1/Overview.bs
@@ -413,6 +413,7 @@ Module interactions
flexbox_first-letter.html
flexbox_first-line.html
+ getcomputedstyle/first-line-computed-style.html
flexbox-ignores-first-letter.html
@@ -763,6 +764,7 @@ Flex Containers: the ''flex'' and ''inline-flex'' 'display' values
min-size-auto-overflow-clip.html
negative-overflow-002.html
negative-overflow-003.html
+ negative-overflow-004-no-padding.html
negative-overflow.html
overflow-area-001.html
overflow-area-002.html
@@ -777,6 +779,8 @@ Flex Containers: the ''flex'' and ''inline-flex'' 'display' values
overflow-auto-008.html
overflow-top-left.html
padding-overflow.html
+ select-as-flex-item-child-with-overflow.html
+ select-as-flex-item-with-overflow.html
text-overflow-on-flexbox-001.html
synthesize-vrl-baseline.html
@@ -857,6 +861,8 @@ Flex Items
anonymous-flex-item-004.html
anonymous-flex-item-005.html
anonymous-flex-item-006.html
+ anonymous-flex-item-document-white-space-crash.html
+ anonymous-flex-item-restyle.html
canvas-dynamic-change-001.html
column-flex-child-with-max-width.html
flexbox-whitespace-handling-001a.xhtml
@@ -1463,6 +1469,7 @@ Grid doesn't have similarly meaningful shrinkability, so it doesn't need to care
flex-minimum-width-flex-items-014.html
flex-minimum-width-flex-items-015.html
flex-minimum-width-flex-items-016.html
+ checkbox-percentage-width-in-flex.html
getcomputedstyle/flexbox_computedstyle_min-auto-size.html
getcomputedstyle/flexbox_computedstyle_min-height-auto.html
getcomputedstyle/flexbox_computedstyle_min-width-auto.html
@@ -2127,6 +2134,7 @@ Flex Lines
align-content-005.htm
align-content-006.htm
align-content-007.htm
+ flex-wrap-column-grow.html
flexbox-lines-must-be-stretched-by-default.html
@@ -2264,6 +2272,7 @@ The 'flex' Shorthand
parsing/flex-grow-valid.html
table-item-flex-percentage-min-width.html
table-item-flex-percentage-width.html
+ flex-rounding.html
@@ -2650,6 +2659,7 @@ The 'flex-basis' property
flex-basis-011.html
flex-basis-012.html
flex-basis-013.html
+ flex-basis-content-percentage-height.html
flex-basis-intrinsics-001.html
flex-basis-item-margins-001.html
flexbox-flex-basis-content-001a.html
@@ -2758,6 +2768,7 @@ Aligning with auto margins
flexbox-margin-auto-horiz-002.xhtml
flexbox_margin-auto.html
flexbox_margin-auto-overflow.html
+ main-axis-margin-rounding.html
Note: If free space is distributed to auto margins,
@@ -2926,6 +2937,7 @@ Axis Alignment: the 'justify-content' property
scrollbars-auto.html
scrollbars.html
scrollbars-no-margin.html
+ justify-content-rounding.html
The 'justify-content' property aligns flex items along the main axis of the current line of the flex container.
@@ -3385,6 +3397,7 @@ Packing Flex Lines: the 'align-content' property
align-content-horiz-001a.html
align-content-horiz-001b.html
align-content-horiz-002.html
+ align-content-stretch-rounding.html
align-content_space-around.html
align-content_space-between.html
align-content_stretch.html
@@ -3414,6 +3427,7 @@ Packing Flex Lines: the 'align-content' property
getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html
getcomputedstyle/flexbox_computedstyle_align-content-space-around.html
getcomputedstyle/flexbox_computedstyle_align-content-space-between.html
+ align-content-rounding.html
+
+
+Flex Containers: the ''flex'' and ''inline-flex'' 'display' values
+
+
+
+ Name: display
+ New values: flex | inline-flex
+
+ This value causes an element to generate a flex container box
+ that is inline-level when placed in flow layout.
+
+
+ flexbox_inline.html
+ flex-inline.html
+ flexbox_inline-float.html
+ inline-flexbox-absurd-block-size-crash.html
+ inline-flexbox-wrap-vertically-width-calculation.html
+ inline-flex-editing-crash.html
+ inline-flex-editing-with-updating-text-crash.html
+ inline-flex-frameset-main-axis-crash.html
+ inline-flex.html
+ inline-flex-min-content-height.html
+ getcomputedstyle/flexbox_computedstyle_display-inline.html
+ intrinsic-width-orthogonal-writing-mode.html
+
+
+
+ A flex container establishes a new flex formatting context for its contents.
+ This is the same as establishing a block formatting context,
+ except that flex layout is used instead of block layout.
+ For example, floats do not intrude into the flex container,
+ and the flex container's margins do not collapse with the margins of its contents.
+ Flex containers form a containing block for their contents
+ exactly like block containers do. [[!CSS2]]
+ The 'overflow' property applies to flex containers.
+
+
+ flexbox-overflow-horiz-001.html
+ flexbox-overflow-horiz-002.html
+ flexbox-overflow-horiz-003.html
+ flexbox-overflow-horiz-004.html
+ flexbox-overflow-horiz-005.html
+ flexbox-overflow-padding-001.html
+ flexbox-overflow-padding-002.html
+ flexbox-overflow-vert-001.html
+ flexbox-overflow-vert-002.html
+ flexbox-overflow-vert-003.html
+ flexbox-overflow-vert-004.html
+ flexbox-overflow-vert-005.html
+ flexbox_rowspan-overflow-automatic.html
+ flexbox_rowspan-overflow.html
+ flexbox-safe-overflow-position-001.html
+ flexbox-safe-overflow-position-002.html
+ flexbox-safe-overflow-position-003.html
+ flexbox-safe-overflow-position-004.html
+ flexbox-safe-overflow-position-005.html
+ flexbox-safe-overflow-position-006.html
+ flexbox_width-overflow.html
+ min-size-auto-overflow-clip.html
+ negative-overflow-002.html
+ negative-overflow-003.html
+ negative-overflow-004-no-padding.html
+ negative-overflow.html
+ overflow-area-001.html
+ overflow-area-002.html
+ overflow-area-003.html
+ overflow-auto-001.html
+ overflow-auto-002.html
+ overflow-auto-003.html
+ overflow-auto-004.html
+ overflow-auto-005.html
+ overflow-auto-006.html
+ overflow-auto-007.html
+ overflow-auto-008.html
+ overflow-top-left.html
+ padding-overflow.html
+ text-overflow-on-flexbox-001.html
+ synthesize-vrl-baseline.html
+
+
+ Flex containers are not block containers,
+ and so some properties that were designed with the assumption of block layout don't apply in the context of flex layout.
+ In particular:
+
+ * 'float' and 'clear' do not create floating or clearance of flex item,
+ and do not take it out-of-flow.
+ * 'vertical-align' has no effect on a flex item.
+ * the ''::first-line'' and ''::first-letter'' pseudo-elements do not apply to flex containers,
+ and flex containers do not contribute a first formatted line or first letter
+ to their ancestors.
+
+
+
+
+ align-content-wrap-004.html
+ align-items-baseline-column-vert-lr-table-item.html
+ align-items-baseline-vert-lr-column-horz-table-item.html
+ align-items-baseline-vert-rl-column-horz-table-item.html
+ flexbox_box-clear.html
+ flexbox_first-letter.html
+ flexbox_first-line.html
+ flexbox-ignores-first-letter.html
+ flexbox_item-vertical-align.html
+ flexbox-with-pseudo-elements-001.html
+ flexbox-with-pseudo-elements-002.html
+ flexbox-with-pseudo-elements-003.html
+ flexible-box-float.html
+ flex-item-vertical-align.html
+ flex-vertical-align-effect.html
+ hittest-before-pseudo.html
+
+
+ If an element's specified 'display' is ''inline-flex'',
+ then its 'display' property computes to ''flex''
+ in certain circumstances:
+ the table in CSS 2.1 Section 9.7
+ is amended to contain an additional row,
+ with ''inline-flex'' in the "Specified Value" column
+ and ''flex'' in the "Computed Value" column.
+
+
+
+
+Flex Items
+
+ Loosely speaking, the flex items of a flex container
+ are boxes representing its in-flow contents.
+
+ Each in-flow child of a flex container
+ becomes a flex item,
+ and each child text sequence
+ is wrapped in an anonymousblock containerflex item.
+ However, if the entire text sequences contains only
+ [=document white space characters=]
+ (i.e. characters that can be affected by the 'white-space' property)
+ it is instead not rendered (just as if its text nodes were ''display:none'').
+
+
+ anonymous-block.html
+ anonymous-flex-item-001.html
+ anonymous-flex-item-002.html
+ anonymous-flex-item-003.html
+ anonymous-flex-item-004.html
+ anonymous-flex-item-005.html
+ anonymous-flex-item-006.html
+ anonymous-flex-item-document-white-space-crash.html
+ anonymous-flex-item-restyle.html
+ canvas-dynamic-change-001.html
+ column-flex-child-with-max-width.html
+ flexbox-whitespace-handling-001a.xhtml
+ flexbox-whitespace-handling-001b.xhtml
+ flexbox-whitespace-handling-002.xhtml
+ hittest-anonymous-box.html
+ percentage-descendant-of-anonymous-flex-item.html
+ percentage-size-subitems-001.html
+ whitespace-in-flexitem-001.html
+
+
+
+
+
+ Flex items determined from above code block
+
+
+
+
+
+ Note that the inter-element white space disappears:
+ it does not become its own flex item,
+ even though the inter-element text does get wrapped in an anonymous flex item.
+
+ Note also that the anonymous item's box is unstyleable,
+ since there is no element to assign style rules to.
+ Its contents will however inherit styles (such as font settings) from the flex container.
+
+
+ A flex item [=establishes an independent formatting context=] for its contents.
+ However, flex items themselves are flex-level boxes, not block-level boxes:
+ they participate in their container's flex formatting context,
+ not in a block formatting context.
+
+
+
+ Note: Authors reading this spec may want to
+ skip past the following box-generation and static position details.
+
+ If the [=computed value|computed=] 'display' value of an element's nearest ancestor element
+ (skipping ''display:contents'' ancestors)
+ is ''flex'' or ''inline-flex'',
+ the element's own 'display' value is [=blockified=].
+ (See CSS2.1§9.7 [[!CSS2]]
+ and [[css-display-3#transformations]]
+ for details on this type of 'display' value conversion.)
+
+ Note: Blockification still occurs even when the ''flex'' or ''inline-flex'' element does not end up generating a [=flex container=] box,
+ e.g. when it is [=replaced element|replaced=]
+ or in a ''display: none'' subtree.
+
+ Note: Some values of 'display' normally trigger the creation of anonymous boxes around the original box.
+ If such a box is a flex item,
+ it is blockified first,
+ and so anonymous box creation will not happen.
+ For example, two contiguous flex items with ''display: table-cell''
+ will become two separate ''display: block'' flex items,
+ instead of being wrapped into a single anonymous table.
+
+ In the case of flex items with ''display: table'',
+ the table wrapper box becomes the flex item,
+ so the 'align-self' property applies to it.
+ The contents of any caption boxes contribute to the calculation of
+ the table wrapper box's min-content and max-content sizes.
+ However, like 'width' and 'height', the 'flex' longhands apply to the table box as follows:
+ the flex item’s final size is calculated
+ by performing layout as if the distance between
+ the table wrapper box's edges and the table box's content edges
+ were all part of the table box's border+padding area,
+ and the table box were the flex item.
+
+
+ flexbox-table-fixup-001.xhtml
+ table-as-item-large-intrinsic-size.html
+ table-with-float-paint.html
+
+
+
+
+
+Absolutely-Positioned Flex Children
+
+ As it is out-of-flow,
+ an absolutely-positioned child of a flex container does not participate in flex layout.
+
+ The [=cross-axis=] edges of the [=static-position rectangle=]
+ of an absolutely-positioned child of a flex container
+ are the [=content edges=] of the [=flex container=].
+ The [=main-axis=] edges of the [=static-position rectangle=]
+ are where the [=margin edges=] of the child would be positioned
+ if it were the sole flex item in the flex container,
+ assuming both the child and the flex container
+ were fixed-size boxes of their used size.
+ (For this purpose,
+ the child's ''margin/auto'' margins are treated as zero.)
+
+
+ abspos/abspos-autopos-htb-ltr.html
+ abspos/abspos-autopos-htb-rtl.html
+ abspos/abspos-autopos-vlr-ltr.html
+ abspos/abspos-autopos-vlr-rtl.html
+ abspos/abspos-autopos-vrl-ltr.html
+ abspos/abspos-autopos-vrl-rtl.html
+ abspos/dynamic-align-self-001.html
+ abspos/flex-abspos-staticpos-align-self-safe-002.html
+ abspos/flex-abspos-staticpos-align-self-safe-003.html
+ abspos/abspos-descendent-001.html
+ abspos/flex-abspos-staticpos-align-content-001.html
+ abspos/flex-abspos-staticpos-align-self-001.html
+ abspos/flex-abspos-staticpos-align-self-002.html
+ abspos/flex-abspos-staticpos-align-self-003.html
+ abspos/flex-abspos-staticpos-align-self-004.html
+ abspos/flex-abspos-staticpos-align-self-005.html
+ abspos/flex-abspos-staticpos-align-self-006.html
+ abspos/flex-abspos-staticpos-align-self-007.html
+ abspos/flex-abspos-staticpos-align-self-008.html
+ abspos/flex-abspos-staticpos-align-self-rtl-001.html
+ abspos/flex-abspos-staticpos-align-self-rtl-002.html
+ abspos/flex-abspos-staticpos-align-self-rtl-003.html
+ abspos/flex-abspos-staticpos-align-self-rtl-004.html
+ abspos/flex-abspos-staticpos-align-self-safe-001.html
+ abspos/flex-abspos-staticpos-align-self-vertWM-001.html
+ abspos/flex-abspos-staticpos-align-self-vertWM-002.html
+ abspos/flex-abspos-staticpos-align-self-vertWM-003.html
+ abspos/flex-abspos-staticpos-align-self-vertWM-004.html
+ abspos/flex-abspos-staticpos-fallback-justify-content-001.html
+ abspos/flex-abspos-staticpos-justify-content-001.html
+ abspos/flex-abspos-staticpos-justify-content-002.html
+ abspos/flex-abspos-staticpos-justify-content-003.html
+ abspos/flex-abspos-staticpos-justify-content-004.html
+ abspos/flex-abspos-staticpos-justify-content-005.html
+ abspos/flex-abspos-staticpos-justify-content-006.html
+ abspos/flex-abspos-staticpos-justify-content-007.html
+ abspos/flex-abspos-staticpos-justify-content-008.html
+ abspos/flex-abspos-staticpos-justify-content-rtl-001.html
+ abspos/flex-abspos-staticpos-justify-content-rtl-002.html
+ abspos/flex-abspos-staticpos-justify-content-vertWM-001.html
+ abspos/flex-abspos-staticpos-justify-content-vertWM-002.html
+ abspos/flex-abspos-staticpos-justify-self-001.html
+ abspos/flex-abspos-staticpos-margin-001.html
+ abspos/flex-abspos-staticpos-margin-002.html
+ abspos/flex-abspos-staticpos-margin-003.html
+ abspos/flexbox_absolute-atomic.html
+ abspos/flexbox-abspos-child-001a.html
+ abspos/flexbox-abspos-child-001b.html
+ abspos/flexbox-abspos-child-002.html
+ abspos/flexbox_inline-abspos.html
+ abspos/position-absolute-001.html
+ abspos/position-absolute-002.html
+ abspos/position-absolute-003.html
+ abspos/position-absolute-004.html
+ abspos/position-absolute-005.html
+ abspos/position-absolute-006.html
+ abspos/position-absolute-007.html
+ abspos/position-absolute-008.html
+ abspos/position-absolute-009.html
+ abspos/position-absolute-010.html
+ abspos/position-absolute-011.html
+ abspos/position-absolute-012.html
+ abspos/position-absolute-013.html
+ abspos/position-absolute-014.html
+ abspos/position-absolute-015.html
+ abspos/position-absolute-containing-block-001.html
+ abspos/position-absolute-containing-block-002.html
+ alignment/flex-content-alignment-with-abspos-001.html
+ dynamic-grid-flex-abspos.html
+ flexbox_stf-abspos.html
+ flex-item-position-relative-001.html
+ position-relative-percentage-top-004.html
+ position-relative-stretch-height-001.html
+
+
+
+ The effect of this is that if you set, for example,
+ ''align-self: center;'' on an absolutely-positioned child of a flex container,
+ auto offsets on the child will center it in the flex container'scross axis.
+
+
+
+Flex Item Margins and Paddings
+
+ The margins of adjacent flex items do not
+ collapse.
+
+ Percentage margins and paddings on flex items,
+ like those on block boxes,
+ are resolved against the inline size of their containing block,
+ e.g. left/right/top/bottom percentages
+ all resolve against their containing block’s width
+ in horizontal writing modes.
+
+ Auto margins expand to absorb extra space in the corresponding dimension.
+ They can be used for alignment,
+ or to push adjacent flex items apart.
+ See Aligning with auto margins.
+
+
+ empty-flex-box-and-margin-collapsing.html
+ flex-container-margin.html
+ flexitem-no-margin-collapsing.html
+ flex-margin-no-collapse.html
+ negative-margins-001.html
+
+
+
+Flex Item Z-Ordering
+
+ Flex items paint exactly the same as inline blocks [[!CSS2]],
+ except that 'order'-modified document order is used in place of raw document order,
+ and 'z-index'
+ values other than ''z-index/auto'' create a stacking context
+ even if 'position' is ''static''
+ (behaving exactly as if 'position' were ''relative'').
+
+ Note: Descendants that are positioned outside a flex item still participate
+ in any stacking context established by the flex item.
+
+
+ flexbox-paint-ordering-001.xhtml
+ flexbox-paint-ordering-002.xhtml
+ flexbox-paint-ordering-003.html
+ flex-item-z-ordering-001.html
+ flex-item-z-ordering-002.html
+ flexbox-items-as-stacking-contexts-001.xhtml
+ flexbox-items-as-stacking-contexts-002.html
+ flexbox-items-as-stacking-contexts-003.html
+ hittest-overlapping-margin.html
+ hittest-overlapping-order.html
+ hittest-overlapping-relative.html
+
+
+
+
+
+Collapsed Items
+
+ Specifying ''visibility:collapse'' on a flex item
+ causes it to become a collapsed flex item,
+ producing an effect similar to ''visibility:collapse'' on a table-row or table-column:
+ the [=collapsed flex item=] is removed from rendering entirely,
+ but leaves behind a "strut" that keeps the flex line's cross-size stable.
+ Thus, if a flex container has only one flex line,
+ dynamically collapsing or uncollapsing items
+ may change the flex container's main size, but
+ is guaranteed to have no effect on its cross size
+ and won't cause the rest of the page's layout to "wobble".
+ Flex line wrapping is re-done after collapsing, however,
+ so the cross size of a flex container with multiple lines might or might not change.
+
+ Though [=collapsed flex items=] aren't rendered,
+ they do appear in the formatting structure.
+ Therefore, unlike on ''display:none'' items [[!CSS2]],
+ effects that depend on a box appearing in the formatting structure
+ (like incrementing counters or running animations and transitions)
+ still operate on collapsed items.
+
+
+ flexbox_visibility-collapse.html
+ flexbox_visibility-collapse-line-wrapping.html
+
+
+
+ In the following example,
+ a sidebar is sized to fit its content.
+ ''visibility: collapse'' is used to dynamically hide parts of a navigation sidebar
+ without affecting its width, even though the widest item (“Architecture”)
+ is in a collapsed section.
+
+
+ Sample live rendering for example code below
+
+
+
+
+ Hover over the menu to the left:
+ each section expands to show its sub-items.
+ In order to keep the sidebar width (and this main area width) stable,
+ ''visibility: collapse'' is used instead of ''display: none''.
+ This results in a sidebar that is always wide enough for the word “Architecture”,
+ even though it is not always visible.
+
+
+
+
+
+ @media (min-width: 60em) {
+ /* two column layout only when enough room (relative to default text size) */
+ div { display: flex; }
+ #main {
+ flex: 1; /* Main takes up all remaining space */
+ order: 1; /* Place it after (to the right of) the navigation */
+ min-width: 12em; /* Optimize main content area sizing */
+ }
+ }
+ /* menu items use flex layout so that visibility:collapse will work */
+ nav > ul > li {
+ display: flex;
+ flex-flow: column;
+ }
+ /* dynamically collapse submenus when not targeted */
+ nav > ul > li:not(:target):not(:hover) > ul {
+ visibility: collapse;
+ }
+
+
+ To compute the size of the strut, flex layout is first performed with all items uncollapsed,
+ and then re-run with each [=collapsed flex item=] replaced by a strut that maintains
+ the original [=cross size=] of the item's original line.
+ See the Flex Layout Algorithm
+ for the normative definition of how ''visibility:collapse''
+ interacts with flex layout.
+
+ Note: Using ''visibility:collapse'' on any flex items
+ will cause the flex layout algorithm to repeat partway through,
+ re-running the most expensive steps.
+ It's recommended that authors continue to use ''display:none'' to hide items
+ if the items will not be dynamically collapsed and uncollapsed,
+ as that is more efficient for the layout engine.
+ (Since only part of the steps need to be repeated when 'visibility' is changed,
+ however, 'visibility: collapse' is still recommended for dynamic cases.)
+
+
+
+
+Automatic Minimum Size of Flex Items
+
+ Note: The ''min-width/auto'' keyword,
+ representing an automatic minimum size,
+ is the new initial value of the 'min-width' and 'min-height' properties.
+ The keyword was previously defined in this specification,
+ but is now defined in the [[!CSS-SIZING-3|CSS Sizing]] module.
+
+ To provide a more reasonable default minimum size for flex items,
+ the used value of a main axisautomatic minimum size
+ on a flex item whose [=computed value|computed=] 'overflow' value is [=non-scrollable overflow value|non-scrollable=]
+ is its [=content-based minimum size=];
+ for scroll containers the automatic minimum size is zero, as usual.
+
+ The content-based minimum size of a [=flex item=]
+ differs depending on whether the [=flex item=] is [=replaced element|replaced=] or not:
+
+ : For [=replaced elements=]
+ ::
+ Use the smaller of the [=content size suggestion=]
+ and the [=transferred size suggestion=]
+ (if one exists),
+ capped by the [=specified size suggestion=]
+ (if one exists).
+
+ : For [=non-replaced elements=]
+ ::
+ Use the larger of the [=content size suggestion=]
+ and the [=transferred size suggestion=]
+ (if one exists),
+ capped by the [=specified size suggestion=]
+ (if one exists).
+
+ In either case,
+ the size is clamped by the [=maximum size|maximum=] [=main size=]
+ if it's definite.
+
+
+ image-items-flake-001.html
+
+
+
+
+ The content size suggestion, specified size suggestion, and transferred size suggestion
+ used in this calculation account for the relevant min/max/preferred size properties
+ so that the content-based minimum size does not interfere with any author-provided constraints,
+ and are defined below:
+
+
+
specified size suggestion
+
+ If the item’s [=preferred size|preferred=] [=main size=] is definite and not [=automatic size|automatic=],
+ then the specified size suggestion is that size.
+ It is otherwise undefined.
+
+
transferred size suggestion
+
+ If the item has a [=preferred aspect ratio=]
+ and its [=preferred size|preferred=] [=cross size=] is definite,
+ then the transferred size suggestion is that size
+ (clamped by its [=minimum size|minimum=] and [=maximum size|maximum=] [=cross sizes=] if they are definite),
+ converted through the aspect ratio.
+ It is otherwise undefined.
+
+
content size suggestion
+
+ The content size suggestion is the min-content size in the main axis,
+ clamped, if it has a [=preferred aspect ratio=],
+ by any definite [=minimum size|minimum=] and [=maximum size|maximum=] [=cross sizes=] converted through the aspect ratio.
+
+
+
+ content-height-with-scrollbars.html
+ fieldset-as-item-dynamic.html
+ fieldset-as-item-overflow.html
+ flex-aspect-ratio-img-column-001.html
+ flex-aspect-ratio-img-column-002.html
+ flex-aspect-ratio-img-column-003.html
+ flex-aspect-ratio-img-column-004.html
+ flex-aspect-ratio-img-column-005.html
+ flex-aspect-ratio-img-column-006.html
+ flex-aspect-ratio-img-column-007.html
+ flex-aspect-ratio-img-column-008.html
+ flex-aspect-ratio-img-column-009.html
+ flex-aspect-ratio-img-column-010.html
+ flex-aspect-ratio-img-column-011.html
+ flex-aspect-ratio-img-column-012.html
+ flex-aspect-ratio-img-column-013.html
+ flex-aspect-ratio-img-column-014.html
+ flex-aspect-ratio-img-column-015.html
+ flex-aspect-ratio-img-column-016.html
+ flex-aspect-ratio-img-column-017.html
+ flex-aspect-ratio-img-column-018.html
+ flex-aspect-ratio-img-row-001.html
+ flex-aspect-ratio-img-row-002.html
+ flex-aspect-ratio-img-row-003.html
+ flex-aspect-ratio-img-row-004.html
+ flex-aspect-ratio-img-row-005.html
+ flex-aspect-ratio-img-row-006.html
+ flex-aspect-ratio-img-row-007.html
+ flex-aspect-ratio-img-row-008.html
+ flex-aspect-ratio-img-row-009.html
+ flex-aspect-ratio-img-row-010.html
+ flex-aspect-ratio-img-row-011.html
+ flex-aspect-ratio-img-row-012.html
+ flex-aspect-ratio-img-row-013.html
+ flex-aspect-ratio-img-row-014.html
+ flex-aspect-ratio-img-row-015.html
+ flex-aspect-ratio-img-row-016.html
+ flex-aspect-ratio-img-row-017.html
+ flex-aspect-ratio-img-vert-lr.html
+ flexbox-definite-cross-size-constrained-percentage.html
+ flexbox-min-height-auto-001.html
+ flexbox-min-height-auto-002a.html
+ flexbox-min-height-auto-002b.html
+ flexbox-min-height-auto-002c.html
+ flexbox-min-height-auto-003.html
+ flexbox-min-height-auto-004.html
+ flexbox-min-width-auto-001.html
+ flexbox-min-width-auto-002a.html
+ flexbox-min-width-auto-002b.html
+ flexbox-min-width-auto-002c.html
+ flexbox-min-width-auto-003.html
+ flexbox-min-width-auto-004.html
+ flexbox-min-width-auto-005.html
+ flexbox-min-width-auto-006.html
+ flex-item-compressible-001.html
+ flex-item-compressible-002.html
+ flexitem-stretch-image.html
+ flexitem-stretch-range.html
+ flex-minimum-height-flex-items-001.xht
+ flex-minimum-height-flex-items-002.xht
+ flex-minimum-height-flex-items-003.xht
+ flex-minimum-height-flex-items-004.xht
+ flex-minimum-height-flex-items-005.xht
+ flex-minimum-height-flex-items-006.xht
+ flex-minimum-height-flex-items-007.xht
+ flex-minimum-height-flex-items-008.xht
+ flex-minimum-height-flex-items-009.html
+ flex-minimum-height-flex-items-010.html
+ flex-minimum-height-flex-items-011.xht
+ flex-minimum-height-flex-items-012.html
+ flex-minimum-height-flex-items-013.html
+ flex-minimum-height-flex-items-014.html
+ flex-minimum-height-flex-items-015.html
+ flex-minimum-height-flex-items-016.html
+ flex-minimum-height-flex-items-017.html
+ flex-minimum-height-flex-items-018.html
+ flex-minimum-height-flex-items-019.html
+ flex-minimum-height-flex-items-020.html
+ flex-minimum-height-flex-items-021.html
+ flex-minimum-height-flex-items-022.html
+ flex-minimum-height-flex-items-023.html
+ flex-minimum-height-flex-items-024.html
+ flex-minimum-height-flex-items-025.html
+ flex-minimum-height-flex-items-026.html
+ flex-minimum-height-flex-items-027.html
+ flex-minimum-height-flex-items-028.html
+ flex-minimum-height-flex-items-029.html
+ flex-minimum-height-flex-items-030.html
+ flex-minimum-height-flex-items-031.html
+ flex-minimum-size-001.html
+ flex-minimum-size-002.html
+ flex-minimum-size-003.html
+ flex-minimum-width-flex-items-001.xht
+ flex-minimum-width-flex-items-002.xht
+ flex-minimum-width-flex-items-003.xht
+ flex-minimum-width-flex-items-004.xht
+ flex-minimum-width-flex-items-005.xht
+ flex-minimum-width-flex-items-006.xht
+ flex-minimum-width-flex-items-007.xht
+ flex-minimum-width-flex-items-008.xht
+ flex-minimum-width-flex-items-009.html
+ flex-minimum-width-flex-items-010.html
+ flex-minimum-width-flex-items-011.html
+ flex-minimum-width-flex-items-012.html
+ flex-minimum-width-flex-items-013.html
+ flex-minimum-width-flex-items-014.html
+ flex-minimum-width-flex-items-015.html
+ flex-minimum-width-flex-items-016.html
+ scrollbars-auto-min-content-sizing.html
+ getcomputedstyle/flexbox_computedstyle_min-auto-size.html
+ getcomputedstyle/flexbox_computedstyle_min-height-auto.html
+ getcomputedstyle/flexbox_computedstyle_min-width-auto.html
+ checkbox-percentage-width-in-flex.html
+ select-as-flex-item-child-with-overflow.html
+ select-as-flex-item-with-overflow.html
+ select-element-multiple.html
+ select-element-zero-height-001.html
+ select-element-zero-height-002.html
+
+
+ Note: The [=content-based minimum size=] is a type of [=intrinsic size contribution=],
+ and thus the cyclic percentage provisions in [[css-sizing-3#intrinsic-contribution]] apply.
+
+ For the purpose of calculating an intrinsic size of the box
+ (e.g. the box’s min-content size),
+ a content-based minimum size causes the box’s size in that axis to become indefinite
+ (even if e.g. its 'width' property specifies a definite size).
+ Note this means that percentages calculated against this size
+ will [=behave as auto=].
+
+ For any purpose other than calculating intrinsic sizes,
+ a [=content-based minimum size=]
+ (unlike an explicit ''min-content''/etc [=minimum size=])
+ does not force the box's size to become indefinite.
+ However, if a percentage resolved against the box's size before this minimum was applied,
+ it must be re-resolved against the new size after it is applied.
+
+
+ Note that while a content-based minimum size is often appropriate,
+ and helps prevent content from overlapping or spilling outside its container,
+ in some cases it is not:
+
+ In particular, if flex sizing is being used for a major content area of a document,
+ it is better to set an explicit font-relative minimum width such as ''min-width: 12em''.
+ A content-based minimum width could result in a large table or large image
+ stretching the size of the entire content area into an overflow zone,
+ and thereby making lines of text gratuitously long and hard to read.
+
+ Note also, when content-based sizing is used on an item with large amounts of content,
+ the layout engine must traverse all of this content before finding its minimum size,
+ whereas if the author sets an explicit minimum, this is not necessary.
+ (For items with small amounts of content, however,
+ this traversal is trivial and therefore not a performance concern.)
+
+
+ The contents of a flex container can be laid out in any direction and in any order.
+ This allows an author to trivially achieve effects that would previously have required complex or fragile methods,
+ such as hacks using the 'float' and 'clear' properties.
+ This functionality is exposed through the 'flex-direction', 'flex-wrap', and 'order' properties.
+
+ Note: The reordering capabilities of flex layout intentionally affect
+ only the visual rendering,
+ leaving speech order and navigation based on the source order.
+ This allows authors to manipulate the visual presentation
+ while leaving the source order intact for non-CSS UAs and for
+ linear models such as speech and sequential navigation.
+ See [[css-display-3#order-accessibility]]
+ and the Flex Layout Overview for examples
+ that use this dichotomy to improve accessibility.
+
+ Advisement:
+ Authors must not use 'order' or the ''*-reverse'' values of 'flex-flow'/'flex-direction'
+ as a substitute for correct source ordering,
+ as that can ruin the accessibility of the document.
+
+
+
+
+Flex Flow Direction: the 'flex-direction' property
+
+ The 'flex-direction' property specifies how flex items are placed in the flex container,
+ by setting the direction of the flex container's main axis.
+ This determines the direction in which flex items are laid out.
+
+
+
row
+
+ The flex container's main axis has the same orientation as the
+ inline axis
+ of the current writing mode.
+ The main-start and main-end directions are equivalent to the
+ inline-start and
+ inline-end directions, respectively,
+ of the current writing mode.
+
+
+ flex-child-percent-basis-resize-1.html
+ flexbox-flex-basis-content-001a.html
+ flexbox-flex-basis-content-001b.html
+ flexbox-flex-direction-row.htm
+ flexbox_justifycontent-left-001.html
+ flexbox-writing-mode-010.html
+ flexbox-writing-mode-011.html
+ flexbox-writing-mode-012.html
+ flexbox-writing-mode-016.html
+ percentage-size.html
+
+
+
row-reverse
+
+ Same as ''row'',
+ except the main-start and main-end directions are swapped.
+
+
+ flexbox_direction-row-reverse.html
+ flexbox-mbp-horiz-001-reverse.xhtml
+ flexbox-mbp-horiz-001-rtl-reverse.xhtml
+ flex-lines/multi-line-wrap-with-row-reverse.html
+ flexbox_justifycontent-right-001.html
+ flexbox_justifycontent-start.html
+ flexbox_justifycontent-start-rtl.html
+
+
+
column
+
+ The flex container's main axis has the same orientation as the
+ block axis
+ of the current writing mode.
+ The main-start and main-end directions are equivalent to the
+ block-start and
+ block-end directions, respectively,
+ of the current writing mode.
+
+
+ columns-height-set-via-top-bottom.html
+ dynamic-bsize-change.html
+ flexbox_direction-column.html
+ flexbox_direction-column-reverse.html
+ flexbox_rtl-flow.html
+ flex-column-relayout-assert.html
+ flex-item-max-height-min-content.html
+ flex-item-transferred-sizes-padding-border-sizing.html
+ flex-item-transferred-sizes-padding-content-sizing.html
+ flex-outer-flexbox-column-recalculate-height-on-resize-001.html
+ image-nested-within-definite-column-flexbox.html
+ layout-with-inline-svg-001.html
+ nested-orthogonal-flexbox-relayout.html
+ percentage-max-width-cross-axis.html
+ percentage-size.html
+
+
+
column-reverse
+
+ Same as ''column'',
+ except the main-start and main-end directions are swapped.
+
+
+ column-reverse-gap.html
+ flexbox_rtl-direction.html
+ flex-lines/multi-line-wrap-with-column-reverse.html
+
+
+
+ Note: The reverse values do not reverse box ordering:
+ like 'writing-mode' and 'direction' [[CSS3-WRITING-MODES]],
+ they only change the direction of flow.
+ Painting order, speech order, and sequential navigation orders
+ are not affected.
+
+ Note: Depending on the value of 'justify-content',
+ the reverse values of 'flex-direction' can alter the initial scroll position
+ on [=flex containers=] that are also [=scroll containers=].
+ See [[css-align-3#overflow-scroll-position]].
+
+
+ animation/discrete-no-interpolation.html
+ change-column-flex-width.html
+ column-flex-child-with-max-width.html
+ column-flex-child-with-overflow-scroll.html
+ cross-axis-scrollbar.html
+ dynamic-orthogonal-flex-item.html
+ flexbox-writing-mode-001.html
+ flexbox-writing-mode-002.html
+ flexbox-writing-mode-003.html
+ flexbox-writing-mode-004.html
+ flexbox-writing-mode-005.html
+ flexbox-writing-mode-006.html
+ flexbox-writing-mode-007.html
+ flexbox-writing-mode-008.html
+ flexbox-writing-mode-009.html
+ flexbox-writing-mode-010.html
+ flexbox-writing-mode-011.html
+ flexbox-writing-mode-012.html
+ flexbox-writing-mode-013.html
+ flexbox-writing-mode-014.html
+ flexbox-writing-mode-015.html
+ flexbox-writing-mode-016.html
+ flexbox-writing-mode-slr.html
+ flexbox-writing-mode-slr-row-mix.html
+ flexbox-writing-mode-slr-rtl.html
+ flexbox-writing-mode-srl.html
+ flexbox-writing-mode-srl-row-mix.html
+ flexbox-writing-mode-srl-rtl.html
+ flexbox_object.html
+ flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom.html
+ getcomputedstyle/flexbox_computedstyle_flex-direction-column.html
+ getcomputedstyle/flexbox_computedstyle_flex-direction-column-reverse.html
+ getcomputedstyle/flexbox_computedstyle_flex-direction-invalid.html
+ getcomputedstyle/flexbox_computedstyle_flex-direction-row.html
+ getcomputedstyle/flexbox_computedstyle_flex-direction-row-reverse.html
+
+
+
+
+
+
+ The 'flex-wrap' property controls whether the flex container is single-line or multi-line,
+ and the direction of the cross-axis,
+ which determines the direction new lines are stacked in.
+
+
+ The flex container is [=multi-line=],
+ but the lines are stacked "in reverse" (see below).
+
+
balance
+
+ The flex container is [=multi-line=],
+ and attempts to [=balance=] the lengths of the [=flex lines=]
+ to be as similar as possible.
+
+ ''balance'' can be combined with ''wrap'' or ''wrap-reverse''
+ to dictate which direction the [=flex lines=] are stacked in.
+ If neither are specified,
+ it behaves as if ''wrap'' was specified.
+
+
+ By default, the [=cross-start=] direction of the [=flex container=]
+ is either the inline-start or block-start direction
+ of the [=flex container's=] writing mode
+ (whichever is in the cross axis)
+ and the cross-end direction is the opposite direction of cross-start.
+ If ''wrap-reverse'' is specified,
+ the cross-start and cross-end directions
+ are swapped.
+
+ Note: Depending on the value of 'align-content',
+ the ''wrap-reverse'' value of 'flex-wrap' can alter the initial scroll position
+ on [=flex containers=] that are also [=scroll containers=].
+ See [[css-align-3#overflow-scroll-position]].
+
+
+ animation/discrete-no-interpolation.html
+ flexbox-flex-wrap-default.htm
+ flexbox-flex-wrap-flexing-002.html
+ flexbox-flex-wrap-flexing-003.html
+ flexbox-flex-wrap-flexing.html
+ flexbox-flex-wrap-horiz-001.html
+ flexbox-flex-wrap-horiz-002.html
+ flexbox-flex-wrap-nowrap.htm
+ flexbox-flex-wrap-vert-001.html
+ flexbox-flex-wrap-vert-002.html
+ flexbox-flex-wrap-wrap.htm
+ flexbox-flex-wrap-wrap-reverse.htm
+ flexbox_rowspan.html
+ flexbox_rtl-flow.html
+ flexbox_rtl-flow-reverse.html
+ flexbox_rtl-order.html
+ flex-box-wrap.html
+ flexbox_wrap.html
+ flexbox_wrap-long.html
+ flexbox_wrap-reverse.html
+ flex-wrap-column-grow.html
+ balance/balance-001.html
+ balance/balance-002.html
+ balance/balance-003.html
+ balance/balance-004.html
+ balance/balance-005.html
+ balance/balance-available-size-001.html
+ balance/balance-available-size-002.html
+ balance/balance-line-break-crash.html
+ balance/balance-negative-margin.html
+ balance/balance-percentage-size-001.html
+ balance/balance-percentage-size-002.html
+ balance/flex-wrap-computed.html
+ balance/flex-wrap-invalid.html
+ balance/flex-wrap-valid.html
+ remove-wrapped-001.html
+ remove-wrapped-002.html
+ flex-lines/multi-line-wrap-reverse-column-reverse.html
+ flex-lines/multi-line-wrap-reverse-row-reverse.html
+ getcomputedstyle/flexbox_computedstyle_flex-wrap-invalid.html
+ getcomputedstyle/flexbox_computedstyle_flex-wrap-nowrap.html
+ getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap.html
+ getcomputedstyle/flexbox_computedstyle_flex-wrap-wrap-reverse.html
+ multiline-min-preferred-width.html
+ multiline-reverse-wrap-baseline.html
+
+
+
+
+
+
+Flex Direction and Wrap: the 'flex-flow' shorthand
+ Some examples of valid flows in an English (left-to-right, horizontal writing mode) document:
+
+
+
+
+
+ div { flex-flow: row; }
+ /* Initial value. Main-axis is inline, no wrapping.
+ (Items will either shrink to fit or overflow.) */
+
+
+
+
+
+ div { flex-flow: column wrap; }
+ /* Main-axis is block-direction (top to bottom)
+ and lines wrap in the inline direction (rightwards). */
+
+
+
+
+
+ div { flex-flow: row-reverse wrap-reverse; }
+ /* Main-axis is the opposite of inline direction
+ (right to left). New lines wrap upwards. */
+
+
+
+
+
+
+ Note that the 'flex-flow' directions are writing mode sensitive.
+ In vertical Japanese, for example,
+ a ''row'' flex container lays out its contents from top to bottom,
+ as seen in this example:
+
+
+
+
+
English
+
Japanese
+
+
+
flex-flow: row wrap; writing-mode: horizontal-tb;
+
flex-flow: row wrap; writing-mode: vertical-rl;
+
+
+
+
+
+
+
+Reordering and Accessibility: the 'order' property
+
+ Flex items are, by default, displayed and laid out
+ in the same order as they appear in the source document,
+ which represents their logical ordering.
+ This same order is used in rendering to non-visual media
+ (such as speech),
+ in the default traversal order of sequential navigation modes
+ (such as cycling through links,
+ see e.g. tabindex [[HTML]]),
+ and when content is represented in non-CSS UAs.
+
+ The 'order' property can be used to change flex items’ ordering,
+ laying them out in [=order-modified document order=] instead,
+ in order to make their spatial arrangement on the 2D visual canvas
+ differ from their logical order in linear presentations
+ such as speech and sequential navigation.
+ See [[CSS-DISPLAY-3#order-property]].
+ [[!CSS-DISPLAY-3]]
+
+ Note: Since visual perception is two-dimensional and non-linear,
+ the desired box order is not always the same logical order
+ used by non-visual media and non-CSS UAs.
+
+ Advisement:
+ Authors must use 'order' only for visual, not logical, reordering of content.
+ Style sheets that use 'order' to perform logical reordering are non-conforming.
+
+
+ Many web pages have a similar shape in the markup,
+ with a header on top,
+ a footer on bottom,
+ and then a content area and one or two additional columns in the middle.
+ Generally,
+ it's desirable that the content come first in the page's source code,
+ before the additional columns.
+ However, this makes many common designs,
+ such as simply having the additional columns on the left and the content area on the right,
+ difficult to achieve.
+ This has been addressed in many ways over the years,
+ often going by the name "Holy Grail Layout" when there are two additional columns.
+ 'order' makes this trivial.
+ For example, take the following sketch of a page's code and desired layout:
+
+
+
+ This layout can be easily achieved with flex layout:
+
+
+ main { display: flex; }
+ main > article { order: 2; min-width: 12em; flex:1; }
+ main > nav { order: 1; width: 200px; }
+ main > aside { order: 3; width: 200px; }
+
+
+ As an added bonus,
+ the columns will all be equal-height by default,
+ and the main content will be as wide as necessary to fill the screen.
+ Additionally,
+ this can then be combined with media queries to switch to an all-vertical layout on narrow screens:
+
+
+ @media all and (max-width: 600px) {
+ /* Too narrow to support three columns */
+ main { flex-flow: column; }
+ main > article, main > nav, main > aside {
+ /* Return them to document order */
+ order: 0; width: auto;
+ }
+ }
+
+
+ (Further use of multi-line flex containers to achieve even more intelligent wrapping left as an exercise for the reader.)
+
+
+
+
+
+Flex Lines
+
+ Flex items in a flex container are laid out and aligned
+ within flex lines,
+ hypothetical containers used for grouping and alignment by the layout algorithm.
+ A flex container can be either single-line or multi-line,
+ depending on the 'flex-wrap' property:
+
+ * A single-line flex container
+ (i.e. one with ''flex-wrap: nowrap'')
+ lays out all of its children in a single line,
+ even if that would cause its contents to overflow.
+ * A multi-line flex container
+ (i.e. one with ''flex-wrap: wrap'' or ''flex-wrap: wrap-reverse'')
+ breaks its flex items across multiple lines,
+ similar to how text is broken onto a new line when it gets too wide to fit on the existing line.
+ When additional lines are created,
+ they are stacked in the flex container along the cross axis
+ according to the 'flex-wrap' property.
+ Every line contains at least one flex item,
+ unless the flex container itself is completely empty.
+
+ Additionally, a [=multi-line=] flexbox can be
+ a balanced flex container,
+ meaning it carefully chooses its linebreaks
+ to make the line lengths as similar as possible.
+ (Otherwise, it simply fills the first line, then the second, etc.)
+
+
+ This example shows four buttons that do not fit side-by-side horizontally,
+ and therefore will wrap into multiple lines.
+
+
+
+ Since the container is 300px wide, only three of the items fit onto a single line.
+ They take up 240px, with 60px left over of remaining space.
+ Because the 'flex-flow' property specifies a multi-line flex container
+ (due to the ''wrap'' keyword appearing in its value),
+ the flex container will create an additional line to contain the last item.
+
+
+
+ An example rendering of the multi-line flex container.
+
+
+
+ Once content is broken into lines,
+ each line is laid out independently;
+ flexible lengths and the 'justify-content' and 'align-self' properties only consider the items on a single line at a time.
+
+ In a multi-lineflex container (even one with only a single line),
+ the cross size of each line
+ is the minimum size necessary to contain the flex items on the line
+ (after alignment due to 'align-self'),
+ and the lines are aligned within the flex container with the 'align-content' property.
+ In a single-lineflex container,
+ the cross size of the line is the cross size of the flex container,
+ and 'align-content' has no effect.
+ The main size of a line is always the same as the main size of the flex container's content box.
+
+
+ align-content-001.htm
+ align-content-002.htm
+ align-content-003.htm
+ align-content-004.htm
+ align-content-005.htm
+ align-content-006.htm
+ align-content-007.htm
+ flexbox-lines-must-be-stretched-by-default.html
+
+
+
+ Here's the same example as the previous,
+ except that the flex items have all been given ''flex: auto''.
+ The first line has 60px of remaining space,
+ and all of the items have the same flexibility,
+ so each of the three items on that line will receive 20px of extra width,
+ each ending up 100px wide.
+ The remaining item is on a line of its own
+ and will stretch to the entire width of the line, i.e. 300px.
+
+
+
+
+
+ A rendering of the same as above,
+ but with the items all given ''flex: auto''.
+
+
+
+
+
+ The above examples show three items fitting on a single line,
+ leaving a single item on the second line.
+ ''flex-wrap: balance'' will instead put two items on the first line,
+ then two on the second line:
+
+
+
+
+
+ The previous example's four items,
+ but now balanced across the two lines
+ with ''flex-wrap: balance''.
+
+
+
+ This can have more dramatic effects when flexing items to fill the line,
+ as the items are more likely to flex similar amounts,
+ rather than the final line's items flexing a lot more:
+
+
+
+
+
+ The same example,
+ but now with ''flex: auto''.
+
+
+
+
+
+Minimum Flex Lines: the 'flex-line-count' property
+
+
+ Name: flex-line-count
+ Value: <>
+ Initial: 1
+ Applies to: [=multi-line=] [=flex containers=]
+ Inherited: no
+ Computed value: the specified integer, computed
+ Animation type: as integer
+
+
+ By default, a ''balance'' flexbox
+ will create as many lines as a normal [=multi-line=] flexbox,
+ then rebalance how the flex items are assigned across that many lines.
+ In some situations,
+ an author might want to ensure there are always a certain number of lines,
+ or might be using a flexbox in a way where there is no limit to the line length
+ (the standard for a ''column'' flexbox, with unlimited available height)
+ and so the "default" line number calculation is useless.
+ The 'flex-line-count' property specifies a minimum flex line count
+ that the [=flex container=] should create
+ to balance the items across.
+
+
+ balance/balance-line-count-intrinsic-001.html
+ balance/balance-line-count-intrinsic-002.html
+ balance/balance-line-count-intrinsic-003.html
+ balance/balance-line-count-intrinsic-004.html
+ balance/balance-line-count-intrinsic-005.html
+ balance/balance-line-count-intrinsic-006.html
+ balance/balance-line-count-intrinsic-007.html
+ balance/balance-min-line-count-001.html
+ balance/balance-min-line-count-002.html
+ balance/balance-min-line-count-003.html
+ balance/balance-min-line-count-004.html
+ balance/balance-min-line-count-005.html
+ balance/flex-line-count-computed.html
+ balance/flex-line-count-invalid.html
+ balance/flex-line-count-valid.html
+
+
+ The [=minimum flex line count=] is clamped from above
+ by the number of [=flex items=] in the [=flex container=];
+ it will only create as many lines as there are [=flex items=].
+ (That is, if you specify ''flex-line-count: 3''
+ but only have two [=flex items=],
+ the [=minimum flex line count=] is 2, instead.)
+
+ Note: There is no maximum flex line count;
+ the [=flex container=] will always contain enough lines
+ to hold all of its [=flex items=],
+ which might be more than what 'flex-line-count' specifies.
+
+ Unused lines (ones with no [=flex items=] assigned to them)
+ are discarded and do not affect layout.
+ This only affects non-''balance'' flexboxes.
+ A ''balance'' flexbox will always assign at least one [=flex item=] to each line,
+ and if it has less items than 'flex-line-count',
+ that's handled specially, above.
+
+ In addition to setting a minimum number of lines that are used by ''balance'',
+ 'flex-line-count' changes the [=available space=] in the [=cross axis=] for [=flex items=]:
+ subtracting the size of N-1 gaps from the normal [=available space=],
+ then dividing the leftover by N,
+ where N is the 'flex-line-count' value.
+ This uses the actual 'flex-line-count' value,
+ not the [=minimum flex line count=]
+ or the actual number of generated lines
+ (which can be higher or lower than what is specified).
+
+ Note: This [=available space=] adjustment is the only effect 'flex-line-count' has
+ on non-''balance'' flexboxes.
+
+ Percentages continue to resolve as normal,
+ unaffected by this [=available space=] adjustment.
+ (To have a [=flex item=] fill the [=cross-axis=] [=available space=],
+ use ''width/height: stretch'',
+ rather than ''width/height: 100%''.)
+
+ If the [=flex container=] is [=single-line=]
+ (aka, ''flex-wrap: nowrap''),
+ this property has no effect.
+
+
+
+
+Flexibility
+
+ The defining aspect of flex layout is the ability to make the flex items “flex”,
+ altering their width/height to fill the available space in the main dimension.
+ This is done with the 'flex' property.
+ A flex container distributes free space to its items (proportional to their flex grow factor) to fill the container,
+ or shrinks them (proportional to their flex shrink factor) to prevent overflow.
+
+ A flex item is fully inflexible
+ if both its 'flex-grow' and 'flex-shrink' values are zero,
+ and flexible otherwise.
+
+
+ flex-factor-less-than-one.html
+
+
+
+The 'flex' Shorthand
+
+
+ Name: flex
+ Value: none | [ <<'flex-grow'>> <<'flex-shrink'>>? || <<'flex-basis'>> ]
+ Initial: 0 1 auto
+ Applies to: flex items
+ Inherited: no
+ Animation type: by computed value type
+
+
+
+ flexbox-dyn-resize-001.html
+ flex-item-max-width-min-content.html
+ flex-item-min-height-min-content.html
+ flex-item-min-width-min-content.html
+ flex-shorthand-calc.html
+ parsing/flex-computed.html
+ parsing/flex-invalid.html
+ parsing/flex-shorthand.html
+ parsing/flex-valid.html
+
+
+ The 'flex' property specifies the components of a [=flexible=] size:
+ the flex factors
+ (grow and shrink)
+ and the flex basis.
+ When a box is a flex item,
+ 'flex' is consulted instead of the main size property
+ to determine the main size of the box.
+ If a box is not a flex item,
+ 'flex' has no effect.
+
+ Note: The initial values of the 'flex' longhands are equivalent to
+ flex: 0 1 auto.
+ This differs from their defaults when omitted in the 'flex' shorthand
+ (effectively ''1 1 0px'')
+ so that the 'flex' shorthand can better accommodate
+ the most common cases.
+
+
+
<<'flex-grow'>>
+
+ This <> component sets 'flex-grow' longhand
+ and specifies the flex grow factor,
+ which determines how much the flex item will grow
+ relative to the rest of the flex items in the flex container
+ when positive free space is distributed.
+ When omitted, it is set to ''1''.
+
+
+ animation/flex-grow-interpolation.html
+ flex-001.htm
+ flex-003.htm
+ flex-grow-001.xht
+ flex-grow-002.html
+ flex-grow-003.html
+ flex-grow-004.html
+ flex-grow-005.html
+ flex-grow-006.html
+ flex-grow-007.html
+ flex-grow-008.html
+ flexbox_flex-natural.html
+ flexbox_flex-natural-mixed-basis-auto.html
+ flexbox_flex-natural-mixed-basis.html
+ flexbox_flex-natural-variable-auto-basis.html
+ flexbox_flex-natural-variable-zero-basis.html
+ flexbox_flex-none.html
+ flexbox_flex-none-wrappable-content.html
+ flex-factor-less-than-one.html
+ getcomputedstyle/flexbox_computedstyle_flex-shorthand-0-auto.html
+ getcomputedstyle/flexbox_computedstyle_flex-shorthand-auto.html
+ getcomputedstyle/flexbox_computedstyle_flex-shorthand.html
+ getcomputedstyle/flexbox_computedstyle_flex-shorthand-initial.html
+ getcomputedstyle/flexbox_computedstyle_flex-shorthand-invalid.html
+ getcomputedstyle/flexbox_computedstyle_flex-shorthand-none.html
+ getcomputedstyle/flexbox_computedstyle_flex-shorthand-number.html
+ getcomputedstyle/flexbox_computedstyle_flex-grow-0.html
+ getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.html
+ getcomputedstyle/flexbox_computedstyle_flex-grow-number.html
+ interactive/flexbox_interactive_flex-grow-transitions.html
+ parsing/flex-grow-computed.html
+ parsing/flex-grow-invalid.html
+ parsing/flex-grow-valid.html
+ table-item-flex-percentage-min-width.html
+ table-item-flex-percentage-width.html
+
+
+
+ Flex values between 0 and 1 have a somewhat special behavior:
+ when the sum of the flex values on the line is less than 1,
+ they will take up less than 100% of the free space.
+
+ An item’s 'flex-grow' value
+ is effectively a request for some proportion of the free space,
+ with ''1'' meaning “100% of the free space”;
+ then if the items on the line are requesting more than 100% in total,
+ the requests are rebalanced to keep the same ratio but use up exactly 100% of it.
+ However, if the items request less than the full amount
+ (such as three items that are each ''flex-grow: .25'')
+ then they'll each get exactly what they request
+ (25% of the free space to each,
+ with the final 25% left unfilled).
+ See [[#resolve-flexible-lengths]] for the exact details
+ of how free space is distributed.
+
+ This pattern is required for continuous behavior as 'flex-grow' approaches zero
+ (which means the item wants none of the free space).
+ Without this, a ''flex-grow: 1'' item would take all of the free space;
+ but so would a ''flex-grow: 0.1'' item,
+ and a ''flex-grow: 0.01'' item,
+ etc.,
+ until finally the value is small enough to underflow to zero
+ and the item suddenly takes up none of the free space.
+ With this behavior,
+ the item instead gradually takes less of the free space
+ as 'flex-grow' shrinks below ''1'',
+ smoothly transitioning to taking none of the free space at zero.
+
+ Unless this “partial fill” behavior is specifically what's desired,
+ authors should stick to values ≥ 1;
+ for example, using ''1'' and ''2'' is usually better
+ than using ''.33'' and ''.67'',
+ as they're more likely to behave as intended
+ if items are added, removed, or line-wrapped.
+
+
+
<<'flex-shrink'>>
+
+ This <> component sets 'flex-shrink' longhand
+ and specifies the flex shrink factor,
+ which determines how much the flex item will shrink
+ relative to the rest of the flex items in the flex container
+ when negative free space is distributed.
+ When omitted, it is set to ''1''.
+
+
+ animation/flex-shrink-interpolation.html
+ flex-002.htm
+ flex-004.htm
+ flex-factor-less-than-one.html
+ flex-shrink-001.html
+ flex-shrink-002.html
+ flex-shrink-003.html
+ flex-shrink-004.html
+ flex-shrink-005.html
+ flex-shrink-006.html
+ flex-shrink-007.html
+ flex-shrink-008.html
+ flex-shrink-large-value-crash.html
+ getcomputedstyle/flexbox_computedstyle_flex-shrink-0.html
+ getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.html
+ getcomputedstyle/flexbox_computedstyle_flex-shrink-number.html
+ interactive/flexbox_interactive_flex-shrink-transitions.html
+ interactive/flexbox_interactive_flex-shrink-transitions-invalid.html
+ parsing/flex-shrink-computed.html
+ parsing/flex-shrink-invalid.html
+ parsing/flex-shrink-valid.html
+ table-item-flex-percentage-min-width.html
+ table-item-flex-percentage-width.html
+
+
+ Note: The flex shrink factor is multiplied by the flex base size when distributing negative space.
+ This distributes negative space in proportion to how much the item is able to shrink,
+ so that e.g. a small item won't shrink to zero before a larger item has been noticeably reduced.
+
+
+ flex-item-max-width-min-content-002.html
+
+
+
<<'flex-basis'>>
+
+ This component sets the 'flex-basis' longhand,
+ which specifies the flex basis:
+ the initial main size of the flex item,
+ before free space is distributed according to the flex factors.
+
+
+ animation/flex-basis-composition.html
+ animation/flex-basis-content-crash.html
+ animation/flex-basis-interpolation.html
+ dynamic-isize-change-001.html
+ dynamic-isize-change-002.html
+ dynamic-isize-change-003.html
+ dynamic-isize-change-004.html
+ flex-basis-001.html
+ flex-basis-002.html
+ flex-basis-003.html
+ flex-basis-004.html
+ flex-basis-005.html
+ flex-basis-006.html
+ flex-basis-007.html
+ flex-basis-008.html
+ flex-basis-009.html
+ flex-basis-010.html
+ flex-basis-011.html
+ flex-basis-012.html
+ flex-basis-013.html
+ flex-basis-intrinsics-001.html
+ flex-basis-item-margins-001.html
+ flexbox-flex-basis-content-001a.html
+ flexbox-flex-basis-content-001b.html
+ flexbox-flex-basis-content-002a.html
+ flexbox-flex-basis-content-002b.html
+ flexbox-flex-basis-content-003a.html
+ flexbox-flex-basis-content-003b.html
+ flexbox-flex-basis-content-004a.html
+ flexbox-flex-basis-content-004b.html
+ flexbox_flex-basis.html
+ flexbox_flex-basis-shrink.html
+ flex-one-sets-flex-basis-to-zero-px.html
+ flex-shorthand-flex-basis-middle.html
+ getcomputedstyle/flexbox_computedstyle_flex-basis-0.html
+ getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html
+ getcomputedstyle/flexbox_computedstyle_flex-basis-auto.html
+ getcomputedstyle/flexbox_computedstyle_flex-basis-percent.html
+ interactive/flexbox_interactive_flex-basis-transitions.html
+ parsing/flex-basis-computed.html
+ parsing/flex-basis-invalid.html
+ parsing/flex-basis-valid.html
+ flex-basis-content-percentage-height.html
+ table-as-item-percent-width-cell-001.html
+
+
+ <<'flex-basis'>> accepts the same values as the 'width' and 'height' properties
+ (except that ''flex-basis/auto'' is treated differently)
+ plus the ''content'' keyword:
+
+
+
auto
+
+ When specified on a flex item, the ''flex-basis/auto'' keyword
+ retrieves the value of the main size property as the used 'flex-basis'.
+ If that value is itself ''auto'', then the used value is ''flex-basis/content''.
+
+
content
+
+ Indicates an [=automatic size=]
+ based on the flex item’s content.
+ (This is typically equivalent to the max-content size,
+ but with adjustments to handle [=preferred aspect ratios=],
+ intrinsic sizing constraints,
+ and orthogonal flows;
+ see details in [[#layout-algorithm]].)
+
+ Note: This value was not present in the initial release of Flexible Box Layout,
+ and thus some older implementations will not support it.
+ The equivalent effect can be achieved by using ''flex/auto''
+ together with a main size ('width' or 'height') of ''width/auto''.
+
+
<<'width'>>
+
+ For all other values,
+ 'flex-basis' is resolved the same way as for 'width' and 'height'.
+
+
+ When omitted from the 'flex' shorthand, its specified value is ''0''.
+
+
none
+
+ The keyword ''flex/none'' expands to ''0 0 auto''.
+
+
+
+
+
+ A diagram showing the difference between "absolute" flex
+ (starting from a basis of zero)
+ and "relative" flex
+ (starting from a basis of the item's content size).
+ The three items have flex factors of ''1'', ''1'', and ''2'', respectively:
+ notice that the item with a flex factor of ''2'' grows twice as fast as the others.
+
+
+
+ A unitless zero that is not already preceded by two flex factors
+ must be interpreted as a flex factor.
+ To avoid misinterpretation or invalid declarations,
+ authors must specify a zero <<'flex-basis'>> component
+ with a unit or precede it by two flex factors.
+
+
+Basic Values of 'flex'
+
+ This section is informative.
+
+ The list below summarizes the effects of the four 'flex' values
+ that represent most commonly-desired effects:
+
+
+
''flex: initial''
+
+ Equivalent to ''flex: 0 1 auto''. (This is the initial value.)
+ Sizes the item based on the 'width'/'height' properties.
+ (If the item's main size property computes to auto,
+ this will size the flex item based on its contents.)
+ Makes the flex item inflexible when there is positive free space,
+ but allows it to shrink to its minimum size when there is insufficient space.
+ The alignment abilities or auto margins
+ can be used to align flex items along the main axis.
+
+
''flex: auto''
+
+ Equivalent to ''flex: 1 1 auto''.
+ Sizes the item based on the 'width'/'height' properties,
+ but makes them fully flexible, so that they absorb any free space along the main axis.
+ If all items are either ''flex: auto'', ''flex: initial'', or ''flex: none'',
+ any positive free space after the items have been sized will be distributed evenly to the items with ''flex: auto''.
+
+
''flex: none''
+
+ Equivalent to ''flex: 0 0 auto''.
+ This value sizes the item according to the 'width'/'height' properties,
+ but makes the flex item fully inflexible.
+ This is similar to ''initial'',
+ except that flex items are not allowed to shrink,
+ even in overflow situations.
+
+
''flex: <number [1,∞]>''
+
+ Equivalent to ''flex: <number [1,∞]> 1 0''.
+ Makes the flex item flexible and sets the flex basis to zero,
+ resulting in an item that receives the specified proportion of the free space in the flex container.
+ If all items in the flex container use this pattern,
+ their sizes will be proportional to the specified flex factor.
+
+
+
+ flexbox_flex-auto.html
+ flexbox_flex-initial-2.html
+ flexbox_flex-initial.html
+ radiobutton-min-size.html
+
+
+ By default, flex items won't shrink below their minimum content size
+ (the length of the longest word or fixed-size element).
+ To change this, set the 'min-width' or 'min-height' property.
+ (See [[#min-size-auto]].)
+
+
+Components of Flexibility
+
+ Individual components of flexibility can be controlled by independent longhand properties.
+
+ Advisement: Authors are encouraged to control flexibility using the 'flex' shorthand
+ rather than with its longhand properties directly,
+ as the shorthand correctly resets any unspecified components
+ to accommodate common uses.
+
+
+The 'flex-grow' property
+
+
+ Name: flex-grow
+ Value: <>
+ Initial: 0
+ Applies to: flex items
+ Inherited: no
+ Computed value: specified number
+ Animation type: by computed value type
+
+
+
+
+ animation/flex-grow-interpolation.html
+ flex-001.htm
+ flex-003.htm
+ flex-grow-001.xht
+ flex-grow-002.html
+ flex-grow-003.html
+ flex-grow-004.html
+ flex-grow-005.html
+ flex-grow-006.html
+ flex-grow-007.html
+ flex-grow-008.html
+ getcomputedstyle/flexbox_computedstyle_flex-grow-0.html
+ getcomputedstyle/flexbox_computedstyle_flex-grow-invalid.html
+ getcomputedstyle/flexbox_computedstyle_flex-grow-number.html
+ interactive/flexbox_interactive_flex-grow-transitions.html
+ parsing/flex-grow-computed.html
+ parsing/flex-grow-invalid.html
+ parsing/flex-grow-valid.html
+
+
+ Advisement: Authors are encouraged to control flexibility using the 'flex' shorthand
+ rather than with 'flex-grow' directly,
+ as the shorthand correctly resets any unspecified components
+ to accommodate common uses.
+
+ The 'flex-grow' property sets the flex grow factor
+ to the provided <>.
+ Negative values are not allowed.
+
+
+The 'flex-shrink' property
+
+
+ Name: flex-shrink
+ Value: <>
+ Initial: 1
+ Applies to: flex items
+ Inherited: no
+ Computed value: specified value
+ Animation type: number
+
+
+
+ animation/flex-shrink-interpolation.html
+ flex-002.htm
+ flex-004.htm
+ flex-shrink-001.html
+ flex-shrink-002.html
+ flex-shrink-003.html
+ flex-shrink-004.html
+ flex-shrink-005.html
+ flex-shrink-006.html
+ flex-shrink-007.html
+ flex-shrink-008.html
+ flex-shrink-large-value-crash.html
+ getcomputedstyle/flexbox_computedstyle_flex-shrink-0.html
+ getcomputedstyle/flexbox_computedstyle_flex-shrink-invalid.html
+ getcomputedstyle/flexbox_computedstyle_flex-shrink-number.html
+ interactive/flexbox_interactive_flex-shrink-transitions.html
+ interactive/flexbox_interactive_flex-shrink-transitions-invalid.html
+ parsing/flex-shrink-computed.html
+ parsing/flex-shrink-invalid.html
+ parsing/flex-shrink-valid.html
+
+
+ Advisement: Authors are encouraged to control flexibility using the 'flex' shorthand
+ rather than with 'flex-shrink' directly,
+ as the shorthand correctly resets any unspecified components
+ to accommodate common uses.
+
+ The 'flex-shrink' property sets the flex shrink factor
+ to the provided <>.
+ Negative values are not allowed.
+
+
+The 'flex-basis' property
+
+
+ Name: flex-basis
+ Value: content | <<'width'>>
+ Initial: auto
+ Applies to: flex items
+ Inherited: no
+ Percentages: relative to the flex container's inner main size
+ Computed value: specified keyword or a computed <> value
+ Animation type: by computed value type
+
+
+
+ animation/flex-basis-composition.html
+ animation/flex-basis-content-crash.html
+ animation/flex-basis-interpolation.html
+ dynamic-isize-change-001.html
+ dynamic-isize-change-002.html
+ dynamic-isize-change-003.html
+ dynamic-isize-change-004.html
+ flex-basis-001.html
+ flex-basis-002.html
+ flex-basis-003.html
+ flex-basis-004.html
+ flex-basis-005.html
+ flex-basis-006.html
+ flex-basis-007.html
+ flex-basis-008.html
+ flex-basis-009.html
+ flex-basis-010.html
+ flex-basis-011.html
+ flex-basis-012.html
+ flex-basis-013.html
+ flex-basis-intrinsics-001.html
+ flex-basis-item-margins-001.html
+ flexbox-flex-basis-content-001a.html
+ flexbox-flex-basis-content-001b.html
+ flexbox-flex-basis-content-002a.html
+ flexbox-flex-basis-content-002b.html
+ flexbox-flex-basis-content-003a.html
+ flexbox-flex-basis-content-003b.html
+ flexbox-flex-basis-content-004a.html
+ flexbox-flex-basis-content-004b.html
+ flexbox_flex-basis.html
+ flexbox_flex-basis-shrink.html
+ flex-one-sets-flex-basis-to-zero-px.html
+ flex-shorthand-flex-basis-middle.html
+ getcomputedstyle/flexbox_computedstyle_flex-basis-0.html
+ getcomputedstyle/flexbox_computedstyle_flex-basis-0percent.html
+ getcomputedstyle/flexbox_computedstyle_flex-basis-auto.html
+ getcomputedstyle/flexbox_computedstyle_flex-basis-percent.html
+ interactive/flexbox_interactive_flex-basis-transitions.html
+ parsing/flex-basis-computed.html
+ parsing/flex-basis-invalid.html
+ parsing/flex-basis-valid.html
+
+
+ Advisement: Authors are encouraged to control flexibility using the 'flex' shorthand
+ rather than with 'flex-basis' directly,
+ as the shorthand correctly resets any unspecified components
+ to accommodate common uses.
+
+ The 'flex-basis' property sets the flex basis.
+ It accepts the same values as the 'width' and 'height' property, plus ''content''.
+
+ For all values other than ''flex-basis/auto'' and ''content'' (defined above),
+ 'flex-basis' is resolved the same way as 'width' in horizontal writing modes [[!CSS2]],
+ except that if a value would resolve to ''width/auto'' for 'width',
+ it instead resolves to ''content'' for 'flex-basis'.
+ For example, percentage values of 'flex-basis' are resolved against
+ the flex item's containing block (i.e. its flex container);
+ and if that containing block's size is indefinite,
+ the used value for 'flex-basis' is ''content''.
+ As another corollary,
+ 'flex-basis' determines the size of the content box,
+ unless otherwise specified
+ such as by 'box-sizing' [[CSS3UI]].
+
+
+Alignment
+
+ After a flex container's contents have finished their flexing
+ and the dimensions of all flex items are finalized,
+ they can then be aligned within the flex container.
+
+ The 'margin' properties can be used to align items in a manner similar to, but more powerful than, what margins can do in block layout.
+ Flex items also respect the alignment properties from CSS Box Alignment,
+ which allow easy keyword-based alignment of items in both the main axis and cross axis.
+ These properties make many common types of alignment trivial,
+ including some things that were very difficult in CSS 2.1,
+ like horizontal and vertical centering.
+
+ Note: While the alignment properties are defined in CSS Box Alignment [[!CSS-ALIGN-3]],
+ Flexible Box Layout reproduces the definitions of the relevant ones here
+ so as to not create a normative dependency that may slow down advancement of the spec.
+ These properties apply only to flex layout
+ until CSS Box Alignment Level 3 is finished
+ and defines their effect for other layout modes.
+ Additionally, any new values defined in the Box Alignment module
+ will apply to Flexible Box Layout;
+ in other words, the Box Alignment module, once completed,
+ will supersede the definitions here.
+
+
+ baseline-outside-flex-item.html
+ fieldset-baseline-alignment.html
+
+
+
+
+
+
+ This section is non-normative.
+ The normative definition of how margins affect flex items is in the Flex Layout Algorithm section.
+
+ Auto margins on flex items have an effect very similar to auto margins in block flow:
+
+ * During calculations of flex bases and flexible lengths, auto margins are treated as ''0''.
+ * Prior to alignment via 'justify-content' and 'align-self',
+ any positive free space is distributed to auto margins in that dimension.
+ * Overflowing boxes ignore their auto margins and overflow in the end direction.
+
+
+ auto-height-column-with-border-and-padding.html
+ auto-height-with-flex.html
+ auto-margins-001.html
+ auto-margins-002.html
+ auto-margins-003.html
+ flexbox-margin-auto-horiz-001.xhtml
+ flexbox-margin-auto-horiz-002.xhtml
+ flexbox_margin-auto.html
+ flexbox_margin-auto-overflow.html
+ main-axis-margin-rounding.html
+
+
+ Note: If free space is distributed to auto margins,
+ the alignment properties will have no effect in that dimension
+ because the margins will have stolen all the free space
+ left over after flexing.
+
+
+ One use of ''margin/auto'' margins in the main axis is to separate flex items into distinct "groups".
+ The following example shows how to use this to reproduce a common UI pattern -
+ a single bar of actions with some aligned on the left and others aligned on the right.
+
+
+
+ Sample rendering of the code below.
+
+
+ The figure below illustrates the difference in cross-axis alignment in overflow situations between
+ using auto margins
+ and using the alignment properties.
+
+
+
+
+
+
About
+
Authoritarianism
+
Blog
+
+
+
+
+
About
+
Authoritarianism
+
Blog
+
+
+
+
+ The items in the figure on the left are centered with margins,
+ while those in the figure on the right are centered with 'align-self'.
+ If this column flex container was placed against the left edge of the page,
+ the margin behavior would be more desirable,
+ as the long item would be fully readable.
+ In other circumstances,
+ the true centering behavior might be better.
+
+
+
+
+
+ dynamic-isize-change-001.html
+ dynamic-isize-change-002.html
+ dynamic-isize-change-003.html
+ dynamic-isize-change-004.html
+ flexbox_justifycontent-center.html
+ flexbox_justifycontent-center-overflow.html
+ flexbox_justifycontent-end.html
+ flexbox_justifycontent-end-rtl.html
+ flexbox_justifycontent-flex-end.html
+ flexbox_justifycontent-flex-start.html
+ flexbox-justify-content-horiz-001a.xhtml
+ flexbox-justify-content-horiz-001b.xhtml
+ flexbox-justify-content-horiz-002.xhtml
+ flexbox-justify-content-horiz-003.xhtml
+ flexbox-justify-content-horiz-004.xhtml
+ flexbox-justify-content-horiz-005.xhtml
+ flexbox-justify-content-horiz-006.xhtml
+ flexbox_justifycontent-left-001.html
+ flexbox_justifycontent-left-002.html
+ flexbox_justifycontent-right-001.html
+ flexbox_justifycontent-right-002.html
+ flexbox_justifycontent-rtl-001.html
+ flexbox_justifycontent-rtl-002.html
+ flexbox_justifycontent-spacearound.html
+ flexbox_justifycontent-spacearound-negative.html
+ flexbox_justifycontent-spacearound-only.html
+ flexbox_justifycontent-spacebetween.html
+ flexbox_justifycontent-spacebetween-negative.html
+ flexbox_justifycontent-spacebetween-only.html
+ flexbox_justifycontent-start.html
+ flexbox_justifycontent-start-rtl.html
+ flexbox_justifycontent-stretch.html
+ flexbox-justify-content-vert-001a.xhtml
+ flexbox-justify-content-vert-001b.xhtml
+ flexbox-justify-content-vert-002.xhtml
+ flexbox-justify-content-vert-003.xhtml
+ flexbox-justify-content-vert-004.xhtml
+ flexbox-justify-content-vert-005.xhtml
+ flexbox-justify-content-vert-006.xhtml
+ flexbox-justify-content-wmvert-001.xhtml
+ flexbox-justify-content-wmvert-002.html
+ flexbox-justify-content-wmvert-003.html
+ flexbox_margin.html
+ flexbox_margin-left-ex.html
+ getcomputedstyle/flexbox_computedstyle_justify-content-center.html
+ getcomputedstyle/flexbox_computedstyle_justify-content-flex-end.html
+ getcomputedstyle/flexbox_computedstyle_justify-content-flex-start.html
+ getcomputedstyle/flexbox_computedstyle_justify-content-space-around.html
+ getcomputedstyle/flexbox_computedstyle_justify-content-space-between.html
+ justify-content-001.htm
+ justify-content-002.htm
+ justify-content-003.htm
+ justify-content-004.htm
+ justify-content-005.htm
+ justify-content-006.html
+ justify-content-007.html
+ justify-content_center.html
+ justify-content_flex-end.html
+ justify-content_flex-start.html
+ justify-content-sideways-001.html
+ justify-content_space-around.html
+ justify-content_space-between-001.html
+ justify-content_space-between-002.html
+ scrollbars-auto.html
+ scrollbars.html
+ scrollbars-no-margin.html
+ justify-content-rounding.html
+
+
+ The 'justify-content' property aligns flex items along the main axis of the current line of the flex container.
+ This is done after any flexible lengths and any auto margins have been resolved.
+ Typically it helps distribute extra free space leftover when either
+ all the flex items on a line are inflexible,
+ or are flexible but have reached their maximum size.
+ It also exerts some control over the alignment of items when they overflow the line.
+
+
+
flex-start
+
+ Flex items are packed toward the start of the line.
+ The main-start margin edge of the first flex item on the line
+ is placed flush with the main-start edge of the line,
+ and each subsequent flex item is placed flush with the preceding item.
+
+
+ flexbox_justifycontent-start.html
+ flexbox_justifycontent-start-rtl.html
+
+
+
flex-end
+
+ Flex items are packed toward the end of the line.
+ The main-end margin edge of the last flex item
+ is placed flush with the main-end edge of the line,
+ and each preceding flex item is placed flush with the subsequent item.
+
+
+ css-box-justify-content.html
+ flexbox_justifycontent-end.html
+ flexbox_justifycontent-end-rtl.html
+ flexbox_justifycontent-flex-end.html
+
+
+
center
+
+ Flex items are packed toward the center of the line.
+ The flex items on the line are placed flush with each other
+ and aligned in the center of the line,
+ with equal amounts of space between the main-start edge of the line and the first item on the line
+ and between the main-end edge of the line and the last item on the line.
+ (If the leftover free-space is negative,
+ the flex items will overflow equally in both directions.)
+
+
+ flexbox_justifycontent-center.html
+ flexbox_justifycontent-center-overflow.html
+
+
+
space-between
+
+ Flex items are evenly distributed in the line.
+ If the leftover free-space is negative
+ or there is only a single flex item on the line,
+ this value falls back to ''safe flex-start''.
+ Otherwise,
+ the main-start margin edge of the first flex item on the line
+ is placed flush with the main-start edge of the line,
+ the main-end margin edge of the last flex item on the line
+ is placed flush with the main-end edge of the line,
+ and the remaining flex items on the line are distributed
+ so that the spacing between any two adjacent items is the same.
+
+
+ flexbox_justifycontent-spacebetween.html
+ flexbox_justifycontent-spacebetween-negative.html
+ flexbox_justifycontent-spacebetween-only.html
+
+
+
space-around
+
+ Flex items are evenly distributed in the line,
+ with half-size spaces on either end.
+ If the leftover free-space is negative or
+ there is only a single flex item on the line,
+ this value falls back to ''safe center''.
+ Otherwise, the flex items on the line are distributed
+ such that the spacing between any two adjacent flex items on the line is the same,
+ and the spacing between the first/last flex items and the flex container edges
+ is half the size of the spacing between flex items.
+
+
+ flexbox-column-row-gap-001.html
+ flexbox-column-row-gap-002.html
+ flexbox-column-row-gap-003.html
+ flexbox-column-row-gap-004.html
+ flexbox_columns-flexitems-2.html
+ flexbox_columns-flexitems.html
+ flexbox_justifycontent-spacearound.html
+ flexbox_justifycontent-spacearound-negative.html
+ flexbox_justifycontent-spacearound-only.html
+
+
+
+
+
+
+
An illustration of the five 'justify-content' keywords and their effects on a flex container with three colored items.
+
+
+
+
+
+Cross-axis Alignment: the 'align-items' and 'align-self' properties
+ Name: align-self
+ Value: auto | flex-start | flex-end | center | baseline | stretch
+ Initial: auto
+ Applies to: flex items
+ Inherited: no
+ Computed value: specified keyword
+ Animation type: discrete
+
+
+
+ align-self-006.html
+ align-self-010.html
+ align-self-013.html
+ align-self-014.html
+ align-self-015.html
+ align-self-016.html
+ flexbox_align-self-auto.html
+ flexbox-align-self-baseline-compatability.html
+ flexbox-align-self-baseline-horiz-001a.xhtml
+ flexbox-align-self-baseline-horiz-001b.xhtml
+ flexbox-align-self-baseline-horiz-002.xhtml
+ flexbox-align-self-baseline-horiz-003.xhtml
+ flexbox-align-self-baseline-horiz-004.xhtml
+ flexbox-align-self-baseline-horiz-005.xhtml
+ flexbox-align-self-baseline-horiz-006.xhtml
+ flexbox-align-self-baseline-horiz-007.xhtml
+ flexbox-align-self-baseline-horiz-008.xhtml
+ flexbox_align-self-baseline.html
+ flexbox_align-self-center.html
+ flexbox_align-self-flexend.html
+ flexbox_align-self-flexstart.html
+ flexbox-align-self-horiz-001-block.xhtml
+ flexbox-align-self-horiz-001-table.xhtml
+ flexbox-align-self-horiz-002.xhtml
+ flexbox-align-self-horiz-003.xhtml
+ flexbox-align-self-horiz-004.xhtml
+ flexbox-align-self-horiz-005.xhtml
+ flexbox_align-self-stretch.html
+ flexbox-align-self-stretch-vert-001.html
+ flexbox-align-self-stretch-vert-002.html
+ flexbox-align-self-vert-001.xhtml
+ flexbox-align-self-vert-002.xhtml
+ flexbox-align-self-vert-003.xhtml
+ flexbox-align-self-vert-004.xhtml
+ flexbox-align-self-vert-rtl-001.xhtml
+ flexbox-align-self-vert-rtl-002.xhtml
+ flexbox-align-self-vert-rtl-003.xhtml
+ flexbox-align-self-vert-rtl-004.xhtml
+ flexbox-align-self-vert-rtl-005.xhtml
+ getcomputedstyle/flexbox_computedstyle_align-self-baseline.html
+ getcomputedstyle/flexbox_computedstyle_align-self-center.html
+ getcomputedstyle/flexbox_computedstyle_align-self-flex-end.html
+ getcomputedstyle/flexbox_computedstyle_align-self-flex-start.html
+ getcomputedstyle/flexbox_computedstyle_align-self-invalid.html
+ getcomputedstyle/flexbox_computedstyle_align-self-stretch.html
+
+
+ Flex items can be aligned in the cross axis of the current line of the flex container,
+ similar to 'justify-content' but in the perpendicular direction.
+ 'align-items' sets the default alignment for all of the flex container's items,
+ including anonymous flex items.
+ 'align-self' allows this default alignment to be overridden for individual flex items.
+ (For anonymous flex items,
+ 'align-self' always matches the value of 'align-items' on their associated flex container.)
+
+ If either of the flex item's cross-axis margins are auto,
+ 'align-self' has no effect.
+
+ Values have the following meanings:
+
+
+
auto
+
+ Defers cross-axis alignment control
+ to the value of 'align-items' on the parent box.
+ (This is the initial value of 'align-self'.)
+
+
+ align-self-007.html
+ align-self-008.html
+ align-self-009.html
+ align-self-011.html
+ align-self-012.html
+
+
+
flex-start
+
+ The cross-start margin edge of the flex item
+ is placed flush with the cross-start edge of the line.
+
+
+ align-items-002.htm
+ align-items-006.html
+ align-self-001.html
+
+
+
flex-end
+
+ The cross-end margin edge of the flex item
+ is placed flush with the cross-end edge of the line.
+
+
+ align-items-003.htm
+ align-self-002.html
+
+
+
center
+
+ The flex item’s margin box is centered in the cross axis within the line.
+ (If the cross size of the flex line is less than that of the flex item,
+ it will overflow equally in both directions.)
+
+
+ align-items-001.htm
+ align-self-003.html
+
+
+
baseline
+
+ The flex item participates in baseline alignment:
+ all participating flex items on the line
+ are aligned such that their baselines align,
+ and the item with the largest distance between its baseline and its cross-start margin edge
+ is placed flush against the cross-start edge of the line.
+ If the item does not have a baseline in the necessary axis,
+ then one is synthesized
+ from the flex item’s border box.
+
+
+ align-items-004.htm
+ align-baseline.html
+ dynamic-baseline-change.html
+ dynamic-baseline-change-nested.html
+
+
+
stretch
+
+ If the cross size property of the flex item computes to ''width/auto'',
+ and neither of the cross-axis margins are ''margin/auto'',
+ the flex item is stretched.
+ Its used value is the length necessary to make the cross size of the item's margin box as close to the same size as the line as possible,
+ while still respecting the constraints imposed by 'min-height'/'min-width'/'max-height'/'max-width'.
+
+ Note: If the flex container's height is constrained
+ this value may cause the contents of the flex item
+ to overflow the item.
+
+ The cross-start margin edge of the flex item
+ is placed flush with the cross-start edge of the line.
+
+
+ align-items-005.htm
+ align-self-004.html
+ align-self-005.html
+ css-flexbox-height-animation-stretch.html
+
+
+
+
+
+
An illustration of the five 'align-items' keywords and their effects on a flex container with four colored items.
+
+
+ The 'align-content' property aligns a flex container's lines within the flex container
+ when there is extra space in the cross-axis,
+ similar to how 'justify-content' aligns individual items within the main-axis.
+ Note, this property has no effect on a single-lineflex container.
+ Values have the following meanings:
+
+
+
flex-start
+
+ Lines are packed toward the start of the flex container.
+ The cross-start edge of the first line in the flex container
+ is placed flush with the cross-start edge of the flex container,
+ and each subsequent line is placed flush with the preceding line.
+
+
flex-end
+
+ Lines are packed toward the end of the flex container.
+ The cross-end edge of the last line
+ is placed flush with the cross-end edge of the flex container,
+ and each preceding line is placed flush with the subsequent line.
+
+
center
+
+ Lines are packed toward the center of the flex container.
+ The lines in the flex container are placed flush with each other
+ and aligned in the center of the flex container,
+ with equal amounts of space
+ between the cross-start content edge of the flex container
+ and the first line in the flex container,
+ and between the cross-end content edge of the flex container
+ and the last line in the flex container.
+ (If the leftover free-space is negative,
+ the lines will overflow equally in both directions.)
+
+
space-between
+
+ Lines are evenly distributed in the flex container.
+ If the leftover free-space is negative
+ or there is only a single flex line in the flex container,
+ this value falls back to ''safe flex-start''.
+ Otherwise,
+ the cross-start edge of the first line in the flex container
+ is placed flush with the cross-start content edge of the flex container,
+ the cross-end edge of the last line in the flex container
+ is placed flush with the cross-end content edge of the flex container,
+ and the remaining lines in the flex container are distributed
+ so that the spacing between any two adjacent lines is the same.
+
+
space-around
+
+ Lines are evenly distributed in the flex container,
+ with half-size spaces on either end.
+ If the leftover free-space is negative
+ this value falls back to ''safe center''.
+ Otherwise, the lines in the flex container are distributed
+ such that the spacing between any two adjacent lines is the same,
+ and the spacing between the first/last lines and the flex container edges
+ is half the size of the spacing between flex lines.
+
+
stretch
+
+ Lines stretch to take up the remaining space.
+ If the leftover free-space is negative,
+ this value falls back to ''align-content/flex-start''.
+ Otherwise,
+ the free-space is split equally between all of the lines,
+ increasing their cross size.
+
+
+ Note: Only multi-lineflex containers
+ ever have free space in the cross-axis for lines to be aligned in,
+ because in a single-line flex container
+ the sole line automatically stretches to fill the space.
+
+
+
+
+ An illustration of the 'align-content' keywords and their effects on a multi-line flex container.
+
+
+ In order for a flex container to itself participate in baseline alignment
+ (e.g. when the flex container is itself a flex item in an outer flex container),
+ it needs to submit the position of the baselines that will best represent its contents.
+ To this end,
+ the baselines of a flex container are determined as follows
+ (after reordering with 'order',
+ and taking 'flex-direction' into account):
+
+
+
+ When calculating the baseline according to the above rules,
+ if the box contributing a baseline has an 'overflow' value that allows scrolling,
+ the box must be treated as being in its initial scroll position
+ for the purpose of determining its baseline.
+
+ When determining the baseline of a table cell,
+ a flex container provides a baseline just as a line box or table-row does. [[!CSS2]]
+
+ See [[css-writing-modes-3#intro-baselines]]
+ and [[css-align-3#baseline-rules]]
+ for more information on baselines.
+
+
+ alignment/flex-align-baseline-001.html
+ alignment/flex-align-baseline-002.html
+ alignment/flex-align-baseline-003.html
+ alignment/flex-align-baseline-004.html
+ alignment/flex-align-baseline-005.html
+ alignment/flex-align-baseline-006.html
+ alignment/flex-align-baseline-007.html
+ alignment/flex-align-baseline-column-rtl-direction.html
+ alignment/flex-align-baseline-column-vert-lr-rtl-wrap-reverse.html
+ alignment/flex-align-baseline-column-vert-rl-rtl-wrap-reverse.html
+ alignment/flex-align-baseline-fieldset-001.html
+ alignment/flex-align-baseline-fieldset-002.html
+ alignment/flex-align-baseline-fieldset-003.html
+ alignment/flex-align-baseline-flex-001.html
+ alignment/flex-align-baseline-flex-002.html
+ alignment/flex-align-baseline-flex-003.html
+ alignment/flex-align-baseline-flex-004.html
+ alignment/flex-align-baseline-grid-001.html
+ alignment/flex-align-baseline-grid-002.html
+ alignment/flex-align-baseline-grid-003.html
+ alignment/flex-align-baseline-multicol-001.html
+ alignment/flex-align-baseline-multicol-002.html
+ alignment/flex-align-baseline-multicol-003.html
+ alignment/flex-align-baseline-overflow-001.html
+ alignment/flex-align-baseline-overflow-002.html
+ alignment/flex-align-baseline-overflow-003.html
+ alignment/flex-align-baseline-table-001.html
+ alignment/flex-align-baseline-table-002.html
+ alignment/flex-align-baseline-table-003.html
+ flexbox-baseline-align-self-baseline-horiz-001.html
+ flexbox-baseline-align-self-baseline-vert-001.html
+ flexbox-baseline-empty-001a.html
+ flexbox-baseline-empty-001b.html
+ flexbox-baseline-multi-item-horiz-001a.html
+ flexbox-baseline-multi-item-horiz-001b.html
+ flexbox-baseline-multi-item-vert-001a.html
+ flexbox-baseline-multi-item-vert-001b.html
+ flexbox-baseline-multi-line-horiz-001.html
+ flexbox-baseline-multi-line-horiz-002.html
+ flexbox-baseline-multi-line-horiz-003.html
+ flexbox-baseline-multi-line-horiz-004.html
+ flexbox-baseline-multi-line-vert-001.html
+ flexbox-baseline-multi-line-vert-002.html
+ flexbox-baseline-nested-001.html
+ flexbox-baseline-single-item-001a.html
+ flexbox-baseline-single-item-001b.html
+ flex-baseline-overflow-hidden.html
+ flex-order-last-baseline-multiple.html
+ flex-order-last-baseline.html
+ flex-order-wrap-reverse-baseline.html
+
+
+
+
+
+Flex Layout Algorithm
+
+ This section contains normative algorithms
+ detailing the exact layout behavior of a flex container and its contents.
+ The algorithms here are written to optimize readability and theoretical simplicity,
+ and may not necessarily be the most efficient.
+ Implementations may use whatever actual algorithms they wish,
+ but must produce the same results as the algorithms described here.
+
+ Note: This section is mainly intended for implementors.
+ Authors writing web pages should generally be served well by the individual property descriptions,
+ and do not need to read this section unless they have a deep-seated urge to understand arcane details of CSS layout.
+
+ The following sections define the algorithm for laying out a flex container and its contents.
+
+ Note: Flex layout works with the flex items in order-modified document order,
+ not their original document order.
+
+
+ flexbox-basic-block-horiz-001v.xhtml
+ flexbox-basic-block-horiz-001.xhtml
+ flexbox-basic-block-vert-001v.xhtml
+ flexbox-basic-block-vert-001.xhtml
+ flexbox-basic-canvas-horiz-001v.xhtml
+ flexbox-basic-canvas-horiz-001.xhtml
+ flexbox-basic-canvas-vert-001v.xhtml
+ flexbox-basic-canvas-vert-001.xhtml
+ flexbox-basic-fieldset-horiz-001.xhtml
+ flexbox-basic-fieldset-vert-001.xhtml
+ flexbox-basic-iframe-horiz-001.xhtml
+ flexbox-basic-iframe-vert-001.xhtml
+ flexbox-basic-img-horiz-001.xhtml
+ flexbox-basic-img-vert-001.xhtml
+ flexbox-basic-textarea-horiz-001.xhtml
+ flexbox-basic-textarea-vert-001.xhtml
+ flexbox-basic-video-horiz-001.xhtml
+ flexbox-basic-video-vert-001.xhtml
+ flexbox-dyn-resize-001.html
+ flexbox-mbp-horiz-001-rtl.xhtml
+ flexbox-mbp-horiz-001.xhtml
+ flexbox-mbp-horiz-002a.xhtml
+ flexbox-mbp-horiz-002b.xhtml
+ flexbox-mbp-horiz-002v.xhtml
+ flexbox-mbp-horiz-003-reverse.xhtml
+ flexbox-mbp-horiz-003v.xhtml
+ flexbox-mbp-horiz-003.xhtml
+ flexbox-mbp-horiz-004.xhtml
+ flexbox-sizing-horiz-001.xhtml
+ flexbox-sizing-horiz-002.xhtml
+ flexbox-sizing-vert-001.xhtml
+ flexbox-sizing-vert-002.xhtml
+ percentage-max-height-001.html
+ percentage-max-height-002.html
+ percentage-max-height-003.html
+ percentage-max-height-004.html
+ percentage-max-height-005.html
+ percent-height-flex-items-cross-sizes-with-mutations.html
+ table-as-item-auto-min-width.html
+ table-as-item-change-cell.html
+ table-as-item-fixed-min-width-2.html
+ table-as-item-fixed-min-width-3.html
+ table-as-item-fixed-min-width.html
+ table-as-item-narrow-content-2.html
+ table-as-item-narrow-content.html
+ table-as-item-specified-height.html
+ table-as-item-specified-width.html
+ table-as-item-specified-width-vertical.html
+ flex-rounding.html
+ relayout-intrinsic-block-size.html
+ shrinking-column-flexbox.html
+ total-min-max-violation-zero.html
+
+
+
+Initial Setup
+
+
+
+ Generate anonymous flex items
+ as described in [[#flex-items]].
+
+
+
+Line Length Determination
+
+
+
+ Determine the available main and cross space for the flex items.
+ For each dimension,
+ if that dimension of the flex container’s content box is a definite size, use that;
+ if that dimension of the flex container is being sized under a min or max-content constraint,
+ the available space in that dimension is that constraint;
+ otherwise, subtract the flex container’s margin, border, and padding
+ from the space available to the flex container in that dimension
+ and use that value.
+ This might result in an infinite value.
+
+
+ If the [=available space=] in the [=cross axis=] is [=definite=],
+ then additionally modify it based on 'flex-line-count'.
+
+
+
+ For example, the [=available space=] to a flex item
+ in a 'float|floated' [=width/auto=]-sized [=flex container=] is:
+
+ * the width of the [=flex container=] containing block
+ minus the [=flex container's=] margin, border, and padding
+ in the horizontal dimension
+ * infinite in the vertical dimension
+
+ If the used flex basis is ''content'' or depends on its available space,
+ and the flex container is being sized under a min-content or max-content constraint
+ (e.g. when performing automatic table layout [[!CSS2]]),
+ size the item under that constraint.
+ The flex base size is the item's resulting main size.
+
+
+ Otherwise,
+ if the used flex basis is ''content'' or depends on its available space,
+ the available main size is infinite,
+ and the flex item's inline axis is parallel to the main axis,
+ lay the item out using
+ the rules for a box in an orthogonal flow [[!CSS3-WRITING-MODES]].
+ The flex base size is the item's max-content main size.
+
+ Note: This case occurs, for example,
+ in an English document (horizontal writing mode)
+ containing a column flex container
+ containing a vertical Japanese (vertical writing mode) flex item.
+
+
+ Otherwise,
+ size the item into the available space
+ using its used flex basis in place of its main size,
+ treating a value of ''content'' as ''width/max-content''.
+ If a cross size is needed to determine the main size
+ (e.g. when the flex item’s main size is in its block axis,
+ or when it has a [=preferred aspect ratio=])
+ and the flex item’s cross size is ''auto'' and not definite,
+ in this calculation use ''width/fit-content'' as the flex item’s cross size.
+ The flex base size is the item's resulting main size.
+
+
+ css-flexbox-img-expand-evenly.html
+ fit-content-item-001.html
+ fit-content-item-002.html
+ fit-content-item-003.html
+ fit-content-item-004.html
+ flexbox-vert-lr-with-img.html
+ flex-container-max-content-001.html
+ flex-container-min-content-001.html
+ flex-height-min-content.html
+
+
+
+ When determining the flex base size,
+ the item’s min and max main sizes are ignored
+ (no clamping occurs).
+ Furthermore, the sizing calculations that floor the content box size at zero
+ when applying 'box-sizing' are also ignored.
+ (For example, an item with a specified size of zero,
+ positive padding, and ''box-sizing: border-box''
+ will have an outer flex base size of zero--
+ and hence a negative inner flex base size.)
+
+ The hypothetical main size is the item's flex base size
+ clamped according to its used min and max main sizes
+ (and flooring the content box size at zero).
+
+
+ text-as-flexitem-size-001.html
+
+
+
+ Determine the main size of the flex container
+ using the rules of the formatting context in which it participates.
+
+
+ The [=automatic block size=] of a [=block-level=] [=flex container=]
+ is its [=max-content size=].
+
+ The Block Layout spec should define this equivalency, but it doesn't exist yet.
+
Collect all the flex items into a single flex line.
+
+
If the flex container is [=multi-line=]
+ but not [=balancing=],
+
Starting from the first uncollected item,
+ collect consecutive items one by one
+ until the first time that the next collected item
+ would not fit into the flex container's [=inner size|inner=] main size
+ (or until a forced break is encountered,
+ see [[#pagination]]).
+ If the very first uncollected item wouldn't fit,
+ collect just it into the line.
+
+
+ For this step,
+ the size of a flex item is its [=outer size|outer=] hypothetical main size.
+ (Note: This can be negative.)
+
+
+ Repeat until all flex items have been collected into flex lines.
+
+
+ Note that the "collect as many" line will collect zero-sized flex items
+ onto the end of the previous line
+ even if the last non-zero item exactly "filled up" the line.
+
If the flex container is [=multi-line=] and [=balancing=],
+
+ First determine how many [=flex lines=] will be produced
+ by the non-balancing algorithm, above.
+ For this purpose,
+ floor the [=outer size|outer=] [=hypothetical main size=] of each [=flex item=]
+ at zero.
+ This can, if the items have large negative margins,
+ result in a higher line count than a non-balancing flexbox.
+ Let the |balancing line count|
+ be the larger of this line count
+ and the [=minimum flex line count=].
+
+ Then,
+ [=balance flex items=]
+ across |balancing line count| number of lines.
+
+ Determine the hypothetical cross size of each item
+ by performing layout as if it were an [=in-flow=] [=block-level box=]
+ with the used [=main size=] and the given available space,
+ treating auto as ''fit-content''.
+
+
+ canvas-contain-size.html
+ inline-flex-column-image-load.html
+
+
+
+ Collect all the flex items whose inline-axis is parallel to the main-axis,
+ whose 'align-self' is ''align-self/baseline'',
+ and whose cross-axis margins are both non-auto.
+ Find the largest of the distances between each item's baseline and its hypothetical outer cross-start edge,
+ and the largest of the distances between each item's baseline and its hypothetical outer cross-end edge,
+ and sum these two values.
+
+
+ Among all the items not collected by the previous step,
+ find the largest outer hypothetical cross size.
+
+
+ The used cross size of the flex line is the largest of the numbers found in the previous two steps and zero.
+
+ If the flex container is single-line,
+ then clamp the line's cross-size to be within
+ the container's computed min and max cross sizes.
+ Note that if CSS 2.1's definition of min/max-width/height applied more generally,
+ this behavior would fall out automatically.
+
+ Handle 'align-content: stretch'.
+ If the flex container has a definitecross size,
+ 'align-content' is stretch,
+ and the sum of the flex lines' cross sizes is less than the flex container's inner cross size,
+ increase the cross size of each flex line by equal amounts
+ such that the sum of their cross sizes exactly equals the flex container's inner cross size.
+
+
+ Collapse ''visibility:collapse'' items.
+ If any flex items have ''visibility: collapse'',
+ note the cross size of the line they're in as the item's |strut size|,
+ and restart layout from the beginning.
+
+ In this second layout round,
+ when collecting items into lines,
+ treat the collapsed items as having zero main size.
+ For the rest of the algorithm following that step,
+ ignore the collapsed items entirely
+ (as if they were ''display:none'')
+ except that after calculating the cross size of the lines,
+ if any line's cross size is less than
+ the largest strut size
+ among all the collapsed items in the line,
+ set its cross size to that strut size.
+
+ Skip this step in the second layout round.
+
+
+ flexbox-collapsed-item-baseline-001.html
+ flexbox-collapsed-item-horiz-001.html
+ flexbox-collapsed-item-horiz-002.html
+ flexbox-collapsed-item-horiz-003.html
+
+
+
+ Determine the used cross size of each flex item.
+ If a flex item's [=cross size=] depends on the available space
+ in the [=cross axis=],
+ recalculate its cross size using the [=flex line's=] [=cross size=]
+ (rather than the [=flex container's=]) as the available space.
+ Otherwise,
+ the used cross size is the item's hypothetical cross size.
+
+ If the flex item's [=cross size=] changed as a result,
+ redo layout for its contents,
+ treating this used size as its definite cross size
+ so that percentage-sized children can be resolved.
+
+
+ table-as-item-cross-size.html
+
+
+ Note: This step does not affect the main size of the flex item,
+ even if it has a [=preferred aspect ratio=].
+
+
+
+ flex-item-and-percentage-abspos.html
+
+
+
+Main-Axis Alignment
+
+
+
+ Distribute any remaining free space.
+ For each flex line:
+
+
+
+ If the remaining free space is positive
+ and at least one main-axis margin on this line is auto,
+ distribute the free space equally among these margins.
+ Otherwise, set all auto margins to zero.
+
+
+ Align the items along the main-axis per 'justify-content'.
+
+
+
+
+Cross-Axis Alignment
+
+
+
+ Resolve cross-axis auto margins.
+ If a flex item has auto cross-axis margins:
+
+
+
+ If its outer cross size
+ (treating those auto margins as zero)
+ is less than the cross size of its flex line,
+ distribute the difference in those sizes equally
+ to the auto margins.
+
+ Otherwise,
+ if the block-start or inline-start margin (whichever is in the cross axis)
+ is auto, set it to zero.
+ Set the opposite margin so that the outer cross size of the item
+ equals the cross size of its flex line.
+
+
+
+
+ Align all flex items along the cross-axis per 'align-self',
+ if neither of the item's cross-axis margins are auto.
+
+
+ Determine the flex container's used cross size
+ using the rules of the [=formatting context=] in which it participates.
+ If a content-based [=cross size=] is needed,
+ use the sum of the [=flex lines=]' [=cross sizes=].
+
+
+ Align all flex lines per 'align-content'.
+
+
+
+Balancing Flex Items
+
+
+
+ To balance flex items
+ for a [=flex container=]
+ across a number of [=flex lines=] |line count|,
+ divide its [=flex items=]
+ into exactly |line count| numbers of contiguous sequences,
+ under the following conditions:
+
+ * At least one [=flex item=] is assigned to each sequence.
+ * The sum of the [=flex item=] sizes
+ of all the [=flex items=] in the sequence
+ (the |line size|)
+ do not exceed the [=inner size|inner=] [=main size=] of the [=flex container=]
+ (unless it's a single overflowing item).
+ * If a [=flex item's=] size is zero,
+ the preceding sequence was not overflowing,
+ and it could be assigned either to the end of the preceding sequence
+ or the beginning of the next sequence,
+ it is assigned to the end of the preceding sequence.
+ Otherwise, it's assigned to the beginning of the next sequence.
+ * Calling the difference between the |line size|
+ and the [=flex container's=] [=inner size|inner=] [=main size=]
+ a sequence's |error|,
+ the sum of the squared |error| across all sequences
+ is minimized.
+
+ For the purpose of this algorithm,
+ a [=flex item's=] size
+ is its [=outer size|outer=] [=hypothetical main size=],
+ floored at 0.
+
+ If multiple possible sequence assignments
+ have equal minimum |error|,
+ select the sequence that assigns the most items to the first line;
+ if multiple sequences tie by that metric,
+ select the sequence among them that assigns the most items to the second line;
+ etc.
+
+ Assign each sequence of [=flex items=]
+ to the corresponding [=flex line=].
+
+
+ Note: Because all items have zero or positive size,
+ and thus adding an item to a line never increases the error,
+ there are efficient, nearly linear algorithms
+ to minimize the sum of squared error,
+ such as SMAWK algorithm.
+ (A naive minimization algo is O(n^2) in the number of items being balanced,
+ which is not usable in practice.)
+
+
+
+Resolving Flexible Lengths
+
+
+ To resolve the flexible lengths of the items within a flex line:
+
+
+
+ Determine the used flex factor.
+ Sum the outer hypothetical main sizes of all items on the line.
+ If the sum is less than the flex container's inner main size,
+ use the flex grow factor for the rest of this algorithm;
+ otherwise, use the flex shrink factor.
+
+
+ Each item in the flex line has a target main size,
+ initially set to its [=flex base size=].
+ Each item is initially unfrozen
+ and may become frozen.
+
+ Note: An item’s [=target main size=] doesn’t change after freezing.
+
+
+ Size inflexible items.
+ Freeze,
+ setting its [=target main size=]
+ to its hypothetical main size…
+
+ Calculate initial free space.
+ Sum the outer sizes of all items on the line,
+ and subtract this from the flex container's inner main size.
+ For frozen items, use their outer target main size;
+ for other items, use their outer flex base size.
+
+
+ Loop:
+
+
+
+ Check for flexible items.
+ If all the flex items on the line are frozen, exit this loop.
+
+
+ Calculate the remaining free space
+ as for initial free space, above.
+ If the sum of the unfrozen flex items’ flex factors is less than one,
+ multiply the initial free space by this sum.
+ If the magnitude of this value is less than the magnitude of the remaining free space,
+ use this as the remaining free space.
+
+
+ If the [=remaining free space=] is non-zero,
+ distribute it proportional to the flex factors:
+
+
+ For every unfrozen item on the line,
+ find the ratio of the item's flex grow factor
+ to the sum of the flex grow factors of all unfrozen items on the line.
+ Set the item's target main size to its flex base size
+ plus a fraction of the remaining free space proportional to the ratio.
+
+
+ For every unfrozen item on the line,
+ multiply its flex shrink factor by its inner flex base size,
+ and note this as its scaled flex shrink factor.
+ Find the ratio of the item's scaled flex shrink factor
+ to the sum of the scaled flex shrink factors of all unfrozen items on the line.
+ Set the item's target main size to its flex base size
+ minus a fraction of the absolute value of the remaining free space proportional to the ratio.
+ Note this may result in a negative inner main size;
+ it will be corrected in the next step.
+
+
+
+ Fix min/max violations.
+ Clamp each non-frozen item's target main size by
+ its used min and max main sizes
+ and floor its content-box size at zero.
+ If the item's target main size was made smaller by this,
+ it's a max violation.
+ If the item's target main size was made larger by this,
+ it's a min violation.
+
+
+ Freeze over-flexed items.
+ The total violation is the sum of the adjustments from the previous step
+ ∑(clamped size - unclamped size).
+ If the total violation is:
+
+
+
Zero
+
+ Freeze all items.
+
+
Positive
+
+ Freeze all the items with min violations.
+
+
Negative
+
+ Freeze all the items with max violations.
+
+
+ Note: This freezes at least one item,
+ ensuring that the loop makes progress and eventually terminates.
+
+
+
+ Although CSS Sizing [[!CSS-SIZING-3]] defines definite and indefinite lengths,
+ Flexbox has several additional cases where a length can be considered definite:
+
+ 1. If the [=flex container=] has a [=definite=] [=main size=],
+ then the post-flexing [=main sizes=]
+ of its [=flex items=]
+ are treated as [=definite=].
+
+ 2. If a [=flex item’s=] [=flex basis=] is [=definite=],
+ then its post-flexing [=main size=] is also [=definite=].
+
+ 3. If a single-lineflex container has a definite cross size,
+ the [=automatic size|automatic=] [=preferred size|preferred=] [=outer size|outer=] [=cross size=]
+ of any stretchedflex items
+ is the flex container's inner cross size
+ (clamped to the flex item’s min and max cross size)
+ and is considered definite.
+
+ 4. Once the cross size of a flex line has been determined,
+ the cross sizes of items in auto-sized flex containers
+ are also considered definite for the purpose of layout;
+ see step 11.
+
+
+ flexbox-definite-cross-size-constrained-percentage.html
+ flexbox-definite-sizes-001.html
+ flexbox-definite-sizes-002.html
+ flexbox-definite-sizes-003.html
+ flexbox-definite-sizes-004.html
+ flexbox-definite-sizes-005.html
+ flexbox-definite-sizes-006.html
+ height-percentage-with-dynamic-container-size.html
+ percentage-widths-001.html
+ position-fixed-001.html
+ stretch-obeys-min-max-001.html
+ stretch-obeys-min-max-002.html
+ stretch-obeys-min-max-003.html
+
+
+ Note: This means that within [=flex layout=],
+ “definite” sizes can require performing layout.
+ This was done to allow percentages inside of [=flex items=]
+ to resolve where authors expected them to resolve.
+
+
+
+
+
+Intrinsic Sizes
+
+ The intrinsic sizing of a flex container is used
+ to produce various types of content-based automatic sizing,
+ such as shrink-to-fit logical widths (which use the ''fit-content'' formula)
+ and content-based logical heights (which use the max-content size).
+ For these computations, auto margins on flex items are treated as ''0''.
+
+ See [[!CSS-SIZING-3]] for a definition of the terms in this section.
+
+
+ flexbox-gap-position-absolute.html
+ gap-001-lr.html
+ gap-001-ltr.html
+ gap-001-rl.html
+ gap-001-rtl.html
+ gap-002-lr.html
+ gap-002-ltr.html
+ gap-002-rl.html
+ gap-002-rtl.html
+ gap-003-lr.html
+ gap-003-ltr.html
+ gap-003-rl.html
+ gap-003-rtl.html
+ gap-004-lr.html
+ gap-004-ltr.html
+ gap-004-rl.html
+ gap-004-rtl.html
+ gap-005-lr.html
+ gap-005-ltr.html
+ gap-005-rl.html
+ gap-005-rtl.html
+ gap-006-lr.html
+ gap-006-ltr.html
+ gap-006-rl.html
+ gap-006-rtl.html
+ gap-007-lr.html
+ gap-007-ltr.html
+ gap-007-rl.html
+ gap-007-rtl.html
+ gap-008-ltr.html
+ gap-009-ltr.html
+ gap-010-ltr.html
+ gap-011.html
+ gap-012.html
+ gap-013.html
+ gap-014.html
+ gap-015.html
+ gap-016.html
+ gap-017.html
+ gap-018.html
+ gap-019.html
+ gap-020.html
+ gap-021.html
+ intrinsic-size/auto-min-size-001.html
+ intrinsic-size/col-wrap-001.html
+ intrinsic-size/col-wrap-002.html
+ intrinsic-size/col-wrap-003.html
+ intrinsic-size/col-wrap-004.html
+ intrinsic-size/col-wrap-005.html
+ intrinsic-size/col-wrap-006.html
+ intrinsic-size/col-wrap-007.html
+ intrinsic-size/col-wrap-008.html
+ intrinsic-size/col-wrap-009.html
+ intrinsic-size/col-wrap-010.html
+ intrinsic-size/col-wrap-011.html
+ intrinsic-size/col-wrap-012.html
+ intrinsic-size/col-wrap-013.html
+ intrinsic-size/col-wrap-014.html
+ intrinsic-size/col-wrap-015.html
+ intrinsic-size/col-wrap-016.html
+ intrinsic-size/col-wrap-017.html
+ intrinsic-size/col-wrap-018.html
+ intrinsic-size/col-wrap-019.html
+ intrinsic-size/col-wrap-020.html
+ intrinsic-size/col-wrap-crash.html
+ intrinsic-size/row-001.html
+ intrinsic-size/row-002.html
+ intrinsic-size/row-003.html
+ intrinsic-size/row-004.html
+ intrinsic-size/row-005.html
+ intrinsic-size/row-006.html
+ intrinsic-size/row-007.html
+ intrinsic-size/row-008.html
+ intrinsic-size/row-compat-001.html
+ intrinsic-size/row-use-cases-001.html
+ intrinsic-size/row-wrap-001.html
+ multiline-shrink-to-fit.html
+ svg-no-natural-size-grandchild.html
+
+
+
+Flex Container Intrinsic Main Sizes
+
+ The max-contentmain size of a flex container
+ is, theoretically, the smallest size the flex container can take
+ such that when flex layout is run with that container size,
+ each [=flex item=] ends up at least as large as
+ its [[#intrinsic-item-contributions|max-content contribution]],
+ to the extent allowed by the items’ flexibility.
+
+ The [=min-content=] [=main size=] of a flex container
+ is, theoretically, the smallest size the [=flex container=] can take
+ such that no items overflow it,
+ and no item's contents overflow the item--
+ setting aside the cases in which the boxes layouts are defined to overflow
+ (for example with negative margins or percentage sizes that add up to more than 100%).
+
+
+ flex-container-max-content-001.html
+ flex-container-min-content-001.html
+
+
+ For the min-content size of a multi-line flex container,
+ see [[#intrinsic-main-sizes-multiline]].
+ For max-content sizes and for single-line min-content sizes,
+ an implementation is conformant to CSS Flexible Box Layout
+ if it conforms to either the Ideal Algorithm or the Web-compatible Algorithm,
+ as defined below.
+
+
+Ideal Algorithm: Max-content Size and Min-content Single-line Size
+
+ Note: The following algorithm calculates the [=flex container=]’s ideal
+ intrinsic [=main sizes=].
+ However, because it was not implemented correctly initially,
+ and existing content became dependent on the (unfortunately consistent) incorrect implemented behavior,
+ it is not Web-compatible.
+ Implementers and the CSS Working Group are investigating to what extent
+ Web browser implementations can safely approach this behavior,
+ and further experimentation is welcome.
+
+ Considering only non-[=collapsed=] [=flex items=];
+
+
+
+ For each flex item,
+ subtract its outer flex base size from its [[#intrinsic-item-contributions|max-content contribution]] size.
+ If that result is positive,
+ divide it by the item's flex grow factor
+ if the flex grow factor is ≥ 1,
+ or multiply it by the flex grow factor
+ if the flex grow factor is < 1;
+ if the result is negative,
+ divide it by the item's scaled flex shrink factor
+ (if dividing by zero, treat the result as negative infinity).
+ This is the item's desired flex fraction.
+
+
+ Place all flex items into lines of infinite length.
+ Within each line,
+ find the greatest (most positive)
+ desired flex fraction
+ among all the flex items.
+ This is the line’s chosen flex fraction.
+
+
+ If the chosen flex fraction is positive,
+ and the sum of the line’s flex grow factors
+ is less than 1,
+ divide the chosen flex fraction by that sum.
+
+ If the chosen flex fraction is negative,
+ and the sum of the line’s flex shrink factors
+ is less than 1,
+ multiply the chosen flex fraction by that sum.
+
+
+ The flex container’s max-content size is
+ the largest sum (among all the lines)
+ of the afore-calculated sizes of all items within a single line.
+
+
+ The min-contentmain size of a single-line flex container
+ is calculated identically to the max-contentmain size,
+ except that the flex items’ [[#intrinsic-item-contributions|min-content contributions]] are used
+ instead of their [[#intrinsic-item-contributions|max-content contributions]].
+
+
+ Implications of this algorithm when the sum of flex is less than 1
+
+ The above algorithm is designed to give the correct behavior for two cases in particular,
+ and make the flex container’s size continuous as you transition between the two:
+
+ 1. If all items are inflexible,
+ the flex container is sized to the sum of their flex base size.
+ (An inflexible flex base size basically substitutes for a 'width'/'height',
+ which, when specified, is what a max-content contribution is based on in Block Layout.)
+
+ 2. When all items are flexible with flex factors ≥ 1,
+ the flex container is sized to the sum of the max-content contributions of its items
+ (or perhaps a slightly larger size,
+ so that every flex item is at least the size of its max-content contribution,
+ but also has the correct ratio of its size to the size of the other items,
+ as determined by its flexibility).
+
+ For example, if a flex container has a single flex item
+ with ''flex-basis: 100px;'' but a max-content size of ''200px'',
+ then when the item is ''flex-grow: 0'', the flex container (and flex item) is ''100px'' wide,
+ but when the item is ''flex-grow: 1'' or higher, the flex container (and flex item) is ''200px'' wide.
+
+ There are several possible ways to make the overall behavior continuous between these two cases,
+ but all of them have drawbacks.
+ We chose one we feel has the least bad implications;
+ unfortunately, it "double-applies" the flexibility in cases with [=flex factors=] that are < 1.
+ In the above example, if the item has ''flex-grow: .5'',
+ then the flex container ends up ''150px'' wide,
+ but the item then sizes normally into that available space,
+ ending up ''125px'' wide.
+
+
+ Even more involved notes on the specific behavior chosen
+
+ Principles:
+
+ 1. Don't explode any sizes, whether growing or shrinking, as inputs approach zero.
+ 2. When flex factors are all >=1, return the minimum size necessary for every item to be >= max-content size.
+ 3. Items with a zero flex shouldn't affect the sizes at all.
+ 4. Keep it continuous over variance of flex factors and item sizes.
+ 5. Keep sizing variance as linear as possible with respect to linear changes to any input variable (size, flex factor).
+ 6. When the sum of flex factors is >=1, return the minimum size necessary for every item to be >= max-content size.
+
+ To get these all to work together,
+ we have to apply some correction when either flex factors
+ or the sum of flex factors on a line
+ is < 1.
+
+ For shrink our behavior is somewhat easier;
+ since the explosive case of 0 shrink
+ results in a negative infinity desired fraction
+ which we'll never choose (since we always take the largest),
+ we can just apply the correction at the line level,
+ giving us double-application only when the sum is < 1.
+
+ For positives it's more complicated.
+ 0 grow naively explodes into *positive* infinity,
+ which we'd choose,
+ so we need to apply the correction at the individual item level.
+ We do that by multiplying the space by the factor when factor is <1.
+ Leaving it at that would result in a double-application for items < 1
+ but sum >= 1,
+ but a *triple*-application when the sum is < 1.
+ To avoid *that* ridiculousness,
+ we apply a *reverse* correction when the sum is 1,
+ dividing by the sum instead.
+ This leaves us with a double correction in all cases for items with factors < 1.
+
+ We can't eliminate the double-applications entirely
+ without giving up other, more important principles
+ (in particular, principle 3 --
+ try to come up with rules that don't double-apply
+ when you have two items with ''flex-grow: .5'',
+ but also don't give a ''flex-grow: 0'' item any power
+ over a ''flex-grow: 1'' sibling;
+ you can't, as far as we can tell.)
+
+
+
+
+Web-compatible Intrinsic Sizing Algorithm: Max-content Size and Min-content Single-line Size
+
+ Note: The following algorithm has been demonstrated to be Web-compatible.
+ It may be altered in the future to bring it closer to the ideal algorithm above,
+ if possible.
+
+ * For the [=max-content size=] of a [=flex container=],
+ take the sum of the [[#intrinsic-item-contributions|max-content contributions]]
+ of all the non-[=collapsed=] flex items in the flex container.
+ * For the [=min-content size=] of a single-line container,
+ take the sum of the [[#intrinsic-item-contributions|min-content contributions]]
+ of all the non-[=collapsed=] flex items in the flex container.
+
+
+
+Multi-line Min-content Algorithm
+
+ For a multi-line container,
+ the [=min-content=] [=main size=] is simply the largest [[#intrinsic-item-contributions|min-content contribution]]
+ of all the non-[=collapsed=] flex items in the flex container.
+
+
+Flex Container Intrinsic Cross Sizes
+
+ The min-content/max-contentcross size of a single-lineflex container
+ is the largest min-content contribution/max-content contribution (respectively)
+ of its flex items.
+
+ For a multi-lineflex container,
+ the behavior depends on whether it's a row or column flexbox:
+
+ : ''flex-direction/row'' [=multi-line=] [=flex container=] [=cross size=]
+ :: The min-content/max-contentcross size
+ is the sum of the flex line cross sizes
+ resulting from sizing the flex container
+ under a cross-axismin-content constraint/max-content constraint (respectively).
+
+ : ''flex-direction/column'' [=multi-line=] [=flex container=] [=cross size=]
+ :: The [=min-content=] [=cross size=]
+ is the largest [=min-content contribution=] among all of its [=flex items=].
+
+ Note: This heuristic effectively assumes a single flex line,
+ in order to guarantee that the [=min-content size=]
+ is smaller than the [=max-content size=].
+ If the flex container has a height constraint,
+ this will result in overflow,
+ but if the [=flex container=] is also a [=scroll container=],
+ it will at least be large enough to fit
+ any given column entirely within its [=scrollport=].
+
+ The [=max-content=] [=cross size=] is the sum of the [=flex line=] cross sizes
+ resulting from sizing the [=flex container=]
+ under a cross-axismax-content constraint,
+ using the largest max-content cross-size contribution among the flex items
+ as the available space in the cross axis
+ for each of the flex items during layout.
+
+ Note: This heuristic gives a reasonable approximation
+ of the size that the flex container should be,
+ with each [=flex item=] laid out at its [=max-content contribution=] or larger,
+ and each flex line no larger than its largest flex item.
+ It's not a perfect fit in some cases,
+ but doing it completely correct is insanely expensive,
+ and this works reasonably well.
+
+
+ flexbox_width-change-and-relayout-children.html
+ table-as-flex-item-max-content.html
+ table-as-item-flex-cross-size.html
+
+
+
+
+Flex Item Intrinsic Size Contributions
+
+ The main-size min-content contribution of a flex item
+ is the larger of its outermin-content size
+ and outer preferred size
+ if that is not an [=automatic size=].
+
+ The main-size max-content contribution of a flex item
+ is the larger of its outermax-content size
+ and outer preferred size
+ if that is not an [=automatic size=].
+
+ For this purpose,
+ each contribution
+ is capped by the item’s [=flex base size=] if the item is not growable,
+ floored by the item’s [=flex base size=] if the item is not shrinkable,
+ and then further clamped by the item's min/max main size.
+
+
+
+
+Fragmenting Flex Layout
+
+
+ Flex containers can break across pages
+ between items,
+ between lines of items (in multi-line mode),
+ and inside items.
+ The break-* properties apply to flex containers as normal for block-level or inline-level boxes.
+ This section defines how they apply to flex items
+ and the contents of flex items.
+ See the CSS Fragmentation Module
+ for more context [[!CSS3-BREAK]].
+
+
+ The following breaking rules refer to the fragmentation container as the “page”.
+ The same rules apply in any other fragmentation context.
+ (Substitute “page” with the appropriate fragmentation container type as needed.)
+ For readability, in this section the terms "row" and "column" refer to the relative orientation
+ of the flex container with respect to the block flow direction of the fragmentation context,
+ rather than to that of the flex container itself.
+
+
+ The exact layout of a fragmented flex container
+ is not defined in this level of Flexible Box Layout.
+ However, breaks inside a flex container are subject to the following rules
+ (interpreted using order-modified document order):
+
+
+
+ In a row flex container,
+ the 'break-before' and 'break-after' values on flex items
+ are propagated to the flex line.
+ The 'break-before' values on the first line
+ and the 'break-after' values on the last line
+ are propagated to the flex container.
+
+ Note: Break propagation
+ (like 'text-decoration' propagation)
+ does not affect computed values.
+
+
+ In a column flex container,
+ the 'break-before' values on the first item
+ and the 'break-after' values on the last item
+ are propagated to the flex container.
+ Forced breaks on other items are applied to the item itself.
+
+
+ A forced break inside a flex item effectively increases the size of its contents;
+ it does not trigger a forced break inside sibling items.
+
+
+ In a row flex container,
+ Class A break opportunities occur between sibling flex lines,
+ and Class C break opportunities occur between the first/last flex line and the flex container's content edges.
+ In a column flex container,
+ Class A break opportunities occur between sibling flex items,
+ and Class C break opportunities occur between the first/last flex items on a line and the flex container's content edges.
+ [[!CSS3-BREAK]]
+
+
+ When a flex container is continued after a break,
+ the space available to its flex items
+ (in the block flow direction of the fragmentation context)
+ is reduced by the space consumed by flex container fragments on previous pages.
+ The space consumed by a flex container fragment is
+ the size of its content box on that page.
+ If as a result of this adjustment the available space becomes negative,
+ it is set to zero.
+
+
+ If the first fragment of the flex container is not at the top of the page,
+ and none of its flex items fit in the remaining space on the page,
+ the entire fragment is moved to the next page.
+
+
+ When breaking a multi-line column flex container,
+ the UA may organize each fragment into its own “stack” of flex lines--
+ just like each fragment of a multi-column container
+ has its own row of column boxes--
+ in order to ensure that content presented on earlier pages
+ corresponds to content earlier in the box order.
+
+
+ Aside from the rearrangement of items imposed by the previous point,
+ UAs should attempt to minimize distortion of the flex container
+ with respect to unfragmented flow.
+
+ This informative section presents a possible fragmentation algorithm for flex containers.
+ Implementors are encouraged to improve on this algorithm and provide feedback to the CSS Working Group.
+
+
+
+
+ This algorithm assumes that pagination always proceeds only in the forward direction;
+ therefore, in the algorithms below, alignment is mostly ignored prior to pagination.
+ Advanced layout engines may be able to honor alignment across fragments.
+
+
+ Run the flex layout algorithm (without regards to pagination)
+ through Cross Sizing Determination.
+
+
+ Lay out as many consecutive flex items or item fragments as possible
+ (but at least one or a fragment thereof),
+ starting from the first,
+ until there is no more room on the page
+ or a forced break is encountered.
+
+
+ If the previous step ran out of room
+ and the free space is positive,
+ the UA may reduce the distributed free space on this page
+ (down to, but not past, zero)
+ in order to make room for the next unbreakable flex item or fragment.
+ Otherwise,
+ the item or fragment that does not fit is pushed to the next page.
+ The UA should pull up if more than 50% of the fragment would have fit in the remaining space
+ and should push otherwise.
+
+
+ If there are any flex items or fragments not laid out by the previous steps,
+ rerun the flex layout algorithm
+ from Line Length Determination
+ through Cross Sizing Determination
+ with the next page's size
+ and all the contents (including those already laid out),
+ and return to the previous step,
+ but starting from the first item or fragment not already laid out.
+
+
+ For each fragment of the flex container,
+ continue the flex layout algorithm
+ from Main-Axis Alignment
+ to its finish.
+
+
+
+ It is the intent of this algorithm that column-direction single-line flex containers
+ paginate very similarly to block flow.
+ As a test of the intent,
+ a flex container with ''justify-content:start''
+ and no flexible items
+ should paginate identically to
+ a block with in-flow children with same content,
+ same used size and same used margins.
+
+
+ Run the flex layout algorithm
+ with regards to pagination
+ (limiting the flex container's maximum line length to the space left on the page)
+ through Cross Sizing Determination.
+
+
+ Lay out as many flex lines as possible
+ (but at least one)
+ until there is no more room in the flex container
+ in the cross dimension
+ or a forced break is encountered:
+
+
+
+ Lay out as many consecutive flex items as possible
+ (but at least one),
+ starting from the first,
+ until there is no more room on the page
+ or a forced break is encountered.
+ Forced breaks within flex items are ignored.
+
+
+ If this is the first flex container fragment,
+ this line contains only a single flex item
+ that is larger than the space left on the page,
+ and the flex container is not at the top of the page already,
+ move the flex container to the next page
+ and restart flex container layout entirely.
+
+
+ If there are any flex items not laid out by the first step,
+ rerun the flex layout algorithm
+ from Main Sizing Determination
+ through Cross Sizing Determination
+ using only the items not laid out on a previous line,
+ and return to the previous step,
+ starting from the first item not already laid out.
+
+
+
+ If there are any flex items not laid out by the previous step,
+ rerun the flex layout algorithm
+ from Line Sizing Determination
+ through Cross Sizing Determination
+ with the next page's size
+ and only the items not already laid out,
+ and return to the previous step,
+ but starting from the first item not already laid out.
+
+
+ For each fragment of the flex container,
+ continue the flex layout algorithm
+ from Main-Axis Alignment
+ to its finish.
+
+
+
+ A shortcoming of this sample algorithm is that
+ if a flex item does not entirely fit on a single page,
+ it will not be paginated in multi-line column flex containers.
+
+
+ Run the entire flex layout algorithm (without regards to pagination),
+ except treat any 'align-self' other than ''align-self/flex-start'' or ''baseline''
+ as ''align-self/flex-start''.
+
+
+ If an unbreakable item doesn't fit within the space left on the page,
+ and the flex container is not at the top of the page,
+ move the flex container to the next page
+ and restart flex container layout entirely.
+
+
+ For each item,
+ lay out as much of its contents as will fit in the space left on the page,
+ and fragment the remaining content onto the next page,
+ rerunning the flex layout algorithm
+ from Line Length Determination
+ through Main-Axis Alignment
+ into the new page size
+ using all the contents (including items completed on previous pages).
+
+
+ Any flex items that fit entirely into previous fragments
+ still take up space in the main axis in later fragments.
+
+
+ For each fragment of the flex container,
+ rerun the flex layout algorithm
+ from Cross-Axis Alignment
+ to its finish.
+ For all fragments besides the first,
+ treat 'align-self' and 'align-content' as being ''align-self/flex-start'' for all item fragments and lines.
+
+
+ If any item,
+ when aligned according to its original 'align-self' value
+ into the combined cross size of all the flex container fragments,
+ would fit entirely within a single flex container fragment,
+ it may be shifted into that fragment
+ and aligned appropriately.
+
+ Run the flex layout algorithm (without regards to pagination),
+ through Cross Sizing Determination.
+
+
+ Lay out as many flex lines as possible
+ (but at least one),
+ starting from the first,
+ until there is no more room on the page
+ or a forced break is encountered.
+
+
+ If a line doesn't fit on the page,
+ and the line is not at the top of the page,
+ move the line to the next page
+ and restart the flex layout algorithm entirely,
+ using only the items in and following this line.
+
+
+ If a flex item itself causes a forced break,
+ rerun the flex layout algorithm
+ from Main Sizing Determination
+ through Main-Axis Alignment,
+ using only the items on this and following lines,
+ but with the item causing the break automatically starting a new line
+ in the line breaking step,
+ then continue with this step.
+ Forced breaks within flex items are ignored.
+
+
+ If there are any flex items not laid out by the previous step,
+ rerun the flex layout algorithm
+ from Line Length Determination
+ through Main-Axis Alignment
+ with the next page's size
+ and only the items not already laid out.
+ Return to the previous step,
+ but starting from the first line not already laid out.
+
+
+ For each fragment of the flex container,
+ continue the flex layout algorithm
+ from Cross Axis Alignment
+ to its finish.
+
+
+
+
+
+Appendix A: Axis Mappings
+
+ This appendix is non-normative.
+
+
+
Axis Mappings for ''ltr'' + ''horizontal-tb'' Writing Mode (e.g. English)
+
+ This appendix is normative.
+
+ Advisement: These aliases are deprecated
+ and authors should not use them
+ unless their content needs to support actively-used legacy UAs.
+
+ For compatibility with general Web content,
+ UAs that are Web browsers must and other UAs may
+ implement the following [=legacy name aliases=]:
+
+
diff --git a/css-flexbox-2/images/OK.png b/css-flexbox-2/images/OK.png
new file mode 100644
index 000000000000..0b7577eab59c
Binary files /dev/null and b/css-flexbox-2/images/OK.png differ
diff --git a/css-flexbox-2/images/align-content-example.svg b/css-flexbox-2/images/align-content-example.svg
new file mode 100644
index 000000000000..fcd90d70c8e4
--- /dev/null
+++ b/css-flexbox-2/images/align-content-example.svg
@@ -0,0 +1,94 @@
+
diff --git a/css-flexbox-2/images/basic-flexbox.png b/css-flexbox-2/images/basic-flexbox.png
new file mode 100644
index 000000000000..3901c3e11c83
Binary files /dev/null and b/css-flexbox-2/images/basic-flexbox.png differ
diff --git a/css-flexbox-2/images/basic-vertical-flexbox.png b/css-flexbox-2/images/basic-vertical-flexbox.png
new file mode 100644
index 000000000000..6a07d225b163
Binary files /dev/null and b/css-flexbox-2/images/basic-vertical-flexbox.png differ
diff --git a/css-flexbox-2/images/computer.jpg b/css-flexbox-2/images/computer.jpg
new file mode 100644
index 000000000000..0d531c7825e5
Binary files /dev/null and b/css-flexbox-2/images/computer.jpg differ
diff --git a/css-flexbox-2/images/flex-align.svg b/css-flexbox-2/images/flex-align.svg
new file mode 100644
index 000000000000..1753e807cb0c
--- /dev/null
+++ b/css-flexbox-2/images/flex-align.svg
@@ -0,0 +1,79 @@
+
\ No newline at end of file
diff --git a/css-flexbox-2/images/flex-direction-terms.svg b/css-flexbox-2/images/flex-direction-terms.svg
new file mode 100644
index 000000000000..70fde881e411
--- /dev/null
+++ b/css-flexbox-2/images/flex-direction-terms.svg
@@ -0,0 +1,66 @@
+
\ No newline at end of file
diff --git a/css-flexbox-2/images/flex-flow-english.svg b/css-flexbox-2/images/flex-flow-english.svg
new file mode 100644
index 000000000000..239ea7a331ff
--- /dev/null
+++ b/css-flexbox-2/images/flex-flow-english.svg
@@ -0,0 +1,24 @@
+
\ No newline at end of file
diff --git a/css-flexbox-2/images/flex-flow-japanese.svg b/css-flexbox-2/images/flex-flow-japanese.svg
new file mode 100644
index 000000000000..78e890155454
--- /dev/null
+++ b/css-flexbox-2/images/flex-flow-japanese.svg
@@ -0,0 +1,24 @@
+
diff --git a/css-flexbox-2/images/flex-flow1.svg b/css-flexbox-2/images/flex-flow1.svg
new file mode 100644
index 000000000000..c6986b500a3d
--- /dev/null
+++ b/css-flexbox-2/images/flex-flow1.svg
@@ -0,0 +1,24 @@
+
\ No newline at end of file
diff --git a/css-flexbox-2/images/flex-flow2.svg b/css-flexbox-2/images/flex-flow2.svg
new file mode 100644
index 000000000000..fec933b099db
--- /dev/null
+++ b/css-flexbox-2/images/flex-flow2.svg
@@ -0,0 +1,24 @@
+
\ No newline at end of file
diff --git a/css-flexbox-2/images/flex-flow3.svg b/css-flexbox-2/images/flex-flow3.svg
new file mode 100644
index 000000000000..70b33ec3e80e
--- /dev/null
+++ b/css-flexbox-2/images/flex-flow3.svg
@@ -0,0 +1,24 @@
+
\ No newline at end of file
diff --git a/css-flexbox-2/images/flex-item-determination.png b/css-flexbox-2/images/flex-item-determination.png
new file mode 100644
index 000000000000..dfb9e843ee18
Binary files /dev/null and b/css-flexbox-2/images/flex-item-determination.png differ
diff --git a/css-flexbox-2/images/flex-order-example.png b/css-flexbox-2/images/flex-order-example.png
new file mode 100644
index 000000000000..3e1fe6adfc30
Binary files /dev/null and b/css-flexbox-2/images/flex-order-example.png differ
diff --git a/css-flexbox-2/images/flex-order-page.svg b/css-flexbox-2/images/flex-order-page.svg
new file mode 100644
index 000000000000..0863cb9651b4
--- /dev/null
+++ b/css-flexbox-2/images/flex-order-page.svg
@@ -0,0 +1,32 @@
+
\ No newline at end of file
diff --git a/css-flexbox-2/images/flex-pack.svg b/css-flexbox-2/images/flex-pack.svg
new file mode 100644
index 000000000000..33e742b45e4c
--- /dev/null
+++ b/css-flexbox-2/images/flex-pack.svg
@@ -0,0 +1,59 @@
+
\ No newline at end of file
diff --git a/css-flexbox-2/images/multiline-balance-flex.svg b/css-flexbox-2/images/multiline-balance-flex.svg
new file mode 100644
index 000000000000..0c1ef7de03aa
--- /dev/null
+++ b/css-flexbox-2/images/multiline-balance-flex.svg
@@ -0,0 +1,24 @@
+
\ No newline at end of file
diff --git a/css-flexbox-2/images/multiline-balance.svg b/css-flexbox-2/images/multiline-balance.svg
new file mode 100644
index 000000000000..e94a8af99aa0
--- /dev/null
+++ b/css-flexbox-2/images/multiline-balance.svg
@@ -0,0 +1,24 @@
+
\ No newline at end of file
diff --git a/css-flexbox-2/images/multiline-flex.svg b/css-flexbox-2/images/multiline-flex.svg
new file mode 100644
index 000000000000..a3782d11ce5a
--- /dev/null
+++ b/css-flexbox-2/images/multiline-flex.svg
@@ -0,0 +1,24 @@
+
\ No newline at end of file
diff --git a/css-flexbox-2/images/multiline-no-flex.svg b/css-flexbox-2/images/multiline-no-flex.svg
new file mode 100644
index 000000000000..9e77721925d9
--- /dev/null
+++ b/css-flexbox-2/images/multiline-no-flex.svg
@@ -0,0 +1,24 @@
+
\ No newline at end of file
diff --git a/css-flexbox-2/images/printer.png b/css-flexbox-2/images/printer.png
new file mode 100644
index 000000000000..d73f781ddca0
Binary files /dev/null and b/css-flexbox-2/images/printer.png differ
diff --git a/css-flexbox-2/images/rel-vs-abs-flex.svg b/css-flexbox-2/images/rel-vs-abs-flex.svg
new file mode 100644
index 000000000000..ce62e19da1f5
--- /dev/null
+++ b/css-flexbox-2/images/rel-vs-abs-flex.svg
@@ -0,0 +1,77 @@
+
\ No newline at end of file
diff --git a/css-flexbox-2/images/target.png b/css-flexbox-2/images/target.png
new file mode 100644
index 000000000000..045d83d5ed6a
Binary files /dev/null and b/css-flexbox-2/images/target.png differ
diff --git a/css-flexbox-2/images/toolbar-example.svg b/css-flexbox-2/images/toolbar-example.svg
new file mode 100644
index 000000000000..e6c2fa09f362
--- /dev/null
+++ b/css-flexbox-2/images/toolbar-example.svg
@@ -0,0 +1,35 @@
+
diff --git a/css-flexbox-2/images/wp7zxxyu.gif b/css-flexbox-2/images/wp7zxxyu.gif
new file mode 100644
index 000000000000..de0baa509d2c
Binary files /dev/null and b/css-flexbox-2/images/wp7zxxyu.gif differ
diff --git a/css-fonts-4/Overview.bs b/css-fonts-4/Overview.bs
index 34c4594ad66f..bc543787bd84 100644
--- a/css-fonts-4/Overview.bs
+++ b/css-fonts-4/Overview.bs
@@ -33,6 +33,7 @@ spec:html; type:element; text:font
spec:fetch; type:dfn; for:/;
text:fetch
text:request
+spec:css-env-1; type:function; text:env()
@@ -120,12 +121,12 @@ Font family: the 'font-family!!property' property
Name: font-family
- Value: [ <> | <> ]#
+ Value: [ <> | <> ]#
Initial: depends on user agent
Applies to: all elements and text
Inherited: yes
Percentages: n/a
- Computed value: list, each item a string and/or <> keywords
+ Computed value: list, each item a string and/or <> keywords
Animation type: discrete
@@ -214,26 +215,26 @@ Font family: the 'font-family!!property' property
There are three types of font family names, two of which may be used with this property:
-
<>
-
- The name of a font family, such as Helvetica or Verdana in the previous example.
+
<>
+
+ The name of a font family, such as Helvetica or Verdana in the previous example.
This might be a locally-instaled font, or might be a web font.
-
<>
-
- Each <> keyword represents
- a generic font choice,
- and behaves as a potential alias for one or more locally-installed fonts
- belonging to the specified generic font category.
- A <> can thus be used as a fallback
- for when an author's more specific font choices are not available.
+
<>
+
+ Each <> keyword represents
+ a generic font choice,
+ and behaves as a potential alias for one or more locally-installed fonts
+ belonging to the specified generic font category.
+ A <> can thus be used as a fallback
+ for when an author's more specific font choices are not available.
There are three types of generic family:
1. Generics which apply to all Unicode characters
and will always match a locally installed font.
- For example, ''monospaced''.
+ For example, ''monospace''.
2. Generics which apply to all Unicode characters
but may not match to a locally installed font
@@ -251,12 +252,12 @@ Font family: the 'font-family!!property' property
and to use a more specific generic font family, if applicable,
to prefer a specific style even if the individual named font family is not available.
- Note that <> keywords cannot be quoted
- (otherwise they are interpreted as a <>).
+ Note that <> keywords cannot be quoted
+ (otherwise they are interpreted as a <>).
The set of generic family keywords is defined in [[#generic-font-families]].
-
<>
+
<>
A locally installed system font, whose use is subject to certain constraints.
In particular, it may not be used with the ''font-family'' property,
@@ -286,11 +287,11 @@ Font family: the 'font-family!!property' property
-
-Syntax of <>
+
+Syntax of <>
-
<> = <> | <>+
+
<> = <> | <>+
Font family names other than generic families or system font families
must either be given quoted as <>s,
@@ -320,7 +321,7 @@ Syntax of <>
Note: this means that if you really have a font
whose name
- is the same as one of the <> names,
+ is the same as one of the <> names,
or the system font names,
or the [=CSS-wide keywords=],
it must be quoted.
@@ -338,7 +339,7 @@ Syntax of <>
- If a sequence of identifiers is given as a <>,
+ If a sequence of identifiers is given as a <>,
the computed value is the name
converted to a string
by joining all the identifiers in the sequence by single spaces.
@@ -361,28 +362,21 @@ Syntax of <>
Font family names that happen to be the same as
a 'font-family!!property' keyword value
(e.g. CSS-wide keywords such as ''inherit'', or
- <> keywords such as ''serif'')
+ <> keywords such as ''serif'')
must be quoted to prevent confusion
with the keywords of the same names.
- UAs must not consider these keywords as matching the <> type.
+ UAs must not consider these keywords as matching the <> type.
To make the syntax less succeptible to clashes, more recently defined generic font families are identified using a functional syntax.
@@ -400,11 +394,11 @@ Syntax of <>
generic-family-keywords-002.html
- Note: Generic font families are intended to be widely implemented on many platforms, unlike arbitrary <>s which are usually platform-specific names. They are expected to map to different fonts on different platforms. Authors may specify these generic family names if they desire their text to follow a particular design on many platforms, and are not particular about which specific font is chosen on those platforms.
+ Note: Generic font families are intended to be widely implemented on many platforms, unlike arbitrary <>s which are usually platform-specific names. They are expected to map to different fonts on different platforms. Authors may specify these generic family names if they desire their text to follow a particular design on many platforms, and are not particular about which specific font is chosen on those platforms.
User agents should provide reasonable default choices for the generic font families,
that express the characteristics of each family as well as possible,
within the limits allowed by the underlying technology.
User agents are encouraged to allow users to select alternative faces for the generic font families.
-
-
serif
-
- Serif fonts represent
- glyphs that have finishing strokes,
- flared or tapering ends,
- or have actual serifed endings (including slab serifs).
- Serif fonts are typically proportionately-spaced.
- They often display a greater variation between thick and thin strokes
- than fonts from the ''sans-serif'' generic font family.
+
+
serif
+
+ Serif fonts represent
+ glyphs that have finishing strokes,
+ flared or tapering ends,
+ or have actual serifed endings (including slab serifs).
+ Serif fonts are typically proportionately-spaced.
+ They often display a greater variation between thick and thin strokes
+ than fonts from the ''sans-serif'' generic font family.
Note: ''serif'' and ''sans-serif''
only apply to a small handful of writing scripts.
@@ -630,7 +624,7 @@ Generic font families
unlike UAs that generally allow users to customise the generic ''sans-serif'' or ''serif'' font family.
As the name implies, ''system-ui'' is intended for use with UI elements in web application, and not for large paragraphs of text or articles.
-
math
+
math
This font family is intended for use with mathematical expressions.
@@ -1202,6 +1196,9 @@ Font style: the 'font-style!!property' property
variations/font-style-parsing.html
variations/slnt-backslant-variable.html
variations/slnt-variable.html
+ variations/variable-avar2-rvrn.html
+ variations/variable-avar2-warp.html
+ variations/variable-gpos-avar2.html
The 'font-style!!property' property allows italic or oblique faces to be selected.
@@ -1344,7 +1341,7 @@ Font size: the 'font-size' property
Name: font-size
- Value: <> | <> | <> | math
+ Value: <> | <> | <> | ''font-size/math''
Initial: medium
Applies to: all elements and text
Inherited: yes
@@ -1358,6 +1355,7 @@ Font size: the 'font-size' property
font-size-zero-1.html
font-size-zero-2.html
font-size-zero-3.html
+ font-size-zero-ligatures.html
font-size-xxx-large.html
rem-in-monospace.html
animations/font-size-composition.html
@@ -1435,7 +1433,7 @@ Font size: the 'font-size' property
Note: Use of percentage values or font-relative lengths
such as ''em''s and ''rem''s
leads to more robust and cascadable style sheets.
-
math
+
math
Special
mathematical scaling rules must be applied
@@ -1785,7 +1783,7 @@ Shorthand font property: the 'font' property
<<'font-weight'>> ||
<> ]? <<'font-size'>> [ / <<'line-height'>> ]?
<<'font-family'>># ] |
- <>
+ <>
Initial: see individual properties
Applies to: all elements and text
Inherited: yes
@@ -2276,6 +2274,8 @@ Controlling synthetic faces: the 'font-synthesis' shorthand
font-synthesis-07.html
font-synthesis-08.html
font-synthesis-style-oblique-only.html
+ oblique-last-resort-weight-selection.html
+ oblique-request-italic-only-family-no-crash.html
synthetic-bold-space-width.html
parsing/font-synthesis-computed.html
parsing/font-synthesis-invalid.html
@@ -2695,7 +2695,7 @@ The ''@font-face'' rule
<font-format>
@@ -2949,13 +2949,13 @@ The ''@font-face'' rule
a locally available copy of a given font
and download it if it's not,
local() can be used.
- The locally-installed <> argument to local()
+ The locally-installed <> argument to local()
is a format-specific string
that uniquely identifies a single font face
within a larger family.
The name can optionally be enclosed in quotes.
If unquoted,
- the unquoted font family name processing conventions apply;
+ the unquoted font family name processing conventions apply;
in other words,
the name must be a sequence of identifiers
separated by whitespace
@@ -2964,7 +2964,7 @@ The ''@font-face'' rule
separated by a single space;
and thus,
CSS-wide keywords such as ''inherit'', and
- <> keywords such as ''serif''
+ <> keywords such as ''serif''
are not allowed inside local().
@@ -4500,6 +4500,11 @@ the 'ascent-override!!descriptor',
If an oblique angle was found in the above search, all faces which don't include that oblique angle are excluded from the matching set. Otherwise, if an italic value was found in the above search, all faces which don't include that italic value are excluded from the matching set.
+
+ oblique-last-resort-weight-selection.html
+ oblique-request-italic-only-family-no-crash.html
+
+
User agents are not required to distinguish between italic and oblique fonts. In such user agents, the 'font-style!!property' matching steps above are performed by mapping both italic values and oblique angles onto a common scale. The exact nature of this mapping is undefined, however, an italic value of 1 must map to the same value that an oblique angle of 11deg maps to. Within font
families defined via ''@font-face'' rules, italic and oblique
faces must be distinguished using the value of the
@@ -5816,13 +5821,13 @@ Alternates and swashes: the 'font-variant-alternates' property
Name: font-variant-alternates
- Value: normal | [ stylistic(<>) ||
+ Value: normal | [ stylistic(<>) ||
historical-forms ||
- styleset(<>#) ||
- character-variant(<>#) ||
- swash(<>) ||
- ornaments(<>) ||
- annotation(<>) ]
+ styleset(<>#) ||
+ character-variant(<>#) ||
+ swash(<>) ||
+ ornaments(<>) ||
+ annotation(<>) ]
Initial: normal
Applies to: all elements and text
Inherited: yes
@@ -5858,8 +5863,8 @@ Alternates and swashes: the 'font-variant-alternates' property
parsing/font-variant-alternates-valid.html
-
<feature-index> = <>
-
<feature-value-name> = <>
+
<font-feature-index> = <>
+
<font-feature-value-name> = <>
For any given character, fonts can provide a variety of alternate
glyphs in addition to the default glyph for that character. This
@@ -5873,8 +5878,8 @@ Alternates and swashes: the 'font-variant-alternates' property
of these alternates is font-specific, the
''@font-feature-values'' rule is used to define values for a
specific font family or set of families that associate a font-specific
- numeric <> with a custom
- <>, which is then used in this
+ numeric <> with a custom
+ <>, which is then used in this
property to select specific alternates:
@@ -5886,10 +5891,10 @@ Alternates and swashes: the 'font-variant-alternates' property
}
- When a particular <> has not
+ When a particular <> has not
been defined for a given family or for a particular feature type, the
computed value must be the same as if it had been defined. However,
- property values that contain these undefined <>
+ property values that contain these undefined <>
identifiers must be ignored when choosing glyphs.
@@ -5919,16 +5924,16 @@ Alternates and swashes: the 'font-variant-alternates' property
-
stylistic(<>)
-
Enables display of stylistic alternates ([=font specific=], OpenType feature: salt <>).
+
stylistic(<>)
+
Enables display of stylistic alternates ([=font specific=], OpenType feature: salt <>).
Enables replacement of default glyphs with ornaments, if provided in the font ([=font specific=], OpenType feature: ornm <>).
+
ornaments(<>)
+
Enables replacement of default glyphs with ornaments, if provided in the font ([=font specific=], OpenType feature: ornm <>).
Some fonts may offer ornament glyphs as alternates for a wide collection of characters; however, displaying arbitrary
characters (e.g., alphanumerics) as ornaments is poor practice as it distorts the semantics of the data. Font designers
are encouraged to encode all ornaments (except those explicitly encoded in the Unicode Dingbats blocks, etc.) as
@@ -5960,8 +5965,8 @@ Alternates and swashes: the 'font-variant-alternates' property
-
annotation(<>)
-
Enables display of alternate annotation forms ([=font specific=], OpenType feature: nalt <>).
+
annotation(<>)
+
Enables display of alternate annotation forms ([=font specific=], OpenType feature: nalt <>).
@@ -6060,7 +6065,7 @@ Defining font specific alternates: the @font-feature-values rule
as the corresponding value of the 'font-variant-alternates' property.
- @font-feature-values = @font-feature-values <># { <> }
+ @font-feature-values = @font-feature-values <># { <> }
<font-feature-value-type> = <<@stylistic>> | <<@historical-forms>> | <<@styleset>> | <<@character-variant>>
| <<@swash>> | <<@ornaments>> | <<@annotation>>
@@ -6080,13 +6085,13 @@ Defining font specific alternates: the @font-feature-values rule
The ''@font-feature-values'' prelude
- is a comma-delimited list of font family names that match the definition of <>
+ is a comma-delimited list of font family names that match the definition of <>
for the 'font-family!!property' property.
This means that only named font families are allowed;
rules that include generic or system fonts in the list of font families are syntax errors.
However, if a user agent defines a generic font to be a specific named font (e.g. Helvetica),
the settings associated with that family name will be used.
- If syntax errors occur within the <> list,
+ If syntax errors occur within the <> list,
the entire rule ''@font-feature-values'' rule is invalid
and must be ignored.
@@ -6109,11 +6114,21 @@ Defining font specific alternates: the @font-feature-values rule
and the value must be a list of one or more non-negative <>s.
The [=feature value blocks=] accept any declaration name;
- these names must be identifiers,
+ these names must be <>,
per standard CSS syntax rules,
and are [=case-sensitive=]
(so foo: 1; and FOO: 2 define two different features).
- Each declaration's value must match the grammar ''<>+'',
+
+ Each declaration's value in ''@annotation'', ''@ornaments'', ''@stylistic'', ''@swash'',
+ must match the grammar <>,
+ or else the declaration is invalid and must be ignored.
+
+ Each declaration’s value in ''@character-variant''
+ must match the grammar <> <>,
+ or else the declaration is invalid and must be ignored.
+
+ Each declaration’s value in ''@styleset''
+ must match the grammar <>+,
or else the declaration is invalid and must be ignored.
Note: Each feature name is unique only within a single [=feature value block=].
@@ -6121,7 +6136,7 @@ Defining font specific alternates: the @font-feature-values rule
or the same type of [=feature value blocks=] in separate ''@font-feature-values'' rules,
names can be reused without colliding.
- For each <> in the ''@font-feature-values'' prelude,
+ For each <> in the ''@font-feature-values'' prelude,
each [=font feature value declaration=] defines a mapping between a
(family name, feature block name, declaration name) [=tuple=]
and the list of one or more integers from the declaration's value.
@@ -6522,7 +6537,7 @@ Overall shorthand for font rendering: the 'font-variant!!property' property
- In the column direction, [=gap=] ([=column gap=]) refers to the [=gutter=] between adjacent column boxes within each [=multicol line=],
+ A [=column gap=] is the [=gutter=] between adjacent column boxes,
see [[CSS-MULTICOL-1]].
- In the row direction, [=gap=] ([=row gap=]) refers to the [=gutter=] between the rows of [=column boxes=] established by 'column-height',
+
+ A [=row gap=] is the [=gutter=] between the rows of [=column boxes=] established by 'column-height',
see [[CSS-MULTICOL-2]].
- In the main axis
- (e.g. 'column-gap' in a ''flex-flow/row'' flex container),
- [=gap=] ([=column gap=]) refers to the [=gutter=] between items within a single [=flex line=].
+ When applied to the main axis
+ (e.g. [=column gap=] in a ''flex-flow/row'' flex container),
+ refers to the [=gutter=] between items
+ (as if an additional fixed-size margin were inserted
+ between adjacent flex items
+ in a single line).
+
+ When applied to the cross axis
+ (e.g. [=row gap=] in a ''flex-flow/row'' flex container),
+ refers to the [=gutter=] between adjacent flex lines.
- In the cross axis
- (e.g. 'row-gap' in a ''flex-flow/row'' flex container),
- [=gap=] ([=row gap=]) refers to the [=gutter=] between adjacent flex lines.
- [=row gaps=] and [=column gaps=]
+ [=Row gap=] and [=column gap=],
+ in the context of a grid container,
refer to the [=gutters=] between grid rows and grid columns,
respectively.
See [[css-grid-1#gutters]] for precise details.
- Note: As specified in [[CSS-ALIGN-3#column-row-gap]],
- additional spacing between items added by 'justify-content' and 'align-content'
- is included in [=gap=] size.
+ Gutters effect a minimum spacing between items:
+ additional spacing may be added by 'justify-content'/'align-content'.
+ Such additional space increases the size of the corresponding [=gaps=].
+
+ In all cases, the [=gap=] disappears when it coincides with
+ a [=fragmentation break=]. [[CSS-BREAK-3]]
+
+ Note: Table boxes do not use the 'gap' properties
+ to specify separation between their cells.
+ Instead, they use the 'border-spacing' property,
+ which has slightly different functionality:
+ it inherits,
+ and it also specifies the additional spacing between the outermost cells
+ and the border of the table
+ (similar to ''space-evenly'' rather than ''space-between'').
@@ -142,6 +173,125 @@ Value Definitions
+
+Row and Column Gutters: the 'row-gap' and 'column-gap' properties
+
+
+ Name: row-gap, column-gap
+ Value: normal | <> | <>
+ Initial: normal
+ Applies to: multi-column containers, flex containers, grid containers
+ Inherited: no
+ Percentages: see [[#gap-percent]]
+ Computed value: specified keyword, else a computed <> value
+ Animation type: by computed value type
+
+
+ These properties specify fixed-length gutters
+ between items in the container,
+ adding space between them--
+ in a manner similar to the ''justify-content/space-between'' keyword
+ of the content-distribution properties,
+ but of a fixed size instead of as a fraction of remaining space.
+ The 'column-gap' property specifies spacing between “columns”,
+ separating boxes in the container's inline axis
+ similar to inline-axis margin;
+ while 'row-gap' indicates spacing between “rows”,
+ separating boxes in the container's block axis.
+
+ Values have the following meanings:
+
+
+ : <>
+ : <>
+ ::
+ Specifies a [=row gap=] or [=column gap=]
+ as defined by the layout modes to which it applies.
+
+ Negative values are invalid.
+ For percentages,
+ see [[#gap-percent]].
+
+ : normal
+ :: The value ''gap/normal'' represents
+ a used value of ''1em'' on multi-column containers,
+ and a used value of ''0px'' in all other contexts.
+
+
+
+Gap Shorthand: the 'gap' property
+
+
+ Name: gap
+ Value: <<'row-gap'>> <<'column-gap'>>?
+ Initial: see individual properties
+ Applies to: multi-column containers, flex containers, grid containers
+ Inherited: no
+ Percentages: refer to corresponding dimension of the content area
+ Computed value: see individual properties
+ Animation type: by computed value type
+
+
+ This property is a shorthand that sets 'row-gap' and 'column-gap' in one declaration.
+ If <<'column-gap'>> is omitted,
+ it's set to the same value as <<'row-gap'>>.
+
+
+
+
+
+
+ Note: The 'gap' property is only one component of the visible “gutter” or “alley” created between boxes.
+ Margins, padding, or the use of distributed alignment
+ may increase the visible separation between boxes
+ beyond what is specified in 'gap'.
+
+
+
+Percentages In 'gap' Properties
+
+ In general,
+ gaps introduced by the 'gap' properties
+ are intended to act like an empty item/track/etc
+ with the gap's size;
+ in other words,
+ an author should be able to reproduce the effects of 'gap'
+ by just inserting additional empty items/tracks/etc
+ into the container.
+
+ 'gap' always resolves percentages against
+ the corresponding size of the [=content box=]
+ of the element.
+ When this size is definite,
+ the behavior is well-defined
+ and consistent across layout modes.
+ But since different layout modes treat [=cyclic percentage sizes=] for items/tracks/etc differently,
+ 'gap' does as well:
+
+ : In Grid Layout
+ ::
+ As in the min size properties and margins/paddings [[CSS-SIZING-3]],
+ [=cyclic percentage sizes=] resolve against zero
+ for determining intrinsic size contributions,
+ but resolve against the box’s content box
+ when laying out the box’s contents.
+
+ : In Flex Layout
+ ::
+ [=Cyclic percentage sizes=] resolve against zero in all cases.
+
+
+Legacy Gap Properties: the 'grid-row-gap', 'grid-column-gap', and 'grid-gap' properties
+
+ The Grid Layout module was originally written with its own set of [=gutter=] properties,
+ before all such properties were unified into the existing 'row-gap'/'column-gap' naming.
+ For compatibility with legacy content,
+ these grid-prefixed names must be supported as follows:
+
+ * grid-row-gap as a [=legacy name alias=] of the 'row-gap' property
+ * grid-column-gap as a [=legacy name alias=] of the 'column-gap' property
+ * grid-gap as a [=legacy name alias=] of the 'gap' property
+
-
-### Image Fragments ### {#image-fragments}
-
- When a URL specified in ''image()'' represents a portion of a resource
- (e.g. by the use of media fragment identifiers)
- that portion is clipped out of its context and used as a standalone image.
-
-
- For example, given the following image and CSS:
-
-
-
-
-
-
-
- ...the background of the element will be the portion of the image that starts at (40px,0px) and is 20px wide and tall,
- which is just the circle with a quarter filled in.
-
-
- So that authors can take advantage of CSS's forwards-compatible parsing rules to provide a fallback for image slices,
- implementations that support the ''image()'' notation
- must support the xywh=#,#,#,# form of media fragment identifiers
- for images specified via ''image()''. [[!MEDIA-FRAGS]]
-
-
- Note that image fragments can also be used with the ''url()'' notation.
- However, a legacy UA that doesn't understand the media fragments notation
- will ignore the fragment and simply display the entirety of the image.
-
- Since the ''image()'' notation requires UAs to support media fragments,
- authors can take advantage of CSS's forward-compatible parsing rules
- to provide a fallback when using an image fragment URL:
-
-
- background-image: url('swirl.png'); /* old UAs */
- background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */
-
-
-
- If a URL uses a fragment identifier syntax that the implementation does not understand,
- or does not consider valid for that type of image,
- the URL must be treated as representing an invalid image.
-
- Note: This error-handling is limited to ''image()'',
- and not in the definition of URL,
- for legacy compat reasons.
-
-
-### Solid-color Images ### {#color-images}
-
- If the ''image()'' function is specified with only a <> argument (no URL),
- it represents a solid-color image of the specified color with no [=natural dimensions=].
+ The ''image()'' function represents a solid-color image of the specified color
+ with no [=natural dimensions=].
For example,
one can use this as a simple way to "tint" a background image,
by overlaying a partially-transparent color over the top of the other image:
-
- 'background-color' does not work for this,
- as the solid color it generates always lies beneath all the background images.
-
-
-
-### Bidi-sensitive Images ### {#bidi-images}
-
- Before listing any <image-src>s,
- the author may specify a directionality for the image,
- similar to adding a dir attribute to an element in HTML.
- If a directional image is used on or in an element with opposite direction,
- the image must be flipped in the inline direction
- (as if it was transformed by, e.g., scaleX(-1), if the inline direction is the X axis).
-
- Note: Absent this declaration,
- images default to no directionality at all,
- and thus don't care about the directionality of the surrounding element.
+ This is equivalent to a single color stop gradient:
-
- A list may use an arrow for a bullet that points into the content.
- If the list can contain both LTR and RTL text,
- though, the bullet may be on the left or the right,
- and an image designed to point into the text on one side will point out of the text on the other side.
- This can be fixed with code like:
+
- <ul style="list-style-image: image(ltr 'arrow.png');">
- <li dir='ltr'>My bullet is on the left!</li>
- <li dir='rtl'>MY BULLET IS ON THE RIGHT!</li>
- </ul>
-
-
- This should render something like:
-
-
- ⇒ My bullet is on the left!
- !THGIR EHT NO SI TELLUB YM ⇐
-
-
- In LTR list items, the image will be used as-is.
- In the RTL list items, however,
- it will be flipped in the inline direction,
- so it still points into the content.
+ 'background-color' does not work for this,
+ as the solid color it generates always lies beneath all the background images.
+ Note: This function previously defined a number of additional behaviors,
+ but those have been shifted to [[css-images-5]].
+
+2D Image Values: the <> type {#image-values}
+===================================================
+
+ ...
+
+
+
+
+Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
+---------------------------------------------------------------------------
+
+ [[css-images-4]] defines a simple form of the ''image()'' function,
+ which generates a solid-color dimensionless image.
+ This level introduces a number of additional functions.
+
+ The ''image()'' function allows an author to:
+
+ * use media fragments to clip out a portion of an image
+ * use a solid color as an image
+ * fallback to a solid-color image, when the image at the specified url can't be downloaded or decoded
+ * automatically respect the image orientation specified in the image's metadata
+
+ The ''image()'' notation is defined as:
+
+
+
+ A <> used in ''image()'' represents a <>.
+ As usual for URLs in CSS,
+ relative URLs are resolved to an absolute URL
+ (as described in Values & Units [[!CSS-VALUES-3]])
+ when a specified ''image()'' value is computed.
+
+ If the image has an orientation specified in its metadata,
+ such as EXIF,
+ the UA must rotate or flip the image to correctly orient it
+ as the metadata specifies.
+
+### Image Fallbacks ### {#image-fallbacks}
+
+ If both a URL and a <> are specified in ''image()'',
+ then whenever the URL represents an [=invalid image=] or [=loading image=],
+ the ''image()'' function renders as if the URL were not specified at all;
+ it generates a solid-color image as specified in [[#color-images]].
+
+ If just a URL is specified (no <>)
+ and it represents an [=invalid image=] or [=loading image=],
+ the ''image()'' function represents the same.
+
+
+ css-image-fallbacks-and-annotations.html
+ css-image-fallbacks-and-annotations002.html
+ css-image-fallbacks-and-annotations003.html
+ css-image-fallbacks-and-annotations004.html
+ css-image-fallbacks-and-annotations005.html
+
+
+
+ The fallback color can be used to ensure that text is still readable
+ even when the image fails to load.
+ For example, the following legacy code works fine if the image is rectangular and has no transparency:
+
+
+
+ When the image doesn't load,
+ the background color is still there to ensure that the white text is readable.
+ However, if the image has some transparency,
+ the black will be visible behind it,
+ which is probably not desired.
+ The ''image()'' function addresses this:
+
+
+
+ Now, the black won't show at all if the image loads,
+ but if for whatever reason the image fails,
+ it'll pop in and prevent the white text from being set against a white background.
+
+
+
+
+### Image Fragments ### {#image-fragments}
+
+ When a URL specified in ''image()'' represents a portion of a resource
+ (e.g. by the use of media fragment identifiers)
+ that portion is clipped out of its context and used as a standalone image.
+
+
+ For example, given the following image and CSS:
+
+
+
+
+
+
+
+ ...the background of the element will be the portion of the image that starts at (40px,0px) and is 20px wide and tall,
+ which is just the circle with a quarter filled in.
+
+
+ So that authors can take advantage of CSS's forwards-compatible parsing rules to provide a fallback for image slices,
+ implementations that support the ''image()'' notation
+ must support the xywh=#,#,#,# form of media fragment identifiers
+ for images specified via ''image()''. [[!MEDIA-FRAGS]]
+
+
+ Note that image fragments can also be used with the ''url()'' notation.
+ However, a legacy UA that doesn't understand the media fragments notation
+ will ignore the fragment and simply display the entirety of the image.
+
+ Since the ''image()'' notation requires UAs to support media fragments,
+ authors can take advantage of CSS's forward-compatible parsing rules
+ to provide a fallback when using an image fragment URL:
+
+
+ background-image: url('swirl.png'); /* old UAs */
+ background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */
+
+
+
+ If a URL uses a fragment identifier syntax that the implementation does not understand,
+ or does not consider valid for that type of image,
+ the URL must be treated as representing an invalid image.
+
+ Note: This error-handling is limited to ''image()'',
+ and not in the definition of URL,
+ for legacy compat reasons.
+
+
+### Solid-color Images ### {#color-images}
+
+ If the ''image()'' function is specified with only a <> argument (no URL),
+ it represents a solid-color image of the specified color with no [=natural dimensions=].
+
+
+ For example,
+ one can use this as a simple way to "tint" a background image,
+ by overlaying a partially-transparent color over the top of the other image:
+
+
+
+ 'background-color' does not work for this,
+ as the solid color it generates always lies beneath all the background images.
+
+
+
+### Bidi-sensitive Images ### {#bidi-images}
+
+ Before listing any <image-src>s,
+ the author may specify a directionality for the image,
+ similar to adding a dir attribute to an element in HTML.
+ If a directional image is used on or in an element with opposite direction,
+ the image must be flipped in the inline direction
+ (as if it was transformed by, e.g., scaleX(-1), if the inline direction is the X axis).
+
+ Note: Absent this declaration,
+ images default to no directionality at all,
+ and thus don't care about the directionality of the surrounding element.
+
+
+ A list may use an arrow for a bullet that points into the content.
+ If the list can contain both LTR and RTL text,
+ though, the bullet may be on the left or the right,
+ and an image designed to point into the text on one side will point out of the text on the other side.
+ This can be fixed with code like:
+
+
+ <ul style="list-style-image: image(ltr 'arrow.png');">
+ <li dir='ltr'>My bullet is on the left!</li>
+ <li dir='rtl'>MY BULLET IS ON THE RIGHT!</li>
+ </ul>
+
+
+ This should render something like:
+
+
+ ⇒ My bullet is on the left!
+ !THGIR EHT NO SI TELLUB YM ⇐
+
+
+ In LTR list items, the image will be used as-is.
+ In the RTL list items, however,
+ it will be flipped in the inline direction,
+ so it still points into the content.
+
+
+
Sizing Images and Objects in CSS {#sizing}
==========================================
diff --git a/css-inline-3/Overview.bs b/css-inline-3/Overview.bs
index cee518b79606..a8bc28f948b7 100644
--- a/css-inline-3/Overview.bs
+++ b/css-inline-3/Overview.bs
@@ -973,7 +973,7 @@ Line Spacing: the 'line-height' property
normal
Determine the [=preferred line height=]
- automatically based on font metrics.
+ automatically based on the metrics of the used font.
<>
@@ -983,7 +983,7 @@ Line Spacing: the 'line-height' property
<>
The [=preferred line height=] is this number
- multiplied by the element's computed 'font-size'.
+ multiplied by the element's used 'font-size'.
Negative values are illegal.
The [=computed value=] is the same as the [=specified value=].
diff --git a/css-link-params-1/Overview.bs b/css-link-params-1/Overview.bs
index 9fb1a4834eed..fa28c4aac9ec 100644
--- a/css-link-params-1/Overview.bs
+++ b/css-link-params-1/Overview.bs
@@ -2,10 +2,11 @@
Title: CSS Linked Parameters Module Level 1
Shortname: css-link-params
Level: 1
-Status: ED
+Status: FPWD
Group: CSSWG
-Work Status: exploring
+Work Status: refining
ED: https://drafts.csswg.org/css-link-params/
+TR: https://www.w3.org/TR/css-link-params-1/
Editor: Tab Atkins-Bittner, Google, http://xanthir.com/contact/
Editor: Daniel Holbert, Mozilla
Editor: Jonathan Watt, Mozilla
@@ -19,6 +20,7 @@ spec:html; type:element
text: iframe
text: a
spec:fill-stroke-3; type:property; text:fill
+spec:css-env-1; type:function; text:env()
Introduction {#intro}
@@ -178,11 +180,14 @@ The syntax of an SVG parameter fragment identifie
Multiple [=link parameters=] can be passed to an image
by appending multiple [=param()=] fragment identifiers to the URL.
+When combined, either with each other or with other "fragment identifiers",
+each value is separated with an & character,
+as in a URL's query parameters.
For example, if the image from the previous example also used ''env(--bg-color)'',
it could be referenced with a url like
- “http://example.com/image.svg#param(--text-color,blue)param(--bg-color,white)”
+ “http://example.com/image.svg#param(--text-color,blue)¶m(--bg-color,white)”
to set both ''env(--text-color)'' and ''env(--bg-color)''.
@@ -258,31 +263,23 @@ accessible with the ''env()'' function in stylesheets.
1. On each ''env()'' function, provide a fallback value, like ''fill: env(--color, blue)''.
2. If the ''env()'' is going to be used a lot,
such that providing a fallback for each individual ''env()'' is troublesome,
- store the [=custom environment variable=] in a [=scoped environment variable=]
- of a different name,
+ store the [=custom environment variable=] in a [=custom property=] on the root element
with the default specified,
like:
- @env --color2: env(--color, blue);
-
- /* Alternately, store it in a custom property: */
:root {
--color: env(--color, blue);
}
In this example, if ''--color'' is provided via a [=linked parameter=],
- ''env(--color2)'' will contain its value.
+ ''var(--color)'' will contain its value.
If not, it will contain the default ''blue'' value.
- In either case, ''env(--color2)'' can be used in the stylesheet unconditionally,
+ In either case, ''var(--color)'' can be used in the stylesheet unconditionally,
secure in the knowledge that it will always have a value.
-Note: When we define ''env(parent --color)'' to jump up a scope level,
-you won't need to do the rename;
-''@env --color: env(parent --color);'' will work just fine.
-
Privacy Considerations
diff --git a/css-lists-3/Overview.bs b/css-lists-3/Overview.bs
index e9ac94554a41..d18e3405eba9 100644
--- a/css-lists-3/Overview.bs
+++ b/css-lists-3/Overview.bs
@@ -901,7 +901,7 @@ Manipulating Counter Values: the 'counter-increment' and 'counter-set' propertie
h1::before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
- counter-reset: section; /* Set section to 0 */
+ counter-set: section; /* Set section to 0 */
}
h2::before {
content: counter(chapter) "." counter(section) " ";
diff --git a/css-masking-1/Overview.bs b/css-masking-1/Overview.bs
index 2e559da681af..31d40c0b4a03 100644
--- a/css-masking-1/Overview.bs
+++ b/css-masking-1/Overview.bs
@@ -53,6 +53,8 @@ spec:css-backgrounds-3; type:property;
text:border-image-repeat
text:border-image-slice
text:border-image-width
+ text:border-image-source
+ text:border-image-outset
text:border-radius
text:border-width
spec:css-color-4; type:property
@@ -1527,7 +1529,7 @@ These pieces may be sliced, scaled and stretched in various ways to fit the size
Name: mask-border-source
-Value: none | <>
+Value: <<'border-image-source'>>
Initial: none
Applies to: All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
Inherited: no
@@ -1587,7 +1589,7 @@ The 'mask-mode' and 'mask-type' properties must have no affect on the mask bo
Name: mask-border-width
-Value: [ <> | <> | auto ]{1,4}
+Value: <<'border-image-width'>>
Initial: auto
Applies to: All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
Inherited: no
@@ -1638,7 +1640,7 @@ Note: For SVG elements without an associated layout box the 'border-width' is co
Name: mask-border-outset
-Value: [ <> | <> ]{1,4}
+Value: <<'border-image-outset'>>
Initial: 0
Applies to: All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
Inherited: no
@@ -1664,7 +1666,7 @@ Note: For SVG elements without associated layout box the 'border-width' is consi
Name: mask-border-repeat
-Value: [ stretch | repeat | round | space ]{1,2}
+Value: <<'border-image-repeat'>>
Initial: stretch
Applies to: All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element
Inherited: no
diff --git a/css-mixins-1/Overview.bs b/css-mixins-1/Overview.bs
index 15b86ed4e733..a20dc5fbc18e 100644
--- a/css-mixins-1/Overview.bs
+++ b/css-mixins-1/Overview.bs
@@ -488,8 +488,8 @@ is the real element at the root of the [=calling context=] stack.
- A [=comma-containing productions|comma-containing value=]
- may be passed as a single argument
+ A [=free-form production|comma-containing value=]
+ can be passed as a single argument
by wrapping the value in curly braces, {}:
@@ -604,7 +604,7 @@ with its [=function parameters=] overriding "inherited" custom properties of the
Add the registration to |registrations|.
6. If |custom function| has a [=custom function/return type=],
create a [=custom property registration=]
- with the name "return"
+ with the name "result"
(violating the usual rules for what a registration's name can be),
a syntax of the [=custom function/return type=],
an inherit flag of "false",
@@ -2617,7 +2617,7 @@ given a <> |argument|:
See [[css-values-5#component-function-commas]] for more information
- on [=comma-containing productions=].
+ on [=free-form productions=].
diff --git a/css-navigation-1/Makefile b/css-navigation-1/Makefile
new file mode 100644
index 000000000000..dd2cc9dcffe4
--- /dev/null
+++ b/css-navigation-1/Makefile
@@ -0,0 +1,17 @@
+# Use "make REMOTE=1" to use remote bikeshed
+
+SOURCEFILE=Overview.bs
+OUTPUTFILE=Overview.html
+PREPROCESSOR=bikeshed.py
+REMOTE_PREPROCESSOR_URL=https://www.w3.org/publications/spec-generator/
+
+all: $(OUTPUTFILE)
+
+$(OUTPUTFILE): $(SOURCEFILE) Makefile
+ifneq (,$(REMOTE))
+ curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F output=messages -F type=bikeshed-spec
+ @echo
+ curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F type=bikeshed-spec > "$@"
+else
+ $(PREPROCESSOR) -f spec "$<" "$@"
+endif
diff --git a/css-navigation-1/Overview.bs b/css-navigation-1/Overview.bs
index fd0b4c114764..25f70faf9c6f 100644
--- a/css-navigation-1/Overview.bs
+++ b/css-navigation-1/Overview.bs
@@ -9,91 +9,138 @@ ED: https://drafts.csswg.org/css-navigation-1/
!Issue Tracking: w3c/csswg-drafts#12594
Editor: L. David Baron, Google https://www.google.com/, https://dbaron.org/, w3cid 15393
Editor: Noam Rosenthal, Google https://www.google.com/, w3cid 121539
-Abstract: This module contains conditional CSS rules for styling conditioned on the current URL
- or conditioned on the status of navigating between particular URLs.
+Abstract: This module contains conditional CSS rules for styling
+ conditioned on the status of navigating between particular URLs.
+
+A <> is defined to
+match a [=/URL=]-or-null input if input is non-null, and:
+
+
+
+: the <> is a <>
+:: [=URL pattern/match|match a URL pattern=] is non-null given
+ urlPattern as
+ the [=URL pattern=] represented by the ''@route'' rule referenced by the name and
+ input as input.
+
+: the <> is a <>
+:: [=URL pattern/match|match a URL pattern=] is non-null given
+ urlPattern as
+ the [=URL pattern=] represented by the function (see
+ [=create a URL pattern for url-pattern()=]) and
+ input as input.
+
+: the <> is a <>
+:: The given [=/URL=] [=url/equals=] input.
+
+
+
+
Declaring named URL patterns: the ''@route'' rule
The @route rule
-is an at-rule that associates a name with a [=URL pattern=].
+is an at-rule that associates an author-defined name with a [=URL pattern=].
This name can be referenced in ''@navigation'' rules
-and in '':link-to()'' pseudo-classes.
+and in '':active-navigation()'' pseudo-classes.
-The syntax of the ''@route'' rule is:
+The syntax of the ''@route'' rule is described by the <> production in:
-based on the following definitions:
+This means that the rule accepts a sequence of descriptors
+that have the syntax of declarations.
+However, in valid style sheets the only descriptors must match
+the <> production below.
+Any other descriptors are ignored.
-
-This associates an author-defined keyword with a URL pattern,
-so that any URL that matches one of the URL patterns
-matches the route named by the keyword.
+
+If two valid descriptors in a single rule have the same name,
+the last one is used and the others are ignored.
+If a rule has both a valid <>
+and a valid <>
+then it is ignored.
The ''@route'' rule can be defined in one of two ways:
: with the pattern descriptor
:: in this case the URL pattern represented is
- the one represented by the <> function
- given as the descriptor's value.
+ the result of invoking
+ [=create a URL pattern for url-pattern()=] given
+ arg as the argument to the ''url-pattern()'' function
+ and baseURLSpecifier as
+ the (optional) value of the rule's <>.
: with the other descriptors named by <>
:: In this case the URL pattern represented is the result of invoking
- [=URL pattern/create|create a URL pattern=] given
- input as {{URLPatternInit}}
- constructed from the descriptors and their values.
- Each dictionary member is given the value of
- the descriptor with the same name,
- except the baseURL member is given the value of
- the base-url descriptor.
- If a base-url descriptor is not given then one is created from
- the [=style resource base URL=] of the rule.
+ [=URL pattern/create|create a URL pattern=] given
+ input as {{URLPatternInit}}
+ constructed from the descriptors and their values.
+ Each dictionary member is given the value of
+ the descriptor with the same name,
+ except the baseURL member is given the result of
+ [=create a URL for a base descriptor=]
+ given baseURLSpecifier as
+ the (optional) value of the rule's <>.
ISSUE: Should this use <>, <>, or <>
for the route names?
-ISSUE: Is there value in being able to provide a list of <>
-rather than just one?
+ISSUE: Should we use base-url or just base as the descriptor name?
NOTE: The list of allowed init descriptors does not include username
or password since they seem unlikely to be useful.
It's possible that this syntax with init descriptors in the ''@route'' rule
-would make more sense as part of the ''urlpattern()'' function
+would make more sense as part of the ''url-pattern()'' function
(that is, as an alternate syntax for what goes inside the function).
This would also give us the option to remove the braces from
@@ -107,18 +154,18 @@ but it could also be added back later if we need it.
Either this rule:
define an ''@route'' rule that associates
the name --movie-list
-with the URL "/movie-list" resolved relative to the style sheet.
+with the URL "/movies" resolved relative to the style sheet.
NOTE: The bracing syntax also allows for future expansion if needed.
@@ -126,6 +173,492 @@ NOTE: The bracing syntax also allows for future expansion if needed.
NOTE: Some of the design discussion for this feature has been in
w3c/csswg-drafts#12594.
+
The ''url-pattern()'' function
+
+
+
+The url-pattern() function represents a [=URL pattern=],
+which can be used to match URLs.
+
+
+<> = url-pattern( <> )
+
+
+This function represents the [=URL pattern=] resulting from
+invoking [=create a URL pattern for url-pattern()=] with its string argument.
+
+The syntax used in the ''url-pattern()'' function follows that of [=URL Pattern=].
+It is a [=pattern string=] directly based on the syntax used by
+the popular path-to-regexp JavaScript library.
+
+
+Pattern strings can contain capture groups, which by default match the shortest possible string,
+up to a component-specific separator (/ in the pathname, . in the hostname).
+
+For example, the pathname pattern "/movies/:id"
+will match "/movies/123"
+but not "/movies/123/cast".
+
+A regular expression enclosed in parentheses can also be used instead,
+so the pathname pattern "/blog/:id(\\d+)"
+will match "/movies/123"
+but not "/movies/css".
+
+You may also omit the name of the capture group by using only a regular expression,
+for example "/blog/(\\d+)".
+
+A group can also be made optional by using the ? modifier or by wrapping it in braces.
+For example, the patterns "/movies/:id?" and "/movies{/:id}"
+will match both "/movies" and "/movies/123" (but not "/movies/").
+
+A full wildcard * can also be used to match as much as possible,
+as in the pattern "/*/movies".
+This too can be given a name, for example "/*lang/movies".
+
+
+The steps of the create a URL pattern for url-pattern() algorithm,
+given a string arg and
+an optional baseURLSpecifier
+which can be ''document'', ''stylesheet'', or a URL, are:
+
+1. Let baseURL be the result of
+ [=create a URL for a base descriptor=] given baseURLSpecifier.
+
+1. Return the result of [=URL pattern/create|create a URL pattern=] given
+ arg, baseURL, and an empty [=map=].
+
+NOTE: This function requires that its argument is quoted.
+This differs from the ''url()'' function,
+which allows its argument to be quoted or unquoted.
+
+The create a URL for a base descriptor algorithm, given
+an optional baseURLSpecifier
+which can be ''document'', ''stylesheet'', or a URL, is:
+
+
+
+: if baseURLSpecifier is not present or is ''stylesheet''
+:: the [=style resource base URL=] of
+ the rule or declaration block containing the ''url-pattern()'' function.
+
+: if baseURLSpecifier is ''document''
+:: the [=document base URL=] of the document
+
+: if baseURLSpecifier is a URL
+:: baseURLSpecifier
+
+
+defines an ''@route'' rule that associates
+the name --movie-detail
+with any URL that matches the [=URL pattern=] /movies/:id.
+
+Any of the following URLs (relative to the style sheet) match:
+
+
+
/movies/123
+
/movies/456
+
/movies/something
+
+
+These URLs will not match:
+
+
+
/movies/123/ — The trailing slash is not matched by the pattern
+
/movies/456/extra — The /extra is not matched by the pattern
+
+
+
+
+To have the --movie-details route
+match only numeric :id values,
+define the route eiter as:
+
+
+
+This way, /movies/something won’t be matched by the route.
+
+NOTE: Even though the capture groups are not currently exposed,
+it is recommended to give the capture groups a name for future use.
+
+
+
+Should the default always be ''stylesheet''?
+For use of ''url-pattern()'' in ''@navigation'',
+it's likely more useful for the base URL
+to be the document URL rather than the style sheet URL.
+However, it would be very awkward for ''url-pattern()''
+to be inconsistent with ''url()''.
+
+Also see other proposed uses of {{URLPattern}} in CSS
+in ,
+for '':local-link''.
+
+
+
+To serialize a ''url-pattern()'' function f,
+[=serialize a function=] f,
+using [=serialize a string=] on the single argument
+to serialize f's contents.
+
+NOTE: This is defined this way because {{URLPattern}}
+intentionally does not provide a serialization.
+
+
Pseudo-classes for links
+
+
The '':link-to()'' pseudo-class
+
+This specification defines a new
+'':link-to()'' functional pseudo-class
+that matches link elements that link to a certain URL.
+
+
+A simple example of a '':link-to()'' selector is this one,
+which matches any links that link to the site's homepage:
+
+
+
+Because there is no dynamic part in the homepage URL,
+you might be tempted to pass in a <> directly:
+
+
+:link-to(url("/")) {
+ font-weight: bold;
+}
+
+
+However, url("/") won't match URLs such as
+/#scroll-to-here or /?utm_id=something
+so it is recommended to use the <>
+or <> variants, or use the following alternative:
+
+
+
+The '':link-to()'' pseudo-class takes a single argument, a <>,
+and the pseudo-class matches any element where both:
+* the element matches '':any-link''
+* the <> [=route-location/matches=] the target of the link
+
+
The '':active-navigation()'' pseudo-class
+
+This specification defines a new
+'':active-navigation()''
+functional pseudo-class
+that matches link elements that link to a certain URL
+that is related to a navigation that is currently active.
+
+The '':active-navigation()'' pseudo-class takes a single argument, a <>,
+and the pseudo-class matches any element where:
+* the element matches '':any-link''
+* the target of the link matches the <>, as defined below.
+
+
+<> =
+ <>? [ <> | link-href ]?
+<> = at | with | from | to
+
+
+ISSUE: Should we use ''at''/''with''/''from''/''to'' or
+''current''/''other''/''from''/''to''?
+
+An <> matches the target linkTarget of the link when
+the following steps return true:
+1. Let navigationURL be
+ the [=current navigation URL=] of the document given the <> in <> (default ''with'').
+
+1. If navigationURL is null, return false.
+1. If ''link-href'' is present, or a <> is not provided:
+ 1. Return true if linkTarget [=url/equals=] navigationURL; Otherwise false.
+
+1. If a <> is present:
+ 1. Let targetMatchResult be the result of
+ [=URL pattern/match|matching a URL pattern=]
+ given urlPattern and linkTarget.
+
+ 1. Let navigationMatchResult be the result of
+ [=URL pattern/match|matching a URL pattern=] given
+ urlPattern and navigationURL.
+
+ 1. If navigationMatchResult or targetMatchResult is null, return false.
+
+ 1. For each property prop of {{URLPatternResult}} that is a
+ {{URLPatternComponentResult}}:
+
+ 1. If {{URLPatternComponentResult/groups}} of prop of
+ targetMatchResult is not equal to
+ {{URLPatternComponentResult/groups}} of prop of
+ navigationMatchResult,
+ then return false.
+
+ ISSUE: Need to formally define equality of ordered maps.
+
+ 1. Return true.
+
+
+
+The difference between '':link-to()'' and '':active-navigation()''
+is that the latter is only active while a navigation is in progress.
+
+Consider this example:
+
+
+
+Links that link to the --homepage get a lime color.
+When navigating to or from the --homepage,
+their color changes to hotpink for as long as the animation is active.
+
+Once the navigation has completed, the '':active-navigation()''
+selector no longer applies, and those links revert back to lime.
+
+
+
+
+
+In the following examples, all links that link to the --movie-detail route,
+get a lime color when a navigation is in progress.
+
+
+
+When navigating from /movies/1 to /movies/2:
+
+
+
+ Links that link to the --movie-detail route
+ with any :id
+ get a lime color
+ during the navigation.
+
+
+ Links that link to the --movie-detail route
+ whose target is /movies/1
+ (the “from” page)
+ get a hotpink color
+ during the navigation.
+
+
+ Links that link to the --movie-detail route
+ whose target is /movies/2
+ (the “to” page)
+ get a yellow color
+ during the navigation.
+
+
+
+When navigating from /movies/2 to /:
+
+
+
+ Links that link to the --movie-detail route
+ with any :id
+ get a lime color
+ during the navigation.
+
+
+ Links that link to the --movie-detail route
+ whose target is /movies/3
+ (the “from” page)
+ get a hotpink color
+ during the navigation.
+
+
+
+When navigating from / to /movies/3:
+
+
+
+ Links that link to the --movie-detail route
+ with any :id
+ get a lime color
+ during the navigation.
+
+
+ Links that link to the --movie-detail route
+ whose target is /movies/3
+ (the “to” page)
+ get a yellow color
+ during the navigation.
+
+
+
+
+
+
+
+A an example of the '':active-navigation()'' pseudo-class
+is this example which creates a view transition between
+a item in a list that contains a link (in this document)
+and the details page for that link (in a different document).
+This transition works even when the navigation is a back/forward navigation
+and even if the user has used a language selector UI
+to change the page into a different language (and thus change the URL).
+The use of the '':link-to()'' pseudo-class ensures that
+the view transition animations from or to the correct item in the list
+by matching the relevant parts of the navigation URL to the link URL.
+
+
+@view-transition {
+ /* allow cross-document view transitions */
+ navigation: auto;
+}
+
+@route --movie-detail {
+ /* match URLs like /en/movies/123 which is the English page
+ about a movie with ID 123. Be careful to specify the
+ language part with a "*" but the ID part with a named
+ :id parameter so that matching will require equal IDs
+ but allow differences of language. */
+ pattern: url-pattern("/*/movies/:id");
+}
+
+/* capture the overall area representing the movie, and a
+ sub-area for its poster image */
+
+/* match an element with class movie-container with a child
+ link that links to a movie whose id is the same as the
+ movie we are currently navigating to or from. (lang can
+ be different, though.)
+
+ This depends on the --movie-detail route
+ declaring the ID but not the language with a named
+ parameter, and the use of the 'with' keyword.
+
+ This means that both the of the link and the other URL of
+ the current navigation match the URL pattern defined by
+ the "@route --movie-detail" rule, and that the
+ id named group from both matches be the same. (However,
+ the URLs can be different because the * part of the
+ match, containing the language, can be different.)
+ */
+.movie-container:has(
+ > .movie-title:active-navigation(with --movie-detail)) {
+
+ view-transition-name: movie-container;
+
+ > .movie-poster {
+ view-transition-name: movie-poster;
+ }
+
+ /* leave the default cross-fade animation for both image
+ captures */
+}
+
+
+
+
+NOTE: Some of the design discussion for this feature has been in
+w3c/csswg-drafts#13163.
+
+
The '':trigger-link'' pseudo-class
+
+This specification defines a new
+'':trigger-link''
+that matches link elements that trigger the current navigation.
+
+The '':trigger-link'' pseudo-class matches any element where both:
+* the element matches '':any-link''
+* the [=current navigation state=] is not null, and element is its [=navigation state/source element=].
+
+Issue: should this apply to forms or submit buttons?
+
+
+
+A simple example of a '':trigger-link'' selector is this one,
+which sets the ''view-transition-name'' for an image thumbnail that is a child of the link that triggers the current navigation.
+
+
+
@@ -139,14 +672,14 @@ These queries are called navigation queries.
Authors can use it to:
* write style sheets that apply to multiple pages
- but behave somewhat differently between those pages,
+ but behave somewhat differently between those pages,
* write style sheets that apply to
- single page applications
- that change their URL over time,
- so that style changes when the URL changes, and
+ single page applications
+ that change their URL over time,
+ so that style changes when the URL changes, and
* write style sheets that declaratively start view transitions
- (or make other appropriate style changes)
- in response to navigations.
+ (or make other appropriate style changes)
+ in response to navigations.
The syntax of the condition in the ''@navigation'' rule
is similar to that defined for
@@ -162,8 +695,8 @@ to define styles that only affect a particular page:
@navigation (at: url-pattern("/")) {
- /* These styles only apply to the site's homepage
- (including any URL with a search or hash). */
+ /* These styles only apply to the site's homepage
+ (including any URL with a search or hash). */
}
@@ -178,20 +711,25 @@ styles that cause [=view transitions=].
@route --search-results-page {
- pattern: url-pattern("/search-results");
+ pattern: url-pattern("/search-results");
}
@route --product-page {
- pattern: url-pattern("/product/:id");
+ pattern: url-pattern("/product/:id");
}
-@navigation ((from: --search-results-page) and
- (to: --product-page)) or
- ((from: --product-page) and
- (to: --search-results-page)) {
- /* These styles apply when a navigation is in progress
- between a search results page and a product page (as
- defined by the @route rules above), in either
- direction. */
+@navigation (from: --search-results-page) and
+ (to: --product-page) {
+ /* These styles apply when a navigation is in progress
+ from a search results page to a product page (as
+ defined by the @route rules above), but not in the
+ reverse direction. */
+}
+
+@navigation (between: --search-results-page and --product-page) {
+ /* These styles apply when a navigation is in progress
+ between a search results page and a product page (as
+ defined by the @route rules above), in either
+ direction. */
}
@@ -201,7 +739,7 @@ The syntax of the ''@navigation'' rule is:
@navigation <> {
- <>
+ <>
}
@@ -209,20 +747,29 @@ with <> defined as:
<> = not <>
- | <> [ and <> ]*
- | <> [ or <> ]*
+ | <> [ and <> ]*
+ | <> [ or <> ]*
<> = ( <> ) | ( <> ) | <>
-<> = <> | <>
+<> = <> |
+ <> |
+ <> |
+ <>
-<> = <> : <>
-<> = at | from | to
-<> = <> | <>
-<> = <>
+<> = <> : <>
+<> = at | with | from | to
+
+<> =
+ between : <> and <>
<> = history : <>
<> = traverse | back | forward | reload
+
+<> = phase : <>
+<> = loading | ready | committed
+ISSUE: Should we use ''at''/''with''/''from''/''to'' or ''current''/''other''/''from''/''to''?
+
The above grammar is purposely very loose for forwards-compatibility reasons,
since the <> production
allows for substantial future extensibility.
@@ -237,90 +784,58 @@ Many of these grammar terms are associated with a boolean result,
as follows:
: <>
-:: : not <>
- :: The result is the negation of the <> term.
+:: : not <>
+ :: The result is the negation of the <> term.
- : <> [ and <> ]*
- ::
- The result is true if all of the <> child terms are true,
- and false otherwise.
+ : <> [ and <> ]*
+ ::
+ The result is true if all of the <> child terms are true,
+ and false otherwise.
- : <> [ or <> ]*
- ::
- The result is false if all of the <> child terms are false,
- and true otherwise.
+ : <> [ or <> ]*
+ ::
+ The result is false if all of the <> child terms are false,
+ and true otherwise.
: <>
:: The result is the result of the child subexpression.
: <>
-:: : at: <>
- :: The result is whether the result of
- [=URL pattern/match|match a URL pattern=] is non-null
- given urlPattern as
- the [=navigation location URL pattern=] of <>
- and input as the document's [=Document/URL=].
-
- : from: <>
- :: The result is true if
- the [=current from URL=] from of the document is non-null and
- [=URL pattern/match|match a URL pattern=] is non-null when
- given urlPattern as
- the [=navigation location URL pattern=] of <>
- and input as from.
-
- : to: <>
- :: The result is true if
- the [=current to URL=] to of the document is non-null and
- [=URL pattern/match|match a URL pattern=] is non-null when
- given urlPattern as
- the [=navigation location URL pattern=] of <>
- and input as to.
+:: The result is true if
+ the <> [=route-location/matches=] [=current navigation URL=] of the document given the <>.
+
+: <>
+:: : between: <> and <>
+ :: The result is true if
+ the [=current navigation URL=] from of the document given ''from'' is non-null,
+ the [=current navigation URL=] to of the document ''to'' is non-null,
+ one of the two <>s
+ [=route-location/matches=] from,
+ and the other of the two <>s
+ [=route-location/matches=] to.
: <>
-:: : history: traverse
- :: True if the [=current navigation type=] is {{NavigationType/traverse}}.
- : history: back
- :: True if the [=current navigation type=] is {{NavigationType/traverse}} and
- the [=current navigation delta=] is less than 0.
- : history: forward
- :: True if the [=current navigation type=] is {{NavigationType/traverse}} and
- the [=current navigation delta=] is greater than 0.
- : history: reload
- :: True if the [=current navigation type=] is {{NavigationType/reload}}.
+:: : history: traverse
+ :: True if the [=current navigation type=] is {{NavigationType/traverse}}.
+ : history: back
+ :: True if the [=current navigation type=] is {{NavigationType/traverse}} and
+ the document's [=current navigation state=]'s [=navigation state/new index=] is less than its [=navigation state/old index=].
+ : history: forward
+ :: True if the [=current navigation type=] is {{NavigationType/traverse}} and
+ the document's [=current navigation state=]'s [=navigation state/new index=] is greater than its [=navigation state/old index=].
+ : history: reload
+ :: True if the [=current navigation type=] is {{NavigationType/reload}}.
+
+: <>
+:: The [=current navigation state=] is not null, and its [=navigation state/phase=] matches the given ''phase'' value.
: <>
::
- The result is false.
-
- Authors must not use <> in their stylesheets.
- It exists only for future-compatibility,
- so that new syntax additions do not invalidate too much of a <> in older user agents.
-
-The navigation location URL pattern of a <>
-depends on the type of <>:
+ The result is false.
-: <>
-:: the URL pattern represented by the ''@route'' rule referenced by the name.
-
-: <>
-:: The [=URL pattern=] represented by the function; see
- [=create a URL pattern for url-pattern()=].
-
-ISSUE: Should it also be possible to reference
-a name defined in a routemap?
-See the
-route matching explainer
-for details.
-
-A document's navigation API is
-the result of the following steps on document:
-
-1. Let window be the {{Window}} whose [=associated Document=] is document, or null if there is no such {{Window}}.
-
-1. If window is null, return null.
-
-1. Return window's [=navigation API=].
+ Authors must not use <> in their stylesheets.
+ It exists only for future-compatibility,
+ so that new syntax additions do not invalidate too much of a <> in older user agents.
The condition of the ''@navigation'' rule
is the result of the <> in its prelude.
@@ -354,398 +869,113 @@ ISSUE: This should probably have a more formal definition of the function,
but I can't find the formal definitions of the existing ''if()'' functions
to model it after.
-
Pseudo-class for navigation-related links: '':link-to()''
-
-This specification defines a new
-'':link-to()'' functional pseudo-class
-that matches link elements that link to a certain URL.
-
-
-
-A simple example of a ''::link-to()'' selector is this one,
-which matches any links that link to the site's homepage:
-
-
-
-A more interesting example of the ''::link-to()'' pseudo-class
-is this example which creates a view transition between
-a item in a list that contains a link (in this document)
-and the details page for that link (in a different document).
-This transition works even when the navigation is a back/forward navigation
-and even if the user has used a language selector UI
-to change the page into a different language (and thus change the URL).
-The use of the '':link-to()'' pseudo-class ensures that
-the view transition animations from or to the correct item in the list
-by matching the relevant parts of the navigation URL to the link URL.
-
-
-@view-transition {
- /* allow cross-document view transitions */
- navigation: auto;
-}
-
-@route --movie-details {
- /* match URLs like /en/movie/123 which is the English page
- about a movie with ID 123 */
- pattern: url-pattern("/:lang/movie/:id");
-}
-
-/* capture the overall area representing the movie, and a
- sub-area for its poster image */
-
-/* match an element with class movie-container with a child
- link that links to a movie whose id is the same as the
- movie we are currently navigating to or from. (lang can
- be different, though.)
-
- Just :link-to(--movie-details) requires that the target
- of the link match the URL pattern defined by the "@route
- --movie-details" rule.
-
- The navigation-param(id) further requires that either the
- from or the to URL of the current navigation also match
- the URL pattern represented by the "@route
- --movie-details" rule, and that that the 'id' named group
- from that match be the same as the 'id' named group from
- the match with the link's target.
- */
-.movie-container:has(> .movie-title:link-to(
- --movie-details with navigation-param(id))) {
-
- view-transition-name: movie-container;
-
- > .movie-poster {
- view-transition-name: movie-poster;
- }
-
- /* leave the default cross-fade animation for both image
- captures */
-}
-
-
-
-
-The '':link-to()'' pseudo-class takes a single argument, a <>,
-and the pseudo-class matches any element where:
-* the element matches '':any-link''
-* the target of link matches the <>, as defined below.
-
-
-
-A <> matches the target of the link when both:
-* the <> matches the target of the link, and
-* the <> matches the target of the link,
- with the [=URL pattern=] represented by the <> as context
-
-A <> represents a [=URL pattern=].
-If the <> is a <>,
-then it represents the URL pattern
-represented by the <> function
-(see [=create a URL pattern for url-pattern()=]).
-If it is a <>, then it represents the URL pattern
-represented by the ''@route'' rule.
-
-A <> matches a URL
-when [=URL pattern/match|match a URL pattern=] is non-null
-given urlPattern as
-the [=URL pattern=] that it represents and
-input as the given URL.
-
-A <> matches a URL
-(with a [=URL Pattern=] as context)
-based on standard boolean logic for and and or,
-and based on whether each <> matches the URL
-(with the URL Pattern as context).
-
-A <> matches the URL input (with a URL Pattern urlPattern as context)
-if the following steps return true:
-1. Let matchResult be the result of
- [=URL pattern/match|match a URL pattern=]
- given urlPattern and input.
- the [=URL pattern=]
- represented by the <> function in the <>
- (see [=create a URL pattern for url-pattern()=])
-1. If matchResult is null, return false.
-
- NOTE: This doesn't really matter because
- in this case the <> also doesn't match.
-1. For each property prop of matchResult (a {{URLPatternResult}})
- that is a {{URLPatternComponentResult}}:
- 1. For each [=map/entry=] entry in its {{URLPatternComponentResult/groups}},
- then:
- 1. If <> is a <>,
- return true if
- entry's [=map/key=] is the <>
- and entry's [=map/value=] is the <>.
- 1. If <> is a <>,
- and entry's [=map/key=] is the function's <>,
- then for each navigationUrl of the
- [=current to URL=]
- and [=current from URL=]:
- 1. Let navigationMatchResult be the result of
- [=URL pattern/match|match a URL pattern=]
- given urlPattern and navigationUrl.
- 1. If navigationMatchResult is null, [=continue=].
- 1. Return true if navigationMatchResult's
- property prop
- has an [=map/entry=]
- whose [=map/key=] is the same as entry's key
- and whose [=map/value=] is the same as entry's value.
-
- NOTE: This step makes the ''navigation-param()'' function
- perform what is essentially a three-way match,
- between the target of the link,
- the provided URL pattern,
- and the from or to URL of the current navigation.
-
-NOTE: Some of the design discussion for this feature has been in
-w3c/csswg-drafts#13163.
-
-
Definitions of current navigation state
-
-Both the ''@navigation'' rule and the '':link-to()'' pseudo-class
-rely on the following definitions of
-the [=current from URL=] and [=current to URL=].
-
-The current from URL of a [=/document=] is a URL or null.
-It is defined as follows:
-
-1. If the [=document's navigation API=] of the document is non-null and
- its [=transition=] is non-null,
- its [=from entry=]'s {{NavigationHistoryEntry/url}}.
-
- NOTE: This part is for when the old document in the navigation
- is still the current document.
-
-1. If the [=document's navigation API=] of the document is non-null,
- its [=activation=] is non-null,
- the activation's {{NavigationActivation/from}} is non-null, and
- the document's [=has been revealed=] is false or
- was false at the start of the current [=task=],
- the activation's {{NavigationActivation/from}}'s
- {{NavigationHistoryEntry/url}}.
-
- NOTE: This part is for when the new document in the navigation
- has become the current document.
+
Processing model
-1. Otherwise, null.
+The at rules and pseudo-classes defined in this document rely on the [=current navigation state=].
- NOTE: The previous two branches can also produce null results.
+A navigation state is a [=struct=] with the following items:
-The current to URL of a [=/document=] is a URL or null.
-It is defined as follows:
+
+ : old URL
+ : new URL
+ :: a [=/URL=]
+
+ : type
+ :: a {{NavigationType}}
+
+ : old index
+ : new index
+ :: an integer
-1. If the [=document's navigation API=] of the document is non-null and
- its [=ongoing navigate event=] is non-null:
+ : phase
+ :: `loading`, `ready`, or `committed`.
- 1. if the {{pageswap}} event has fired since that navigation began,
- and its {{PageSwapEvent/activation}} was non-null,
- and that {{PageSwapEvent/activation}}'s
- {{NavigationActivation/entry}}'s
- {{NavigationHistoryEntry/url}} is non-null,
- then that
- {{NavigationHistoryEntry/url}}.
+ : source element
+ :: null or an {{Element}}.
+
- NOTE: This part does expose the result of redirects.
+
+To get the current navigation state of a {{Document}} |document|:
- NOTE: This part is not relevant to normal page rendering.
- However, it can be relevant to what is rendered
- when [=capturing the image=]
- for a [[css-view-transitions-2#cross-document-view-transitions|cross-document view transition]].
+1. If |document| is not [=Document/fully active=], return null.
- ISSUE: Is the final "non-null" check needed?
+1. Let |navigation| be |document|'s [=relevant global object=]'s [=navigation API=].
- 1. otherwise, the [=ongoing navigate event=]'s
- {{NavigateEvent/destination}}'s
- {{NavigationDestination/url}}
+1. Let |activation| be |navigation|'s {{Navigation/activation}}.
- NOTE: This part does not expose the result of redirects.
+1. If |document| has not [=has been revealed|been revealed=]:
+ 1. If |activation| is null, return null.
- ISSUE: This assumes that the [=ongoing navigate event=]
- and the [=transition=] have the same lifetime,
- but this isn't really
- true if the event is intercepted.
- After
- whatwg/html#11690 /
- whatwg/html#11692.
- we could probably define this more like "from" above.
- But which lifetime is the one we want?
+ 1. [=Assert=]: |activation|'s {{NavigationActivation/entry}} is not null.
- NOTE: This part is for when the old document in the navigation
- is still the current document.
+ 1. Return a new [=navigation state=] whose
+ [=navigation state/old URL=] is |activation|'s {{NavigationActivation/from}}'s {{NavigationHistoryEntry/url}},
+ [=navigation state/new URL=] is |activation|'s {{NavigationActivation/entry}}'s {{NavigationHistoryEntry/url}},
+ [=navigation state/type=] is |activation|'s {{NavigationActivation/navigationType}},
+ [=navigation state/old index=] is |activation|'s {{NavigationActivation/from}}'s {{NavigationHistoryEntry/index}},
+ [=navigation state/new index=] is |activation|'s {{NavigationActivation/entry}}'s {{NavigationHistoryEntry/index}},
+ [=navigation state/phase=] is `committed`,
+ and [=navigation state/source element=] is null.
-1. If the [=document's navigation API=] of the document is non-null and
- its [=activation=] is non-null,
- the document's [=has been revealed=] is false or
- was false at the start of the current [=task=],
- and the activation's {{NavigationActivation/entry}}'s
- {{NavigationHistoryEntry/url}}.
+ Note: this means that navigations that occur before the page is revealed, e.g. calling {{History/pushState()}} in the head do not reflect in CSS.
- NOTE: This part is for when the new document in the navigation
- has become the current document.
+1. Let |navigateEvent| be the [=ongoing navigate event=] of |navigation|.
- ISSUE: Does it make sense to expose this when
- the activation's {{NavigationActivation/from}} is null,
- and thus there is no [=current from URL=]?
+1. Let |phase| be `loading`.
-1. Otherwise, null.
+1. If |navigateEvent| is null and |navigation|'s [=traversing navigate event=] is not null:
+ 1. Set |navigateEvent| to |navigation|'s [=traversing navigate event=].
- NOTE: The previous two branches can also produce null results.
+ 1. Set |phase| to `ready`.
-ISSUE: The above definitions of from and to apparently don't work right
-if you start a same-document navigation (e.g., with {{History/pushState}})
-in the middle of a cross-document navigation.
+1. If |navigateEvent| is null, return null.
-The current navigation type of a [=/document=] is a {{NavigationType}} or null.
-It is defined as follows:
+1. Return a new [=navigation state=] whose
+ [=navigation state/old URL=] is |document|'s [=Document/URL=],
+ [=navigation state/new URL=] is |navigateEvent|'s {{NavigateEvent/destination}}'s {{NavigationDestination/url}},
+ [=navigation state/type=] is |ongoingNavigateEvent|'s {{NavigateEvent/navigationType}},
+ [=navigation state/old index=] is |navigation|'s [=navigation API/current entry=]'s {{NavigationHistoryEntry/index}},
+ [=navigation state/new index=] is |navigateEvent|'s {{NavigateEvent/destination}}'s {{NavigationDestination/index}},
+ [=navigation state/phase=] is |phase|,
+ and [=navigation state/source element=] is |ongoingNavigateEvent|'s {{NavigateEvent/sourceElement}}.
-1. If the [=document's navigation API=] of the document is non-null and
- its [=transition=] is non-null,
- the transition's {{NavigationTransition/navigationType}}.
-
- NOTE: This part is for when the old document in the navigation
- is still the current document.
-
-1. If the [=document's navigation API=] of the document is non-null and
- its [=activation=] is non-null,
- the document's [=has been revealed=] is false or
- was false at the start of the current [=task=],
- the activation's {{NavigationActivation/navigationType}}.
-
- NOTE: This part is for when the new document in the navigation
- has become the current document.
-
-1. Otherwise, null.
-
-The current navigation delta of a [=/document=] is a {{NavigationType}} or null.
-It is defined as follows:
-
-1. If the [=document's navigation API=] of the document is non-null and
- its [=transition=] is non-null,
-
- 1. If the transition's {{NavigationTransition/navigationType}} is not {{NavigationType/traverse}}, null.
-
- 1. Otherwise,
- the transition's {{NavigationTransition/to}}'s {{NavigationDestination/index}}
- minus
- the transition's {{NavigationTransition/from}}'s {{NavigationHistoryEntry/index}}.
-
- NOTE: This part is for when the old document in the navigation
- is still the current document.
-
-1. If the [=document's navigation API=] of the document is non-null,
- its [=activation=] is non-null,
- the activation's {{NavigationActivation/from}} is non-null, and
- the document's [=has been revealed=] is false or
- was false at the start of the current [=task=],
-
- 1. If the activation's {{NavigationActivation/navigationType}} is not {{NavigationType/traverse}}, null.
-
- 1. Otherwise,
- the activation's {{NavigationActivation/entry}}'s {{NavigationHistoryEntry/index}}
- minus
- the activation's {{NavigationActivation/from}}'s {{NavigationHistoryEntry/index}}.
-
- NOTE: This part is for when the new document in the navigation
- has become the current document.
-
-1. Otherwise, null.
-
-ISSUE: Generally improve integration with the HTML spec for these definitions,
-instead of monkeypatching.
-This includes the interaction with [=has been revealed=]
-and the interaction with the {{pageswap}} event,
-and other things where this section links to non-exported definitions.
-
-ISSUE: Generally figure out if these definitions should care about
-the [=ongoing navigate event=] or the [=transition=].
-
-
The ''url-pattern()'' function
-
-
+1. Let |state| be |document|'s [=current navigation state=].
+1. If |state| is null, return null.
+1. Return the result of switching on |relation|:
-The url-pattern() function represents a [=URL pattern=],
-which can be used to match URLs.
+
+: ''from''
+:: |state|'s [=navigation state/old URL=].
-This function represents a [=URL pattern=] that can be created
-using the steps of the create a URL pattern for url-pattern() algorithm:
+: ''at''
+:: |state|'s [=navigation state/new URL=] if |state|'s [=navigation state/phase=] is `committed`; Otherwise |state|'s [=navigation state/old URL=].
-1. Let arg be the <> argument to the ''url-pattern()'' function.
+: ''with''
+:: |state|'s [=navigation state/old URL=] if |state|'s [=navigation state/phase=] is `committed`; Otherwise |state|'s [=navigation state/new URL=].
-1. Let baseURL be the [=style resource base URL=] of
- the rule or declaration block containing the ''url-pattern()'' function.
+
-
- Do we want this to be the base URL all the time?
- For use of ''url-pattern()'' in ''@navigation'',
- it's likely more useful for the base URL
- to be the document URL rather than the style sheet URL.
- However, it would be very awkward for ''url-pattern()''
- to be inconsistent with ''url()''.
+To get the current navigation type of a [=/document=] |document|:
+ 1. If |document|'s [=current navigation state=] is non-null, return its [=navigation state/type=].
+ 1. Return null.
- Should we allow the base URL of ''url-pattern()''
- to be defined by the consumer?
- Should we introduce document-url-pattern()?
- Should we do something similar to
- [[css-images-3#ambiguous-urls]]
- (see )?
+The traversing navigate event is the [=ongoing navigate event=] which was reset when the [=ongoing navigation=] is set to `traversal`.
- Also see other proposed uses of {{URLPattern}} in CSS
- in ,
- for '':local-link''.
-
-1. Return the result of [=URL pattern/create|create a URL pattern=] given
- arg, baseURL, and an empty [=map=].
-NOTE: This function requires that its argument is quoted.
-This differs from the ''url()'' function,
-which allows its argument to be quoted or unquoted.
-
-To serialize a ''url-pattern()'' function f,
-[=serialize a function=] f,
-using [=serialize a string=] on the single argument
-to serialize f's contents.
-
-NOTE: This is defined this way because {{URLPattern}}
-intentionally does not provide a serialization.
+ISSUE: Improve integration with the HTML standard, especially the concept of [=traversing navigate event=] and unexported definitions.
Privacy Considerations
-No new privacy considerations have been reported on this specification.
+ISSUE: To be written.
Security Considerations
-No new security considerations have been reported on this specification.
+ISSUE: To be written.
diff --git a/css-overflow-3/Overview.bs b/css-overflow-3/Overview.bs
index e32500755dd0..1906c5fa7997 100644
--- a/css-overflow-3/Overview.bs
+++ b/css-overflow-3/Overview.bs
@@ -91,11 +91,12 @@ Introduction
which makes sense when the author's intent
is that the content not be shown.
- This specification introduces the long-standing de-facto 'overflow-x' and 'overflow-y' properties,
+ This specification defines the long-standing de-facto 'overflow-x' and 'overflow-y' properties,
adds a ''overflow/clip'' value,
+ introduces an 'overflow-clip-margin' property,
and defines overflow handling more fully.
-
- [Something something 'max-lines'.]
+ It also introduces control over smooth scrolling via 'scroll-behavior'
+ and for reserving space for the scrollbar via 'scrollbar-gutter'.
Note: This specification also reproduces the definition of the 'text-overflow' property
previously defined in [[CSS-UI-3]],
@@ -123,6 +124,11 @@ Module Interactions
and [[!CSS-UI-3]] section
5.2. Overflow Ellipsis: the text-overflow property.
+ When applied to 'display: table' elements,
+ the properties defined in this module apply to the [=table grid box=]
+ (not the [=table wrapper box=]).
+ [[!CSS2]] [[!CSS-TABLES-3]]
+
-
- Note: The scrollable overflow rectangle is always a rectangle
- in the box's own coordinate system, but might be non-rectangular
- in other coordinate systems due to transforms [[CSS3-TRANSFORMS]].
- This means scrollbars can sometimes appear when not actually necessary.
+ See [[#scrollable-overflow-calculation]] for details.
Scrolling Overflow
@@ -336,8 +234,9 @@ Scrolling Overflow
(through which the scrollable overflow area can be viewed)
coincides with its padding box,
and is called the scrollport.
- A box’s nearest scrollport
- is the [=scrollport=] of its nearest [=scroll container=] ancestor.
+ A box’s nearest scroll container
+ is the nearest [=scroll container=] ancestor in the [=containing block chain=].
+ (See [[#overflow-properties]] for control over whether a box clips or scrolls its overflow.)
Scrolling operations can be initiated by the user
(for example, by manipulating a scrollbar, swiping a touchscreen, or using keyboard controls)
@@ -364,12 +263,6 @@ Scrolling Overflow
Unless otherwise specified,
it is the [=block-start=] [=inline-start=] corner of the [=scrollable overflow rectangle=].
(For example, in a [=flex container=] it is the [=main-start=] [=cross-start=] corner.)
- Unless otherwise adjusted
- (e.g. [[css-align-3#overflow-scroll-position|by content alignment]] [[css-align-3]]),
- the area beyond the [=scroll origin=] in either axis
- is considered the unreachable scrollable overflow region:
- content rendered here is not accessible to the reader,
- see [[#scrollable]].
A [=scroll container=] is said to be scrolled to its [=scroll origin=]
when its [=scroll origin=] coincides with the corresponding corner of its [=scrollport=].
This [=scroll position=], the scroll origin position,
@@ -392,6 +285,13 @@ Scrolling Overflow
or away from the [=scroll origin=] is not defined.
Should each API define its coordinate model?
+ Unless otherwise adjusted
+ (e.g. [[css-align-3#overflow-scroll-position|by content alignment]] [[css-align-3]]),
+ the area beyond the [=scroll origin=] in either axis
+ is considered the unreachable scrollable overflow region:
+ content rendered here is not accessible to the reader,
+ see [[#scrollable]].
+
The root viewport, which scrolls the page [=canvas=],
uses the principal writing mode for determining
its [=scroll origin=] and [=initial scroll position=].
@@ -421,20 +321,39 @@ Scrolling Overflow
-->
-Scrolling and Clipping Overflow
+Clipping and Scrolling Overflow
+
+ The properties in this chapter specify whether and where a box’s [=overflow=] is clipped;
+ if so, whether it is a [=scroll container=];
+ and if so, in which axis(es) it is allowed to scroll (its scrollable axis(es)),
+ thus which of the following types of [=scroll container=] it is:
+
+
+
single-axis scroll container
+
+ A [=scroll container=] that is scrollable in only one axis.
+
+
dual-axis scroll container
+
+ A [=scroll container=] that is scrollable in both axes.
+
+
block-axis scroll container
+
inline-axis scroll container
+
x-axis scroll container
+
y-axis scroll container
+
+ A [=scroll container=] that is scrollable in the specified axis,
+ regardless of whether it can also scroll in the other axis.
+
Managing Overflow: the 'overflow-x', 'overflow-y', and 'overflow' properties
- These properties specify whether a box’s [=overflow=] is clipped,
- and if so,
- whether it is a [=scroll container=].
-
Name: overflow-x, overflow-y, overflow-block, overflow-inline
Value: visible | hidden | clip | scroll | auto
Initial: ''visible''
- Applies to: block containers [[!CSS2]], flex containers [[!CSS3-FLEXBOX]], grid containers [[!CSS3-GRID-LAYOUT]]
+ Applies to: [=block containers=] [[!CSS2]], [=flex containers=] [[!CSS-FLEXBOX-1]], [=grid containers=] [[!CSS-GRID-1]], and [=table grid boxes=] [[!CSS-TABLES-3]]
Inherited: no
Logical property group: overflow
Percentages: N/A
@@ -479,20 +398,18 @@ Managing Overflow: the 'overflow-x', 'overflow-y', and 'overflow' properties
There is no special handling of overflow, that is,
the box’s content is rendered outside the box if positioned there.
- The box is not a scroll container.
hidden
This value indicates that
- the box’s content is clipped to its [=padding box=]
+ the box’s content is clipped to its [=overflow clip edge=]
and that the UA must not provide any scrolling user interface
to view the content outside the clipping region,
nor allow scrolling by direct intervention of the user,
such as dragging on a touch screen
or using the scrolling wheel on a mouse.
However, the content must still be scrollable programmatically,
- for example using the mechanisms defined in [[CSSOM-VIEW]],
- and the box is therefore still a scroll container.
+ for example using the mechanisms defined in [[CSSOM-VIEW]].
clip
@@ -503,21 +420,20 @@ Managing Overflow: the 'overflow-x', 'overflow-y', and 'overflow' propertiesscroll container.
+ through any mechanism.
Unlike ''hidden'', this value does not cause
the element to establish a new formatting context.
Note: Authors who also want the box to establish a formatting context
- may use ''display: flow-root'' together with ''overflow: clip''.
+ can use ''display: flow-root'' together with ''overflow: clip''.
scroll
This value indicates that
- the content is clipped to the [=padding box=],
- but can be scrolled into view
- (and therefore the box is a scroll container).
+ the content is clipped to the [=overflow clip edge=],
+ but can be scrolled into view.
+
Furthermore, if the user agent uses a scrolling mechanism
that is visible on the screen (such as a scroll bar or a panner),
that mechanism should be displayed
@@ -539,25 +455,31 @@ Managing Overflow: the 'overflow-x', 'overflow-y', and 'overflow' properties
The ''overflow/scroll'', ''overflow/auto'', and ''overflow/hidden'' values
- are known as the scrollable values of 'overflow'.
+ are known as the scrollable values of 'overflow'.
+ They cause the box to be a [=scroll container=]
+ and the affected axis to be a [=scrollable axis=].
+ A [=block box=] that becomes a [=scroll container=]
+ also establishes an [=independent formatting context=].
+
The ''overflow/visible'' and ''overflow/clip'' values
are known as the non-scrollable values.
-
- The ''visible''/''overflow/clip'' values of 'overflow'
- compute to ''overflow/auto''/''hidden'' (respectively)
- if one of 'overflow-x' or 'overflow-y' is neither ''visible'' nor ''overflow/clip''.
- On [=replaced elements=],
- a [=computed value|computed=] ''overflow/hidden'' value further resolves
- to a [=used value=] of ''overflow/clip''.
-
- If the computed value of 'overflow' on a block box
- is neither ''overflow/visible'' nor ''overflow/clip'' nor a combination thereof,
- it [=establishes an independent formatting context=] for its contents.
+ However, if the other axis specifies a [=scrollable value=],
+ a specified value of ''visible''
+ [=computed value|computes=] to ''overflow/auto'',
+ enabling scrolling in its axis.
+ If neither axis computes to a [=scrollable value=],
+ the box is not a [=scroll container=].
+ If only one axis computes to a [=scrollable value=]
+ (i.e. the other axis is ''overflow/clip''),
+ the box is a [=single-axis scroll container=].
User agents must also support
the overlay keyword
as a [=legacy value alias=] of ''overflow/auto''.
+ Note: The 'overflow' properties are expanded to apply to [=replaced elements=]
+ in Level 4.
+
Interaction of 'visibility' and 'overflow'
@@ -618,12 +540,43 @@ Overflow in Print and Other Static Media
for example, e-book readers paginate content,
but are interactive.
+
+Overflow Viewport Propagation
+
+ UAs must apply the 'overflow' values
+ set on the root element to the viewport
+ when the root element’s 'display' value is not ''display/none''.
+ However,
+ when the root element is an [[!HTML]] <{html}> element
+ (including XML syntax for HTML)
+ whose 'overflow' value is ''overflow/visible'' (in both axes),
+ and that element has as a child
+ a <{body}> element whose 'display' value is also not ''display/none'',
+ user agents must instead apply the 'overflow' values
+ of the first such child element to the viewport.
+ The element from which the value is propagated must then have
+ a used 'overflow' value of ''overflow/visible''.
+
+ Note: Using [=containment=] on the HTML <{html}> or <{body}> elements disables
+ this special handling of the HTML <{body}> element.
+ See the [[CSS-CONTAIN-1#contain-property]] for details.
+
+ Note: ''overflow: hidden'' on the root element
+ might not clip everything outside the [=Initial Containing Block=]
+ if the ICB is smaller than the viewport,
+ which can happen on mobile.
+
+ If ''overflow/visible'' is applied to the viewport,
+ it must be interpreted as ''overflow/auto''.
+ If ''overflow/clip'' is applied to the viewport,
+ it must be interpreted as ''overflow/hidden''.
+
Expanding Clipping Bounds: the 'overflow-clip-margin' property
Name: overflow-clip-margin
- Value: <> || <>
+ Value: <> || <>
Initial: ''0px''
Inherited: no
Applies to: boxes to which 'overflow' applies
@@ -632,10 +585,8 @@ Expanding Clipping Bounds: the 'overflow-clip-margin' property
This property defines the overflow clip edge of the box,
- i.e. precisely how far outside its bounds
- the box’s content is allowed to paint
- before being clipped
- by effects (such as ''overflow: clip'', above)
+ i.e. precisely where the box's content is allowed to paint
+ before being clipped by effects (such as ''overflow: clip'', above)
that are defined to clip to the box’s [=overflow clip edge=].
Values are defined as follows:
@@ -649,12 +600,12 @@ Expanding Clipping Bounds: the 'overflow-clip-margin' property
If omitted,
defaults to ''overflow-clip-margin/padding-box''.
- : <>
+ : <>
::
The specified offset dictates
how much the [=overflow clip edge=] is expanded from
- the specified box edge
- Negative values are invalid.
+ the specified box edge.
+ Negative values indicate insets, instead.
Defaults to zero if omitted.
@@ -666,41 +617,139 @@ Expanding Clipping Bounds: the 'overflow-clip-margin' property
and [[css-backgrounds-3#shadow-shape]],
noting in particular the formula for outsets beyond the [=border edge=].
- Note: This property has no effect on boxes
- with ''overflow: hidden'' or ''overflow: scroll'',
- which are not defined to use the [=overflow clip edge=].
+ If the box is a [=scroll container=]:
-
-Overflow Viewport Propagation
+ * the [=overflow clip edge=] is clamped to stay within the element's [=padding box=].
+ (This does not affect the [=computed value|computed=] or [=used value=] of this property.)
+ * the ''overflow-clip-margin/border-box'' value
+ ignores any specified offset
+ (and, due to the previous bullet point,
+ effectively acts as ''overflow-clip-margin/padding-box'')
- UAs must apply the 'overflow-*' values
- set on the root element to the viewport
- when the root element’s 'display' value is not ''display/none''.
- However,
- when the root element is an [[!HTML]] <{html}> element
- (including XML syntax for HTML)
- whose 'overflow' value is ''overflow/visible'' (in both axes),
- and that element has as a child
- a <{body}> element whose 'display' value is also not ''display/none'',
- user agents must instead apply the 'overflow-*' values
- of the first such child element to the viewport.
- The element from which the value is propagated must then have
- a used 'overflow' value of ''overflow/visible''.
+ Note: This property was previously defined to only affect ''overflow: clip''.
+ It now also affects [=scroll containers=],
+ but only to shrink the clipping edge.
- Note: Using [=containment=] on the HTML <{html}> or <{body}> elements disables
- this special handling of the HTML <{body}> element.
- See the [[CSS-CONTAIN-1#contain-property]] for details.
+
+Calculating the Scrollable Overflow Area
- Note: ''overflow: hidden'' on the root element
- might not clip everything outside the [=Initial Containing Block=]
- if the ICB is smaller than the viewport,
- which can happen on mobile.
+ The scrollable overflow area of a box is the union of:
+
+
+ Its own [=padding box=].
- If ''overflow/visible'' is applied to the viewport,
- it must be interpreted as ''overflow/auto''.
- If ''overflow/clip'' is applied to the viewport,
- it must be interpreted as ''overflow/hidden''.
+
+ All [=line boxes=] it directly contains.
+
+
+ The border boxes
+ of all boxes for which it is the containing block
+ and whose border boxes are positioned not wholly
+ within its [=unreachable scrollable overflow region=] (if any),
+ accounting for transforms by projecting each box onto
+ the plane of the element that establishes its 3D rendering context.
+ [[!CSS3-TRANSFORMS]]
+
+ Issue: Is this description of handling transforms
+ sufficiently accurate?
+
+ Border boxes with zero area
+ do not affect the [=scrollable overflow area=].
+
+
+ The margin areas of grid item and flex item boxes
+ for which the box establishes a containing block.
+
+ The UA may additionally include
+ the margin areas of other boxes
+ for which the box establishes a containing block;
+ however,
+ the conditions under which such margin areas are included
+ is undefined in this level.
+ This needs further testing and investigation;
+ is therefore deferred in this draft.
+
+ The [=scrollable overflow rectangles=] of all of the above boxes
+ (including zero-area boxes),
+ clipped to their [=overflow clip edge=]
+ if 'overflow' is not ''overflow/visible'' or 'contain' applies ''contain/paint'',
+ and accounting for transforms as described above.
+
+ Note: The 'clip', 'clip-path', and 'mask-*' properties [[!CSS-MASKING-1]]
+ do not affect the scrollable overflow area.
+ Only effects that clip to the [=overflow clip edge=] are taken into account.
+
+ Note: The [=scrollable overflow rectangle=] is always a rectangle
+ in its box's own coordinate system, but might be non-rectangular
+ in ancestor coordinate systems due to transforms [[CSS3-TRANSFORMS]].
+ This means scrollbars can sometimes appear when not actually necessary.
+
+
+ Additional padding added
+ to the [=scrollable overflow rectangle=]
+ as necessary to enable scroll positions
+ that satisfy the requirements of both
+ ''place-content: start'' and ''place-content: end'' alignment.
+
+ Note: This padding represents,
+ within the [=scrollable overflow rectangle=],
+ the box’s own padding
+ so that when its content is scrolled to its end,
+ there is padding between the edge of its [=in-flow=] (or floated) content
+ and the border edge of the box.
+ It typically ends up being exactly the same size as the box's own padding,
+ except in a few cases--
+ such as when an [=out-of-flow=] positioned element,
+ or the visible overflow of a descendent,
+ has already increased the size of the [=scrollable overflow rectangle=]
+ outside the conceptual “content edge” of the [=scroll container=]’s content.
+
+
+
+
+ Issue: Replace this image with a proper SVG.
+
+
+
+
+
+ Additionally, due to Web-compatibility constraints
+ (caused by authors exploiting legacy bugs to surreptitiously hide content from visual readers but not search engines and/or speech output),
+ UAs must clip any content in the [=unreachable scrollable overflow region=].
+
+ Note: The [=content-distribution properties=] can
+ [[css-align-3#overflow-scroll-position|alter the unreachable scrollable overflow region]]
+ to ensure that a [=scroll container=]’s [=alignment subject=]
+ is reachable after alignment.
+ [[css-align-3]]
+
+
+
+
+Scrolling Behaviors and Animations
+
+CSS provides several controls over how scrolling behaves when triggered.
+ * CSS Scroll Snap allows defining "snap positions",
+ which are scroll positions to which the [=scroll container=] is biased to land.
+ * CSS Overscroll Behavior
+ allows controlling what happens when scrolling past the end of the scrollable area.
+ * 'scroll-behavior', defined below, controls whether programmatic scrolling animates smoothly or not.
+
+ Note: For animating other things in conjunction with scrolling, see [[SCROLL-ANIMATIONS-1]].
Smooth Scrolling: the 'scroll-behavior' Property
@@ -745,11 +794,11 @@ Scrollbars and Layout
Scrollbar Contributions to Sizing
- When reserving space for a scrollbar placed at the edge of an element's box,
- the reserved space is inserted between the inner border edge
- and the outer padding edge.
- For the purpose of the background positioning area and background painting area however,
- this reserved space is considered to be part of the [=padding box=].
+ The space reserved for the scrollbar is located between
+ the [=padding area=] and the [=border area=] of the [=scroll container=] box.
+ However, for the purpose of the background positioning area
+ and background painting area,
+ this reserved space is treated as part of the [=padding area=].
In the following document fragment,
@@ -1291,6 +1340,15 @@ ellipsis interaction with scrolling interfaces
This appendix is informative.
+ Significant changes since the 7 October 2025 Working Draft:
+ * Allow combining ''overflow: clip'' behavior in one axis with scrolling in the other,
+ to allow single-axis trapping for e.g. [=sticky positioning=].
+ (Issue 12289)
+ * Clarify which clipping affects limit contributions to the scrollable overflow area of the nearest [=scroll container=].
+ (Issue 8607)
+ * Clarify application of 'overflow' to tables.
+ (Isue 10881)
+
Significant changes since the 29 March 2023 Working Draft:
* Define that ''overflow: hidden'' is treated as ''overflow: clip'' on [=replaced elements=].
diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs
index ea8b3f6a607a..bda42d7115cd 100644
--- a/css-overflow-4/Overview.bs
+++ b/css-overflow-4/Overview.bs
@@ -24,6 +24,7 @@ spec:css-pseudo-4; type:selector; text:::first-letter
spec:css-pseudo-4; type:selector; text:::first-line
spec:css-writing-modes-4; type:dfn; text:start
spec:css-writing-modes-4; type:dfn; text:end
+spec:dom; type:dfn; for: Document; text:mode
url: https://drafts.csswg.org/selectors-3/#subject; type: dfn; text: subject;
@@ -216,11 +217,11 @@ Managing Overflow: the 'overflow-x', 'overflow-y', and 'overflow' properties
-Expanding Clipping Bounds: the 'overflow-clip-margin-*' properties
+Changing Clipping Bounds: the 'overflow-clip-margin-*' properties
Name: overflow-clip-margin, overflow-clip-margin-inline, overflow-clip-margin-block
- Value: <> || <>
+ Value: <> || <>
Initial: ''0px''
Inherited: no
Applies to: boxes to which 'overflow' applies
@@ -262,12 +263,12 @@ Expanding Clipping Bounds: the 'overflow-clip-margin-*' properties
ISSUE(7144): Application of 'overflow-clip-margin' to [=replaced elements=]
is still being worked out.
- : <>
+ : <>
::
The specified offset dictates
how much the [=overflow clip edge=] is expanded from
- the specified box edge
- Negative values are invalid.
+ the specified box edge.
+ Negative values shrink the box, instead.
Defaults to zero if omitted.
@@ -279,10 +280,6 @@ Expanding Clipping Bounds: the 'overflow-clip-margin-*' properties
and [[css-backgrounds-3#shadow-shape]],
noting in particular the formula for outsets beyond the [=border edge=].
- Note: This property has no effect on boxes
- with ''overflow: hidden'' or ''overflow: scroll'',
- which are not defined to use the [=overflow clip edge=].
-
Automatic Ellipses
@@ -929,11 +926,23 @@ Indicating Block-Axis Overflow: the 'block-ellipsis' property
If this results in the entire contents of the line box being displaced,
the line box is considered to contain a [=strut=], as defined in [[CSS2/visudet#leading]].
+
+ This requirement applies regardless of the document's [=mode=],
+ and is not affected by the [[quirks#the-blocks-ignore-line-height-quirk|line-height quirk]].
+
+
+
block-ellipsis-016.html
block-ellipsis-018.html
block-ellipsis-025.html
+ block-ellipsis-quirk-001.html
Displacing content to make room for the [=block overflow ellipsis=]
@@ -1309,6 +1318,7 @@ Forcing a Break After a Set Number of Lines: the 'max-lines' property
webkit-line-clamp-013.html
webkit-line-clamp-027.html
webkit-line-clamp-029.html
+ line-clamp-with-floats-007.html
Note: This implies that 'max-lines' has no effect when applied to [=multi-column containers=],
@@ -1700,6 +1710,8 @@ Handling of Excess Content: the 'continue' property
line-clamp-033.html
line-clamp-auto-033.html
line-clamp-auto-with-ruby-002.html
+ line-clamp-with-floats-003.html
+ line-clamp-with-floats-004.html
- Any [=line boxes=] that follow the [=clamp point=]
@@ -1763,6 +1775,7 @@ Handling of Excess Content: the 'continue' property
is always counted as [=ink overflow=] rather than [=scrollable overflow=].
+ line-clamp-with-floats-010.html
line-clamp-021.html
line-clamp-with-abspos-019.html
@@ -1772,12 +1785,20 @@ Handling of Excess Content: the 'continue' property
Within a [=line-clamp container=],
floats which have not been made into [=invisible boxes=]
- must be visually clipped to the [=content edge=]
+ must be visually clipped to the [=block-end=] [=content edge=]
of the [=line-clamp container=].
They do not introduce any clearance
that would make the [=line-clamp container=] increase its height,
and do not contribute to the [=scrollable overflow area=].
+
+ line-clamp-with-floats-001.html
+ line-clamp-with-floats-002.html
+ line-clamp-with-floats-005.html
+ line-clamp-with-floats-006.html
+ line-clamp-with-floats-010.html
+
+
If a [=block container=] contains a [=clamp point=],
within itself or in any of its descendants,
its [=automatic block size=] will not take into account any invisible boxes,
diff --git a/css-overscroll-1/Overview.bs b/css-overscroll-1/Overview.bs
index bbfaa1e5ba29..9e8bfded6364 100644
--- a/css-overscroll-1/Overview.bs
+++ b/css-overscroll-1/Overview.bs
@@ -162,7 +162,7 @@ use preventDefault instead.
Name: overscroll-behavior
-Value: [ contain | none | auto ]{1,2}
+Value: [ contain | none | auto | chain ]{1,2}
Initial: auto auto
Applies to: scroll container elements
Inherited: no
@@ -192,6 +192,11 @@ Values have the following meanings:
This value implies the same behavior as contain and in
addition this element must also not perform local boundary default actions such as
showing any overscroll affordances.
+
This value indicates that the user agent should perform the usual boundary default action
@@ -250,7 +255,7 @@ Physical Longhands for 'overscroll-behavior' {#overscroll-behavior-longhands-ph
Name: overscroll-behavior-x, overscroll-behavior-y
-Value: contain | none | auto
+Value: contain | none | auto | chain
Initial: auto
Applies to: scroll container elements
Inherited: no
@@ -274,7 +279,7 @@ Flow-relative Longhands for 'overscroll-behavior' {#overscroll-behavior-longhan
Name: overscroll-behavior-inline, overscroll-behavior-block
-Value: contain | none | auto
+Value: contain | none | auto | chain
Initial: auto
Applies to: scroll container elements
Inherited: no
diff --git a/css-print/Overview.bs b/css-print/Overview.bs
index 32f8c5253068..5cecb324cabe 100644
--- a/css-print/Overview.bs
+++ b/css-print/Overview.bs
@@ -574,8 +574,8 @@ small-caption | status-bar | inherit
diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs
index 46b26bb8fefc..331854a6d17f 100644
--- a/css-pseudo-4/Overview.bs
+++ b/css-pseudo-4/Overview.bs
@@ -1387,8 +1387,11 @@ Security Considerations for Highlighting
can leak information about the contents of a user's dictionary
(which can include the user's name and even includes the contents of their address book!)
UAs that implement ''::spelling-error'' and ''::grammar-error''
- must prevent pages from being able to read
- the styling of such highlighted segments.
+ must mitigate the following attacks:
+
+
Pages attempting to directly read the styling of highlighted segments.
+
Pages attempting to track performance impacts of styling highlighted segments via programatic modification of text fields.
+
Tree-Abiding Pseudo-elements
@@ -1807,7 +1810,9 @@ Additions to the CSS Object Model
The type attribute
is a string representing the type of the pseudo-element.
- This can be one of the following values:
+ This can be any standardized [=tree-abiding pseudo-element=]
+ that is not an [=element-backed pseudo-element=],
+ for example:
"::before"
@@ -1816,6 +1821,10 @@ Additions to the CSS Object Model
Represents the ''::after'' pseudo-element.
"::marker"
Represents the ''::marker'' pseudo-element.
+
"::backdrop"
+
Represents the ''::backdrop'' pseudo-element.
+
"::view-transition"
+
Represents the ''::view-transition'' pseudo-element.
The element attribute is the
@@ -1878,7 +1887,13 @@ Additions to the CSS Object Model
2. If |type| is failure,
return null.
- 3. Otherwise, return the {{CSSPseudoElement}} object
+ 3. If |type| is an [=element-backed pseudo-element=],
+ return null.
+
+ 4. If |type| is not a [=tree-abiding pseudo-element=],
+ return null.
+
+ 5. Otherwise, return the {{CSSPseudoElement}} object
representing the pseudo-element
that would match the selector |type|
with [=this=] as its [=originating element=].
diff --git a/css-ruby-1/Overview.bs b/css-ruby-1/Overview.bs
index c4d0b6343c15..4420bc0346e9 100644
--- a/css-ruby-1/Overview.bs
+++ b/css-ruby-1/Overview.bs
@@ -20,10 +20,16 @@ Editor: Florian Rivoal, Invited Expert, https://florian.rivoal.net/, w3cid 43241
Abstract: “Ruby”, a form of interlinear annotation, are short runs of text alongside the base text.
Abstract: They are typically used in East Asian documents to indicate pronunciation or to provide a short annotation.
Abstract: This module describes the rendering model and formatting controls related to displaying ruby annotations in CSS.
+WPT Path Prefix: /css/css-ruby/
spec:css-box-4; type:dfn; text:content area
spec:css-text-3; type:dfn; text:character
+spec:css-text-3; type:dfn; text:other space separators
+spec:css-text-4; type:dfn;
+ text:fullwidth opening punctuation
+ text:fullwidth closing punctuation
+ text:fullwidth middle dot punctuation
spec:css-writing-modes-4; type:dfn; text:bidi isolation
spec:html-ruby-extensions; type:element;
text:rp
@@ -210,7 +216,7 @@ Ruby-specific 'display' Values
this is done with the 'display' property.
-
@@ -1128,8 +1134,8 @@ Styling Ruby Boxes
(''vertical-align/top'', ''vertical-align/bottom'')
must be ignored (treated as zero).
- Neither the [=margin=], [=padding=], [=border=] properties
- nor the any properties that do not apply to [=inline boxes=]
+ Neither the [=margin=], [=padding=], and [=border=] properties
+ nor any of the properties that do not apply to [=inline boxes=]
apply to [=base containers=] or [=annotation containers=].
Additionally, 'line-height' does not apply to [=annotation containers=].
@@ -1821,7 +1827,7 @@ Overhanging Ruby: the 'ruby-overhang' property
Name: ruby-overhang
- Value: auto | none
+ Value: auto | spaces
Initial: auto
Applies to: ruby annotation containers
Inherited: yes
@@ -1844,10 +1850,42 @@ Overhanging Ruby: the 'ruby-overhang' property
Whether, how much, and under which conditions to overhang
are determined by the UA.
-
none
+
spaces
- A [=ruby annotation container=] is never allowed
- to extend past the [=ruby annotation container=].
+ When a [=ruby annotation container=] is longer than
+ its corresponding [=ruby base container=],
+ the [=ruby annotation container=] must not
+ overlap adjacent boxes,
+ except over adjacent spaces.
+
+ For this purpose,
+ spaces are any of the following:
+ * [=preserved white space=]
+ * no-break space (U+00A0)
+ * [=other space separators=]
+ * half of the [=advance measure=] of [=fullwidth opening punctuation=],
+ on the [=inline-start=] side of the character,
+ unless it has been trimmed by 'text-spacing-trim'
+ * half of the [=advance measure=] of [=fullwidth closing punctuation=],
+ on the [=inline-end=] side of the character,
+ unless it has been trimmed by 'text-spacing-trim'
+ * one quarter of the [=advance measure=] of [=fullwidth middle dot punctuation=],
+ on both the [=inline-start=] and [=inline-end=] sides of the character,
+ unless it has been trimmed by 'text-spacing-trim'
+
+
+ ruby-overhang-spaces-001.html
+ ruby-overhang-spaces-002.html
+ ruby-overhang-spaces-003.html
+ ruby-overhang-spaces-004.html
+ ruby-overhang-spaces-005.html
+
When [=ruby annotations=] are not allowed to overhang,
@@ -1871,6 +1909,10 @@ Overhanging Ruby: the 'ruby-overhang' property
and the ruby container’s [=annotation boxes=]
or its overlapped [=base=]’s contents.
+
+ ruby-overhang-no-overlap.html
+
+
@@ -1900,6 +1942,16 @@ Overhanging Ruby: the 'ruby-overhang' property
for Japanese are described by [[JLREQ]].
+ Additionally, for compatibility reasons,
+ user agents must support an additional value of none
+ for the 'ruby-overhang' property,
+ as a [=legacy value alias=] of ''ruby-overhang/spaces''.
+
+
+ ruby-overhang.html
+ ruby-overhang-dynamic.html
+
+
Line-edge Alignment
diff --git a/css-scroll-anchoring-1/Overview.bs b/css-scroll-anchoring-1/Overview.bs
index f12e90b53011..bbd7fbc7d29f 100644
--- a/css-scroll-anchoring-1/Overview.bs
+++ b/css-scroll-anchoring-1/Overview.bs
@@ -21,6 +21,7 @@ Abstract: This spec also proposes an API for web developers to opt-out of this b
spec:css-box; type:dfn; text:content area
+spec:cssom-view-1; type:dfn; text:scrolling area
spec:css2;
type:dfn; text:line box
spec:css-sizing-3;
@@ -139,17 +140,19 @@ non-atomic inline element as the priority candidate.
The anchor node selection algorithm
for a scrolling box |S| is as follows:
- 1. If |S| is associated with an element
+ 1. If |S| is generated by an element
whose computed value of the 'overflow-anchor' property is ''overflow-anchor/none'',
then do not select an anchor node for |S|.
- 2. Otherwise, for each priority candidate |PC| in order specified,
+ 2. If |S| is not scrolled away from the origin of its scrolling area in its
+ block flow direction, then do not select an anchor node for |S|.
+ 3. Otherwise, for each priority candidate |PC| in order specified,
check if |PC| is a viable candidate in |S|.
If so, perform the candidate examination algorithm for |PC| in |S| and terminate.
Note: Since the priority candidate itself is checked to be viable, the candidate examination algorithm
is guaranteed to select at least the candidate node itself.
- 3. Otherwise, for each DOM child |N| of the element or document associated with |S|,
+ 4. Otherwise, for each DOM child |N| of the element or document associated with |S|,
perform the candidate examination algorithm for |N| in |S|,
and terminate if it selects an anchor node.
@@ -182,17 +185,13 @@ non-atomic inline element as the priority candidate.
content to shift without triggering any scroll anchoring adjustment.
-Conceptually, a new anchor node is computed for every scrolling box
-whenever the scroll position of any scrolling box changes.
-(As a performance optimization,
-the implementation may wait until the anchor node is needed before computing it.)
-
A DOM node |N| is an excluded subtree
if it is an element and any of the following conditions holds:
* |N|’s computed value of the 'display' property is ''display/none''.
* |N|’s computed value of the 'position' property is ''position/fixed''.
+ * |N|’s computed value of the 'position' property is ''position/sticky''.
* |N|’s computed value of the 'position' property is ''position/absolute''
and |N|’s containing block is an ancestor of the scrolling box.
* |N|’s computed value of the 'overflow-anchor' property is ''overflow-anchor/none''.
@@ -218,6 +217,18 @@ the implementation may wait until the anchor node is needed before computing it.
is |N|’s scrollable overflow rectangle.
+
+Invalidation
+
+An anchor node is considered valid for a scrolling box until any of the following occur:
+ * The scroll position of the scrolling box changes (excluding adjustments originating from scroll anchoring).
+ * A suppression trigger suppresses a scroll adjustment.
+ * The anchor node is removed from the DOM.
+
+Once an anchor node has become invalid, the anchor node selection algorithm must be run again to compute the anchor node
+
+As a performance optimization, implementations may wait until the anchor node is needed before computing it.
+
Scroll Adjustment
diff --git a/css-scroll-snap-2/Overview.bs b/css-scroll-snap-2/Overview.bs
index 73e4d35e3d03..ac22bc8b95bb 100644
--- a/css-scroll-snap-2/Overview.bs
+++ b/css-scroll-snap-2/Overview.bs
@@ -231,7 +231,7 @@ Issue: The ':snapped' pseudo-class is being dropped in favor of a
The Snapped-element Pseudo-class: '':snapped'' {#snapped}
-------------------------------------------------------
-The :snapped pseudo-class matches any scroll snap targets,
+The :snapped pseudo-class matches any [=snap targets=],
regardless of axis.
The longform physical and logical pseudo-class selectors
allow for more finite snapped children styling
diff --git a/css-shadow-1/Overview.bs b/css-shadow-1/Overview.bs
index 64f7a0133432..031f5d930cbf 100644
--- a/css-shadow-1/Overview.bs
+++ b/css-shadow-1/Overview.bs
@@ -605,6 +605,22 @@ Selecting Slot-Assigned Content: the ''::slotted()'' pseudo-element
The only way to style assigned text nodes
is by styling the slot and relying on inheritance.
+
+ css-scoping-shadow-slotted-nested.html
+ css-scoping-shadow-slotted-rule.html
+ reslot-text-inheritance.html
+ slotted-invalidation.html
+ slotted-link.html
+ slotted-matches.html
+ slotted-nested.html
+ slotted-parsing.html
+ slotted-placeholder.html
+ slotted-slot.html
+ slotted-specificity-002.html
+ slotted-specificity.html
+ slotted-with-pseudo-element.html
+
+
Matching on the Presence of Slot-Assigned Nodes: the '':has-slotted'' pseudo-class
@@ -625,8 +641,6 @@ Matching on the Presence of Slot-Assigned Nodes: the '':has-slotted'' pseudo-cla
as the latter would not match slotted text nodes, but '':has-slotted'' does.
- css-scoping-shadow-slotted-nested.html
- css-scoping-shadow-slotted-rule.html
has-slotted-001.html
has-slotted-002.html
has-slotted-003.html
@@ -638,17 +652,6 @@ Matching on the Presence of Slot-Assigned Nodes: the '':has-slotted'' pseudo-cla
has-slotted-flattened-004.html
has-slotted-manual-assignment.html
has-slotted-query-selector.html
- reslot-text-inheritance.html
- slotted-invalidation.html
- slotted-link.html
- slotted-matches.html
- slotted-nested.html
- slotted-parsing.html
- slotted-placeholder.html
- slotted-slot.html
- slotted-specificity-002.html
- slotted-specificity.html
- slotted-with-pseudo-element.html
@@ -971,7 +978,7 @@ spec:css-display-4; type:property; text:display
Name: border-spacing
- Value: <>{1,2}
+ Value: <>{1,2}
Initial: 0px 0px
Inherited: yes
Applies To: table grid boxes when 'border-collapse' is ''border-collapse/separate''
@@ -980,7 +987,7 @@ spec:css-display-4; type:property; text:display
The lengths specify the distance that separates adjoining cell borders in separated-borders mode,
- and must not be strictly negative.
+ and must be non-negative.
If one length is specified, it gives both the horizontal and vertical spacing.
If two are specified, the first gives the horizontal spacing and the second the vertical spacing.
@@ -1273,6 +1280,7 @@ spec:css-display-4; type:property; text:display
+ collapsed-border-writing-mode-color.html
subpixel-collapsed-borders-001.html
subpixel-collapsed-borders-002.html
subpixel-collapsed-borders-003.html
@@ -1284,7 +1292,7 @@ spec:css-display-4; type:property; text:display
Harmonization Algorithm for Collapsed Borders
For the purpose of this algorithm, “considering” a border’s properties means
- that “if its properties are more specific than CurrentlyWinningBorderProperties,
+ that “if its properties are more specific than CurrentlyWinningBorderProperties,
set CurrentlyWinningBorderProperties to its properties”.
For each border BCi:
For each table-row spanned by the Ci cell, if any.
- Consider the border’s properties of any border of the table-column that would be drawn contiguously to BCi.
+ Consider the border’s properties of any border of the table-row that would be drawn contiguously to BCi.
For each border BCi:
- For each table-row-group containing a column spanned by the Ci cell, if any.
+ For each table-row-group containing a row spanned by the Ci cell, if any.
Consider the border’s properties of any border of the table-row-group that would be drawn contiguously to BCi.
- If none of these criterion matches, then both borders share the same specificity.
+ If none of these criteria match, then both borders share the same specificity.
Computing table measures
@@ -1521,7 +1533,7 @@ spec:css-display-4; type:property; text:display
based on the table width (if it is definite, otherwise use 0).
For the purpose of calculating the outer min-content width of cells,
- descendants of table cells whose width depends on percentages of their parent cell' width
+ descendants of table cells whose width depends on percentages of their parent cell's width
are considered to have an auto width.
TestcaseTestcase
@@ -1566,7 +1578,11 @@ spec:css-display-4; type:property; text:display
where the contribution of a cell is the result of taking the following steps:
Define the baseline min-content width
- as the sum of the max-content widths based on cells of span up to N-1
+ as the sum of the min-content widths based on cells of span up to N-1
+ of all columns that the cell spans.
+
+
Define the baseline max-content width
+ as the sum of the max-content widths based on cells of span up to N-1
of all columns that the cell spans.
Define the baseline border spacing as the sum of the horizontal
@@ -1715,9 +1731,12 @@ spec:css-display-4; type:property; text:display
height-distribution/computing-row-measure-1.html
height-distribution/percentage-sizing-of-table-cell-children.html
height-distribution/percentage-sizing-of-table-cell-replaced-children-001.html
+ table-colspan-percent-auto.html
width-distribution/computing-column-measure-0.html
width-distribution/computing-column-measure-1.html
width-distribution/computing-column-measure-2.html
+ width-distribution/td-max-width-auto-layout.html
+ width-distribution/td-min-width-auto-layout.html
Drawing cell borders
@@ -3171,6 +3191,9 @@ With a table-internal box as non-containing block parent
border-writing-mode-dynamic-001.html
+ collapsed-border-sideways-rl-rtl-overflow.html
+ collapsed-border-vertical-lr-rtl-overflow.html
+ collapsed-border-vertical-rtl-overflow.html
@@ -3904,4 +3927,4 @@ Significant changes since the https://drafts.csswg.org/css-text-3/test-coverage
Implementation Report: https://test.csswg.org/harness/results/css-text-3_dev/grouped/
@@ -273,7 +273,7 @@ Languages and Typesetting
Note: Authors can declare the [=content language=]
using the global lang attribute in HTML
or the universal xml:lang attribute in XML.
- See the rules for determining the content language of an HTML element
+ See the rules for determining the content language of an HTML element
in HTML,
and the [[XML#sec-lang-tag|rules for determining the content language of an XML element]] in XML 1.0.
[[HTML]]
@@ -848,7 +848,7 @@ Mapping Rules
For ''capitalize'', what constitutes a “word“ is UA-dependent;
[[!UAX29]] is suggested (but not required)
for determining such word boundaries.
- [=Out-of-flow=] elements and inline element boundaries
+ [=Out-of-flow boxes=] and [=inline box=] boundaries
must not introduce a 'text-transform' word boundary
and must be ignored when determining such word boundaries.
@@ -1072,9 +1072,9 @@ White Space and Wrapping: the 'white-space' property
This value directs user agents to collapse sequences of [=white space=]
into a single character
(or [[#line-break-transform|in some cases]], no character).
- Lines may wrap at allowed [=soft wrap opportunities=],
+ Lines may [=wrap=] at allowed [=soft wrap opportunities=],
as determined by the line-breaking rules in effect,
- in order to minimize inline-axis overflow.
+ in order to minimize [=inline-axis=] overflow.
white-space/white-space-normal-011.html
@@ -1143,7 +1143,7 @@ White Space and Wrapping: the 'white-space' property
Like ''white-space/normal'',
this value collapses [=white space=];
- but like ''pre'', it does not allow wrapping.
+ but like ''pre'', it does not allow [=wrapping=].
white-space/white-space-nowrap-011.html
@@ -1171,7 +1171,7 @@ White Space and Wrapping: the 'white-space' property
Like ''pre'',
this value preserves [=white space=];
but like ''white-space/normal'',
- it allows wrapping.
+ it allows [=wrapping=].
white-space/pre-wrap-001.html
@@ -1397,7 +1397,7 @@ White Space and Wrapping: the 'white-space' property
Like ''white-space/normal'',
this value collapses consecutive [=white space characters=]
- and allows wrapping,
+ and allows [=wrapping=],
but it preserves [=segment breaks=] in the source as [=forced line breaks=].
@@ -2961,6 +2961,9 @@ Line Breaking and Word Boundaries
the UA must minimize the amount of content overflowing a line
by wrapping the line at a [=soft wrap opportunity=],
if one exists.
+ Valid [=soft wrap opportunities=] depend
+ on the [=content language=] and writing system,
+ as well as on CSS properties that control them.
line-breaking/line-breaking-020.html
@@ -2968,8 +2971,10 @@ Line Breaking and Word Boundaries
In most writing systems,
in the absence of hyphenation a [=soft wrap opportunity=] occurs only at word boundaries.
- Many such systems use [=spaces=] or punctuation to explicitly separate words,
+ Many such systems (such as English written using the Latin alphabet)
+ use [=spaces=] or punctuation to explicitly separate words,
and [=soft wrap opportunities=] can be identified by these characters.
+
Scripts such as Thai, Lao, and Khmer, however,
do not use spaces or punctuation to separate words.
Although the zero width space (U+200B) can be used as an explicit word delimiter
@@ -2979,11 +2984,15 @@ Line Breaking and Word Boundaries
to correctly identify [=soft wrap opportunities=] in such texts.
In some other writing systems,
+ notably Brahmic scripts such as Javanese and Balinese,
[=soft wrap opportunities=] are based on orthographic syllable boundaries,
not word boundaries.
- Some of these systems, such as Javanese and Balinese,
- are similar to Thai and Lao in that they
- require analysis of the text to find breaking opportunities.
+ Although orthographic syllable breaking
+ does not depend on the [=content language=]
+ or require lexical resource,
+ it nonetheless requires analysis of the text
+ to find breaking opportunities.
+
In others such as Chinese (as well as Japanese, Yi, and sometimes also Korean),
each syllable tends to correspond to a single [=typographic letter unit=],
and thus line breaking conventions allow the line to break
@@ -3321,256 +3330,6 @@ Line Breaking and Word Boundaries
shaping/shaping_lig-001.html
-
-Line Breaking Details
-
-
-
- When determining [=line breaks=]:
-
-
-
- The interaction of [=line breaking=] and bidirectional text is defined by
- [[css-writing-modes-4#bidi-algo]]
- and the Unicode Bidirectional Algorithm
- (UAX9§3.4 Reordering Resolved Levels in particular).
- [[!CSS-WRITING-MODES-4]]
- [[!UAX9]]
-
-
- bidi-breaking-001.xht
- bidi-breaking-002.xht
- bidi-breaking-003.xht
-
-
-
- Preserved segment breaks, and--
- regardless of the 'white-space' value--
- any Unicode character with the BK and NL line breaking class,
- must be treated as forced line breaks.
- [[!UAX14]]
-
-
- line-breaking/line-breaking-022.html
-
-
- Note: The bidi implications of such [=forced line breaks=]
- are defined by the Unicode Bidirectional Algorithm.
- [[!UAX9]]
-
-
- Except where explicitly defined otherwise
- (e.g. for ''line-break: anywhere'' or ''overflow-wrap: anywhere'')
- line breaking behavior defined for
- the WJ,
- ZW,
- GL,
- and ZWJ
- Unicode line breaking classes
- must be honored.
- [[!UAX14]]
-
-
- word-break/word-break-normal-001.html
- line-breaking/line-breaking-001.html
- line-breaking/line-breaking-002.html
- line-breaking/line-breaking-003.html
- line-breaking/line-breaking-004.html
- line-breaking/line-breaking-005.html
- line-breaking/line-breaking-006.html
- line-breaking/line-breaking-007.html
- line-breaking/line-breaking-008.html
- line-breaking/line-breaking-021.html
- i18n/css3-text-line-break-baspglwj-001.html
- i18n/css3-text-line-break-baspglwj-002.html
- i18n/css3-text-line-break-baspglwj-120.html
- i18n/css3-text-line-break-baspglwj-121.html
- i18n/css3-text-line-break-baspglwj-122.html
- i18n/css3-text-line-break-baspglwj-123.html
- i18n/css3-text-line-break-baspglwj-124.html
- i18n/css3-text-line-break-baspglwj-125.html
- i18n/css3-text-line-break-baspglwj-126.html
- i18n/css3-text-line-break-baspglwj-127.html
- i18n/css3-text-line-break-baspglwj-128.html
- i18n/css3-text-line-break-baspglwj-130.html
- i18n/css3-text-line-break-baspglwj-131.html
- word-break/word-break-break-all-018.html
- word-break/word-break-break-all-021.html
- word-break/word-break-break-all-022.html
-
-
-
- UAs that allow wrapping at punctuation
- other than [=word separators=]
- in writing systems that use them
- should prioritize breakpoints.
- (For example, if breaks after slashes are given a lower priority than spaces,
- the sequence “check /etc” will never break between the "/" and the "e".)
- As long as care is taken to avoid such awkward breaks,
- allowing breaks at appropriate punctuation other than [=word separators=]
- is recommended,
- as it results in more even-looking margins, particularly in narrow measures.
- The UA may use the width of the containing block, the text's language,
- the 'line-break' value,
- and other factors in assigning priorities:
- CSS does not define prioritization of [=soft wrap opportunities=].
- Prioritization of [=word separators=] is not expected,
- however,
- if ''word-break: break-all'' is specified
- (since this value explicitly requests line breaking behavior
- not based on breaking at [=word separators=])--
- and is forbidden under ''line-break: anywhere''.
-
-
- [=Out-of-flow=] elements
- and inline element boundaries
- do not introduce a [=forced line break=]
- or [=soft wrap opportunity=] in the flow.
-
-
- line-breaking/line-breaking-012.html
- line-breaking/line-breaking-015.html
- line-breaking/line-breaking-016.html
- line-breaking/line-breaking-017.html
- line-breaking/line-breaking-018.html
- line-breaking/line-breaking-019.html
-
-
-
- For Web-compatibility
- there is a [=soft wrap opportunity=]
- before and after each replaced element or other [=atomic inline=],
- even when adjacent to a character that would normally suppress them,
- including U+00A0 NO-BREAK SPACE.
- However,
- with the exception of U+00A0 NO-BREAK SPACE,
- there must be no [=soft wrap opportunity=]
- between [=atomic inlines=] and adjacent characters
- belonging to the Unicode GL, WJ, or ZWJ line breaking classes.
- [[UAX14]]
-
-
- line-breaking/line-breaking-atomic-001.html
- line-breaking/line-breaking-atomic-002.html
- line-breaking/line-breaking-atomic-003.html
- line-breaking/line-breaking-atomic-004.html
- line-breaking/line-breaking-atomic-005.html
- line-breaking/line-breaking-atomic-006.html
- line-breaking/line-breaking-atomic-007.html
- line-breaking/line-breaking-atomic-008.html
- line-breaking/line-breaking-atomic-009.html
- line-breaking/line-breaking-atomic-010.html
- line-breaking/line-breaking-atomic-011.html
- line-breaking/line-breaking-atomic-012.html
- line-breaking/line-breaking-atomic-013.html
- line-breaking/line-breaking-atomic-014.html
- line-breaking/line-breaking-atomic-015.html
- line-breaking/line-breaking-atomic-016.html
- line-breaking/line-breaking-atomic-017.html
- line-breaking/line-breaking-atomic-018.html
- line-breaking/line-breaking-atomic-019.html
- line-breaking/line-breaking-atomic-020.html
- line-breaking/line-breaking-atomic-021.html
- line-breaking/line-breaking-atomic-022.html
- line-breaking/line-breaking-atomic-023.html
- line-breaking/line-breaking-atomic-024.html
- line-breaking/line-breaking-atomic-025.html
- line-breaking/line-breaking-atomic-026.html
- line-breaking/line-breaking-atomic-027.html
- line-breaking/line-breaking-replaced-001.html
- line-breaking/line-breaking-replaced-002.html
- line-breaking/line-breaking-replaced-003.html
- line-breaking/line-breaking-replaced-004.html
- line-breaking/line-breaking-replaced-005.html
- line-breaking/line-breaking-replaced-006.html
- line-breaking/line-breaking-atomic-nowrap-001.html
-
-
-
- For [=soft wrap opportunities=] created by characters
- that disappear at the line break (e.g. U+0020 SPACE),
- properties on the box directly containing that character
- control the line breaking at that opportunity.
- For [=soft wrap opportunities=] defined by the boundary between two characters or [=atomic inlines=],
- the 'white-space' property
- on the nearest common ancestor of the two characters
- controls breaking;
-
- which elements’ 'line-break', 'word-break', and 'overflow-wrap' properties
- control the determination of [=soft wrap opportunities=]
- at such boundaries
- is undefined in Level 3.
-
-
- line-breaking/line-breaking-009.html
- line-breaking/line-breaking-010.html
- line-breaking/line-breaking-011.html
- line-breaking/line-breaking-ic-001.html
- line-breaking/line-breaking-ic-002.html
- line-breaking/line-breaking-ic-003.html
- white-space/white-space-wrap-after-nowrap-001.html
- word-break/break-boundary-2-chars-001.html
-
- overflow-wrap/overflow-wrap-anywhere-inline-002.tentative.html
- overflow-wrap/overflow-wrap-anywhere-inline-003.tentative.html
- overflow-wrap/overflow-wrap-anywhere-inline-004.tentative.html
- word-break/word-break-break-all-inline-004.tentative.html
- word-break/word-break-break-all-inline-007.tentative.html
- word-break/word-break-break-all-inline-010.tentative.html
-
- line-breaking/line-breaking-030.html
- line-breaking/line-breaking-031.html
- line-breaking/line-breaking-032.html
-
-
-
- For [=soft wrap opportunities=] before the first
- or after the last character of a box,
- the break occurs immediately before/after the box
- (at its margin edge)
- rather than breaking the box
- between its content edge and the content.
-
-
- Line breaking in/around Ruby is defined
- in [[css-ruby-1#line-breaks]].
- [[!CSS-RUBY-1]]
-
-
- In order to avoid unexpected overflow,
- if the user agent is unable to perform the requisite lexical
- or orthographic analysis
- for line breaking any [=content language=] that requires it--
- for example due to lacking a dictionary for certain languages--
- it must assume a [=soft wrap opportunity=]
- between pairs of [=typographic letter units=] in that writing system.
-
-
- line-breaking/line-breaking-023.html
- line-breaking/line-breaking-024.html
- line-breaking/line-breaking-025.html
- line-breaking/line-breaking-026.html
- line-breaking/line-breaking-027.html
-
-
- Note: This provision is not triggered merely when
- the UA fails to find a word boundary in a particular text run;
- the text run may well be a single unbreakable word.
- It applies for example
- when a text run is composed of Khmer characters (U+1780 to U+17FF)
- if the user agent does not know how to determine
- word boundaries in Khmer.
-
-
Breaking Rules for Letters: the 'word-break' property
@@ -3892,17 +3651,18 @@ Breaking Rules for Letters: the 'word-break' property
#jp-title-break td samp,
#jp-title-break td pre {
font-size: 1.5em;
- width: 9em;
+ width: 6em;
line-height: 2;
padding: 0.5em 1em;
display: block;
margin: auto;
border: solid gray 1px;
+ color: black;
background: white;
}
- Japanese is usually typeset allowing line breaks within words.
+ Japanese is usually typeset allowing line breaks between syllables within words.
However, it is sometimes preferred to suppress these wrapping opportunities
and to only allow wrapping at the end of certain sentence fragments.
This is most commonly done in very short pieces of text,
@@ -3954,12 +3714,6 @@ Breaking Rules for Letters: the 'word-break' property
- When shaping scripts such as Arabic
- are allowed to break within words due to ''word-break/break-all''
- the characters must still be shaped
- as if the word were [[#word-break-shaping|not broken]]
- (see [[#word-break-shaping]]).
-
word-break/word-break-break-all-004.html
@@ -3972,6 +3726,9 @@ Breaking Rules for Letters: the 'word-break' property
regardless of the actual value of the 'overflow-wrap' property.
+ The effects of 'word-break'
+ are taken into account when computing [=intrinsic sizes=].
+
white-space/pre-wrap-008.html
white-space/pre-wrap-016.html
@@ -4169,45 +3926,11 @@ Line Breaking Strictness: the 'line-break' property
- The following breaks are forbidden in ''strict'' line breaking
- and allowed in ''line-break/normal'' and ''loose'':
-
-
-
- breaks before Japanese small kana
- or the Katakana-Hiragana prolonged sound mark,
- i.e. characters
- from the Unicode line breaking class CJ.
- [[!UAX14]]
-
-
- line-break/line-break-loose-011.xht
- line-break/line-break-loose-012.xht
- line-break/line-break-normal-011.xht
- line-break/line-break-normal-012.xht
- line-break/line-break-strict-011.xht
- line-break/line-break-strict-012.xht
- i18n/ja/css-text-line-break-ja-cj-loose.html
- i18n/ja/css-text-line-break-ja-cj-normal.html
- i18n/ja/css-text-line-break-ja-cj-strict.html
- i18n/zh/css-text-line-break-zh-cj-loose.html
- i18n/zh/css-text-line-break-zh-cj-normal.html
- i18n/zh/css-text-line-break-zh-cj-strict.html
- i18n/other-lang/css-text-line-break-de-cj-loose.html
- i18n/other-lang/css-text-line-break-de-cj-normal.html
- i18n/other-lang/css-text-line-break-de-cj-strict.html
- i18n/unknown-lang/css-text-line-break-cj-loose.html
- i18n/unknown-lang/css-text-line-break-cj-normal.html
- i18n/unknown-lang/css-text-line-break-cj-strict.html
-
-
-
-
- The following breaks are allowed for ''line-break/normal''
- and ''loose'' line breaking
- if the [=writing system=] is Chinese
- or Japanese,
- and are otherwise forbidden:
+ The following breaks are allowed for ''line-break/normal''
+ and ''loose'' line breaking
+ if the [=writing system=] is Chinese
+ or Japanese,
+ and are otherwise forbidden:
@@ -4267,6 +3990,34 @@ Line Breaking Strictness: the 'line-break' property
and allowed in ''loose'':
+
+ breaks before Japanese small kana
+ or the Katakana-Hiragana prolonged sound mark,
+ i.e. characters
+ from the Unicode line breaking class CJ.
+ [[!UAX14]]
+
+
+ line-break/line-break-loose-011.xht
+ line-break/line-break-loose-012.xht
+ line-break/line-break-normal-011.xht
+ line-break/line-break-normal-012.xht
+ line-break/line-break-strict-011.xht
+ line-break/line-break-strict-012.xht
+ i18n/ja/css-text-line-break-ja-cj-loose.html
+ i18n/ja/css-text-line-break-ja-cj-normal.html
+ i18n/ja/css-text-line-break-ja-cj-strict.html
+ i18n/zh/css-text-line-break-zh-cj-loose.html
+ i18n/zh/css-text-line-break-zh-cj-normal.html
+ i18n/zh/css-text-line-break-zh-cj-strict.html
+ i18n/other-lang/css-text-line-break-de-cj-loose.html
+ i18n/other-lang/css-text-line-break-de-cj-normal.html
+ i18n/other-lang/css-text-line-break-de-cj-strict.html
+ i18n/unknown-lang/css-text-line-break-cj-loose.html
+ i18n/unknown-lang/css-text-line-break-cj-normal.html
+ i18n/unknown-lang/css-text-line-break-cj-strict.html
+
+
breaks before iteration marks:
々 U+3005, 〻 U+303B, ゝ U+309D,
@@ -4442,6 +4193,34 @@ Line Breaking Strictness: the 'line-break' property
finer control over line breaking may be necessary
to satisfy high-end publishing requirements.
+
+ Note: While user agents can refer to [[!UAX14]] as a starting point
+ for their line-breaking implementation,
+ the following deviations could be desirable
+ for maximum interoperability with existing implementations:
+
+ - Not introducing a line break opportunity between
+ U+0021 (Exclamation Mark, !) and
+ a letter ([=Unicode general category=] L).
+ This prevents a break in the string “!important”.
+ - Not introducing a line break opportunity between
+ U+002F (Solidus, /) and
+ a letter ([=Unicode general category=] L).
+ This prevents a break in dates such as “23/Jan/2024”.
+ - Not introducing a line break opportunity between
+ U+007C (Vertical Line, |) and
+ a letter ([=Unicode general category=] L).
+ - Not introducing a line break opportunity between
+ U+002D (Hyphen-Minus `-`) and
+ a digit ([=Unicode general category=] Nd)
+ if the codepoint prior to the hyphen was _not_ a letter or digit
+ ([=Unicode general category=] L or Nd).
+ This prevents breaking after the minus sign before a number
+ such as in “-13”
+ whilst allowing breaks after the hyphen in “ABCD-1234” and “1234-5678”
+ which may appear in long URLs, for example.
+
+
Hyphenation: the 'hyphens' property
@@ -4784,17 +4563,15 @@ Hyphenation: the 'hyphens' property
hyphens/shy-styling-001.html
- When shaping scripts such as Arabic are allowed to break within words
+ Note: When shaping scripts such as Arabic are allowed to break within words
due to hyphenation,
- the characters must still be shaped
- as if the word were [[#word-break-shaping|not broken]]
- (see [[#word-break-shaping]]).
+ the characters are still shaped
+ as if the word were not broken.
hyphens/hyphens-shaping-001.html
hyphens/hyphens-shaping-002.html
-
For example, if the Uyghur word “داميدى”
were hyphenated, it would appear as
@@ -4815,7 +4592,7 @@ Hyphenation: the 'hyphens' property
-Overflow Wrapping: the 'overflow-wrap'/'word-wrap' property
+Overflow Wrapping: the 'overflow-wrap' ('word-wrap') property
- Name: overflow-wrap, word-wrap
+ Name: overflow-wrap
Value: normal | break-word | anywhere
Initial: normal
Applies to: text
@@ -4853,166 +4630,419 @@ Overflow Wrapping: the 'overflow-wrap'/'word-wrap' property
overflow-wrap/overflow-wrap-anywhere-inline-002.tentative.html
- This property specifies whether the UA may break
- at otherwise disallowed points within a line
- to prevent overflow,
- when an otherwise-unbreakable string is too long to fit within the line box.
- It only has an effect when
- 'white-space' allows [=wrapping=]. Possible values:
+ This property specifies whether the UA may break
+ at otherwise disallowed points within a line
+ to prevent overflow,
+ when an otherwise-unbreakable string is too long to fit within the line box.
+ It only has an effect when
+ 'white-space' allows [=wrapping=]. Possible values:
+
+
+ overflow-wrap/overflow-wrap-002.html
+
+
+
+
normal
+
+ Lines may break only at allowed break points.
+ However,
+ the restrictions introduced by ''word-break: keep-all'' may be relaxed
+ to match ''word-break: normal''
+ if there are no otherwise-acceptable break points in the line.
+
+
+ overflow-wrap/overflow-wrap-004.html
+ overflow-wrap/overflow-wrap-normal-keep-all-001.html
+
+
+
anywhere
+
+ An otherwise unbreakable sequence of [=characters=]
+ may be broken at an arbitrary point
+ if there are no otherwise-acceptable break points in the line.
+ Shaping characters are still shaped
+ as if the word were not broken,
+ and grapheme clusters must stay together as one unit.
+ No hyphenation character is inserted at the break point.
+ [=Soft wrap opportunities=] introduced by ''overflow-wrap/anywhere''
+ are considered
+ when calculating [=min-content size|min-content intrinsic sizes=].
+
+
+ overflow-wrap/overflow-wrap-min-content-size-001.html
+ overflow-wrap/overflow-wrap-min-content-size-002.html
+ overflow-wrap/overflow-wrap-min-content-size-003.html
+ overflow-wrap/overflow-wrap-anywhere-001.html
+ overflow-wrap/overflow-wrap-anywhere-003.html
+ overflow-wrap/overflow-wrap-anywhere-006.html
+ overflow-wrap/overflow-wrap-anywhere-007.html
+ overflow-wrap/overflow-wrap-anywhere-008.html
+ overflow-wrap/overflow-wrap-anywhere-009.html
+ overflow-wrap/overflow-wrap-anywhere-010.html
+ overflow-wrap/overflow-wrap-anywhere-011.html
+ overflow-wrap/overflow-wrap-anywhere-inline-001.html
+ overflow-wrap/overflow-wrap-anywhere-inline-002.tentative.html
+ overflow-wrap/overflow-wrap-anywhere-inline-003.tentative.html
+ overflow-wrap/overflow-wrap-anywhere-inline-004.tentative.html
+ overflow-wrap/overflow-wrap-anywhere-fit-content-001.html
+ overflow-wrap/overflow-wrap-min-content-size-005.html
+ overflow-wrap/overflow-wrap-min-content-size-007.html
+ overflow-wrap/overflow-wrap-cluster-002.html
+ overflow-wrap/overflow-wrap-shaping-002.html
+ white-space/break-spaces-before-first-char-009.html
+ white-space/break-spaces-before-first-char-013.html
+ white-space/break-spaces-before-first-ideographic-char-009.html
+ white-space/break-spaces-before-first-ideographic-char-013.html
+ word-break/word-break-min-content-001.html
+ word-break/word-break-min-content-002.html
+ word-break/word-break-min-content-003.html
+ word-break/word-break-min-content-004.html
+ word-break/word-break-min-content-005.html
+ word-break/word-break-min-content-006.html
+ white-space/pre-wrap-009.html
+ white-space/pre-wrap-010.html
+ white-space/break-spaces-with-overflow-wrap-002.html
+ white-space/break-spaces-with-overflow-wrap-004.html
+ white-space/break-spaces-with-overflow-wrap-006.html
+ white-space/break-spaces-with-overflow-wrap-008.html
+ white-space/break-spaces-with-overflow-wrap-010.html
+ overflow-wrap/overflow-wrap-min-content-size-009.html
+
+
+
+
+ For legacy reasons, UAs must treat 'word-wrap'
+ as a [=legacy name alias=] of the 'overflow-wrap' property.
+
+
+ overflow-wrap/word-wrap-alias.html
+ overflow-wrap/word-wrap-001.html
+ overflow-wrap/word-wrap-002.html
+ overflow-wrap/word-wrap-004.html
+
+
+
+Line Breaking Details
+
+
+
+ When determining [=line breaks=]:
+
+
+
+ The interaction of [=line breaking=] and bidirectional text is defined by
+ [[css-writing-modes-4#bidi-algo]]
+ and the Unicode Bidirectional Algorithm
+ (UAX9§3.4 Reordering Resolved Levels in particular).
+ [[!CSS-WRITING-MODES-4]]
+ [[!UAX9]]
+
+
+ bidi-breaking-001.xht
+ bidi-breaking-002.xht
+ bidi-breaking-003.xht
+
+
+
+ Preserved [=segment breaks=], and--
+ regardless of the 'white-space' value--
+ any Unicode character with the BK and NL line breaking class,
+ must be treated as [=forced line breaks=].
+ [[!UAX14]]
+
+
+ line-breaking/line-breaking-022.html
+
+
+ Note: The bidi implications of such [=forced line breaks=]
+ are defined by the Unicode Bidirectional Algorithm.
+ [[!UAX9]]
+
+
+ Except where explicitly defined otherwise
+ (e.g. for ''line-break: anywhere'' or ''overflow-wrap: anywhere'')
+ line breaking behavior defined for
+ the WJ,
+ ZW,
+ GL,
+ and ZWJ
+ Unicode line breaking classes
+ must be honored.
+ [[!UAX14]]
+
+
+ word-break/word-break-normal-001.html
+ line-breaking/line-breaking-001.html
+ line-breaking/line-breaking-002.html
+ line-breaking/line-breaking-003.html
+ line-breaking/line-breaking-004.html
+ line-breaking/line-breaking-005.html
+ line-breaking/line-breaking-006.html
+ line-breaking/line-breaking-007.html
+ line-breaking/line-breaking-008.html
+ line-breaking/line-breaking-021.html
+ i18n/css3-text-line-break-baspglwj-001.html
+ i18n/css3-text-line-break-baspglwj-002.html
+ i18n/css3-text-line-break-baspglwj-120.html
+ i18n/css3-text-line-break-baspglwj-121.html
+ i18n/css3-text-line-break-baspglwj-122.html
+ i18n/css3-text-line-break-baspglwj-123.html
+ i18n/css3-text-line-break-baspglwj-124.html
+ i18n/css3-text-line-break-baspglwj-125.html
+ i18n/css3-text-line-break-baspglwj-126.html
+ i18n/css3-text-line-break-baspglwj-127.html
+ i18n/css3-text-line-break-baspglwj-128.html
+ i18n/css3-text-line-break-baspglwj-130.html
+ i18n/css3-text-line-break-baspglwj-131.html
+ word-break/word-break-break-all-018.html
+ word-break/word-break-break-all-021.html
+ word-break/word-break-break-all-022.html
+
+
+
+ CSS never allows [=soft wrap opportunities=]
+ within [=typographic character units=].
+ Thus, the CM and SG
+ Unicode line breaking classes must always be honored.
+ [[UAX14]]
+
+
+ UAs that allow wrapping at punctuation
+ other than [=word separators=]
+ in writing systems that use them
+ should prioritize breakpoints.
+ (For example, if breaks after slashes are given a lower priority than spaces,
+ the sequence “check /etc” will never break between the "/" and the "e".)
+ As long as care is taken to avoid such awkward breaks,
+ allowing breaks at appropriate punctuation other than [=word separators=]
+ is recommended,
+ as it results in more even-looking margins, particularly in narrow measures.
+ The UA may use the width of the containing block, the text's language,
+ the 'line-break' value,
+ and other factors in assigning priorities:
+ CSS does not define prioritization of [=soft wrap opportunities=].
+ Prioritization of [=word separators=] is not expected,
+ however,
+ if ''word-break: break-all'' is specified
+ (since this value explicitly requests line breaking behavior
+ not based on breaking at [=word separators=])--
+ and is forbidden under ''line-break: anywhere''.
+
+
+ [=Out-of-flow boxes=]
+ and [=inline box=] boundaries
+ do not introduce a [=forced line break=]
+ or [=soft wrap opportunity=] in the flow.
-
- overflow-wrap/overflow-wrap-002.html
-
+
+ line-breaking/line-breaking-012.html
+ line-breaking/line-breaking-015.html
+ line-breaking/line-breaking-016.html
+ line-breaking/line-breaking-017.html
+ line-breaking/line-breaking-018.html
+ line-breaking/line-breaking-019.html
+
-
-
normal
-
- Lines may break only at allowed break points.
+
+ For Web-compatibility
+ there is a [=soft wrap opportunity=]
+ before and after each replaced element or other [=atomic inline=],
+ even when adjacent to a character that would normally suppress them,
+ including U+00A0 NO-BREAK SPACE.
However,
- the restrictions introduced by ''word-break: keep-all'' may be relaxed
- to match ''word-break: normal''
- if there are no otherwise-acceptable break points in the line.
+ with the exception of U+00A0 NO-BREAK SPACE,
+ there must be no [=soft wrap opportunity=]
+ between [=atomic inlines=] and adjacent characters
+ belonging to the Unicode GL, WJ, or ZWJ line breaking classes.
+ [[UAX14]]
- overflow-wrap/overflow-wrap-004.html
- overflow-wrap/overflow-wrap-normal-keep-all-001.html
+ line-breaking/line-breaking-atomic-001.html
+ line-breaking/line-breaking-atomic-002.html
+ line-breaking/line-breaking-atomic-003.html
+ line-breaking/line-breaking-atomic-004.html
+ line-breaking/line-breaking-atomic-005.html
+ line-breaking/line-breaking-atomic-006.html
+ line-breaking/line-breaking-atomic-007.html
+ line-breaking/line-breaking-atomic-008.html
+ line-breaking/line-breaking-atomic-009.html
+ line-breaking/line-breaking-atomic-010.html
+ line-breaking/line-breaking-atomic-011.html
+ line-breaking/line-breaking-atomic-012.html
+ line-breaking/line-breaking-atomic-013.html
+ line-breaking/line-breaking-atomic-014.html
+ line-breaking/line-breaking-atomic-015.html
+ line-breaking/line-breaking-atomic-016.html
+ line-breaking/line-breaking-atomic-017.html
+ line-breaking/line-breaking-atomic-018.html
+ line-breaking/line-breaking-atomic-019.html
+ line-breaking/line-breaking-atomic-020.html
+ line-breaking/line-breaking-atomic-021.html
+ line-breaking/line-breaking-atomic-022.html
+ line-breaking/line-breaking-atomic-023.html
+ line-breaking/line-breaking-atomic-024.html
+ line-breaking/line-breaking-atomic-025.html
+ line-breaking/line-breaking-atomic-026.html
+ line-breaking/line-breaking-atomic-027.html
+ line-breaking/line-breaking-replaced-001.html
+ line-breaking/line-breaking-replaced-002.html
+ line-breaking/line-breaking-replaced-003.html
+ line-breaking/line-breaking-replaced-004.html
+ line-breaking/line-breaking-replaced-005.html
+ line-breaking/line-breaking-replaced-006.html
+ line-breaking/line-breaking-atomic-nowrap-001.html
-
anywhere
-
- An otherwise unbreakable sequence of [=characters=]
- may be broken at an arbitrary point
- if there are no otherwise-acceptable break points in the line.
- Shaping characters are still shaped
- as if the word were not broken,
- and grapheme clusters must stay together as one unit.
- No hyphenation character is inserted at the break point.
- [=Soft wrap opportunities=] introduced by ''overflow-wrap/anywhere''
- are considered
- when calculating [=min-content size|min-content intrinsic sizes=].
+
+ For [=soft wrap opportunities=] created by characters
+ that disappear at the line break (e.g. U+0020 SPACE),
+ properties on the box directly containing that character
+ control the line breaking at that opportunity.
+ For [=soft wrap opportunities=] defined by the boundary between two characters or [=atomic inlines=],
+ the 'white-space' property
+ on the nearest common ancestor of the two characters
+ controls breaking;
+
+ which elements’ 'line-break', 'word-break', and 'overflow-wrap' properties
+ control the determination of [=soft wrap opportunities=]
+ at such boundaries
+ is undefined in this level.
- overflow-wrap/overflow-wrap-min-content-size-001.html
- overflow-wrap/overflow-wrap-min-content-size-002.html
- overflow-wrap/overflow-wrap-min-content-size-003.html
- overflow-wrap/overflow-wrap-anywhere-001.html
- overflow-wrap/overflow-wrap-anywhere-003.html
- overflow-wrap/overflow-wrap-anywhere-006.html
- overflow-wrap/overflow-wrap-anywhere-007.html
- overflow-wrap/overflow-wrap-anywhere-008.html
- overflow-wrap/overflow-wrap-anywhere-009.html
- overflow-wrap/overflow-wrap-anywhere-010.html
- overflow-wrap/overflow-wrap-anywhere-011.html
- overflow-wrap/overflow-wrap-anywhere-inline-001.html
+ line-breaking/line-breaking-009.html
+ line-breaking/line-breaking-010.html
+ line-breaking/line-breaking-011.html
+ line-breaking/line-breaking-ic-001.html
+ line-breaking/line-breaking-ic-002.html
+ line-breaking/line-breaking-ic-003.html
+ white-space/white-space-wrap-after-nowrap-001.html
+ word-break/break-boundary-2-chars-001.html
+
overflow-wrap/overflow-wrap-anywhere-inline-002.tentative.html
overflow-wrap/overflow-wrap-anywhere-inline-003.tentative.html
overflow-wrap/overflow-wrap-anywhere-inline-004.tentative.html
- overflow-wrap/overflow-wrap-anywhere-fit-content-001.html
- overflow-wrap/overflow-wrap-min-content-size-005.html
- overflow-wrap/overflow-wrap-min-content-size-007.html
- overflow-wrap/overflow-wrap-cluster-002.html
- overflow-wrap/overflow-wrap-shaping-002.html
- white-space/break-spaces-before-first-char-009.html
- white-space/break-spaces-before-first-char-013.html
- white-space/break-spaces-before-first-ideographic-char-009.html
- white-space/break-spaces-before-first-ideographic-char-013.html
- word-break/word-break-min-content-001.html
- word-break/word-break-min-content-002.html
- word-break/word-break-min-content-003.html
- word-break/word-break-min-content-004.html
- word-break/word-break-min-content-005.html
- word-break/word-break-min-content-006.html
- white-space/pre-wrap-009.html
- white-space/pre-wrap-010.html
- white-space/break-spaces-with-overflow-wrap-002.html
- white-space/break-spaces-with-overflow-wrap-004.html
- white-space/break-spaces-with-overflow-wrap-006.html
- white-space/break-spaces-with-overflow-wrap-008.html
- white-space/break-spaces-with-overflow-wrap-010.html
- overflow-wrap/overflow-wrap-min-content-size-009.html
+ word-break/word-break-break-all-inline-004.tentative.html
+ word-break/word-break-break-all-inline-007.tentative.html
+ word-break/word-break-break-all-inline-010.tentative.html
+
+ line-breaking/line-breaking-030.html
+ line-breaking/line-breaking-031.html
+ line-breaking/line-breaking-032.html
-
break-word
-
- As for ''overflow-wrap/anywhere''
- except that
- soft wrap opportunities introduced by ''overflow-wrap/break-word''
- are not considered
- when calculating [=min-content size|min-content intrinsic sizes=].
+
+ For [=soft wrap opportunities=] before the first
+ or after the last character of a box,
+ the break occurs immediately before/after the box
+ (at its margin edge)
+ rather than breaking the box
+ between its content edge and the content.
+
+
+ Line breaking in/around Ruby is defined
+ in [[css-ruby-1#line-breaks]].
+ [[!CSS-RUBY-1]]
+
+
+ When shaping scripts such as Arabic
+ [=wrap=] at unforced [=soft wrap opportunities=] within words
+ (such as when breaking due to
+ ''word-break: break-all'',
+ ''line-break: anywhere'',
+ ''overflow-wrap: break-word'',
+ ''overflow-wrap: anywhere'',
+ or when [=hyphenating=])
+ the characters must still be shaped
+ (their joining forms chosen)
+ as if the word were still whole.
- overflow-wrap/overflow-wrap-001.html
- overflow-wrap/overflow-wrap-break-word-001.html
- overflow-wrap/overflow-wrap-break-word-003.html
- overflow-wrap/overflow-wrap-break-word-008.html
- overflow-wrap/overflow-wrap-break-word-009.html
- overflow-wrap/overflow-wrap-break-word-010.html
- overflow-wrap/overflow-wrap-min-content-size-004.html
- overflow-wrap/overflow-wrap-min-content-size-006.html
- overflow-wrap/overflow-wrap-min-content-size-008.html
- overflow-wrap/overflow-wrap-break-word-fit-content-001.html
- overflow-wrap/overflow-wrap-cluster-001.html
+ hyphens/hyphens-shaping-001.html
+ hyphens/hyphens-shaping-002.html
+ line-break/line-break-shaping-001.html
overflow-wrap/overflow-wrap-shaping-001.html
- white-space/break-spaces-before-first-char-008.html
- white-space/break-spaces-before-first-char-012.html
- white-space/break-spaces-before-first-ideographic-char-008.html
- white-space/break-spaces-before-first-ideographic-char-012.html
- overflow-wrap/overflow-wrap-break-word-keep-all-001.html
- white-space/break-spaces-with-overflow-wrap-001.html
- white-space/break-spaces-with-overflow-wrap-003.html
- white-space/break-spaces-with-overflow-wrap-005.html
- white-space/break-spaces-with-overflow-wrap-007.html
- white-space/break-spaces-with-overflow-wrap-009.html
- white-space/trailing-ideographic-space-013.html
- white-space/trailing-ideographic-space-014.html
- white-space/trailing-ideographic-space-015.html
- white-space/trailing-ideographic-space-016.html
+ overflow-wrap/overflow-wrap-shaping-002.html
+ word-break/word-break-break-all-004.html
-
- For legacy reasons, UAs must treat 'word-wrap'
- as a [=legacy name alias=] of the 'overflow-wrap' property.
-
-
- overflow-wrap/word-wrap-alias.html
- overflow-wrap/word-wrap-001.html
- overflow-wrap/word-wrap-002.html
- overflow-wrap/word-wrap-004.html
-
-
-
-Shaping Across Intra-word Breaks
-
-
+
+ For example,
+ if the word “نوشتن” is broken between the “ش” and “ت”,
+ the “ش” still takes its initial form (“ﺷ”),
+ and the “ت” its medial form (“ﺘ”)--
+ forming as in “ﻧﻮﺷ | ﺘﻦ”, not as in “نوش | تن”.
+
- When shaping scripts such as Arabic
- [=wrap=] at unforced [=soft wrap opportunities=] within words
- (such as when breaking due to
- ''word-break: break-all'',
- ''line-break: anywhere'',
- ''overflow-wrap: break-word'',
- ''overflow-wrap: anywhere'',
- or when [=hyphenating=])
- the characters must still be shaped
- (their joining forms chosen)
- as if the word were still whole.
+
+ In order to avoid unexpected overflow,
+ if the user agent is unable to perform the requisite lexical
+ or orthographic analysis
+ for line breaking any [=content language=] that requires it--
+ for example due to lacking a dictionary for certain languages--
+ it must assume a [=soft wrap opportunity=]
+ between pairs of [=typographic letter units=] in that writing system.
-
- hyphens/hyphens-shaping-001.html
- hyphens/hyphens-shaping-002.html
- line-break/line-break-shaping-001.html
- overflow-wrap/overflow-wrap-shaping-001.html
- overflow-wrap/overflow-wrap-shaping-002.html
- word-break/word-break-break-all-004.html
-
+
+ line-breaking/line-breaking-023.html
+ line-breaking/line-breaking-024.html
+ line-breaking/line-breaking-025.html
+ line-breaking/line-breaking-026.html
+ line-breaking/line-breaking-027.html
+
-
- For example,
- if the word “نوشتن” is broken between the “ش” and “ت”,
- the “ش” still takes its initial form (“ﺷ”),
- and the “ت” its medial form (“ﺘ”)--
- forming as in “ﻧﻮﺷ | ﺘﻦ”, not as in “نوش | تن”.
-
+ Note: This provision is not triggered merely when
+ the UA fails to find a word boundary in a particular text run;
+ the text run may well be a single unbreakable word.
+ It applies for example
+ when a text run is composed of Khmer characters (U+1780 to U+17FF)
+ if the user agent does not know how to determine
+ word boundaries in Khmer.
+
Alignment and Justification
@@ -5192,8 +5222,7 @@ Text Alignment: the 'text-align' shorthand
according to the method specified by the 'text-justify' property,
in order to exactly fill the line box.
Unless otherwise specified by 'text-align-last',
- the last line before a forced break
- or the end of the block
+ the last line before a [=forced line break=]
is ''text-align/start''-aligned.
@@ -7432,6 +7461,9 @@ Default UA Stylesheet
/* make option elements align together */
option { text-align: match-parent; }
+
+ /* Avoid hanging punctuation inheriting into preformatted blocks */
+ pre { hanging-punctuation: none; }
- which elements’ 'line-break', 'word-break', and 'overflow-wrap' properties
- control the determination of [=soft wrap opportunities=]
- at such boundaries
- is undefined in this level.
-
-
- line-breaking/line-breaking-009.html
- line-breaking/line-breaking-010.html
- line-breaking/line-breaking-011.html
- line-breaking/line-breaking-ic-001.html
- line-breaking/line-breaking-ic-002.html
- line-breaking/line-breaking-ic-003.html
- white-space/white-space-wrap-after-nowrap-001.html
- word-break/break-boundary-2-chars-001.html
-
- overflow-wrap/overflow-wrap-anywhere-inline-002.tentative.html
- overflow-wrap/overflow-wrap-anywhere-inline-003.tentative.html
- overflow-wrap/overflow-wrap-anywhere-inline-004.tentative.html
- word-break/word-break-break-all-inline-004.tentative.html
- word-break/word-break-break-all-inline-007.tentative.html
- word-break/word-break-break-all-inline-010.tentative.html
-
- line-breaking/line-breaking-030.html
- line-breaking/line-breaking-031.html
- line-breaking/line-breaking-032.html
-
-
-
- For [=soft wrap opportunities=] before the first
- or after the last character of a box,
- the break occurs immediately before/after the box
- (at its margin edge)
- rather than breaking the box
- between its content edge and the content.
-
-
- Line breaking in/around Ruby is defined
- in [[css-ruby-1#line-breaks]].
- [[!CSS-RUBY-1]]
-
-
- When shaping scripts such as Arabic
- [=wrap=] at unforced [=soft wrap opportunities=] within words
- (such as when breaking due to
- ''word-break: break-all'',
- ''line-break: anywhere'',
- ''overflow-wrap: break-word'',
- ''overflow-wrap: anywhere'',
- or when [=hyphenating=])
- the characters must still be shaped
- (their joining forms chosen)
- as if the word were still whole.
-
-
- hyphens/hyphens-shaping-001.html
- hyphens/hyphens-shaping-002.html
- line-break/line-break-shaping-001.html
- overflow-wrap/overflow-wrap-shaping-001.html
- overflow-wrap/overflow-wrap-shaping-002.html
- word-break/word-break-break-all-004.html
-
-
-
- For example,
- if the word “نوشتن” is broken between the “ش” and “ت”,
- the “ش” still takes its initial form (“ﺷ”),
- and the “ت” its medial form (“ﺘ”)--
- forming as in “ﻧﻮﺷ | ﺘﻦ”, not as in “نوش | تن”.
-
-
-
-
Line Breaking and Word Boundaries
@@ -6051,7 +5807,8 @@ Line Breaking and Word Boundaries
In most writing systems,
in the absence of hyphenation a [=soft wrap opportunity=] occurs only at word boundaries.
- Many such systems use [=spaces=] or punctuation to explicitly separate words,
+ Many such systems (such as English written using the Latin alphabet)
+ use [=spaces=] or punctuation to explicitly separate words,
and [=soft wrap opportunities=] can be identified by these characters.
@@ -6182,15 +5939,14 @@ Line Breaking and Word Boundaries
In some other writing systems,
+ notably Brahmic scripts such as Javanese and Balinese,
[=soft wrap opportunities=] are based on orthographic syllable boundaries,
not word boundaries.
- Some of these systems,
- notably Brahmic scripts such as Javanese and Balinese,
- require analysis of the text to find breaking opportunities.
- Unlike languages that use characters from the SA line breaking class,
- this analysis does not depend on the [=content language=]
- nor requires (language specific) [=word boundary detection=]
- or a lexical resource.
+ Although orthographic syllable breaking
+ does not depend on the [=content language=]
+ or require lexical resource,
+ it nonetheless requires analysis of the text
+ to find breaking opportunities.
@@ -6544,6 +6300,9 @@ Breaking Rules for Letters: the 'word-break' property
+ Note: To enable additional break opportunities only in the case of overflow,
+ see 'overflow-wrap'.
+
Values have the following meanings:
@@ -6838,24 +6597,6 @@ Breaking Rules for Letters: the 'word-break' property
Symbols that line-break the same way as letters of a particular category
are affected the same way as those letters.
- User agents must not,
- in response to any value of this property,
- suppress [=soft wrap opportunities=] which are:
- * introduced by the <{wbr}> HTML element or U+200B ZERO WIDTH SPACE
-
- word-break/auto-phrase/word-break-auto-phrase-006.html
- word-break/auto-phrase/word-break-auto-phrase-wbr-nobr-001.html
-
- * required by the 'line-break' property
- * surrounding atomic inlines
-
- Note: To control additional break opportunities
- available only in the case of overflow,
- see 'overflow-wrap'.
-
- The effects of 'word-break'
- are taken into account when computing [=intrinsic sizes=].
-
Here’s a mixed-script sample text:
@@ -6902,7 +6643,7 @@ Breaking Rules for Letters: the 'word-break' property
}
- Japanese is usually typeset allowing line breaks between each syllable.
+ Japanese is usually typeset allowing line breaks between syllables within words.
However, it is sometimes preferred to suppress these wrapping opportunities
and to only allow wrapping at the end of certain sentence fragments.
This is most commonly done in very short pieces of text,
@@ -6993,15 +6734,24 @@ Breaking Rules for Letters: the 'word-break' property
- When shaping scripts such as Arabic
- are allowed to break within words due to ''word-break/break-all''
- the characters must still be shaped
- as if the word were not broken.
-
word-break/word-break-break-all-004.html
+ User agents must not,
+ in response to any value of this property,
+ suppress [=soft wrap opportunities=] which are:
+ * introduced by the <{wbr}> HTML element or U+200B ZERO WIDTH SPACE
+
+ word-break/auto-phrase/word-break-auto-phrase-006.html
+ word-break/auto-phrase/word-break-auto-phrase-wbr-nobr-001.html
+
+ * required by the 'line-break' property
+ * surrounding atomic inlines
+
+ The effects of 'word-break'
+ are taken into account when computing [=intrinsic sizes=].
+
For compatibility with legacy content,
the 'word-break' property also supports
a deprecated break-word keyword.
@@ -7264,13 +7014,6 @@ Line Breaking Strictness: the 'line-break' property
Note: This value triggers the line breaking rules typically seen in terminals.
- Note: This values only creates [=soft wrap opportunities=]
- between [=typographic character units=],
- not within them.
- Consequently, the CM and SG
- Unicode line breaking classes must be honored.
- [[UAX14]]
-
Note: ''line-break/anywhere'' only allows [=preserved white spaces=]
at the end of the line
@@ -7320,40 +7063,6 @@ Line Breaking Strictness: the 'line-break' property
However, for these three keywords, this specification does require that:
-
- The following breaks are forbidden in ''strict'' line breaking
- and allowed in ''line-break/normal'' and ''loose'':
-
-
-
- breaks before Japanese small kana
- or the Katakana-Hiragana prolonged sound mark,
- i.e. characters
- from the Unicode line breaking class CJ.
- [[!UAX14]]
-
-
- line-break/line-break-loose-011.xht
- line-break/line-break-loose-012.xht
- line-break/line-break-normal-011.xht
- line-break/line-break-normal-012.xht
- line-break/line-break-strict-011.xht
- line-break/line-break-strict-012.xht
- i18n/ja/css-text-line-break-ja-cj-loose.html
- i18n/ja/css-text-line-break-ja-cj-normal.html
- i18n/ja/css-text-line-break-ja-cj-strict.html
- i18n/zh/css-text-line-break-zh-cj-loose.html
- i18n/zh/css-text-line-break-zh-cj-normal.html
- i18n/zh/css-text-line-break-zh-cj-strict.html
- i18n/other-lang/css-text-line-break-de-cj-loose.html
- i18n/other-lang/css-text-line-break-de-cj-normal.html
- i18n/other-lang/css-text-line-break-de-cj-strict.html
- i18n/unknown-lang/css-text-line-break-cj-loose.html
- i18n/unknown-lang/css-text-line-break-cj-normal.html
- i18n/unknown-lang/css-text-line-break-cj-strict.html
-
-
-
The following breaks are allowed for ''line-break/normal''
and ''loose'' line breaking
@@ -7412,13 +7121,41 @@ Line Breaking Strictness: the 'line-break' property
line-break/line-break-normal-hyphens-003.html
line-break/line-break-strict-hyphens-003.html
-
-
- The following breaks are forbidden for ''line-break/normal''
- and ''strict'' line breaking
- and allowed in ''loose'':
+
+
+ The following breaks are forbidden for ''line-break/normal''
+ and ''strict'' line breaking
+ and allowed in ''loose'':
+
+
+
+ breaks before Japanese small kana
+ or the Katakana-Hiragana prolonged sound mark,
+ i.e. characters
+ from the Unicode line breaking class CJ.
+ [[!UAX14]]
+
+
+ line-break/line-break-loose-011.xht
+ line-break/line-break-loose-012.xht
+ line-break/line-break-normal-011.xht
+ line-break/line-break-normal-012.xht
+ line-break/line-break-strict-011.xht
+ line-break/line-break-strict-012.xht
+ i18n/ja/css-text-line-break-ja-cj-loose.html
+ i18n/ja/css-text-line-break-ja-cj-normal.html
+ i18n/ja/css-text-line-break-ja-cj-strict.html
+ i18n/zh/css-text-line-break-zh-cj-loose.html
+ i18n/zh/css-text-line-break-zh-cj-normal.html
+ i18n/zh/css-text-line-break-zh-cj-strict.html
+ i18n/other-lang/css-text-line-break-de-cj-loose.html
+ i18n/other-lang/css-text-line-break-de-cj-normal.html
+ i18n/other-lang/css-text-line-break-de-cj-strict.html
+ i18n/unknown-lang/css-text-line-break-cj-loose.html
+ i18n/unknown-lang/css-text-line-break-cj-normal.html
+ i18n/unknown-lang/css-text-line-break-cj-strict.html
+
-
breaks before iteration marks:
々 U+3005, 〻 U+303B, ゝ U+309D,
@@ -7590,6 +7327,10 @@ Line Breaking Strictness: the 'line-break' property
(ตัวอย่าง·การ·เขียน·ภาษา·ไทย).
+ Note: The CSSWG recognizes that in a future edition of the specification
+ finer control over line breaking may be necessary
+ to satisfy high-end publishing requirements.
+
Note: While user agents can refer to [[!UAX14]] as a starting point
for their line-breaking implementation,
@@ -7618,10 +7359,6 @@ Line Breaking Strictness: the 'line-break' property
which may appear in long URLs, for example.
- Note: The CSSWG recognizes that in a future edition of the specification
- finer control over line breaking may be necessary
- to satisfy high-end publishing requirements.
-
Hyphenation: Morphological Breaking Within Words
@@ -7971,9 +7708,9 @@ Hyphenation Control: the 'hyphens' property
hyphens/shy-styling-001.html
- When shaping scripts such as Arabic are allowed to break within words
+ Note: When shaping scripts such as Arabic are allowed to break within words
due to hyphenation,
- the characters must still be shaped
+ the characters are still shaped
as if the word were not broken.
@@ -8282,7 +8019,7 @@ Hyphenation Line Limits: the 'hyphenate-limit-lines' and 'hyphenate-limit-last'
-Overflow Wrapping: the 'overflow-wrap'/'word-wrap' property
+Overflow Wrapping: the 'overflow-wrap' ('word-wrap') property
- Name: overflow-wrap, word-wrap
+ Name: overflow-wrap
Value: normal | break-word | anywhere
Initial: normal
Applies to: text
@@ -8362,141 +8099,405 @@ Overflow Wrapping: the 'overflow-wrap'/'word-wrap' property
word-break/auto-phrase/word-break-auto-phrase-overflow-001.html
-
- If that is not enough to prevent overflow,
- suppression of [=hyphenation opportunities=] must also be abandoned
- within each line that would overflow.
+
+ If that is not enough to prevent overflow,
+ suppression of [=hyphenation opportunities=] must also be abandoned
+ within each line that would overflow.
+
+
+ word-break/auto-phrase/word-break-auto-phrase-008.html
+
+
+
+ As an intermediary measure,
+ user agents may also detect multiple levels of phrases,
+ choosing to shorter ones
+ (possibly down to individual words)
+ when longer ones would lead to overflow.
+
+
+ The [=soft wrap opportunities=] obtained by relaxing the restrictions
+ introduced by ''word-break: keep-all'' and ''word-break: auto-phrase''
+ are not considered
+ when calculating [=min-content size|min-content intrinsic sizes=].
+
+
anywhere
+
+ An otherwise unbreakable sequence of [=characters=]
+ may be broken at an arbitrary point
+ if there are no otherwise-acceptable break points in the line.
+ Shaping characters are still shaped
+ as if the word were not broken,
+ and grapheme clusters must stay together as one unit.
+ No hyphenation character is inserted at the break point.
+ [=Soft wrap opportunities=] introduced by ''overflow-wrap/anywhere''
+ are considered
+ when calculating [=min-content size|min-content intrinsic sizes=].
+
+
+ overflow-wrap/overflow-wrap-min-content-size-001.html
+ overflow-wrap/overflow-wrap-min-content-size-002.html
+ overflow-wrap/overflow-wrap-min-content-size-003.html
+ overflow-wrap/overflow-wrap-anywhere-001.html
+ overflow-wrap/overflow-wrap-anywhere-003.html
+ overflow-wrap/overflow-wrap-anywhere-006.html
+ overflow-wrap/overflow-wrap-anywhere-007.html
+ overflow-wrap/overflow-wrap-anywhere-008.html
+ overflow-wrap/overflow-wrap-anywhere-009.html
+ overflow-wrap/overflow-wrap-anywhere-010.html
+ overflow-wrap/overflow-wrap-anywhere-011.html
+ overflow-wrap/overflow-wrap-anywhere-inline-001.html
+ overflow-wrap/overflow-wrap-anywhere-inline-002.tentative.html
+ overflow-wrap/overflow-wrap-anywhere-inline-003.tentative.html
+ overflow-wrap/overflow-wrap-anywhere-inline-004.tentative.html
+ overflow-wrap/overflow-wrap-anywhere-fit-content-001.html
+ overflow-wrap/overflow-wrap-min-content-size-005.html
+ overflow-wrap/overflow-wrap-min-content-size-007.html
+ overflow-wrap/overflow-wrap-cluster-002.html
+ overflow-wrap/overflow-wrap-shaping-002.html
+ white-space/break-spaces-before-first-char-009.html
+ white-space/break-spaces-before-first-char-013.html
+ white-space/break-spaces-before-first-ideographic-char-009.html
+ white-space/break-spaces-before-first-ideographic-char-013.html
+ word-break/word-break-min-content-001.html
+ word-break/word-break-min-content-002.html
+ word-break/word-break-min-content-003.html
+ word-break/word-break-min-content-004.html
+ word-break/word-break-min-content-005.html
+ word-break/word-break-min-content-006.html
+ white-space/pre-wrap-009.html
+ white-space/pre-wrap-010.html
+ white-space/break-spaces-with-overflow-wrap-002.html
+ white-space/break-spaces-with-overflow-wrap-004.html
+ white-space/break-spaces-with-overflow-wrap-006.html
+ white-space/break-spaces-with-overflow-wrap-008.html
+ white-space/break-spaces-with-overflow-wrap-010.html
+ white-space/text-wrap-balance-overflow-002.html
+
+
+ In the case of ''word-break: auto-phrase'',
+ these additional [=soft wrap opportunities=] are only introduced
+ if relaxing the restrictions introduced by ''word-break: auto-phrase''
+ as described in ''overflow-wrap: normal''
+ is insufficient to prevent overflow.
+
+
break-word
+
+ As for ''overflow-wrap/anywhere''
+ except that
+ soft wrap opportunities introduced by ''overflow-wrap/break-word''
+ are not considered
+ when calculating [=min-content size|min-content intrinsic sizes=].
+
+
+ overflow-wrap/overflow-wrap-001.html
+ overflow-wrap/overflow-wrap-break-word-001.html
+ overflow-wrap/overflow-wrap-break-word-003.html
+ overflow-wrap/overflow-wrap-break-word-008.html
+ overflow-wrap/overflow-wrap-break-word-009.html
+ overflow-wrap/overflow-wrap-break-word-010.html
+ overflow-wrap/overflow-wrap-min-content-size-004.html
+ overflow-wrap/overflow-wrap-min-content-size-006.html
+ overflow-wrap/overflow-wrap-min-content-size-008.html
+ overflow-wrap/overflow-wrap-break-word-fit-content-001.html
+ overflow-wrap/overflow-wrap-cluster-001.html
+ overflow-wrap/overflow-wrap-shaping-001.html
+ white-space/break-spaces-before-first-char-008.html
+ white-space/break-spaces-before-first-char-012.html
+ white-space/break-spaces-before-first-ideographic-char-008.html
+ white-space/break-spaces-before-first-ideographic-char-012.html
+ overflow-wrap/overflow-wrap-break-word-keep-all-001.html
+ white-space/break-spaces-with-overflow-wrap-001.html
+ white-space/break-spaces-with-overflow-wrap-003.html
+ white-space/break-spaces-with-overflow-wrap-005.html
+ white-space/break-spaces-with-overflow-wrap-007.html
+ white-space/break-spaces-with-overflow-wrap-009.html
+ white-space/trailing-ideographic-space-013.html
+ white-space/trailing-ideographic-space-014.html
+ white-space/trailing-ideographic-space-015.html
+ white-space/trailing-ideographic-space-016.html
+ white-space/text-wrap-balance-overflow-001.html
+
+
+
+ Issue: Do we need to add a none value to 'overflow-wrap'
+ to opt out of relaxing the ''keep-all'' and ''word-break/auto-phrase'' restrictions
+ as allowed by ''overflow-wrap: normal''?
+
+ For legacy reasons, UAs must treat 'word-wrap'
+ as a [=legacy name alias=] of the 'overflow-wrap' property.
+
+
+ overflow-wrap/word-wrap-alias.html
+ overflow-wrap/word-wrap-001.html
+ overflow-wrap/word-wrap-002.html
+ overflow-wrap/word-wrap-004.html
+
+
+
+Line Breaking Details
+
+
+
+ When determining [=line breaks=]:
+
+
+
+ The interaction of [=line breaking=] and bidirectional text is defined by
+ [[css-writing-modes-4#bidi-algo]]
+ and the Unicode Bidirectional Algorithm
+ (UAX9§3.4 Reordering Resolved Levels in particular).
+ [[!CSS-WRITING-MODES-4]]
+ [[!UAX9]]
+
+
+ bidi-breaking-001.xht
+ bidi-breaking-002.xht
+ bidi-breaking-003.xht
+
+
+
+ Preserved [=segment breaks=], and--
+ regardless of the 'white-space' values--
+ any Unicode character with the BK and NL line breaking class,
+ must be treated as [=forced line breaks=].
+ [[!UAX14]]
+
+
+ line-breaking/line-breaking-022.html
+
+
+ Note: The bidi implications of such [=forced line breaks=]
+ are defined by the Unicode Bidirectional Algorithm.
+ [[!UAX9]]
+
+
+ Except where explicitly defined otherwise
+ (e.g. for ''line-break: anywhere'' or ''overflow-wrap: anywhere'')
+ line breaking behavior defined for
+ the CM,
+ and SG,
+ WJ,
+ ZW,
+ GL,
+ and ZWJ
+ Unicode line breaking classes
+ must be honored.
+ [[!UAX14]]
+
+
+ word-break/word-break-normal-001.html
+ line-breaking/line-breaking-001.html
+ line-breaking/line-breaking-002.html
+ line-breaking/line-breaking-003.html
+ line-breaking/line-breaking-004.html
+ line-breaking/line-breaking-005.html
+ line-breaking/line-breaking-006.html
+ line-breaking/line-breaking-007.html
+ line-breaking/line-breaking-008.html
+ line-breaking/line-breaking-021.html
+ i18n/css3-text-line-break-baspglwj-001.html
+ i18n/css3-text-line-break-baspglwj-002.html
+ i18n/css3-text-line-break-baspglwj-120.html
+ i18n/css3-text-line-break-baspglwj-121.html
+ i18n/css3-text-line-break-baspglwj-122.html
+ i18n/css3-text-line-break-baspglwj-123.html
+ i18n/css3-text-line-break-baspglwj-124.html
+ i18n/css3-text-line-break-baspglwj-125.html
+ i18n/css3-text-line-break-baspglwj-126.html
+ i18n/css3-text-line-break-baspglwj-127.html
+ i18n/css3-text-line-break-baspglwj-128.html
+ i18n/css3-text-line-break-baspglwj-130.html
+ i18n/css3-text-line-break-baspglwj-131.html
+ word-break/word-break-break-all-018.html
+ word-break/word-break-break-all-021.html
+ word-break/word-break-break-all-022.html
+
+
+
+ CSS never allows [=soft wrap opportunities=]
+ within [=typographic character units=].
+ Thus, the CM and SG
+ Unicode line breaking classes must always be honored.
+ [[UAX14]]
+
+
+ UAs that allow wrapping at punctuation
+ other than [=word separators=]
+ in writing systems that use them
+ should prioritize breakpoints.
+ (For example, if breaks after slashes are given a lower priority than spaces,
+ the sequence “check /etc” will never break between the "/" and the "e".)
+ As long as care is taken to avoid such awkward breaks,
+ allowing breaks at appropriate punctuation other than [=word separators=]
+ is recommended,
+ as it results in more even-looking margins, particularly in narrow measures.
+ The UA may use the width of the containing block, the text's language,
+ the 'line-break' value,
+ and other factors in assigning priorities:
+ CSS does not define prioritization of [=soft wrap opportunities=].
+ Prioritization of [=word separators=] is not expected,
+ however,
+ if ''word-break: break-all'' is specified
+ (since this value explicitly requests line breaking behavior
+ not based on breaking at [=word separators=])--
+ and is forbidden under ''line-break: anywhere''.
+
+
+ [=Out-of-flow boxes=]
+ and [=inline box=] boundaries
+ do not introduce a [=forced line break=]
+ or [=soft wrap opportunity=] in the flow.
-
- word-break/auto-phrase/word-break-auto-phrase-008.html
-
+
+ line-breaking/line-breaking-012.html
+ line-breaking/line-breaking-015.html
+ line-breaking/line-breaking-016.html
+ line-breaking/line-breaking-017.html
+ line-breaking/line-breaking-018.html
+ line-breaking/line-breaking-019.html
+
-
- As an intermediary measure,
- user agents may also detect multiple levels of phrases,
- choosing to shorter ones
- (possibly down to individual words)
- when longer ones would lead to overflow.
-
+
+ For Web-compatibility
+ there is a [=soft wrap opportunity=]
+ before and after each replaced element or other [=atomic inline=],
+ even when adjacent to a character that would normally suppress them,
+ including U+00A0 NO-BREAK SPACE.
+ However,
+ with the exception of U+00A0 NO-BREAK SPACE,
+ there must be no [=soft wrap opportunity=]
+ between [=atomic inlines=] and adjacent characters
+ belonging to the Unicode GL, WJ, or ZWJ line breaking classes.
+ [[UAX14]]
- The [=soft wrap opportunities=] obtained by relaxing the restrictions
- introduced by ''word-break: keep-all'' and ''word-break: auto-phrase''
- are not considered
- when calculating [=min-content size|min-content intrinsic sizes=].
+
+ line-breaking/line-breaking-atomic-001.html
+ line-breaking/line-breaking-atomic-002.html
+ line-breaking/line-breaking-atomic-003.html
+ line-breaking/line-breaking-atomic-004.html
+ line-breaking/line-breaking-atomic-005.html
+ line-breaking/line-breaking-atomic-006.html
+ line-breaking/line-breaking-atomic-007.html
+ line-breaking/line-breaking-atomic-008.html
+ line-breaking/line-breaking-atomic-009.html
+ line-breaking/line-breaking-atomic-010.html
+ line-breaking/line-breaking-atomic-011.html
+ line-breaking/line-breaking-atomic-012.html
+ line-breaking/line-breaking-atomic-013.html
+ line-breaking/line-breaking-atomic-014.html
+ line-breaking/line-breaking-atomic-015.html
+ line-breaking/line-breaking-atomic-016.html
+ line-breaking/line-breaking-atomic-017.html
+ line-breaking/line-breaking-atomic-018.html
+ line-breaking/line-breaking-atomic-019.html
+ line-breaking/line-breaking-atomic-020.html
+ line-breaking/line-breaking-atomic-021.html
+ line-breaking/line-breaking-atomic-022.html
+ line-breaking/line-breaking-atomic-023.html
+ line-breaking/line-breaking-atomic-024.html
+ line-breaking/line-breaking-atomic-025.html
+ line-breaking/line-breaking-atomic-026.html
+ line-breaking/line-breaking-atomic-027.html
+ line-breaking/line-breaking-replaced-001.html
+ line-breaking/line-breaking-replaced-002.html
+ line-breaking/line-breaking-replaced-003.html
+ line-breaking/line-breaking-replaced-004.html
+ line-breaking/line-breaking-replaced-005.html
+ line-breaking/line-breaking-replaced-006.html
+ line-breaking/line-breaking-atomic-nowrap-001.html
+
-
anywhere
-
- An otherwise unbreakable sequence of [=characters=]
- may be broken at an arbitrary point
- if there are no otherwise-acceptable break points in the line.
- Shaping characters are still shaped
- as if the word were not broken,
- and grapheme clusters must stay together as one unit.
- No hyphenation character is inserted at the break point.
- [=Soft wrap opportunities=] introduced by ''overflow-wrap/anywhere''
- are considered
- when calculating [=min-content size|min-content intrinsic sizes=].
+
+ For [=soft wrap opportunities=] created by characters
+ that disappear at the line break (e.g. U+0020 SPACE),
+ properties on the box directly containing that character
+ control the line breaking at that opportunity.
+ For [=soft wrap opportunities=] defined by the boundary between two characters or [=atomic inlines=],
+ the 'white-space' property
+ on the nearest common ancestor of the two characters
+ controls breaking;
+
+ which elements’ 'line-break', 'word-break', and 'overflow-wrap' properties
+ control the determination of [=soft wrap opportunities=]
+ at such boundaries
+ is undefined in this level.
- overflow-wrap/overflow-wrap-min-content-size-001.html
- overflow-wrap/overflow-wrap-min-content-size-002.html
- overflow-wrap/overflow-wrap-min-content-size-003.html
- overflow-wrap/overflow-wrap-anywhere-001.html
- overflow-wrap/overflow-wrap-anywhere-003.html
- overflow-wrap/overflow-wrap-anywhere-006.html
- overflow-wrap/overflow-wrap-anywhere-007.html
- overflow-wrap/overflow-wrap-anywhere-008.html
- overflow-wrap/overflow-wrap-anywhere-009.html
- overflow-wrap/overflow-wrap-anywhere-010.html
- overflow-wrap/overflow-wrap-anywhere-011.html
- overflow-wrap/overflow-wrap-anywhere-inline-001.html
+ line-breaking/line-breaking-009.html
+ line-breaking/line-breaking-010.html
+ line-breaking/line-breaking-011.html
+ line-breaking/line-breaking-ic-001.html
+ line-breaking/line-breaking-ic-002.html
+ line-breaking/line-breaking-ic-003.html
+ white-space/white-space-wrap-after-nowrap-001.html
+ word-break/break-boundary-2-chars-001.html
+
overflow-wrap/overflow-wrap-anywhere-inline-002.tentative.html
overflow-wrap/overflow-wrap-anywhere-inline-003.tentative.html
overflow-wrap/overflow-wrap-anywhere-inline-004.tentative.html
- overflow-wrap/overflow-wrap-anywhere-fit-content-001.html
- overflow-wrap/overflow-wrap-min-content-size-005.html
- overflow-wrap/overflow-wrap-min-content-size-007.html
- overflow-wrap/overflow-wrap-cluster-002.html
- overflow-wrap/overflow-wrap-shaping-002.html
- white-space/break-spaces-before-first-char-009.html
- white-space/break-spaces-before-first-char-013.html
- white-space/break-spaces-before-first-ideographic-char-009.html
- white-space/break-spaces-before-first-ideographic-char-013.html
- word-break/word-break-min-content-001.html
- word-break/word-break-min-content-002.html
- word-break/word-break-min-content-003.html
- word-break/word-break-min-content-004.html
- word-break/word-break-min-content-005.html
- word-break/word-break-min-content-006.html
- white-space/pre-wrap-009.html
- white-space/pre-wrap-010.html
- white-space/break-spaces-with-overflow-wrap-002.html
- white-space/break-spaces-with-overflow-wrap-004.html
- white-space/break-spaces-with-overflow-wrap-006.html
- white-space/break-spaces-with-overflow-wrap-008.html
- white-space/break-spaces-with-overflow-wrap-010.html
- white-space/text-wrap-balance-overflow-002.html
+ word-break/word-break-break-all-inline-004.tentative.html
+ word-break/word-break-break-all-inline-007.tentative.html
+ word-break/word-break-break-all-inline-010.tentative.html
+
+ line-breaking/line-breaking-030.html
+ line-breaking/line-breaking-031.html
+ line-breaking/line-breaking-032.html
- In the case of ''word-break: auto-phrase'',
- these additional [=soft wrap opportunities=] are only introduced
- if relaxing the restrictions introduced by ''word-break: auto-phrase''
- as described in ''overflow-wrap: normal''
- is insufficient to prevent overflow.
+
+ For [=soft wrap opportunities=] before the first
+ or after the last character of a box,
+ the break occurs immediately before/after the box
+ (at its margin edge)
+ rather than breaking the box
+ between its content edge and the content.
-
break-word
-
- As for ''overflow-wrap/anywhere''
- except that
- soft wrap opportunities introduced by ''overflow-wrap/break-word''
- are not considered
- when calculating [=min-content size|min-content intrinsic sizes=].
+
+ Line breaking in/around Ruby is defined
+ in [[css-ruby-1#line-breaks]].
+ [[!CSS-RUBY-1]]
+
+
+ When shaping scripts such as Arabic
+ [=wrap=] at unforced [=soft wrap opportunities=] within words
+ (such as when breaking due to
+ ''word-break: break-all'',
+ ''line-break: anywhere'',
+ ''overflow-wrap: break-word'',
+ ''overflow-wrap: anywhere'',
+ or when [=hyphenating=])
+ the characters must still be shaped
+ (their joining forms chosen)
+ as if the word were still whole.
- overflow-wrap/overflow-wrap-001.html
- overflow-wrap/overflow-wrap-break-word-001.html
- overflow-wrap/overflow-wrap-break-word-003.html
- overflow-wrap/overflow-wrap-break-word-008.html
- overflow-wrap/overflow-wrap-break-word-009.html
- overflow-wrap/overflow-wrap-break-word-010.html
- overflow-wrap/overflow-wrap-min-content-size-004.html
- overflow-wrap/overflow-wrap-min-content-size-006.html
- overflow-wrap/overflow-wrap-min-content-size-008.html
- overflow-wrap/overflow-wrap-break-word-fit-content-001.html
- overflow-wrap/overflow-wrap-cluster-001.html
+ hyphens/hyphens-shaping-001.html
+ hyphens/hyphens-shaping-002.html
+ line-break/line-break-shaping-001.html
overflow-wrap/overflow-wrap-shaping-001.html
- white-space/break-spaces-before-first-char-008.html
- white-space/break-spaces-before-first-char-012.html
- white-space/break-spaces-before-first-ideographic-char-008.html
- white-space/break-spaces-before-first-ideographic-char-012.html
- overflow-wrap/overflow-wrap-break-word-keep-all-001.html
- white-space/break-spaces-with-overflow-wrap-001.html
- white-space/break-spaces-with-overflow-wrap-003.html
- white-space/break-spaces-with-overflow-wrap-005.html
- white-space/break-spaces-with-overflow-wrap-007.html
- white-space/break-spaces-with-overflow-wrap-009.html
- white-space/trailing-ideographic-space-013.html
- white-space/trailing-ideographic-space-014.html
- white-space/trailing-ideographic-space-015.html
- white-space/trailing-ideographic-space-016.html
- white-space/text-wrap-balance-overflow-001.html
+ overflow-wrap/overflow-wrap-shaping-002.html
+ word-break/word-break-break-all-004.html
-
-
- Issue: Do we need to add a none value to 'overflow-wrap'
- to opt out of relaxing the ''keep-all'' and ''word-break/auto-phrase'' restrictions
- as allowed by ''overflow-wrap: normal''?
-
- For legacy reasons, UAs must treat 'word-wrap'
- as a [=legacy name alias=] of the 'overflow-wrap' property.
-
-
- overflow-wrap/word-wrap-alias.html
- overflow-wrap/word-wrap-001.html
- overflow-wrap/word-wrap-002.html
- overflow-wrap/word-wrap-004.html
-
+
+ For example,
+ if the word “نوشتن” is broken between the “ش” and “ت”,
+ the “ش” still takes its initial form (“ﺷ”),
+ and the “ت” its medial form (“ﺘ”)--
+ forming as in “ﻧﻮﺷ | ﺘﻦ”, not as in “نوش | تن”.
+
+
Alignment and Justification
@@ -8687,8 +8688,7 @@ Text Alignment: the 'text-align' shorthand
according to the method specified by the 'text-justify' property,
in order to exactly fill the line box.
Unless otherwise specified by 'text-align-last',
- the last line before a forced break
- or the end of the block
+ the last line before a [=forced line break=]
is ''text-align/start''-aligned.
@@ -9737,7 +9737,6 @@ Aligning a block of text within its container: the 'text-group-align' property
-
Spacing
@@ -9779,7 +9778,7 @@ Word Spacing: the 'word-spacing' property
Initial: normal
Applies to: text
Inherited: yes
- Percentages: relative to computed 'font-size', i.e. ''1em''
+ Percentages: relative to used 'font-size'
Computed value: an absolute length and/or a percentage
Animation type: by computed value type
Canonical order: n/a
@@ -9850,7 +9849,7 @@ Word Spacing: the 'word-spacing' property
Note: Percentages inherit intact,
and are resolved against
- the computed 'font-size' of the current element
+ the used 'font-size' of the current element
(and thus represent a size relative to
the size of the text to which they apply),
unlike ''em'' units which are resolved against
@@ -9977,7 +9976,7 @@ Tracking: the 'letter-spacing' property
Initial: normal
Applies to: inline boxes and text
Inherited: yes
- Percentages: relative to computed 'font-size', i.e. ''1em''
+ Percentages: relative to used 'font-size'
Computed value: an absolute length and/or a percentage
Animation type: by computed value type
Canonical order: n/a
@@ -10092,7 +10091,7 @@ Tracking: the 'letter-spacing' property
Note: Percentages inherit intact,
and are resolved against
- the computed 'font-size' of the current element
+ the used 'font-size' of the current element
(and thus represent a size relative to
the size of the text to which they apply),
unlike ''em'' units which are resolved against
@@ -10624,7 +10623,7 @@ Inter-script Spacing
i.e. without any intervening non-zero [=margin=], [=border=], or [=padding=]
or intervening characters (such as a quotation mark or a space).
The amount of space introduced by these keywords is 1/8 of the CJK advance measure,
- i.e ''0.125ic''.
+ i.e ''0.125ic'' if the [=used value=] of 'font-size' is same as its [=computed value=].
Note: Spacing conventions vary, but values typically range from 1/4ic to as low as 1/8ic,
with 1/4ic being more common in historical contexts due to metal type limitations
@@ -12126,12 +12125,15 @@ Text Processing Order of Operations
[=wrapping|text wrapping=] while applying per line:
- * [[#text-indent-property|indentation]]
- * [[css-writing-modes-4#text-direction|bidirectional reordering]] [[!CSS2]] / [[!CSS-WRITING-MODES-4]]
- * [[#white-space-phase-2|white space processing]] part II
- * font/glyph selection and positioning [[!CSS-FONTS-3]]
- * 'letter-spacing', 'word-spacing', 'text-spacing', and 'line-padding'
- * [[#hanging-punctuation-property|hanging punctuation]]
+ 1. [[#text-indent-property|indentation]]
+ 2. [[css-writing-modes-4#text-direction|bidirectional reordering]] [[!CSS2]] / [[!CSS-WRITING-MODES-4]]
+ 3. [[#white-space-phase-2|white space processing]] part II
+ 4. 'line-padding', 'letter-spacing', 'word-spacing', and 'text-spacing'
+ 5. font/glyph selection and positioning [[!CSS-FONTS-3]]
+ 6. [[#hanging-punctuation-property|hanging punctuation]]
+
+ Note: These operations can impact how much text fits on the line,
+ and thus loop back to wrapping.
[[#justification|justification]]
@@ -12192,7 +12194,7 @@ Default UA Stylesheet
textarea { white-space-collapse: preserve !important; }
/* preserve character grid in preformatted text */
- pre, code, kbd, samp, tt { text-spacing: none; }
+ pre, code, kbd, samp, tt, listing, xmp, plaintext { text-spacing: none; }
/* Avoid hanging punctuation inheriting into preformatted blocks */
pre { hanging-punctuation: none; }
@@ -13224,20 +13226,19 @@ Word and Phrase Detection
-
-
-Security Considerations
+
+Privacy Considerations
- This specification introduces no new security considerations.
+ This specification leaks the user’s installed hyphenation and line-breaking dictionaries.
-
-Privacy Considerations
+
+Security Considerations
- This specification leaks the user’s installed hyphenation and line-breaking dictionaries.
+ This specification introduces no new security considerations.
Acknowledgements
@@ -13302,8 +13303,14 @@ Changes
This draft is kept in sync with [[CSS-TEXT-3]], see [[css-text-3#changes]].
Changes specific to Level 4 are listed below.
+ Significant changes since the 8 June 2026 Working Draft include:
+ * None yet
+
Significant changes since the 29 May 2024 Working Draft include:
- * None yet.
+ * Added ''avoid-orphans'' to 'text-wrap-style'.
+ (Issue 10837)
+ * Added <{listing}>, <{xmp}>, and <{plaintext}> to the list of elements assigned ''text-spacing: none'' in the default UA stylesheet.
+ (Issue 13369)
Significant changes since the 19 February 2024 Working Draft include:
* Renamed the 'text-spacing-trim' value trim-auto to ''trim-both''.
@@ -13316,7 +13323,6 @@ Changes
* Add the ''math-auto'' value for 'text-transform'.
(Issue 5386)
-
Significant changes since the 20 October 2023 Working Draft include:
* Restored accidentally deleted “and each line after a [=forced line break=]”
from definition of ''text-spacing-trim: space-first''.
diff --git a/css-text-5/Overview.bs b/css-text-5/Overview.bs
new file mode 100644
index 000000000000..82ddf2dca253
--- /dev/null
+++ b/css-text-5/Overview.bs
@@ -0,0 +1,225 @@
+
+Title: CSS Text Module Level 5
+Shortname: css-text
+Level: 4
+Status: ED
+Work Status: Exploring
+Group: csswg
+ED: https://drafts.csswg.org/css-text-4/
+TR: https://www.w3.org/TR/css-text-4/
+Previous Version: https://www.w3.org/TR/2024/WD-css-text-4-20240529/
+Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
+Editor: Koji Ishii, Invited Expert, kojiishi@gluesoft.co.jp, w3cid 45369
+Editor: Alan Stearns, Adobe Systems, stearns@adobe.com, w3cid 46659
+Editor: Florian Rivoal, Invited Expert, https://florian.rivoal.net, w3cid 43241
+Abstract: This CSS module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, and text transformation.
+Ignored Vars: letter-spacing
+WPT Path Prefix: /css/css-text/
+
+
+
+Introduction
+
+ This module describes the typesetting controls of CSS;
+ that is, the features of CSS that control the translation of
+ source text to formatted, line-wrapped text.
+
+ This specification describes features introduced in Level 5;
+ it is a diff against [[css-text-4]].
+
+
The 'text-fit' property describes how [=inline-level=] contents are
+ scaled if they do not fit to the [=line box=].
+
+
Values have the following meanings:
+
+
+
none
+
+ The user agent doesn't scale [=inline-level=] contents to fit to
+ the [=line box=].
+
+
+
grow
+
+ The user agent scales up [=inline-level=] contents to fit to the
+ [=line box=].
+
+
+
shrink
+
+ The user agent scales down [=inline-level=] contents to fit to the
+ [=line box=].
+
+
+
consistent
+
+ Specifies that all lines in the container are scaled with a single
+ scaling factor.
+ This keyword has no effect if ''text-fit/none'' is specified.
+ If none of ''text-fit/consistent'', ''text-fit/per-line'', or
+ ''text-fit/per-line-all'' are specified, ''text-fit/consistent'' is
+ assumed.
+
+
+
per-line
+
+ Specifies that each line is scaled with its own scaling factor.
+ However, the last line of the block and lines that end in a forced
+ break are not scaled.
+ This keyword has no effect if ''text-fit/none'' is specified.
+
+
+
per-line-all
+
+ Specifies that each line is scaled with its own scaling factor,
+ including the last line of the block and lines that end in a forced
+ break.
+ This keyword has no effect if ''text-fit/none'' is specified.
+
+
+
<percentage>
+
+ Specifies the limit of the scaling factor.
+ If ''text-fit/grow'' is specified and the value is 100% or greater,
+ it is the maximum scaling factor.
+ If ''text-fit/shrink'' is specified and the value is between 0% and
+ 100% inclusive, it is the minimum scaling factor.
+ Otherwise, or if this component is omitted, there is no limit on
+ the scaling factor.
+
+
+
+
This property provides a functionality to make [=inline-level=] contents
+ exactly fill the inline size of the [=line box=].
+ Unlike ''text-align/justify'' of the 'text-align' property, which achieves
+ this by adjusting spacing between characters, this property scales the
+ font size.
+
+
When ''text-fit/grow'' or ''text-fit/shrink'' is specified,
+ a [=line scaling factor=] is computed for each [=line box=].
+ If ''text-fit/consistent'' applies, all [=line boxes=] are scaled by the
+ smallest computed [=line scaling factor=].
+ Otherwise, each [=line box=] is scaled by its own [=line scaling factor=].
+
+
This property does not affect the 'font-size' [=computed value=],
+ and thus does not affect font-size-relative <> values of other properties.
+ For example, "line-height: 1.5em" and "letter-spacing: 0.1em" are not
+ affected by this scaling.
+
+
The [=used value=] of the text 'font-size' is its [=computed value=]
+ multiplied by the [=line scaling factor=].
+
+
Scaling can change the [=block size=] of a [=line box=],
+ which can in turn change its position along the [=block-axis=].
+ If any feature is active that would cause the [=inline size=] of the
+ [=line box=] to change based on its [=block-axis=] position (such as
+ 'float' or 'initial-letter'), scaling is disabled for the block.
+
+
+ If the [=inline size=] of a block container depends on the size of
+ the viewport, its apparent [=inline size=] may not change even if
+ the user changes the page zoom level.
+ In that case, if text is fitted with this feature, the text size may
+ not change at all even though the zoom level has changed.
+ There is no agreement yet on how to deal with this issue. See
+ csswg#12886.
+
+
+
Computing line scaling factor
+
+
The parts of the [=line box=]'s contents that can be scaled by this
+ property are called scalable parts.
+ These include:
+
+
+
+ Text, including text in [=inline boxes=], but excluding trailing
+ white space.
+
+
+ Spacing whose [=inline size=] is proportional to the 'font-size'
+ used value.
+ E.g. percentage-based 'letter-spacing' or 'word-spacing', and 'text-autospace'.
+
+
+
+ 'text-indent', 'line-padding', non-percentage-based 'letter-spacing' and
+ 'word-spacing', and [=atomic inlines=] are not [=scalable parts=].
+ The [=inline-axis=] 'padding', 'border', and 'margin' of inline boxes are
+ also not [=scalable parts=].
+
+
A line scaling factor is the ratio by which the
+ [=scalable parts=] of a line must be scaled in order to make its
+ [=inline-level=] content exactly fit the [=line box=]’s [=inline size=].
+
+
A [=line scaling factor=] is computed from:
+
+
+
The total [=inline size=] of the [=scalable parts=] in the line.
+
+ The remaining space in the [=line box=], including any trailing whitespace
+ (which may be negative if the content overflows the [=line box=]).
+
+
+
If a <> is specified, it clamps the [=line scaling factor=].
+
+
+ A simple calculation for the [=line scaling factor=] would be
+ (A + B) / A, where A is the total [=inline size=] of
+ [=scalable parts=] and B is the remaining space.
+ However, due to [[css-fonts-4#font-optical-sizing-def|optical sizing]], the
+ [=inline size=] of text might not be perfectly proportional to its
+ 'font-size'.
+ The exact method for determining a reasonable [=line scaling factor=]
+ is up to the implementation.
+
+
The [=line scaling factor=] for a [=line box=] with no
+ [=scalable parts=] is 1.
+
+
+
+Appendix A:
+Text Processing Order of Operations
+
+ * [[#text-fit-property|text fitting]] is applied
+ after text wrapping and before text justification.
+ * font/glyph selection
+ and positioning [[!CSS-FONTS-3]] may be done again
+ * 'letter-spacing', 'word-spacing', and 'text-spacing' may be updated.
+
+
+Acknowledgements
+
+
+
+ The 'text-fit' property would not be here without the efforts of
+ Kent Tamura and Roman Komarov.
+
+
+Changes
+
+
+
+Additions Since Level 4
+
+ New features in Level 5:
+ * Added the 'text-fit' property.
diff --git a/css-text-decor-4/Overview.bs b/css-text-decor-4/Overview.bs
index 70e8a79eea47..03194bf48ce9 100644
--- a/css-text-decor-4/Overview.bs
+++ b/css-text-decor-4/Overview.bs
@@ -366,7 +366,8 @@ Text Decoration Line Thickness: the 'text-decoration-thickness' property
Note: A length will inherit as a fixed value,
and will not scale with the font.
- A percentage value specifies the thickness of text decoration lines as a percentage of ''1em''.
+ A percentage value specifies the thickness of text decoration lines as a percentage of
+ the used 'font-size'.
Note: A percentage will inherit as a relative value,
and will therefore scale with changes in the font as it inherits.
@@ -707,7 +708,8 @@ Text Underline Offset: the 'text-underline-offset' property
Note: A length will inherit as a fixed value,
and will not scale with the font.
- A percentage value specifies the offset of underlines as a percentage of ''1em''.
+ A percentage value specifies the offset of underlines as a percentage of the used
+ 'font-size'.
Note: A percentage will inherit as a relative value,
and will therefore scale with changes in the font as it inherits.
diff --git a/css-transforms-1/Makefile b/css-transforms-1/Makefile
index 7daaf1c1937f..08b56216e0d6 100755
--- a/css-transforms-1/Makefile
+++ b/css-transforms-1/Makefile
@@ -9,8 +9,10 @@ REMOTE_PREPROCESSOR_URL=https://www.w3.org/publications/spec-generator/
all: $(OUTPUTFILE)
-$(OUTPUTFILE): $(SOURCEFILE)
+$(OUTPUTFILE): $(SOURCEFILE) Makefile
ifneq (,$(REMOTE))
+ curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F output=messages -F type=bikeshed-spec
+ @echo
curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F type=bikeshed-spec > "$@"
else
$(PREPROCESSOR) -f spec "$<" "$@"
diff --git a/css-transforms-2/Makefile b/css-transforms-2/Makefile
index 243dd97e8ff8..f6c64a785beb 100755
--- a/css-transforms-2/Makefile
+++ b/css-transforms-2/Makefile
@@ -11,8 +11,10 @@ REMOTE_PREPROCESSOR_URL=https://www.w3.org/publications/spec-generator/
all: $(OUTPUTFILE)
-$(OUTPUTFILE): $(SOURCEFILE)
+$(OUTPUTFILE): $(SOURCEFILE) Makefile
ifneq (,$(REMOTE))
+ curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F output=messages -F type=bikeshed-spec
+ @echo
curl $(REMOTE_PREPROCESSOR_URL) -F file=@$(SOURCEFILE) -F type=bikeshed-spec > "$@"
else
$(PREPROCESSOR) -f spec "$<" "$@"
diff --git a/css-transitions-2/Overview.bs b/css-transitions-2/Overview.bs
index d4718f7b4548..29793811610a 100644
--- a/css-transitions-2/Overview.bs
+++ b/css-transitions-2/Overview.bs
@@ -582,6 +582,30 @@ the {{TransitionEvent}}.
+## Interface {{TransitionEvent}} ## {#interface-transitionevent}
+
+Add animation to the {{TransitionEvent}} interface and {{TransitionEventInit}} dictionary as follows:
+
+### IDL Definition ### {#interface-transitionevent-idl}
+
+
+
+### Attributes ### {#interface-transitionevent-attributes}
+
+Add attribute descriptions as follows:
+
+: animation
+:: The CSS Transition corresponding to the transition that fired the event.
+
# DOM Interfaces # {#interface-dom}
## The CSSTransition interface ## {#the-CSSTransition-interface}
diff --git a/css-ui-4/Overview.bs b/css-ui-4/Overview.bs
index 454161a41248..81788b6b2fca 100644
--- a/css-ui-4/Overview.bs
+++ b/css-ui-4/Overview.bs
@@ -1371,12 +1371,18 @@ Insertion caret
though it sometimes resembles a caret,
is not a caret (it's a cursor).
+ Within the context of this section, character is
+ to be understood as extended grapheme cluster,
+ as defined in [[!UAX29]], and visible character
+ means a character with a non-zero advance measure.
+
+
Coloring the Insertion Caret: the 'caret-color' property
Name: caret-color
- Value: auto | <>
+ Value: auto | <> [auto | <>]?
Initial: auto
Applies to: text or elements that [=accept text input=]
Inherited: yes
@@ -1416,6 +1422,8 @@ Coloring the Insertion Caret: the 'caret-color' property
This property controls the color of the [=insertion caret=].
+ It takes one or two values.
+ The first value has the following effects:
auto
@@ -1443,6 +1451,83 @@ Coloring the Insertion Caret: the 'caret-color' property
+ The second value has no effect when 'caret-shape' is ''caret-shape/bar'', ''caret-shape/underscore'',
+ or ''caret-shape/auto'' behaving as either of these values.
+ If 'caret-shape' is ''caret-shape/block''--
+ or ''caret-shape/auto'' behaving as ''caret-shape/block''--
+ then it determines the color of the text [=overlapping the caret=].
+ If the second value is omitted,
+ the behavior is the same as if auto had been specified.
+
+
+
auto
+
+ User agents must automatically adjust the color of the text [=overlapping the caret=]
+ to ensure good visibility and contrast between the text
+ and the underlying ''caret-shape/block'' caret,
+ if using ''currentColor'' would result in poor readability.
+ The specifics of how to assess contrast
+ and how to pick a sufficiently contrasty color are up to the user agent.
+
+
<>
+
+ The color of text [=overlapping the caret=] is the specified color.
+
+ Note: Authors wishing to ensure that the color of the text remains constant
+ regardless of the position of a ''caret-shape/block'' caret
+ can specify ''currentColor'' as the second value of 'caret-color'.
+
+
+ Text considered to overlap the caret
+ is the next [=visible character=] after the insertion point, if any.
+
+
+ This illustrates the effect of the second value of 'caret-color' on ''caret-shape/block'' carets.
+ In each of the sample renderings below,
+ the insertion point is between the letters u and m.
+
+
+
+
+
'caret-color:'
+
Sample rendering
+
Your browser (focus each cell to see the [=caret=])
+
+
+
''black'' (or ''black auto'')
+
Lorem ipsum
+
Lorem Ipsum
+
+
+
''black yellow''
+
Lorem ipsum
+
Lorem Ipsum
+
+
+
''black black''
+
Lorem ipsum
+
Lorem Ipsum
+
+
+
+ Optionally, user agents may treat as overlapping only those parts of next [=visible character=]
+ which visually intersect with the ''caret-shape/block'',
+ and adjust the color of those parts only.
+
Animation of the insertion caret: 'caret-animation'
@@ -1537,7 +1622,7 @@ Animation of the insertion caret: 'caret-animation'
-
+
Text area
with color-alternating caret
@@ -1549,7 +1634,7 @@ Animation of the insertion caret: 'caret-animation'
}
This property allows authors to specify
the desired shape of the [=insertion caret=].
- Within the context of this definition, character is
- to be understood as extended grapheme cluster,
- as defined in [[!UAX29]], and visible character
- means a character with a non-zero advance measure.
-
auto
@@ -1708,6 +1788,7 @@ Shape of the insertion caret: 'caret-shape'
}
#caret-shape-example td+td {
background:white;
+ color: black;
}
@@ -4072,6 +4153,59 @@ Single-Line Text Input Controls
* The content does not wrap
* The 'text-overflow' property applies regardless of the value of the 'overflow' property
+
+Window Interaction
+
+
+Moving the window: the 'window-drag' property
+
+
+ Name: window-drag
+ Value: none | move
+ Initial: none
+ Applies to: all elements
+ Inherited: yes
+ Percentages: N/A
+ Computed value: as specified
+ Canonical order: per grammar
+ Animation type: discrete
+
+
+
+
+
+ An installed application's window typically has a designated area where it can be dragged to move the window.
+ This area is generally at the top of the window
+ (usually part of the titlebar, toolbar, or both),
+ outside of the region that the page is actually rendered in.
+ For installed web apps,
+ APIs or capabilities like [[WINDOW-CONTROLS-OVERLAY]]
+ can alter and remove the surfaces where users can move a window.
+ The 'window-drag' property allows the author to specify an area within the page
+ where a user can drag to move the window.
+ Values have the following meanings:
+
+
+
none
+
+ Specifies that the element cannot be used as a drag area.
+
+
move
+
+ Specifies that the element's [=principal box=] can be used as a [=window drag area=].
+
+
+ Note: Some UAs may support app-region as a [=legacy shorthand=] for 'window-drag'.
+
+ When a [=box=] is a window drag area,
+ a drag gesture on that element initiates a window move operation
+ instead of normal web event processing.
+ The UA must not fire pointer events, mouse events, or drag events
+ on the element for the duration of the window move gesture.
+
+ Note: This means the [[HTML]] <{html-global/draggable}> attribute
+ has no effect on elements with ''window-drag: move'';
+ the window move behavior takes precedence.
diff --git a/css-values-3/Overview.bs b/css-values-3/Overview.bs
index 12dd0cb8475c..c0587823e447 100644
--- a/css-values-3/Overview.bs
+++ b/css-values-3/Overview.bs
@@ -418,7 +418,7 @@ Property Value Examples
'border-width'
@@ -668,9 +668,17 @@ Textual Data Types
(which includes character set conversion and [[css-syntax-3#escaping|escaping]]).
[[!UNICODE]] [[!CSS-SYNTAX-3]]
+ [=Strings=], denoted by <string>,
+ are sequences of characters representing arbitrary textual data.
+ When written literally,
+ they are delimited by double quotes or single quotes,
+ and correspond to the <> production. [[!CSS-SYNTAX-3]].
+
CSS identifiers,
generically denoted by <ident>,
- consist of a sequence of characters conforming to the <> grammar. [[!CSS-SYNTAX-3]]
+ represent names,
+ and are written as an unquoted sequence of (potentially escaped) characters
+ corresponding to the <> grammar. [[!CSS-SYNTAX-3]]
Identifiers cannot be quoted;
otherwise they would be interpreted as strings.
CSS properties accept two classes of [=CSS/identifiers=]:
@@ -867,11 +875,11 @@ Prefixed Author-defined Identifiers: the <> type
Quoted Strings: the <> type
- [=Strings=] are denoted by <string>.
+ [=Strings=], denoted by <string>,
+ are sequences of characters representing arbitrary textual data.
When written literally,
- they consist of a sequence of characters delimited by double quotes or single quotes,
- corresponding to the <> production
- in the CSS Syntax Module [[!CSS-SYNTAX-3]].
+ they are delimited by double quotes or single quotes,
+ and correspond to the <> production. [[!CSS-SYNTAX-3]].
Double quotes cannot occur inside double quotes, unless
@@ -1790,19 +1798,17 @@ Distance Units: the <> type
(This algorithm is called by individual properties explicitly.)
- To snap a length as a border width
+ To snap a length as a line width
given a <> |len|:
- 1. Assert: |len| is non-negative.
-
- 2. If |len| is an integer number of [=device pixels=],
+ 1. If |len| is an integer number of [=device pixels=],
do nothing.
- 3. If |len| is greater than zero, but less than 1 [=device pixel=],
- round |len| up to 1 [=device pixel=].
+ 2. If the absolute value of |len| is greater than zero, but less than 1 [=device pixel=],
+ round it away from zero to 1 or -1 [=device pixel=].
- 4. If |len| is greater than 1 [=device pixel=],
- round it down to the nearest integer number of [=device pixels=].
+ 4. If the absolute value of |len| is greater than 1 [=device pixel=],
+ round it towards zero to the nearest integer number of [=device pixels=].
@@ -3344,14 +3350,13 @@ Stepped Value Functions: ''round()'', ''mod()'', and ''rem()''
:: Choose whichever of |lower B| and |upper B|
that has the smallest absolute difference from 0.
: line-width
- :: If A is non-negative and B is omitted,
- A is [=snapped as a border width=].
-
- Otherwise, identical to ''/nearest'',
- except that if A is positive (non-zero)
- and one of |lower B| or |upper B| is zero,
- choose the non-zero one,
- then [=snap as a border width=].
+ :: If B is omitted,
+ A is [=snapped as a line width=].
+
+ Otherwise round as for ''/nearest'',
+ except that if one of |lower B| or |upper B| is zero,
+ the non-zero one is chosen,
+ and the final result is [=snapped as a line width=].
If |lower B| would be zero,
@@ -4933,7 +4938,28 @@ Simplification
(0 - value).
2. If |root|'s child is a Negate node,
return the child's child.
- 3. Return |root|.
+ 3. If |root|'s child is a Sum node:
+
+ 1. Let |negated grandchildren| be an empty list
+
+ 2. For each |grandchild| of the child's children:
+
+ 1. If |grandchild| is a numeric value,
+ create an equivalent numeric value,
+ but with the value negated
+ (0 - value),
+ and append the result to |negated grandchildren|.
+
+ 2. If |grandchild| is a Negate node
+ append |grandchild|'s child to |negated grandchildren|
+
+ 3. Otherwise,
+ create a Negate node with |grandchild| as its child,
+ and append the result to |negated grandchildren|
+
+ 3. Return a Sum node with |negated grandchildren| as its children
+
+ 4. Return |root|.
7. If |root| is an Invert node:
@@ -5476,7 +5502,7 @@ Appendix A: Coordinating List-Valued Properties
these are used together to define a single effect,
such as a background image layer
or an animation.
- The [=coordinated value list=] is assembled as follows:
+ The [=used value|used=] [=coordinated value list=] is assembled as follows:
* The length of the [=coordinated value list=] is determined by
the number of items specified in one particular [=coordinating list property=],
@@ -5495,6 +5521,24 @@ Appendix A: Coordinating List-Valued Properties
* The [=computed values=] of the [=coordinating list properties=]
are not affected by such truncation or repetition.
+
+ A shorthand that represents a [=coordinated value list=]
+ as a single list collecting corresponding values into each item
+ cannot represent [=coordinating list property=] longhands
+ that have varying list lengths in their values.
+ Thus, if any longhands have mismatched list lengths
+ (excepting any longhands that have their initial value,
+ and thus can be omitted from the shorthand syntax),
+ the CSSOM representation of the shorthand's value will return the empty string.
+
+
In the 'background' shorthand,
+ the first value in the list combines the first values from 'background-image', 'background-position, 'background-attachment', etc;
+ the second value combines the second values; and so on.
+ This syntax can only represent its longhands when they have equal-length lists
+ (or are their initial value);
+ if the longhands are individually set to different lengths,
+ the CSSOM representation of 'background' is just "" (the empty string).
+
Appendix B: IANA Considerations
@@ -5646,6 +5690,12 @@ Recent Changes
(This is a subset of [[#additions-L3]].)
+ Substantial changes since 12 March 2024 Working Draft:
+ * Adapt the [=snap as a line width=] algorithm to handle negative numbers.
+ (Issue 13795)
+
+ ISSUE: Finish this list.
+
Substantial changes since 18 December 2023 WD:
* Added the ''clamp()/none'' values to ''clamp()'',
@@ -5694,7 +5744,7 @@ Recent Changes
Added [[#component-functions]] to formally define the way that [=functional notation=] syntaxes are defined.
(Issue 2921)
-
Added algorithm for [=snap as a border width=],
+
Added algorithm for [=snap as a line width=],
to reflect the interoperable rules for rendering consistent stroke widths.
(Issue 5210)
Clarified grammar and [=computed value=] of ''mix()''.
diff --git a/css-values-5/Overview.bs b/css-values-5/Overview.bs
index 5fa25d213987..b8d2ea21a6e0 100644
--- a/css-values-5/Overview.bs
+++ b/css-values-5/Overview.bs
@@ -17,6 +17,7 @@ Inline Github Issues: no
Default Highlight: css
Status Text: This spec is in the early exploration phase. Feedback is welcome, and and major breaking changes are expected.
Include MDN Panels: yes
+WPT Path Prefix: css/css-values/
spec:css-color-4; type:property; text:color
@@ -122,39 +123,48 @@ Functional Notation Definitions
Commas in Function Arguments
[=Functional notation=] often uses commas
- to separate parts of its internal grammar.
+ to separate parts of its internal grammar,
+ and occasionally other syntax
+ (such as : or ; in ''if()'').
However, some functions
(such as ''mix()'')
allow values that, themselves,
- can contain commas.
+ could contain these argument-separating tokens.
These values
(currently <>, <>, and <>)
- are comma-containing productions.
+ are free-form productions.
To accommodate these sorts of grammars unambiguously,
- the [=comma-containing productions=] can be optionally wrapped in curly braces {}.
- These braces are syntactic, not part of the actual value.
- Specifically:
-
- * A [=comma-containing production=] can either start with a "{" token, or not.
- * If it does not start with a "{" token,
- then it cannot contain commas or {} blocks,
- in addition to whatever specific restrictions it defines for itself.
+ the [=free-form productions=] can be optionally wrapped in curly braces {}.
+ These braces are syntactic, not part of the actual value,
+ and only serve to explicitly indicate the bounds of the production.
+ A [=free-form production=] can either
+ (after optional whitespace)
+ start with a <<{-token>>, or not:
+
+ : If it does not start with a "{" token
+ ::
+ The production does not match any top-level commas or {} blocks.
(The production stops parsing at that point,
so the comma or {} block is matched by the next grammar term instead;
probably the function's own argument-separating comma.)
- * If it does start with a "{" token,
- then the production matches just the {} block that the "{" token opens.
+ Individual usages of the production can define additional tokens
+ that are similarly restricted from matching at the top-level.
+ : If it does start with a "{" token
+ ::
+ The production matches just the {} block that the "{" token opens.
It represents the contents of that block,
- and applies whatever specific restrictions it defines for itself
- to those contents,
- ignoring the {} block wrapper.
+ ignoring the {} block wrapper itself.
+
+ Note: General restrictions defined for a particular [=free-form production=],
+ like <> not matching <>s,
+ apply regardless of whether it's {}-wrapped or not.
For example, the grammar of the ''random-item()'' function is:
The ''#'' indicates comma-separated repetitions,
@@ -194,7 +204,7 @@ Commas in Function Arguments
either ''Times, serif'', or ''sans-serif'', or ''monospace''.
However, this {}-wrapping is only allowed for some function arguments--
- those defined as [=comma-containing productions=].
+ those defined as [=free-form productions=].
It's not valid for any other productions;
if you use {} around other function arguments,
it'll just fail to match the function's grammar
@@ -217,7 +227,7 @@ Commas in Function Arguments
[=Functional notations=] are serialized without {} wrappers whenever possible.
- The following generic productions are [=comma-containing productions=]:
+ The following generic productions are [=free-form productions=]:
* <>
* <>
@@ -225,16 +235,16 @@ Commas in Function Arguments
For legacy compat reasons,
the <> defined for the fallback value of ''var()''
- is a non-strict comma-containing production.
+ is a non-strict free-form production.
It ignores the rules restricting what it can contain
when it does not start with a "{" token:
it is allowed to contain commas and {} blocks.
- It still follows the standard [=comma-containing production=] rules
+ It still follows the standard [=free-form production=] rules
when it does start with a "{" token, however:
the fallback is just the contents of the {} block,
and doesn't include the {} wrapper itself.
- Other contexts may define that they use [=non-strict comma-containing productions=],
+ Other contexts may define that they use [=non-strict free-form productions=],
but it should be avoided unless necessary.
@@ -460,6 +470,15 @@ Resource Locators: the <> type
- Issue(w3c/csswg-drafts#11424): Should we allow a fallback value?
-
The ''ident()'' function can be used as a value for any property or function argument
that accepts a <>.
@@ -2243,6 +2419,10 @@ Constructing <> values: the ''ident()'' function
Generating Random Values
+
+random-in-keyframe.html
+
+
It is often useful to incorporate some degree of "randomness" to a design,
either to make repeated elements on a page feel less static and identical,
or just to add a bit of "flair" to a page without being distracting.
@@ -2271,10 +2451,7 @@ Generating a Random Numeric Value: the ''random()'' function
optionally limiting the possible values to a step between those limits:
See [[#random-evaluation]] and [[#random-caching]]
@@ -2282,16 +2459,15 @@ Generating a Random Numeric Value: the ''random()'' function
Its arguments are:
- : <>
- :: The optional <>
+ : <>
+ :: The optional <>
controls which [=random functions=] in the document
will share a [=random base value=]
and which will get distinct values.
- If <> is omitted,
+ If <> is omitted,
it behaves as ''random()/auto''.
- See below for details on the <> options,
- and see [[#random-caching]] for a precise description of their behavior.
+ See [[#random-caching]] for a full description of this value.
: <>, <>
:: The two required [=calculations=]
@@ -2375,38 +2551,6 @@ Generating a Random Numeric Value: the ''random()'' function
as lengths and angles are not the same type.
- A ''random()'' function can be [=simplify a calculation tree|simplified=]
- as soon as its argument [=calculations=]
- can be simplified to numeric values.
- See [[#random-caching]] for details on how it's resolved.
-
- If a ''random()'' function can't be [=simplify a calculation tree|simplified=]
- by [=computed value=] time,
- then it computes to its maximally-simplified form,
- but with its <> set to its [=random base value=].
-
-
- For example, given the declaration ''width: random(50%, 100%)'',
- the calculations can't be simplified at [=computed value=] time
- because the percentages depend on [=used value=] information
- (the size of the element's [=containing block=]).
-
- So, the [=computed value=] of the property
- is ''width: random(fixed .1234, 50%, 100%)''
- (or some other random value instead of ''.1234''),
- meaning it will eventually resolve to ''56.17%''
- (or similar for the actual random value).
-
-
- Issue: At least in theory it should be fine to use ''random()''
- in non-property contexts,
- it would just set the "element id" of the caching key to null,
- and, if necessary, compute an appropriate descriptor/etc-based caching key.
- Like, @media (max-width: random(100px, 500px)) {...}
- could be well-defined;
- the caching key is just "@media max-width 1" or something.
- I suspect we want to disallow it, tho?
-
Argument Ranges
@@ -2447,7 +2591,7 @@ Picking a Random Item From a List: the ''random-item()'' function
from among its list of items.
The ''random-item()'' function's [=argument grammar=] is:
@@ -2459,16 +2603,16 @@ Picking a Random Item From a List: the ''random-item()'' function
See [[#random-evaluation]] and [[#random-caching]]
for details on how the function is evaluated.
- The required <>
+ The required <>
is interpreted identically to ''random()''.
(See [[#random-caching]] for details.)
- Note: The <> argument is required in ''random-item()'',
+ Note: The <> argument is required in ''random-item()'',
but optional in ''random()'',
for parsing reasons
(it's impossible to tell whether ''random-item(--foo, --bar, --baz)''
has three <> arguments
- or two and a <>).
+ or two and a <>).
The remaining arguments are arbitrary sequences of CSS values.
The ''random-item()'' function is substituted with one of these sequences,
@@ -2499,7 +2643,7 @@ Picking a Random Item From a List: the ''random-item()'' function
and |options| be a list of the remaining <>? options.
2. [=Substitute arbitrary substitution functions=] in |value sharing|,
- then [=CSS/parse=] it as <>.
+ then [=CSS/parse=] it as <>.
If parsing returns failure,
return the [=guaranteed-invalid value=];
otherwise set |value sharing| to the result.
@@ -2593,58 +2737,88 @@ Evaluating Random Values
-Sharing (Or Not) Random Values: the <> value
+Sharing (Or Not) Random Values: the <> value
CSS is a declarative language,
- so functions don't have a specific "time" when they're "evaluated";
- the user agent is free to "execute" functions in any order,
+ so functions don't have a specific “time” when they're evaluated;
+ the user agent is free to “execute” functions in any order,
as many times as they want,
as every execution will return the same value.
- This is difficult to square with "random" functions,
+ This is difficult to square with random-value functions,
which are inherently stateful and care about
when, how often, and in what order they're executed.
- To fix this, the [=random functions=] are associated with a [=random cache key=],
+ To solve this, the [=random functions=] are associated with a [=random cache name=],
ensuring that any time the random function is evaluated with the same cache key,
it will return the same [=random base value=];
and also that [=random functions=] with different caching keys
will return different [=random base value=] from each other
(unless they are, randomly, the same).
- The <> value controls this behavior:
+ The <> value controls this behavior,
+ and defaults to ''random()/auto'' when omitted.
+ It's syntax is as follows, and interpreted as described below:
-
- : auto
- :: The [=random function=] is roughly "as random as possible":
- every usage in a property,
- between different properties,
- and between different elements
- will get a different [=random cache key=].
- (See below for exact details.)
-
- If the <> is omitted,
- it behaves as ''random()/auto''.
+
- : <>
- :: The <> specifies the [=random cache key=] directly.
- It always contains a <>,
- specifying the name,
- and can optionally contain additional dynamic information:
-
- * element adds an element identifier to the [=random cache key=],
- so different elements will get different random values
- * property adds the property name the [=random function=] is being used on to the [=random cache key=],
- so different properties will get different random values
- * property index
+
+ : auto
+ :: The [=random function=] is roughly “as random as possible”:
+ the [=random cache name=], and thus the result,
+ varies across every ''random()'' instance in a multi-component value,
+ across different properties,
+ and across different elements.
+
+ This is equivalent to specifying ''element-scoped property-index-scoped'',
+ and simplifies in exactly the same way.
+
+ : <>
+ :: The <> specifies the [=random cache name=],
+ allowing it to be explicitly shared (or not)
+ with other uses of [=random functions=].
+ Every [=random function=] using the same [=random cache name=]
+ will get the same random value;
+ every one using a different [=random cache name=]
+ will get unrelated random values.
+
+
+
The <> gives the value an explicit name.
+ If omitted, this part of the name is null.
+
element-scoped adds an element-specific identifier
+ to the [=random cache name=],
+ so different elements will get different random values.
+
property-scoped adds the property name the [=random function=] is being used on
+ to the [=random cache name=],
+ so different properties will get different random values.
+ Note that shorthand declarations will apply the [=shorthand property=]'s name.
+
property-index-scoped
adds the property name and the index of the random function
among all the random functions used in the same property value
- to the [=random cache key=],
- so multiple uses of a [=random function=] in the same property
- will get different random values.
-
- : fixed <>
+ to the [=random cache name=],
+ so multiple instances of a [=random function=] in the same declaration
+ will each get different [=random cache names=].
+ Note this index is assigned before [=shorthand=] expansion.
+
+
+ See [[#random-simplify]] for how these values resolve.
+
+ The <> value,
+ like ''fixed'' below, isn't intended to be specified by authors,
+ but can show up in [=computed values=].
+ It is a <> that must start with the prefix ua-,
+ or else it is invalid.
+ When generated automatically by the user agent,
+ it follows certain specific patterns;
+ see [[#random-simplify]] for details.
+
+ : fixed <>
:: If ''fixed <>'' is specified,
- the [=random function=] bypasses the [=random cache key=] entirely,
+ the [=random function=] bypasses the [=random cache name=] entirely,
and just uses the <> as its [=random base value=] directly.
While ''1'' is technically allowed as a valid value
@@ -2663,7 +2837,7 @@ Sharing (Or Not) Random Values: the <> value
- Imagine you have 100 ''.box'' elements,
+ Imagine you have several ''.box'' elements,
all styled with the following CSS:
@@ -2674,33 +2848,69 @@ Sharing (Or Not) Random Values: the <> value
}
- Depending on what <> you provide
+ Depending on what <> you provide
in place of the ''???'',
you'll get significantly different behavior for the elements:
- * ''auto''/omitted, maximum random:
- each property gets a different value,
+ : ''auto''/omitted, maximum random:
+ ::
+ Each property gets a different value,
and it's different per element too,
so you get a bunch of different random rectangles.
- * ''--foo'', shared by name:
- both properties use the same value,
+ : ''--foo'', shared by name:
+ ::
+ Both properties use the same value,
and every element shares that value,
so you get a bunch of identical random squares.
- * ''--foo element'', shared by name, per element:
- both properties use the same value,
+ : ''element-scoped'', scoped per element:
+ ::
+ Both properties use the same value,
but each element gets a different value,
so you get a bunch of different random squares.
- * ''--foo property'', shared by name, per property:
- each property gets a different value,
+ : ''property-scoped'', scoped per property:
+ ::
+ Each property gets a different value,
but each element shares that value,
- so you get a bunch of identical random rectangles
+ so you get a bunch of identical random rectangles.
+
+
- Note that only the [=random cache key=]
+ Note that only the [=random cache name=]
controls whether two [=random functions=] have the same value or not;
their other arguments don't contribute in any way.
@@ -2714,27 +2924,27 @@ Sharing (Or Not) Random Values: the <> value
will actually share a [=random base value=]
- because their [=random cache keys=] are identical.
- If this [=random cache key=] is linked to a [=random base value=] of 0.25,
+ because their [=random cache names=] are identical.
+ If this [=random cache name=] is linked to a [=random base value=] of 0.25,
for example,
this will give the element a width of ''125px''
and an animation-duration of ''1.25s''.
If you want the values to be completely uncorrelated,
give them distinct names (''--foo'' vs ''--bar'')
- or mix in additional information that will uniquify their [=random cache keys=]
- (specifying ''--foo property'', or omitting the <> argument entirely)
+ or mix in additional information that will uniquify their [=random cache names=]
+ (specifying ''--foo property-scoped'', or omitting the <> argument entirely)
Details about how ''random()/auto'' works
- The ''random()/auto'' value is identical to specifying ''--foo element property index'',
+ The ''random()/auto'' value is identical to specifying ''--foo element-scoped property-index-scoped'',
just with an unobservable name that you can't manually match with a <>.
Usually, this ensures that every instance of a [=random function=],
on every element,
- gets a different [=random cache key=] and thus a different [=random base value=].
+ gets a different [=random cache name=] and thus a different [=random base value=].
However, this can fail in some corner cases,
causing random values to be shared when it's unexpected.
For example, in the following:
@@ -2748,12 +2958,13 @@ Sharing (Or Not) Random Values: the <> value
}
- The two ''random()'' functions have the same [=random cache key=]
+ The two ''random()'' functions have the same [=random cache name=]
on a given element
(both are the first [=random function=] used in 'animation'),
so they'll share [=random base values=] on a single element
and generate related random values,
- even tho the author likely considers them to be "different uses".
+ even though the author likely considers them to be
+ different instances of ''random()''.
This unexpected sharing is, unfortunately, unavoidable.
CSS generally doesn't care how you organize styles for your elements;
@@ -2777,17 +2988,6 @@ Sharing (Or Not) Random Values: the <> value
or ''random(--flicker, ...)'' and ''random(--glow, ...)'' on the different rules.
-
-
-
- Providing a custom ident (''--foo'') allows multiple properties to share a value;
- providing ''element-shared'' allows multiple elements to share a value;
- providing both allow multiple properties across multiple elemnents to share.
-
-
-
- Issue: This diagram is out of date; fix it.
-
More specifically,
the ''random()'' and ''random-item()'' functions are defined to generate random values
under the following caching semantics:
@@ -2795,78 +2995,71 @@ Sharing (Or Not) Random Values: the <> value
* Each instance of a [=random function=] in styles
has an associated random base value.
- If the [=random function's=] <> is ''fixed <>'',
+ If the [=random function's=] <> is ''fixed <>'',
the [=random base value=] is that number.
Otherwise, the [=random base value=] is a pseudo-random real number
in the range `[0, 1)`
(greater than or equal to 0 and less than 1),
generated from a uniform distribution,
- and influenced by the function's [=random cache key=].
+ and influenced by the function's [=random cache name=].
- * Each [=random function=] also specifies a random cache key.
- Two [=random functions=] with the same [=random cache key=]
+ * Each [=random function=] also specifies a random cache name.
+ Two [=random functions=] with the same [=random cache name=]
must also have the same [=random base value=];
- two functions with different [=random cache keys=]
+ two functions with different [=random cache names=]
must have distinct [=random base values=].
(That is, generated by a fresh random operation;
randomness might of course produce the same actual value.)
- It is intentionally unspecified how the [=random cache key=]
+ It is intentionally unspecified how the [=random cache name=]
is used to achieve this.
It can literally cache a generated random value,
or be used as a seed for a PRNG,
etc.
- * A [=random cache key=] is a [=tuple=] of:
+ * A [=random cache name=] is a [=tuple=] of:
1. A nullable [=string=] name:
the value of the <>, if specified;
- otherwise "auto" if ''random()/auto'' is specified
- or the <> is omitted;
- otherwise null.
- 2. A nullable [=string=] property name:
- the name of the property the [=random function=] is used in
- (before shorthand expansion)
- if ''random()/property'' or ''random()/auto'' is specified;
otherwise null.
- 3. A nullable [=integer=] index:
- the index of the [=random function=]
- among other [=random functions=] in the same property value,
- if ''random()/index'' or ''random()/auto'' is specified;
+ 2. A nullable [=string=] property/index value:
+ the value of the <>, if specified/calculated;
otherwise null.
- 4. A nullable "element identifier"
- uniquely identifying the {{Element}} or [=pseudo-element=]
- the style is being applied to,
- if ''random()/element'' or ''random()/auto'' is specified;
+ 4. A nullable /element identifier/
+ uniquely identifying the object the style is being applied to
+ (the {{Element}}, [=pseudo-element=],
+ or [=custom function=] evaluation's "hypothetical element"),
+ if ''random()/element-scoped'' is specified;
otherwise null.
- 5. A document ID identifying the {{Document}} the styles are from.
+ 5. A /document identifier/ identifying the {{Document}} the styles are from.
- The "element ID" and "document ID" must have the same lifetimes and equivalence
+ The /element identifier/ and /document identifier/
+ must have the same lifetimes and equivalence semantics
as a JavaScript reference to the {{Element}} or {{Document}}.
- * The [=random cache key=] and [=random base value=]
- must be determined at [=computed value=] time,
+ Issue: The behavior for pseudo-elements needs to be clarified.
+
+ * The [=random cache name=] and [=random base value=]
+ must be determined by [=computed value=] time,
before [=inheritance=],
- so that a random function which is unresolved by inheritance time
+ so that a random function that is unresolved by inheritance time
(due to containing, for example, a layout-sensitive percentage)
does not have a different behavior on children
- from one that resolves immediately.
+ than one that resolves immediately.
-
- Shorthands are recorded as part of the [=random cache key=],
+ Shorthands are recorded as part of the [=random cache name=],
rather than the longhand the value gets expanded to.
For example:
- Here, the "property name" and "index" in the [=random cache keys=]
- is "margin" and 0 for the first instance
- and "margin" and 1 for the second.
+ Here, the <> part of the [=random cache name=]
+ is "ua-margin-1" and "ua-margin-2", respectively.
After expansion, then,
'margin-top' and 'margin-bottom' will share the same random value,
and 'margin-left' and 'margin-right' will share a different random value.
@@ -2880,12 +3073,12 @@ Sharing (Or Not) Random Values: the <> value
}
- The 'margin-bottom' value has a [=random cache key=] "property name"
- of "margin-bottom",
- which is different from the 'margin-top' key of "margin",
+ The 'margin-bottom' value has a [=random cache name=] <>
+ of "ua-margin-bottom-1",
+ which is different from the 'margin-top' key of "ua-margin-1",
so the top and bottom margins will be different random values.
- 'margin-left' and 'margin-right' continue to share a third random value,
- as they still share the name "margin" property name and 1 index.
+ 'margin-left' and 'margin-right' continue to share a third random value "ua-margin-2",
+ as they still share the name "margin" property name and 2 index.
@@ -2908,17 +3101,16 @@ Sharing (Or Not) Random Values: the <> value
the ''random()'' function isn't evaluated
(or even recognized *as* a ''random()'' function)
in ''--size'',
- so the default rules for an omitted <>
- in the <> isn't applied.
+ so the default rules for an omitted <> aren't applied.
Instead, it's evaluated when it's substituted into 'width' and 'height',
- so each gets a distinct [=random cache key=],
+ so each gets a distinct [=random cache name=],
and this ends up defining a random rectangle,
rather than a square.
- Similarly, ''random()/element'' in the <>
+ Similarly, ''random()/element-scoped'' in the <>
won't cause the function to determine its "element identifier"
- until substitution actually happens,
- which might be after '--size' has inherited through multiple elements,
+ until substitution actually happens--
+ which might be after '--size' has inherited through multiple elements--
so again multiple elements using ''var(--size)''
would end up with distinct random values
rather than sharing one value defined on their ancestor.
@@ -2931,11 +3123,180 @@ Sharing (Or Not) Random Values: the <> value
Both issues can be resolved
by instead using a [=registered custom property=]
with a non-universal grammar,
- so the ''random()'' function will be parsed and evaluated in the [=custom property=],
+ so the ''random()'' function will be parsed and evaluated by the [=custom property=]
+ (gaining a <> of "ua---size-1"),
and then the resolved random value will be substituted into each property.
+
+Simplification of <>
+
+ At parse time,
+ certain transformations are performed on the <> of a [=random function=]:
+
+ * If the <> is ''auto'' (or omitted),
+ it's turned into ''element-scoped property-index-scoped''.
+ (And then subject to the below transformations.)
+ * If the <> contains ''property-scoped'' or ''property-index-scoped'',
+ that keyword is replaced by a <>:
+ either ua-PROPERTY with PROPERTY being the property the value was parsed as,
+ or ua-PROPERTY-INDEX with PROPERTY as the previous
+ and INDEX being the 1-indexed integer index of this [=random function=]
+ among all [=random functions=] being used in the declaration.
+
+ The INDEX value is based on the ordering in the parsed value,
+ before any canonicalization/reordering might occur
+ that could shuffle the values around.
+
+ In certain cases,
+ the <> is slightly more complex:
+
+ * when evaluated inside of a [=custom function=]
+ (in a property with a type that causes evaluation,
+ such as a typed argument or a typed '@function/result'),
+ in addition to the PROPERTY and/or INDEX,
+ the function's name is captured in the ident:
+ ua-FUNCTIONNAME-PROPERTY or ua-FUNCTIONNAME-PROPERTY-INDEX.
+
+ Note: This ensures that different functions
+ that just happen to use the same internal variable names
+ don't accidentally tie their random values together.
+
+
+
+ For example, given the following custom function and usage:
+
+
+ @function --ex(--arg <length>) returns <length> {
+ --local: random(2px, 3px);
+ result: calc(var(--arg) + var(--local) + random(3px, 4px));
+ }
+ .foo {
+ width: --ex(random(1px, 2px));
+ }
+
+
+ The '--arg' is registered as a <>,
+ so it's value is evaluated within the ''--arg'' property,
+ getting a <> of ''ua---ex---arg-1''.
+
+ The '--local' is not registered,
+ so it doesn't evaluate the ''random()'' at all;
+ it's left as-is until substitution.
+
+ The 'result' is also registered as a <>.
+ Both the ''random(2px, 3px)'' (from '--local' substitution)
+ and ''random(3px, 4px)'' (written literally)
+ evaluate within 'result',
+ getting <>s of ''ua---ex-result-1'' and ''ua---ex-result-2''.
+
+
+
+ On the other hand, in this example:
+
+
+ @function --no-types(--arg) {
+ result: calc(var(--arg) + random(2px, 3px));
+ }
+ .foo {
+ width: --no-types(random(1px, 2px));
+ }
+
+
+ Neither the '--arg' argument nor the 'result' are typed,
+ so their values aren't evaluated within the function.
+ The function call substitutes itself with the value ''calc(random(1px, 2px) + random(2px, 3px))'',
+ which is then evaluated within 'width',
+ getting <>s of ''ua-width-1'' and ''ua-width-2'' instead.
+
+ * when evaluated inside of an [=arbitrary substitution function=]
+ as part of the substitution process,
+ the prefix is ''ua-early-'' rather than just ''ua-''.
+ The INDEX portion, as well, is tracked across all substitutions in the property.
+
+
+ For example, in this relatively complex value:
+
+
+ .foo {
+ width: calc(
+ if(
+ style(random(/*eA*/) == random(/*eB*/)): random(/*lA*/);
+ else: random(/*lB*/))
+ )
+ + if(
+ style(random(/*eC*/) > random(/*eD*/): random(/*lC*/);
+ else: random(/*lD*/))
+ )
+ );
+ }
+
+
+ The four ''random()''s in the ''if/style()'' tests (''eA'' through ''eD'')
+ are all evaluated
+ (since using == or > provides a numeric context)
+ as part of substitution,
+ so their <>s are ''ua-early-width-1''/''-2''/''-3''/''-4''.
+
+ Each ''if()'' will resolve to one of the "late" ''random()''s (''lA'' through ''lD''),
+ left unevaluated and substituted into the 'width',
+ giving "normal" <>s of ''ua-width-1'' and ''ua-width-2''.
+
+
+ If the <> contains a <>,
+ this must not be omitted in the serialization of the value,
+ even if this would normally be valid per the
+ [=serialize a CSS value|"shortest serialization principle"=].
+
+
+ For example,
+ specifying ''margin: random(10px, 20px) random(10px, 20px)''
+ will cause the top and bottom margins to be one random value,
+ and the left and right margins to be another random value.
+ The omitted <>s get rewritten at parse-time
+ to ''element-scoped ua-margin-1'' and ''element-scoped ua-margin-2'',
+ respectively,
+ before they expand into the 'margin' longhands.
+
+ This way, the 'margin-top' and 'margin-bottom' longhands
+ will both contain the key ''element-scoped ua-margin-1'',
+ ensuring that the two values remain linked
+ even if you read and then set the value back.
+
+
+ The [=random base value=] of a [=random function=]
+ is generally known at [=specified value=] time,
+ once it's known which element the function is being applied to.
+ As a [=math function=], a ''random()'' function can be [=simplify a calculation tree|simplified=]
+ as soon as its argument [=calculations=]
+ can be simplified to compatible numeric values.
+ If a ''random()'' function can't be fully [=simplify a calculation tree|simplified=]
+ by [=computed value=] time,
+ then its arguments are maximally simplified,
+ and its specified <>
+ is replaced with ''fixed BASE'',
+ where BASE is the function's [=random base value=].
+
+ Note: As an [=arbitrary substitution function=],
+ ''random-item()'' is always replaced at [=computed value=] time.
+
+
+ For example, given the declaration ''width: random(100px, 100%)'',
+ the calculations can't be simplified at [=computed value=] time
+ because the percentage depend on [=used value=] information
+ (the size of the element's [=containing block=],
+ to resolve the ''100%'' against).
+
+ So, the [=computed value=] of the property
+ becomes something like ''width: random(fixed .1234, 100px, 100%)''.
+ Once the ''100%'' is resolved to a length
+ (say, ''500px''),
+ the function will be able to fully simplify
+ (to ''149.36px'').
+
+
+
+
+
E:lang(sr, "*-Cyrl")
+
an element of type E tagged as being in Serbian,
+ (which typically uses Cyrillic, but can be written with Latin characters)
+ but also anything written with Cyrillic characters
+
[[#the-lang-pseudo]]
2/4
@@ -1672,12 +1678,14 @@ The Relational Pseudo-class: '':has()''
invalidation/defined-in-has.html
invalidation/dir-pseudo-class-in-has.html
invalidation/empty-pseudo-in-has.html
+ invalidation/empty-pseudo-in-has-display-none.html
invalidation/fullscreen-pseudo-class-in-has.html
invalidation/has-append-first-node.html
invalidation/has-complexity.html
invalidation/has-css-nesting-shared.html
invalidation/has-in-adjacent-position.html
invalidation/has-in-ancestor-position.html
+ invalidation/has-in-is-non-subject-compound.html
invalidation/has-in-parent-position.html
invalidation/has-in-sibling-position.html
invalidation/has-invalidation-after-removing-non-first-element.html
@@ -1704,6 +1712,7 @@ The Relational Pseudo-class: '':has()''
invalidation/host-has-shadow-tree-element-at-subject-position.html
invalidation/host-pseudo-class-in-has.html
invalidation/input-pseudo-classes-in-has.html
+ invalidation/input-in-range-in-has-with-readonly.html
invalidation/is-pseudo-containing-complex-in-has.html
invalidation/is-pseudo-containing-sibling-relationship-in-has.html
invalidation/lang-pseudo-class-in-has-document-element.html
@@ -1713,7 +1722,7 @@ The Relational Pseudo-class: '':has()''
invalidation/link-pseudo-class-in-has.html
invalidation/link-pseudo-in-has.html
invalidation/location-pseudo-classes-in-has.html
- invalidation/media-loading-pseudo-classes-in-has.html
+ invalidation/media-loading-pseudo-classes-in-has.sub.html
invalidation/media-pseudo-classes-in-has.html
invalidation/modal-pseudo-class-in-has.html
invalidation/negated-has-in-nonsubject-position.html
@@ -1967,6 +1976,7 @@ Attribute selectors
missing-right-token.html
parsing/parse-attribute.html
selectors-attr-many.html
+ selectors-attr-many-2.html
Selectors allow the representation of an element's attributes. When
@@ -2593,6 +2603,7 @@ The Language Pseudo-class: '':lang()''
selectors-4/lang-023.html
selectors-4/lang-024.html
selectors-4/lang-025.html
+ selectors-4/lang-singleton-subtag-matching.html
If the document language specifies how
@@ -2630,8 +2641,30 @@ The Language Pseudo-class: '':lang()''
prior to the extended filtering operation.
The matching is performed [=ASCII case-insensitively=].
- The language range does not need to be a valid language code to
- perform this comparison.
+ The language range
+ must be an extended language range according to BCP47.
+ Language ranges that are not
+ well-formed language tags
+ or which would not be a well-formed language tag
+ if an initial wildcard character "*"
+ were replaced with a valid subtag,
+ do not match anything.
+
+
+ For example,
+
+ :lang(åå)
+
+ would not match,
+ because it containins non-ASCII characters so is ill-formed.
+
+ On the other hand,
+
+ :lang(qq)
+
+ could match,
+ even though qq is not a registered language code.
+
For this purpose, a wildcard [=language range=] ("*")
does not match elements whose language is not tagged (e.g. lang=""),
@@ -2922,6 +2955,15 @@ User Action Pseudo-classes
are not yet defined,
but will be in the future.
+
+ active-toplayer-001.html
+ active-after-relayouts.html
+ focus-within-toplayer-001.html
+ hover-toplayer-001.html
+ toplayer-transition-001.html
+ user-action-pseudo-top-layer.html
+
+
The Pointer Hover Pseudo-class: '':hover''
@@ -3189,6 +3231,8 @@ Media Playback State: the '':playing'', '':paused'', and '':seeking'' pseudo-cla
media/media-playback-state.html
+ media/media-loading-state.sub.html
+ media/media-playing-paused-style-invalidation.html
The :playing pseudo-class represents an element
@@ -3214,7 +3258,6 @@ Media Playback State: the '':playing'', '':paused'', and '':seeking'' pseudo-cla
Media Loading State: the '':buffering'' and '':stalled'' pseudo-classes
- media/media-loading-state.html
media/media-loading-state-timing.sub.html
media/media-playback-state-timing.html
@@ -3354,11 +3397,14 @@ Fullscreen Presentation State: the '':fullscreen'' pseudo-class
Picture-in-Picture Presentation State: the '':picture-in-picture'' pseudo-class
The :picture-in-picture pseudo-class represents
- an element which is displayed in a mode that
- takes up most (usually all) of the viewport,
- and whose viewport is confined to part of the screen
- while being displayed over other content,
- for example when using the Picture-in-Picture API. [[picture-in-picture]]
+ an element whose contents are being displayed in a “picture-in-picture” mode
+ (i.e. displayed in a window confined to part of the screen
+ and overlaying other content)
+ rather than embedded in the document.
+ For example,
+ this pseudo-class can be used to style a <{video}> element's box
+ while its contents are being played in an overlaid window
+ using the Picture-in-Picture API. [[picture-in-picture]]
@@ -3376,6 +3422,7 @@ The '':enabled'' and '':disabled'' Pseudo-classes
invalidation/enabled-disabled.html
+ invalidation/option-disabled-when-ancestor-changes.html
pseudo-enabled-disabled.html
@@ -3548,6 +3595,11 @@ The Validity Pseudo-classes: '':valid'' and '':invalid''
but a p element has no validity semantics at all,
and so it never matches either of these pseudo-classes.
+
+ invalidation/input-in-range-in-has-with-readonly.html
+ invalidation/media-loading-pseudo-classes-in-has.sub.html
+
+
The Range Pseudo-classes: '':in-range'' and '':out-of-range''
selectors-empty-001.xml
+ invalidation/empty-pseudo-in-has-display-none.html
The :empty pseudo-class represents
@@ -4464,7 +4517,7 @@ Grammar
<simple-selector> = <> | <>
- <combinator> = '>' | '+' | '~' | [ '|' '|' ]
+ <combinator> = '>' | '+' | '~'
<wq-name> = <>? <>
<ns-prefix> = [ <> | '*' ]? '|'
@@ -4509,7 +4562,6 @@ Grammar
* Between the components of an <>.
* Between the <> or <>s
in a <>
- * Between the components of a <>.
Whitespace is required
between two <>s
@@ -5104,13 +5156,39 @@ while still preserving as much of the usefulness of '':visited'' as pos
- 
- 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+
+ 
+
+ 
+ 
+ 
+ 
+ 
@@ -6060,7 +6065,7 @@ Defining font specific alternates: the @font-feature-values rule
as the corresponding value of the 'font-variant-alternates' property.
![[9 circles, with 0 to 8 eighths filled in]](/prx/000/https/github.com/CGQAQ/csswg-drafts/compare/images/sprites.svg,_ANDesc=img,){kind=icon}
- 
+ 
@@ -1900,6 +1942,16 @@ Overhanging Ruby: the 'ruby-overhang' property
for Japanese are described by [[JLREQ]].
-