A CSS book for web developers by @keithjgrant. Foreword by @chriscoyier.
Joined April 2015
- Tweets 621
- Following 29
- Followers 638
- Likes 78
71 Photos and videos
11 Aug 2023
📖 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-dep…
ALT New in MEAP: CSS in Depth, second edition by Keith J. Grant
1
105
CSS in Depth retweeted
21 Feb 2022
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-l…
5
57
222
CSS in Depth retweeted
4 Feb 2022
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
1
6
CSS in Depth retweeted
28 Oct 2021
Use CSS clamp() to constrain flexible/responsive values between a minimum and maximum
Demo: codepen.io/keithjgrant/pen/M…
Browser support (it's good!): caniuse.com/css-math-functio…
ALT CSS using the clamp() function to set font-size and with.
3
8
20 Oct 2021
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
5
CSS in Depth retweeted
20 Oct 2021
CSS grid's `gap` property (formerly `grid-gap`) sure is nice in flexbox, too. Now supported in all major browsers
ALT CSS showing use of gap property compared to the old method using margins
8
113
629
CSS in Depth retweeted
19 Oct 2021
Guess what now has support in all major browsers?
ALT CSS using new aspect-ratio property
7
99
687
5 May 2020
This is another important change that emerged after CSS in Depth went to print:
4
CSS in Depth retweeted
5 May 2020
🔥 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 😍
3
33
100
27 Apr 2020
This is very exciting! `gap` was added to the spec just after we went to print
27 Apr 2020
🎉 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
2
27 Apr 2020
`gap` will eventually replace `grid-gap` and work in both Grid and Flexbox. More info here:
developer.mozilla.org/en-US/…
1
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
3
6
30
CSS in Depth retweeted
19 Nov 2019
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
CSS in Depth retweeted
5 Nov 2019
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
35
420
1,742
CSS in Depth retweeted
4 Jun 2019
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/showdep…, if you want to help, it's quite simple to work on, and you might learn some CSS along the way 🙂
ALT Screenshot of Firefox DevTools inspector. A span element is selected, with a CSS rule applying a width to it. A tooltip is displayed stating that the width is inactive because the element has a display of inline
36
747
1,910
CSS in Depth retweeted
15 May 2019
Fading Out Siblings on Hover in CSS
This CSS trick for fading siblings on hover is pretty rad. trysmudford.com/blog/fade-ou…
1
12
89