A CSS book for web developers by @keithjgrant. Foreword by @chriscoyier.
Manning Publications
Joined April 2015
- Tweets611
- Following29
- Followers634
- Likes77
📖 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
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-l…
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
CSS in Depth retweeted
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.
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 in Depth retweeted
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
CSS in Depth retweeted
Guess what now has support in all major browsers?
ALT CSS using new aspect-ratio property
This is another important change that emerged after CSS in Depth went to print:
This quoted post is unavailable.
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 😍
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
`gap` will eventually replace `grid-gap` and work in both Grid and Flexbox. More info here:
developer.mozilla.org/en-US/…
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
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.
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
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/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
Subgrid has landed in Firefox Nightly!
css-irl.info/subgrid-is-here…
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-ou…
