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.

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).

* 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).

0 reposts0 likes

No replies yet.