📖 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…
manning.com/books/css-in-d…
0
0
1
105
CSS in Depth retweeted
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…
5
56
222
CSS in Depth retweeted
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
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
1
1
6
CSS in Depth retweeted
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…
Demo: codepen.io/keithjgrant/pe…
Browser support (it's good!): caniuse.com/css-math-funct…
0
3
8
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
In the meantime, I'm RT'ing useful stuff as I find it
0
0
5
CSS in Depth retweeted
CSS grid's `gap` property (formerly `grid-gap`) sure is nice in flexbox, too. Now supported in all major browsers
8
113
621
CSS in Depth retweeted
🔥 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 a simple example but def useful once things get a bit more complex
7
51
302
CSS in Depth retweeted
🔥 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 😍
⌨️ CMD: ± 100
⌨️ Shift: ± 10
⌨️ Alt: ± 0.1
Very useful 😍
3
33
100
This is very exciting! `gap` was added to the spec just after we went to print
🎉 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
1
0
2
`gap` will eventually replace `grid-gap` and work in both Grid and Flexbox. More info here:
developer.mozilla.org/en-US/docs/Web…
developer.mozilla.org/en-US/docs/Web…
0
0
1
CSS in Depth retweeted
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
Left: No Houdini Support
Right: Houdini Properties & Values Support
Houdini enables us to animate properties we previously couldn't reach
3
6
29
CSS in Depth retweeted
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.
1
2
0
CSS in Depth retweeted
Did you know everything about styling underlines on the web just changed?
You can make an underline thicker or thinner.
You can move it closer to/further from the text.
You can control whether the line intersects with characters.
📺youtu.be/sZS-7RX_c7g
You can make an underline thicker or thinner.
You can move it closer to/further from the text.
You can control whether the line intersects with characters.
📺youtu.be/sZS-7RX_c7g
35
415
1,726
CSS in Depth retweeted
Did you see the latest @FirefoxDevTools awesome feature 🔥?
It's helping you see why a CSS property has no effect.
We're adding more of those in bugzilla.mozilla.org/showdependency…, if you want to help, it's quite simple to work on, and you might learn some CSS along the way 🙂
It's helping you see why a CSS property has no effect.
We're adding more of those in bugzilla.mozilla.org/showdependency…, if you want to help, it's quite simple to work on, and you might learn some CSS along the way 🙂
35
742
1,896
CSS in Depth retweeted
Fading Out Siblings on Hover in CSS
This CSS trick for fading siblings on hover is pretty rad. trysmudford.com/blog/fade-out-…
This CSS trick for fading siblings on hover is pretty rad. trysmudford.com/blog/fade-out-…
1
10
89