Skip to content

Add number keyword for attr() and specify how <attr-unit> should be parsed #12862

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 26, 2025
Merged

Add number keyword for attr() and specify how <attr-unit> should be parsed #12862

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7433c23
Add number keyword for attr() and specify how <attr-unit> should be p…
tursunova Sep 26, 2025
180f13e
Update css-values-5/Overview.bs
tabatkins Sep 26, 2025
d2ffcfa
Update css-values-5/Overview.bs
tabatkins Sep 26, 2025
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
26 changes: 20 additions & 6 deletions css-values-5/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1867,7 +1867,7 @@ Ian's proposal:
attr() = attr( <<attr-name>> <<attr-type>>? , <<declaration-value>>?)

<dfn>&lt;attr-name></dfn> = [ <<ident-token>>? '|' ]? <<ident-token>>
<dfn>&lt;attr-type></dfn> = <dfn function lt="type()" for="attr()">type( <<syntax>> )</dfn> | raw-string | <<attr-unit>>
<dfn>&lt;attr-type></dfn> = <dfn function lt="type()" for="attr()">type( <<syntax>> )</dfn> | raw-string | number | <<attr-unit>>
</pre>

The ''attr()'' function's [=argument grammar=] is:
Expand Down Expand Up @@ -1929,12 +1929,19 @@ Ian's proposal:
Values that fail to parse according to the syntax
trigger fallback.

If given as the <css>number</css> keyword,
it causes the attribute's literal value,
after [=strip leading and trailing ASCII whitespace|stripping leading and trailing whitespace=],
to be [=CSS/parsed=] as a <<number-token>>.
Values that fail to parse trigger fallback.

If given as an <<attr-unit>> value,
the value is first parsed as if <css>type(&lt;number>)</css> was specified,
the value is first parsed as if ''number'' keyword was specified,
then the resulting numeric value
is turned into a dimension with the corresponding unit,
or a percentage if <css>%</css> was given.
Values that fail to parse as a <css>&lt;number></css>
Same as for ''number'' <<attr-type>>,
values that do not correspond to the <<number-token>> production
trigger fallback.

If given as the <css>raw-string</css> keyword,
Expand Down Expand Up @@ -2040,20 +2047,27 @@ Substitution</h4>
let |attr value| be its value;
otherwise jump to the last step (labeled FAILURE).

4. If |syntax| is null
4. If |syntax| is the keyword ''number'' or an <<attr-unit>> value,
parse |attr value| against <<attr-type>>.
If that succeeds, return the result;
otherwise, jump to the last step (labeled FAILURE).

Note: No parsing or modification of any kind is performed on the value.

5. If |syntax| is null
or the keyword ''raw-string'',
return a CSS <<string>>
whose value is |attr value|.

Note: No parsing or modification of any kind is performed on the value.

5. [=Substitute arbitrary substitution functions=] in |attr value|,
6. [=Substitute arbitrary substitution functions=] in |attr value|,
with &bs<<;"attribute", |attr name|&bs>>; as the [=substitution context=],
then [=parse with a <syntax>=] |attr value|, with |syntax| and |el|.
If that succeeds, return the result;
otherwise, jump to the last step (labeled FAILURE).

6. <b>FAILURE:</b>
7. <b>FAILURE:</b>

1. If |second arg| is null,
and |syntax| was omitted,
Expand Down