Post

728: BIMI, Good Favicon Practice, and CSS @Layer Exploration Having type two fun, email branding with BIMI, accessibility details in icons and favicons, using AI as a coding and maintenance partner, CSS @layer property, design systems, and the economics of fast AI hardware.

shoptalkshow.com728: BIMI, Good Favicon Practice, and CSS @Layer ExplorationHaving type two fun, email branding with BIMI, accessibility details in icons and favicons, using AI as a coding and maintenance partner, CSS @layer property, design systems, and the economics of fast AI hardware.

1 repost6 likes

A Verified Mark Certificate (VMC) is a digital security certificate that proves you own a specific trademarked logo. Requirements to Get a VMC: - DMARC Enforcement: Domain must use SPF, DKIM, and strict DMARC enforcement

- Registered Trademark: Logo must be legally registered with an approved intellectual property office ($$$) - SVG Format: The logo file must follow specific technical SVG PSS formatting rules - Identity Validation: You must pass a verification check with an authorized certificate authority ($$$)

20:18 The premise to this problem seems wrong, because the selector you have there can never work. It selects the `:root` within “the `:root` that has the checked input” → drop the inner `:root` (or change it to select the correct element, e.g. `my-element`) and things will start working.

It’ll work because of the context step of the cascade that was created for this. It is evaluated before layers and specificity. The context step says that for normal rules the declarations from an outer context (= external stylesheet) win from the inner context (= styles in your component).

I think it’s wrong to have to use the element selector. Creates a weird coupling of your element names and your tokens. If I create a new component thats similar and uses card tokens, I have to update a manifest in my stylesheet.

Doesn’t the “if I create a new component thats similar and uses card tokens” part of your post, make the case for using element selectors after all?

* Correction: “Drop the inner `:root`” works only for overriding the --system-* props from that rule. Changing the selector to `my-element` is needed to override the --my-element-* props. To allow overriding --my-element-* from the :root rule, you’d need inherit() (which only exists in a spec).