Grid Lanes – The Future of Masonry Layout
This long-debated solution for masonry layout is now available and it’s time to figure out how to use it. Join us for a deep dive into the workings of Grid Lanes.
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 typeSurprising Effects of CSS Shorthands
CSS properties come in two excellent flavors – longhand properties have a direct impact on the element, while shorthand properties take a much more convoluted path. There’s a lot going on when we use a shorthand property, with hidden surprises, and reasons we might use one or the other.
Winging It post typeDos & Don’ts of Anchor Positioning
CSS anchor positioning isn’t baseline yet, and there’s good reason for that. You can use it, but it comes with some caveats. James, Stacy, and Miriam cover new resources to make anchor positioning easier, and work through some demos to help you understand how anchor positioning works. We also look…
