Rewrite attr() to match the newest version of the spec

[bramus]

(👋 Hi, Chrome DevRel here)

Description

The attr() function underwent an upgrade: https://drafts.csswg.org/css-values-5/#attr-notation
This PR updates the attr() page with that info.

Motivation

This feature is shipping in the upcoming Chrome 133: https://chromestatus.com/feature/4680129030651904

Additional details

• This is my first major contribution to MDN, so most likely I got a bunch of things wrong. I modeled the page structure after calc-size()
• There are still two things marked as TODO: in the file, for which I could use some guidance.

Related issues and pull requests

There is still an issue with the data table, for which I have file mdn/browser-compat-data#25618

[github-actions]

Preview URLs

• /en-US/docs/Glossary/guaranteed_invalid_value
• /en-US/docs/Web/CSS/attr

Flaws (50)

Note! 1 document with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/CSS/attr
Title: attr()
Flaw count: 50

• macros:
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps/What_is_CSS
  • Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/CSS/First_steps/Getting_started
  • and 44 more flaws omitted
• broken_links:
  • Can't resolve /docs/Web/CSS/CSS_Values_and_Units#distance_units

External URLs (3)

URL: /en-US/docs/Web/CSS/attr
Title: attr()

• https://brm.us/iacvt (2 times) (Note! This may be a new URL 👀)
• https://brm.us/iacvt/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Glossary/guaranteed_invalid_value
Title: Guaranteed-invalid value

• https://www.w3.org/TR/css-variables-1/ (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2025-01-14 13:53:20)

[chrisdavidmills]

Hi @bramus! This is a really good effort, thanks for updating this page! I've made quite a few comments, but a lot of them are language-style nitpicks; there isn't too much in terms of significant work to do here.

[bramus]

Thanks for the review, Chris. Merged a bunch of your suggestions and addressed the things I could address. Those that I could not address I have left as unresolved + left a comment.

[chrisdavidmills]

@bramus much improved! A few more comments for you; getting pretty close now.

[bramus]

Thanks for your input, @chrisdavidmills – Much appreciated! I’ve committed the suggestions you code and am about to go over the remaining conversations now.

[chrisdavidmills]

@bramus sorry, I forgot to review the new glossary page. One more new comment added!

[chrisdavidmills]

This page reads fine as it is, but I think it is missing one thing — what is the Guaranteed-invalid value in general? What is it's purpose, why do we need it, what does it do? This is not clear after reading this page. The page should start with a sentence "The guaranteed-invalid value is..."

[bramus]

It does start with that on the line below:

In CSS the guaranteed-invalid value is {{CSSXref("initial")}}.

[chrisdavidmills]

Yeah, that says specifically what the value is, but I guess I am still struggling a bit with why this is a specific thing conceptually. Why it is useful to people? Or is it more of a thing to warn people about, not to use this value in var() because it is guaranteed invalid?

[bramus]

I think that exceeds the extent of this PR and would be a good subject for a standalone one.

[chrisdavidmills]

OK, that's fine. I don't think this is something we need to block this PR on.

[chrisdavidmills]

@bramus really nice work. I've added a few more comments, but I'm going to approve this now, as I think it is basically ready to merge, and my remaining comments are more "nice to have"s.

Have a look and see what you think. I think we can merge this in the next round.

[bramus]

Thanks for your extensive input here @chrisdavidmills! I think I have addressed all remarks.

I suggest to update the new “guaranteed-invalid value” glossary page in a standalone PR.

[chrisdavidmills]

Awesome work @bramus, this is ready to merge!

I just committed a few small grammar nitpicks directly to the branch, rather than bothering you with multiple tiny comments. I hope that's OK.

[bramus]

I just committed a few small grammar nitpicks directly to the branch, rather than bothering you with multiple tiny comments. I hope that's OK.

Perfect.

Thanks for your thorough review of all this and the successive merge, Chris!