CSS in Depth

A CSS book for web developers by @keithjgrant. Foreword by @chriscoyier.

[CSS in Depth @CSSinDepth]

🧳 @[email protected]

[CSS in Depth @CSSinDepth]

📖 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

[CSS-Tricks @css]

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

[@[email protected] @keithjgrant]

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

[@[email protected] @keithjgrant]

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

[CSS in Depth @CSSinDepth]

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

[@[email protected] @keithjgrant]

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

[@[email protected] @keithjgrant]

Guess what now has support in all major browsers?

[CSS in Depth @CSSinDepth]

@Key_null Maybe I can help!

[CSS in Depth @CSSinDepth]

@whoiskatrin

[Wes Bos @wesbos]

🔥 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

[CSS in Depth @CSSinDepth]

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

[CSS-Tricks @css]

No-Comma Color Functions in CSS https://t.co/ifWZA2jRo0

[Ahmad Shadeed @shadeed9]

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

[CSS in Depth @CSSinDepth]

`gap` will eventually replace `grid-gap` and work in both Grid and Flexbox. More info here:

https://t.co/IgrVs5xFH6

[CSS in Depth @CSSinDepth]

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

[Adam Argyle @argyleink]

🎉 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

[Una 🇺🇦 @Una]

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

[CSS in Depth @CSSinDepth]

@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)

[CSS in Depth @CSSinDepth]

@hiatus_01 @dev_careers Got you covered!

https://t.co/15aTEYw9vZ

[Tristan 📚 @gibbs_digital]

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.