A CSS book for web developers by @keithjgrant. Foreword by @chriscoyier.
Manning Publications
Joined April 2015
- Tweets611
- Following29
- Followers634
- Likes77
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.
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
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 😍
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
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…
CSS in Depth retweeted
#tinyCSStip
DON'T ❌
@keyframes b {
0% { color: tan }
49.99999% { color: tan }
50.00001% { color: red }
100% { color: red }
}
p { animation: b 2s infinite }
Instead, DO ✅
@keyframes b { 50% { color: red } }
p {
color: tan;
animation: b 2s steps(1) infinite
}
CSS in Depth retweeted
Pro tip: always organize your content in the order it should/would be read. If you want the layout to look different, change visually with CSS.
Same goes for grammar. If you want text to visually be all caps, write the content using proper grammar. Caps with CSS.
#accessibility
CSS in Depth retweeted
holy shit TIL visibility works when nested. (thanks @cnakazawa!) so for example, you could have a parent that's marked visibility: hidden, but children with visibility: visible will still show
ffffuuuuu this is exciting!
CSS in Depth retweeted
• Nesting is bad.
• Elements as key selectors are bad.
• Referencing two components in one compound selector is bad (e.g. .header .login-btn).
• IDs are forbidden.
• Beyond baseline styling for e.g. typography, almost all selectors should be single classes.
CSS in Depth retweeted
📝 I Used CSS Inline Flex For The First Time
ishadeed.com/article/how-i-u…
A quick and short article for how I used `display: inline-flex` for the first time.
CSS in Depth retweeted
The CSS Working Group agreed this morning on adding many math functions. We now have:
• calc()
• min()
• max()
• clamp()
• sin()
• cos()
• tan()
• acos()
• asin()
• atan()
• atan2()
• hypot()
• sqrt()
• pow()
The face of CSS is rapidly changing. – at San Francisco, CA
CSS in Depth retweeted
How HSL is better than RGB/HEX? 🌈 It allows you to build more readable & maintainable color palettes
👇🏻Check out the comparison below 👇🏻
