Inspecting Inspectors
Miriam and Stacy troubleshoot an issue with the dev tools available in each browser, exploring the differences and what each browser’s tools do best.
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 typeGrid 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 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.
