Container queries are widely available!
Happy 30-month anniversary to Container Queries – shipping in every browser since February of 2023. It was supposed to be impossible, but here we are!
Winging It
post type
Using New Color Formats
Miriam Suzanne, Stacy Kvernmo, and James Stuckey Weber demo how to use new color formats with OddContrast, a color tool for previewing, accessibility testing, and selecting the format/space.
What we cover:
Copy permalink to “What we cover:”- What is OddContrast?
- Why we made OddContrast
- What are the new color formats, and why use them?
- What does “in gamut” mean?
- Specifying fallbacks
- Why care about contrast?
- How does alpha impact contrast?
Links:
Copy permalink to “Links:”- OddContrast
- OddContrast GitHub Issues
- Color.js
- W3C CSS Color Module Level 4
- Okay, Color Spaces
- Palette Juicer
- Oklch.com
- Gamut Mapping Gradients
Demos:
Copy permalink to “Demos:”Support OddContrast:
Copy permalink to “Support OddContrast:”Open Source Sponsors
Current Sponsors
A huge thank you to the individuals and organizations sponsoring OddBird’s open source work!
Blue-Footed Boobies
Common Loons
Sponsor OddBird’s OSS Work
We love contributing back to the languages & tools that developers rely on, from CSS & Sass to browser polyfills and Python. Help us keep that work sustainable and focused on developer needs!
Recent Episodes
Winging It post typeAvoid this mistake when anchor positioning a popover!
Are you positioning a popover with CSS anchor positioning and
position-area? Make sure to override the default margins on the popover.
Winging It post typeThere’s a new stretch keyword in CSS?
There’s a new stretch keyword that we can use for CSS
heightandwidthproperties. But how is that different from100%? And how is that different from100vhwhen we want a full-height layout?
