Ver las cajas en CSS

Tres reglas desechables que responden casi toda duda de layout más rápido que el inspector.

* { outline: 1px solid rgb(255 0 0 / 0.2); }

/* qué está desbordando la página */
* { max-inline-size: 100%; }

/* imágenes que serán ilegibles para alguien */
img:not([alt]) { outline: 3px solid #dc2626; }

/* botones sin ningún nombre accesible */
button:not([aria-label]):empty { outline: 3px solid #f59e0b; }

/* el que encuentra un z-index perdido */
[style*="z-index"] { outline: 2px dashed #2563eb; }

Cómo funciona

1. Un outline en todo muestra las cajas sin cambiar ninguna.
2. outline no ocupa espacio; border sí, y mueve lo que mide.
3. Resaltar un elemento sin nombre accesible atrapa bugs reales.

Palabras clave y builtins usados aquí

• outline
• px
• rgb

El intento, en números

Líneas

13

Caracteres a escribir

408

Tokens

80

Ritmo de tres estrellas

90 tpm

Al ritmo de tres estrellas de 90 tokens por minuto, este intento toma unos 53 segundos.

Escribe este fragmento

Paso 2 de 2 en Temas y herramientas; paso 8 de 9 en Organizar el CSS.

← Anterior Siguiente →