DanLevy.net

Quiz: ¿Conoces CSS moderno? (para 2025)

¿Eres lo suficientemente front‑end?

Quiz: ¿Conoces CSS?

1. 

Calentamiento

¿Cuál es la forma correcta de usar una variable CSS llamada --main-color para establecer el color de fondo de un elemento?

:root {
  --main-color: blue;
}
div {
  /* How do we use --main-color here? */
}

Las variables CSS se usan con la función var, así que la respuesta correcta es background-color: var(--main-color);. Esta sintaxis recupera el valor de --main-color y lo aplica.

Las otras opciones pueden resultar familiares de otros lenguajes o sintaxis de preprocesadores, como Sass o Less.

2. 

Funciones CSS

Si el ancho del contenedor/padre es 400 px, ¿cuál será el ancho calculado del siguiente elemento?

div {
  width: min(250px, 50%);
}

La función min() elegirá el valor más pequeño entre 250 px y 50 % del ancho del padre.

Para entender el valor calculado, necesitamos convertir las unidades relativas a píxeles:

  • 50% de 400px es 200px
  • 250px ya está en píxeles
/* This gets computed to */
width: min(250px, 200px);
/* -> 200px wins */

La función min() es especialmente útil para el diseño responsivo, donde puedes garantizar que un componente (o tamaño de fuente) no supere un límite determinado.

3. 

Funciones de CSS

Dado un contenedor con un ancho de 200px, ¿cuál sería el ancho calculado del <div>?

div {
  width: max(50px, 10%, 6rem);
}

La función max() acepta 2 o más entradas y usará automáticamente el valor más grande. Suponiendo que el tamaño de fuente raíz es el valor predeterminado del navegador 16px, el ancho resulta en 96px.

Para entender el valor calculado, necesitamos convertir las unidades relativas a píxeles:

  • 50px ya está en píxeles
  • 10% de 200px es 20px
  • 6rem son 6 * 16px (el tamaño de fuente predeterminado) que equivale a 96px
/* This gets computed to */
width: max(50px, 20px, 96px);
/* -> 96px wins */

4. 

Funciones de cuadrícula CSS

¿Cuál es el efecto de usar minmax(100px, 200px) en una pista de cuadrícula CSS?

grid-template-columns: minmax(100px, 200px);

Usar minmax(100px, 200px) permite que la pista de la cuadrícula cambie de tamaño entre 100px y 200px, adaptándose al espacio disponible pero sin bajar de 100px ni superar 200px.

Puedes crear diseños autoajustables donde el contenedor y los hijos juegan un papel en el cálculo de los diseños. Esto es potente cuando se combina con repeat() y auto-fill o auto-fit, que crearán tantas pistas como sea posible dentro de las limitaciones.

5. 

Variables CSS

¿Qué color tendrá el fondo con el siguiente CSS?

div {
  background: var(--primary, olivedrab);
}

La función var() te permite establecer un valor de respaldo si la variable no está definida. En este caso, el fondo será olivedrab (#6b8e23) porque --primary no está definida.

Esta es una excelente manera de asegurarte de que tus estilos no se rompan si falta una variable o no es compatible.

6. 

Funciones CSS

¿Qué hace clamp()?

.card {
  width: clamp(200px, 50vw, 500px);
}

La función clamp() permite que el ancho se escale según 50vw, pero lo mantiene dentro de un rango de 200px a 500px.

Esto significa que el ancho será 200px cuando 50vw sea menor que 200px, 500px cuando 50vw sea mayor que 500px, y lineal entre esos límites.

¡Te vuelve automáticamente responsivo! Lo que hay que saber de clamp es que combina unidades fijas con unidades responsivas o calculadas.

Normalmente no querrías usar unidades de viewport para tamaños de fuente, pero con clamp() podemos asegurarnos de que el tamaño de la fuente no sea ni demasiado pequeño ni demasiado grande.

7. 

Anidamiento CSS

¿CSS admite anidamiento de forma nativa?

¡Sí! ¡Por fin tenemos anidamiento CSS nativo! CSS introdujo la sintaxis de anidamiento nativo en los últimos años (2023), permitiendo estilos jerárquicos directamente en CSS.

8. 

Anidamiento CSS

¿Es este un uso correcto del nesting nativo de CSS?

.container {
  color: black;
  .title {
    color: white;
    background: black;
  }
}

La clase .title está anidada dentro de la clase .container, y las propiedades se aplican como se espera.

Esta es una excelente manera de mantener estilos relacionados juntos y evitar selectores largos.

9. 

Anidamiento de CSS

¿Qué color de fondo se aplicará a los div hijos directos de .container?

.container {
  background-color: red;
  > div {
    background-color: white;
  }
  background-color: blue !important;
}

El selector > en la regla anidada aplica background-color: white solo a los elementos div hijos directos dentro de .container.

La última regla, background-color: blue !important;, es una pequeña distracción. Está fuera de la regla anidada y se aplicará a todos los elementos .container.

10. 

Variables CSS

¿Cómo puedes cambiar el valor de una variable CSS en tiempo de ejecución?

Las variables CSS pueden establecerse usando clases y JavaScript. Incluso pueden definirse ‘después’ de que técnicamente se usen.

document.documentElement.style.setProperty('--main-color', 'blue');

Esto cambiará el valor de --main-color a blue para todo el documento.

Las variables CSS son mutables y pueden cambiarse en tiempo de ejecución usando JavaScript.

También pueden modificarse añadiendo o quitando clases, lo cual es un patrón común para tematizar.

11. 

Variables CSS

¿Cuál será el ancho calculado del elemento?

:root {
  --base-width: 100px;
}
div {
  width: calc(var(--base-width) + 10px);
}

La función calc() combina el valor de --base-width (100px) con 10px adicionales, resultando en un ancho de 110px.

Loading comments...