The attr() function in CSS now supports types | Hacker News Reader

The attr() function in CSS now supports types

amitmerchant.com

15 pointsspeckx17 comments

Unfortunately it's not widely available yet. [1] If it was supported by all majors browsers it would be nice for that one project I have that still generates a .html bar chart using style="height: ${height}px;".

[1] https://caniuse.com/mdn-css_types_attr_type-or-unit

I can't wait for someone to make a CSS style sheet that lets you specify all properties through HTML attributes as if CSS was never invented and we were still using good old <font size=2> just with all the styling additions since then.

We have that, it's called Tailwind and it's wonderful

This is cool. But I like how the FFX bug tracking this (and general attr work that morphed into this through spec) is 17 years old: https://bugzilla.mozilla.org/show_bug.cgi?id=435426

Browser bugs are so cute. Just sitting there for decades, comments accreted over time. Tasks spinning for eternity. These are truly the cicadas of bugs.

first they came for my javascript, then my python... now css?! these type-heads need to chill.

Eh, CSS is inherently typed. My only concern is, why specify types in attr() and not just infer them (like the rest of CSS does)?

Because HTML attributes are inherently stringly typed. Where CSS can propagate types, it’s because the CSS parser and object model are involved. For that to work with attr() would almost certainly involve extending that machinery into all aspects of the HTML spec, and then all that machinery too. Which is probably impractical for more reasons than I can think of, but I can think of several.

But in any context in which the attr() function is used, the type information is inherent, right?

    min-width: attr(foo) /* implicitly requires type to be length */
    color: attr(bar)     /* implicitly requires type to be color */

Unless you wanted to use a shorthand property like border, but restrict the attribute to only one part of it?

    border: 1px attr(bdrcolor type(<color>)) /* needs explicit type to prevent specifying border-style  */

But that would be easier and cleaner to specify separately?

    border-width: 1px 
    border-color: attr(bdrcolor)  /* implicitly requires type to be color */

In what scenarios does adding the explicit type information help, rather than having the parser infer the type of the attr() based on the context of the call?

Yeah, my thinking exactly.

CSS variables are another thing to consider perhaps. You can specify their type explicitly as well (albeit using a more verbose syntax):

  @property --logo-color {
    syntax: "<color>";
    inherits: false;
    initial-value: attr(logo-color);
  }

How is attr() better than using a css variable?

hmm... where to start?

  - Variables cascade and cause restyle of whole sub-tree.
  - Attributes often are already on the html element, e.g. title, aria, data attributes, so dont need inline styles
  - Not mixing data with presentation

Just to name a few

But if you‘re defining the style within the data (the width within the HTML as data attribute), aren‘t you actually mixing presentation with data?

They do different things, they aren't really in competition with each other.

attr() lets you read values from your html in css. CSS variables do not.

You can set css variables in the style attribute.

Not if you use a strict Content Security Policy without unsafe-inline

and?

Reply on news.ycombinator.com