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
Mixins & Functions to Streamline CSS
With special guest Roma Komarov
The CSS Working Group got together in August to discuss a range of old and new issues. The following week, Miriam Suzanne and Stacy Kvernmo chatted with CSS expert Roma Komarov about how to create reusable and more flexible CSS using mixins and functions, what happened in the CSSWG meetings, and what is coming in CSS!
Check out our Winging It conversations about design, frontend, and backend development.
What We Cover:
Copy permalink to “What We Cover:”CSS Mixins
- What are they?
- How do CSS mixins differ from Sass mixins?
- How to use CSS mixins
- Which browsers currently support CSS mixins?
CSS Functions
- What are they?
- How to use CSS functions
- Available in Chromium with the experimental features flag
CSSWG meeting
- Masonry Display
- Color (gamut-mapping proposal agreement)
- How mixins interact with layers (mixin in a conditional)
Links:
Copy permalink to “Links:”- Functional Capturing
- Indirect Cyclic Conditions
- CSS Mixins & Functions Explainer
- W3C CSS Functions and Mixins Module
- Mixins Browser Support: Chrome (CSSMixins flag)
- Functions Browser Support Chrome with Experimental Web Platform Features Flag
- Can you style an element based on the presence or absence of a custom property?
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?
