Sharing is Caring

New CSS features you can use today (Part 01)

Align Content

div {
  align-content: center;
}

CSS Is Awesome

Zoom vs Scale

.zoomed {
  zoom: 1.5;
}
.scaled {
  scale: 1.5;
  transform-origin: top left;
}

zoom: 1.5

Sibling

scale: 1.5

Sibling

Unfortunately, non-animatable.

:user-valid

input:user-valid {
  outline: 2px solid green;
}
input:user-invalid {
  outline: 2px solid red;
}

Relative Colors

button:hover {
  background-color: hsl(from var(--c-secondary) h s calc(l + 5));
}
button:hover {
  background-color: rgba(from var(--c-secondary) r g b / 0.8);
}

Color Mix

button:hover {
  background-color: color-mix(in srgb, var(--c-secondary), white 20%);
}

Light-Dark

button:hover {
  background-color: light-dark(var(--c-primary), var(--c-secondary));
}

Round, Mod, Rem

:root {
  --width: 100rem;
  --interval: 13;
}
div {
  margin: round(up, var(--width), var(--interval));
  border: mod(var(--width), var(--interval)) solid red;
}

Usually used with spacings (margins, paddings) and rotations.
Useful especially when calculating percentages and we want to eliminate sub-pixel numbers, as browsers can have problems with them.
They don't require calc():
- e.g. margin: round(0.5rem);
- e.g. transform: rotate(round(45deg));
Difference between mod() and rem():
- mod() is the euclidean modulo, it always returns a positive number.
- rem() is the truncated remainder, it keeps the sign of the dividend (1st number).

Text Wrap

p {
  text-wrap: wrap; // default
  text-wrap: nowrap;
  text-wrap: balance;
  text-wrap: pretty;
}

The default behavior; the text in the heading wraps "normally"

In this case the text in the heading doesn't wrap, and overflows the container

In this case the text in the heading is nicely balanced across lines

Lorem ipsum dolor sit amet consectetur adipisicing elit molestiae autem. Odio molestiae tenetur aliquid exercit ationem.

Shape

.star {
  clip-path: shape(
    from 50px 0px,
    line to 61px 35px,
    line to 98px 35px,
    line to 68px 57px,
    line to 79px 91px,
    line to 50px 70px,
    line to 21px 91px,
    line to 32px 57px,
    line to 2px 35px,
    line to 39px 35px,
    close
  );
}

Starting Style

.list-item {
  transition: all 0.2s ease-in-out;
  translate: 0;

  @starting-style {
    translate: 0 100%;
    scale: 0;
  }
}

Item 1
Item 2

Media Query Range

@media (800px <= width <= 1100px) {
  p {
    background-color: blue;
  }
}

I am blue between 800px & 1100px!

window width = px