Comments on: You Want border-color: transparent, Not border: none

By: Matt Rock

Matt Rock — Mon, 18 Mar 2024 13:55:11 +0000

In reply to Chris Coyier. LOL XD

By: Curtis Wilcox

Curtis Wilcox — Sat, 16 Mar 2024 12:48:34 +0000

Another forced-colors tip: test with both dark-on-light and light-on-dark colors. This can help you spot a different issue with forced-colors, SVGs and other images with transparency that assume the background color will be light (or dark), like the Codepen logo (sorry).

This can be done using Chrome DevTools combining “Emulate CSS media feature forced-colors” and “Emulate CSS media feature prefers-color-scheme.”

By: Kilian Valkhof

Kilian Valkhof — Sat, 16 Mar 2024 10:04:38 +0000

Testing this in Polypane is even easier, it just takes two clicks! I mentioned this tip and a bunch of others in an (evergreen) article I wrote a few years ago over on my blog: https://polypane.app/blog/forced-colors-explained-a-practical-guide/

Check it out for more tips, like dealing with icons and focus styles. Using outline-color: transparent instead of outline:none is equally as important.

Also exceptional use of the “You want X, not Y” title format 😉 https://css-tricks.com/you-want/

By: Dave Rupert

Dave Rupert — Fri, 15 Mar 2024 20:26:01 +0000

In reply to Chris Coyier. Lauuuuve u, bb

By: Chris Coyier

Chris Coyier — Wed, 13 Mar 2024 22:11:30 +0000

jeez dave you can just DM me