CSS has evolved rapidly over the last 10 years. In an effort to stay abreast on some of the new fancy things css can do, I’ve created this practical guide for CSS in 2020. Watch the video or jump down after the video for a list of most of the features (& links) covered in the video.
Please consider subscribing to the YouTube Channel!
Part 1 – CSS Features – 1:06
vw, vh, vmax, vmin, min-height: 100vh
CSS Angles – deg(), grad(), rad(), turn()
Conic (cone) Gradients
Part 2 – CSS Frameworks – 7:48
Part 3 – CSS Future Features – 9:45
Houdini – Complete control over custom layout/rendering of CSS
Focus-within – Accessibility fixes for focusing within elements
prefers-* – Adjust UI/UX to user’s device preferences
Logical properties – Block-start, block-end, inline-start, inline-end
Position Sticky – Keep UI within viewport
Backrop-filter – Style adjustments behind an element
:is() – combine any() & mathes()
size: w h, aspect-ratio
Custom elements –
#RRGGBBAA – specify alpha in 8 digit ‘hex’ mode
‘All’ property – reset of all properties on an element
image-set() – specify image sources based on resolution
lab(), gray(), lch(), hwb() – new color modes
calc() min() max() clamp() sin() cos() – and more math functions
Part 4 – CSS Pre-processors – 14:34
Part 5 – CSS Style Guides – 16:00
Part 6 – CSS Resources – 17:37
A List Apart
Mozilla Developer Network
Shop Talk Show (podcast)
I didn’t cover many of the new things coming out, but this is already pretty large and can give you a great starting point for branching out into some of the new CSS and web tech!
Which features are you most eager to learn?
What CSS features are on your wish list?