Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 86 additions & 1 deletion css-mixins-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ Editor: Tab Atkins-Bittner, Google, http://xanthir.com/contact/, w3cid 42199
Abstract: This module defines the ability for authors to define custom functions, acting similar to <em>parametrized</em> custom properties. They can use the full power of CSS's values and conditional rules. It also defines an early form of a similar idea for CSS rule mixins, allowing parametrized substitution of entire blocks of properties into other rules.
Default Highlight: css
Ignored Terms: cssText
WPT Path Prefix: css/css-mixins/
WPT Display: open
</pre>

<pre class=link-defaults>
Expand All @@ -35,7 +37,7 @@ spec:css-values-5; type:dfn;
text:invalid at computed-value time
spec:cssom-1; type:dfn;
text:specified order;
spec:css-conditional-5; type:at-rule;
spec:css-conditional-5; type:at-rule;
text:@container
</pre>

Expand Down Expand Up @@ -127,6 +129,12 @@ Introduction {#intro}
}
</xmp>

<wpt>
function-in-media.html
local-inherit-substitution.html
local-var-substitution.html
</wpt>

<!-- Big Text: @function

████▌ █████▌ █▌ █▌ █ █▌ ███▌ █████▌ ████ ███▌ █ █▌
Expand Down Expand Up @@ -206,6 +214,12 @@ and optionally a <dfn>default value</dfn>.
<dfn function lt="type()" for="@function">&lt;type()></dfn> = type( <<syntax>> )
</pre>

<wpt>
at-function-parsing.html
dashed-function-named-arg.tentative.html
dashed-function-parsing.html
</wpt>

If a [=default value=] and a [=parameter type=] are both provided,
then the [=default value=] must [=CSS/parse=] successfully
according to that [=parameter type=]'s syntax.
Expand Down Expand Up @@ -455,6 +469,16 @@ is the real element at the root of the [=calling context=] stack.
of the value resulting from the evaluation.
</div>

<wpt>
dashed-function-eval.html
dashed-function-standard-property.html
function-attr.html
function-shadow-animations.html
function-shadow-cache.html
function-shadow-container.html
function-shadow.html
</wpt>

<div class='example'>
A [=comma-containing productions|comma-containing value=]
may be passed as a single argument
Expand Down Expand Up @@ -610,6 +634,12 @@ with its [=function parameters=] overriding "inherited" custom properties of the
14. Return the value of the '@function/result' property in |body styles|.
</div>

<wpt>
dashed-function-cycles.html
local-attr-substitution.html
local-if-substitution.html
</wpt>

<div algorithm>
To <dfn>resolve function styles</dfn>,
given a [=custom function=] |custom function|,
Expand Down Expand Up @@ -763,6 +793,15 @@ at the [=conditional group rule=]'s location
when the condition is true,
or acting as if nothing exists at that location otherwise.

<wpt>
function-conditionals.html
function-container-dynamic.html
function-container-self.html
function-container-style.html
function-layer.html
function-media-dynamic.html
</wpt>

<div class='example'>
<pre class='lang-css'>
@function --suitable-font-size() {
Expand Down Expand Up @@ -827,6 +866,13 @@ but rather than extending/upgrading [=custom properties=],
[=mixins=] extend/upgrade [=nested style rules=],
making them reusable and customizable with arguments.

<wpt>
mixin-basic.html
mixin-declarations.html
mixin-parsing.html
mixin-shadow-dom.html
</wpt>

<div class=example>
For example, the following code sets up a mixin
applying all the properties you need for a "gradient text" effect,
Expand Down Expand Up @@ -908,6 +954,11 @@ save that it lacks a [=custom function/return type=].)
}
</pre>

<wpt>
mixin-media-query-invalidation-2.html
mixin-media-query-invalidation.html
</wpt>

Differing from the ''@function'' rule,
the final item in the parameters list
can be the <<at-keyword-token>> ''@contents'',
Expand Down Expand Up @@ -956,6 +1007,10 @@ within a [=mixin body=].
Unknown properties and rules are invalid and ignored,
but do not make the ''@mixin'' rule itself invalid.

<wpt>
mixin-layers.html
</wpt>

<!-- Big Text: params

████▌ ███▌ ████▌ ███▌ █ █ ███▌
Expand Down Expand Up @@ -1201,6 +1256,12 @@ The syntax of a ''@contents'' at-rule is:
<<@contents>> = @contents [ { <<declaration-list>> } ]?
</pre>

<wpt>
contents-nested-declarations-fallback.html
contents-nested-declarations.html
contents-rule.html
</wpt>

That is, it is either an <em>empty</em> statement ended immediately by a semicolon,
or a block treated as a [=nested declarations rule=].
The empty statement form behaves identically to passing an empty block.
Expand Down Expand Up @@ -1261,6 +1322,13 @@ is substituted into the body of another [=style rule=]
as a [=nested declarations rule=]
via the ''@apply'' rule.

<wpt>
apply-nested-declarations.html
mixin-cross-stylesheet.html
mixin-from-import-with-media-queries.html
mixin-from-import.html
</wpt>

<!-- Big Text: @apply

████▌ ███▌ ████▌ ████▌ █▌ █ ▐▌
Expand All @@ -1285,6 +1353,11 @@ Its grammar is:
<<@apply>> = @apply [ <<dashed-ident>> | <<dashed-function>> ] [ { <<declaration-list>> } ]?;
</pre>

<wpt>
apply-top-level.html
apply-within-mixin.html
</wpt>

<div class=example>
For example, a [=mixin=] can be applied in any of these ways:

Expand Down Expand Up @@ -1527,6 +1600,11 @@ it's instead replaced with the [=guaranteed-invalid value=].
CSSOM {#cssom}
==============

<wpt>
at-function-cssom.html
function-invalidation.html
</wpt>

The {{CSSFunctionRule}} Interface {#the-function-interface}
-----------------------------------------------------------

Expand Down Expand Up @@ -1742,3 +1820,10 @@ Security Considerations {#security}
===============================================

No issues have been opened against this specification.

Changes {#changes}
===============================================

Changes since the <a href="https://www.w3.org/TR/2025/WD-css-mixins-1-20250515/">First Public Working Draft of 15 May 2025</a>:

* Added Web Platform Tests coverage