CSS Moderno: antes vs ahora

Es muy posible que te lleves tiempo sin tocar CSS y desconozcas muchas de las novedades que incorpora CSS actualmente. En esta página he hecho una lista de tareas comunes que hoy en día se pueden hacer de una forma mejor que la que comunmente está más extendida.

En estos ejemplos, encontrarás una forma tradicional de hacer las cosas a la izquierda, una forma más moderna en la zona derecha.

Combinador `:is()`

Agrupación de selectores

Reescribir de forma más compacta y sencilla los selectores múltiples combinados [ Más info ]

.container .item,
.container .parent,
.container .element {
  /* ... */
}

.container :is(.item, .parent, .element) {
  /* ... */
}

Colores RGB

Escribir colores

Escribir colores RGB con canales alfa (transparencias) [ Más info ]

.container {
  background: rgba(255, 255, 0, 0.5);
}

.container {
  background: rgb(100% 100% 0 / 50%);
}

Nesting CSS

Anidar código CSS

Crear componentes CSS nativos autocontenidos dentro de otros [ Más info ]

.parent {
  background: grey;
}

.parent .element {
  background: darkred;
}

.parent .element:hover {
  background: red;
}

.parent {
  background: grey;

  & .element {
    background: darkred;

    &:hover {
      background: red;
    }
  }
}

Centrado CSS

Centrar el contenido de un elemento

Realizar un centrado en ambos ejes directamente, con una sola propiedad [ Más info ]

.parent {
  display: grid;
  justify-items: center;
  align-items: center;
}

.parent {
  display: grid;
  place-items: center;
}

Variables CSS

Reutilizar información

Utilizar custom properties para guardar información en variables [ Más info ]

.parent {
  width: 300px;
  height: 300px;
  background: grey;
}

.parent {
  --size: 300px;

  width: var(--size);
  height: var(--size);
  background: var(--color, grey);
}

Media Queries

Sintaxis flexible de rangos

Posibilidad de utilizar una sintaxis más amigable para media queries [ Más info ]

@media (min-width: 800px) and
       (max-width: 1280px) {
  .menu {
    background: red;
  }
}

@media (800px <= width <= 1280px) {
  .menu {
    background: red;
  }
}

CSS tradicional vs CSS moderno