📖 The Second Edition of CSS in Depth is available for early access now! Get chapters as they roll out, and immediate access to a free eBook of the first edition in the meantime
https://t.co/60xs9nga4U
Here ya go: everything @TerribleMia knows about CSS Cascade Layers in a guide only she could write — from syntax and establishing layer order to debugging and playing friendly with third-party frameworks! https://t.co/TGFQycbPWk
Debugging CSS:
1. Identify which rules are applying to the elements in question (and which are being overridden)
2. Decide which rules you want applied, and to which elements
3. Decide _how_ to apply those rules (which selector to use & where to put it)
IN THAT ORDER
Use CSS clamp() to constrain flexible/responsive values between a minimum and maximum
Demo: https://t.co/DYMFySopoh
Browser support (it's good!): https://t.co/nS38MPtixZ
As you may have noticed, CSS was moving fast when CSS in Depth went to print — and it's been moving quickly ever since. I'm starting to accumulate a list of key updates since then, so stay tuned! (No promises on a timeline)
In the meantime, I'm RT'ing useful stuff as I find it
🔥 Yet another awesome use case for CSS Variables - use them to set values inside of @supports checks so you aren't duplicating properties.
This is a simple example but def useful once things get a bit more complex
🔥 Pro tip in @ChromeDevTools: you can increment or decrement a CSS value by using one of the keys below with up/down arrows:
⌨️ CMD: ± 100
⌨️ Shift: ± 10
⌨️ Alt: ± 0.1
Very useful 😍
🎉 flex that gap in the latest release of Chrome Canary 🎉
```css
display: flex; 🦾
gap: 1ch; 🔥
```
early adopters:
help us test it out won't ya!?
note:
requires web experiments enabled, visit chrome://flags/#enable-experimental-web-platform-features in Canary to enable
CSS Houdini enables us to give syntax to custom properties. In this demo, I'm adding a <percentage> type to a `--gradStop` variable.
Left: No Houdini Support
Right: Houdini Properties & Values Support
Houdini enables us to animate properties we previously couldn't reach
@hiatus_01@dev_careers https://t.co/9OtbmQrvS0 is also a good resource for layout only (though it might be a bit dated now with the rise of grid + flexbox)
Thank you @keithjgrant for writing the best CSS book ever. This book is very important to me. I have been searching far and wide for a book like this. Hope to see a second edition down the road someday.