3 ms·

Right, my point is, we've now introduced this new attribute for "browser elements" instead of saying now checkboxes support background-color, color, etc. And le

by lbotos 4y ago

Right, my point is, we've now introduced this new attribute for "browser elements" instead of saying now checkboxes support background-color, color, etc. And let the designer do the work. Lean on the primitives we already have, enable flexibility, and if someone wants to make a SaSS wrapper or CSS function to do it, enable that vs. more random places for browsers to diverge on "standards". It plays out like this: "Oh, I wanna change the UI element style, thats a new feature! Accent-color! Nice. Oh wait, browsers are doing different things. Dang. Am I okay with that? vs. "I wanna change a UI element style, Oh, browsers now support classic CSS styling attributes on these elements! Nice! Designers sets colors, all browsers just read the designer's palette.

themacguffinman 4y ago
Changing the behavior of existing attributes isn't backwards compatible. Websites that currently use background-color & color assuming that it won't affect the accent color will suddenly look different when new browser versions make it affect the accent color.
clairity 4y ago
i believe the problem with form elements like checkboxes is that they are 'replaced elements', which the browser defers to the underlying operating system, and that's why it requires a "hack" like accent-color rather than direct styling. this is also why you can't use ::before and ::after on form elements (to do things like add a 'required' indicator using css only).
- easrng 4y ago
  IIRC they used to, but not anymore. They're implemented with a special Shadow DOM that's not accessible by the page but you can style some elements if the browser exposes them as psuedoelements.
  - clairity 4y ago
    are OG form elements actually reimplemented in shadow DOM, like they're doing with open UI (https://open-ui.org/ https://open-ui.org/) custom elements? i've seen safari and chrome (but not firefox) expose some form input components as shadow DOM (e.g., slots), but wasn't sure if it was actually reimplemented.
    - easrng 4y ago
      Yep, there are settings to show them in the devtools for both Chrome and Firefox. You can't access them with JS though, you can only see them in the devtools.

by lbotos 4y ago

themacguffinman 4y ago

Changing the behavior of existing attributes isn't backwards compatible. Websites that currently use background-color & color assuming that it won't affect the accent color will suddenly look different when new browser versions make it affect the accent color.

clairity 4y ago

i believe the problem with form elements like checkboxes is that they are 'replaced elements', which the browser defers to the underlying operating system, and that's why it requires a "hack" like accent-color rather than direct styling. this is also why you can't use ::before and ::after on form elements (to do things like add a 'required' indicator using css only).

easrng 4y ago
IIRC they used to, but not anymore. They're implemented with a special Shadow DOM that's not accessible by the page but you can style some elements if the browser exposes them as psuedoelements.
- clairity 4y ago
  are OG form elements actually reimplemented in shadow DOM, like they're doing with open UI (https://open-ui.org/ https://open-ui.org/) custom elements? i've seen safari and chrome (but not firefox) expose some form input components as shadow DOM (e.g., slots), but wasn't sure if it was actually reimplemented.
  - easrng 4y ago
    Yep, there are settings to show them in the devtools for both Chrome and Firefox. You can't access them with JS though, you can only see them in the devtools.