CSS in Depth

🧳 @keithjgrant@front-end.social

📖 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 manning.com/books/css-in-d…

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! css-tricks.com/css-cascade-la…

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: codepen.io/keithjgrant/pe… Browser support (it's good!): caniuse.com/css-math-funct…

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

CSS grid's `gap` property (formerly `grid-gap`) sure is nice in flexbox, too. Now supported in all major browsers

Guess what now has support in all major browsers?

@Key_null Maybe I can help!

People who can do CSS without pulling their hair every hour, how??

@jen4web if you can point me to the best resources, it would be amazing and very helpful, thanks in advance

🔥 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

This is another important change that emerged after CSS in Depth went to print:

🔥 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 😍

`gap` will eventually replace `grid-gap` and work in both Grid and Flexbox. More info here: developer.mozilla.org/en-US/docs/Web…

This is very exciting! `gap` was added to the spec just after we went to print

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 learnlayout.com is also a good resource for layout only (though it might be a bit dated now with the rise of grid + flexbox)

@CSSinDepth @dev_careers wow! thanks, will check it out 😃

What do you want?

@hiatus_01 @dev_careers Got you covered! manning.com/books/css-in-d…

@dev_careers someone who will give me an in depth and rigorous tutorial on making basic layouts with css 😭😭😭😭

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.