Home Blog Holy shit there's so much CSS

Holy shit there's so much CSS

Draft

Fundamentals

Pseudo-classes

Article
Podcast

Color

Article
Podcast 1/2
Podcast 2/2
Video

Units

Which unit should I use when?

Rendering Logic

Logical properties/values

Article

Border

If you don’t specify a border-color, it’ll inherit the font’s color by default. This isn’t well-known, but it can be very useful in cases where those things should be synchronised!

Stacking contexts

Article
Stacking contexts inspector

Responsive and Behavioural CSS

Pixels

The iPhone 12 has a native resolution of 2532×1170 pixels—for context, this is more than most large desktop monitors!
So to account for this mobile devices have a device pixel ratio.
The ratio between the physical LED pixels on the device, and the “theoretical” pixels we use in CSS. On my iPhone, this number is 3. This means that a 10px length will actually be 30px long. Each software pixel actually corresponds to 9 hardware pixels:

(In reality, pixels aren’t tiny squares, but for our purposes, we can pretend they are.)

.box {
  /*
    This CSS will ACTUALLY draw a
    150×150 box on a modern iPhone.
  */
  width: 50px;
  height: 50px;
  background: pink;
}

Media queries

Article

Typography and Images

Images are inline elements “magic space”

Variable fonts are the future

CSS Grid and Flexbox

Flex for 1 dimension and Grid for 2 dimensions.

Gap 👏

Subgrid (soon™️)

Animations

Transitions

Reach for transition when your CSS will change as a result of some application state or user action.

I use it when I want to smooth out an otherwise harsh transition between values.

Keyframes

If an animation needs to run immediately when the page loads or the component mounts, it’s easiest to use @keyframes.

There are some things that only @keyframes can do:

JS libraries

Motion One

Framer Motion

React Spring

GreenSock GSAP

Little Big Details

Increase touch targets

For users using corse pointers (a.k.a mobile users) the minimum recommended size (by Apple) for touch targets is 44px². So ideally you should go through and make sure that all interactive elements are at least that size, but a smart and lazy person thought “no, I don’t wanna do that!” and decided to come up with a way to calculate it automatically using calc and min: https://codepen.io/third774/pen/XWgXZRY.

Generative art with CSS

CSS doodle

Tabbied

Backdrop filters

Layered shadows

No more dull gradients

Scroll snapping

New CSS coming in 2022

Article

Lots of amazing new CSS features coming this year, specifically:

- Container queries