CSS in Depth @CSSinDepth

A CSS book for web developers by @keithjgrant. Foreword by @chriscoyier. manning.com/books/css-in-d… Manning Publications Joined April 2015

Tweets

625
Followers

652
Following

30
Likes

80

CSS in Depth @CSSinDepth

2 years ago

📖 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…

0 0 2 102 1

Download Image

CSS-Tricks @css

4 years ago

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 58 227 0 79

@[email protected] @keithjgrant

4 years ago

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 0 0

@[email protected] @keithjgrant

4 years ago

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…

0 3 8 0 2

Download Image

CSS in Depth @CSSinDepth

4 years ago

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

0 0 5 0 0

@[email protected] @keithjgrant

4 years ago

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

8 115 644 0 56

Download Image

@[email protected] @keithjgrant

4 years ago

Guess what now has support in all major browsers?

7 103 706 0 51

Download Image

Wes Bos @wesbos

5 years ago

🔥 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

7 52 307 0 42

Download Image

CSS in Depth @CSSinDepth

5 years ago

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

CSS-Tricks @css

5 years ago

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

0 14 62 0 12

Download Image

0 0 4 0 1

Ahmad Shadeed @shadeed9

5 years ago

🔥 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 102 0 8

Download Video

Una 🇺🇦 @Una

5 years ago

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 7 31 0 3

Download Gif

Tristan 📚 @gibbs_digital

6 years ago

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 0 1

Jen Simmons @jensimmons

6 years ago

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 427 2K 0 165

Download Image

Nicolas CHEVOBBE @nicolaschevobbe

6 years ago

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 🙂