CSS in 2020 – A Practical Guide

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

grid-gap
column
custom-properties
box-alignment
@supports
scroll-snap
clip-path
mask
vw, vh, vmax, vmin, min-height: 100vh
caret-color:orange
ch units
CSS Angles – deg(), grad(), rad(), turn()
Conic (cone) Gradients

Part 2 – CSS Frameworks – 7:48

Tailwind
Bootstrap
Tachyons
Pure
Foundation
Materialize
Sematic-UI
Bulma
UIKit

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()
CSS sub-grid
CSS regions
CSS modules
Display:outer inner
size: w h, aspect-ratio
Custom elements –
#RRGGBBAA – specify alpha in 8 digit ‘hex’ mode
‘All’ property – reset of all properties on an element
font-variant: small-caps;
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

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?

Tutorials

CSS in 2020 – A Practical Guide

Part 1 – CSS Features – 1:06

Part 2 – CSS Frameworks – 7:48

Part 3 – CSS Future Features – 9:45

Part 4 – CSS Pre-processors – 14:34

Part 5 – CSS Style Guides – 16:00

Part 6 – CSS Resources – 17:37