Regla de píxeles

Medir en píxeles, con exactitud

Es la única herramienta del sitio que no necesita calibración, y merece la pena entender por qué. Todas las demás convierten píxeles en unidades físicas, y esa conversión depende de conocer la densidad real de tu pantalla. Una regla de píxeles se salta la conversión: mide píxeles en píxeles, así que la respuesta es exacta en cualquier pantalla, a cualquier densidad, sin nada que preparar.

Las reglas de los bordes superior e izquierdo están graduadas cada 10 px con una cifra cada 100, y una selección prolonga líneas guía hacia ambas canaletas, de modo que puedes leer una distancia directamente sobre la escala.

Píxeles CSS, píxeles del dispositivo, y por qué importan los dos

Un píxel CSS es una unidad de maquetación, no un punto físico. En una pantalla estándar ambos coinciden. En cualquier pantalla de alta densidad, un solo píxel CSS se pinta usando varios píxeles del dispositivo: cuatro a 2× y nueve a 3×. La relación que los conecta aparece debajo de la superficie, para la pantalla en la que estés leyendo esto.

Para el trabajo de front-end la consecuencia es sencilla: maquetas en píxeles CSS y exportas las imágenes al tamaño en píxeles del dispositivo. Un icono que ocupa 24 píxeles CSS necesita 48 px de datos reales para verse nítido en una pantalla 2×, que es toda la razón de ser de srcset y de los archivos @2x. Aquí las dos cifras van una al lado de la otra, para no hacer esa multiplicación mentalmente.

Los porcentajes del área visible sirven a un propósito parecido. Cuando conviertes un diseño de ancho fijo en CSS adaptable, saber que un elemento ocupa el 20 % del ancho es más útil de inmediato que saber que mide 240 px, porque se traduce directamente en vw y vh.

Para qué se usa de verdad

Casi siempre para el mismo puñado de tareas, y todas son comparaciones más que medidas absolutas:

• Comprobar que los espaciados son consistentes. Los sistemas de diseño se apoyan en una escala, normalmente múltiplos de 4 o de 8. Un hueco de 14 px en una maquetación construida sobre octavos es un error, y se ve mucho antes con una regla encima que leyendo el código.
• Comparar una implementación con su diseño. Mide el mismo elemento en ambos. Un titular que debería estar a 32 px del borde y está a 28 es justo el tipo de desvío que se acumula sin ruido a lo largo de una página.
• Dimensionar un recurso antes de exportarlo. Mide el espacio que va a ocupar y exporta a esa medida multiplicada por la relación de píxeles a la que apuntes.
• Zanjar una discusión sobre una captura. Deja una guía sobre un borde y la pregunta de si dos cosas están alineadas deja de ser cuestión de opiniones.

Lo que una regla de píxeles no puede hacer

Solo puede medir dentro de su propia página. Una página web no ve otras ventanas, ni otras pestañas, ni tu escritorio. Ese aislamiento es una frontera de seguridad deliberada e importante, no una limitación que haya que sortear. Medir la interfaz de una aplicación nativa, o cualquier cosa fuera del navegador, requiere un programa de escritorio con los permisos adecuados.

El zoom del navegador también merece explicación. No amplía la página terminada como haría una lupa: cambia lo que vale un píxel CSS, y la página se vuelve a maquetar al nuevo tamaño. Al 125 %, un píxel CSS se pinta con 1,25 píxeles del dispositivo, de modo que esta superficie sigue informando de píxeles CSS honestos mientras todo se ve físicamente más grande. Es el comportamiento correcto, porque el píxel CSS es la unidad en la que escribes los estilos.

Queda el teclado, que es la parte que la gente pasa por alto. Selecciona la superficie y las flechas redimensionan la selección de píxel en píxel, o de diez en diez con Mayús pulsada. El ratón sirve para acercarte; las flechas son las que te dejan en una cifra exacta, y no se te escapan en el último momento como hace un panel táctil.

La trampa de las capturas de pantalla

Una captura hecha en una pantalla 2× contiene el doble de píxeles que la maquetación que muestra. Un botón de 200 px CSS sale como 400 px en el archivo. Es la fuente de confusión más habitual cuando dos personas comparan medidas: una lee píxeles CSS en su navegador y la otra lee píxeles de imagen en un editor, y ambas tienen razón sin saberlo.

Tres hábitos evitan la discusión. Di siempre la unidad al dar una cifra, "200 px CSS" en lugar de "200 px". Anota la relación de píxeles del equipo donde se tomó la captura, porque ese es el factor de conversión. Y cuando la comparación importe de verdad, mide los dos lados en el mismo sitio: esta superficie para la página viva y las reglas de tu editor para el archivo, dividiendo estas últimas por la relación de píxeles.

El mismo razonamiento explica por qué una imagen exportada al tamaño CSS se ve borrosa en una pantalla de alta densidad. No está borrosa: simplemente le faltan datos, estirada sobre cuatro veces más puntos de los que contiene.