Unidades de Medida en CSS: Pixeles
¡Hola gente bonita!👋
En este articulo voy a explicar todo lo que tienes que saber sobre los pixeles, pero antes de comenzar necesitamos comprender que son los pixeles.
🤔 ¿Qué son los pixeles?
El término pixel surge por la combinación de dos palabras inglesas comunes, «picture» (imagen) y «element» (elemento).
Las pantallas están formadas por un montón de pequeños puntos luminosos, llamados píxeles. Si miras una pantalla con suficiente atención, puedes ver que esta dividida en una cuadricula de cuadros pequeños. Cada cuadro es un pixel.
Cada píxel en la pantalla se pinta, o mejor dicho se enciende, con un determinado color. El tono de color de un píxel se consigue combinando los tres colores básicos (red, green, blue). Por lo tanto, cuando ves una imagen en pantalla es producto del conjunto formado por píxeles, cada uno de un determinado color.
👉 No es necesario que un píxel se represente como un pequeño cuadrado en las imágenes o elementos. El siguiente ejemplo muestra alternativas de reconstruir una imagen a partir de un conjunto de valores de píxeles, utilizando puntos, líneas o un filtrado suave.
Dos tipos de pixeles
En desarrollo web podemos definir dos tipos de pixeles:
- Pixel del dispositivo (también conocido como “píxel físico”) : son los píxeles reales que están en un monitor, smartphone, tv, etc. Por ejemplo, cuando se habla de 1920x1080 (Conocida como resolución Full HD o FHD), se refiere siempre a la resolución de una pantalla de 1920 píxeles físicos de ancho y 1080 pixeles físicos de alto.
- Pixel CSS (pixeles del viewport): es la unidad de medida con la que trabaja CSS para pintar los elementos en el viewport, y no siempre son del mismo tamaño que un píxel físico. 1 píxel = 1/96 de pulgada.
La resolución de pantalla es el número total de píxeles que pueden ser mostrados en la pantalla de un monitor de computadora, una televisión, un teléfono o Tablet y cualquier dispositivo que tenga una pantalla. Todos los dispositivos tienen en sus pantallas una resolución concreta.
Podemos decir entonces que estamos tratando con dos tipos de resoluciones: La primera resolución es la resolución real de la pantalla del dispositivo, y la segunda son las unidades medibles de la resolución CSS.
Sabiendo lo anterior, hay que tener en cuenta que cuando tratamos con pixeles en CSS estamos hablando siempre de píxeles CSS (o del viewport) y nunca de píxeles físicos.
Los pixeles en CSS
Los pixeles son una unidad con la que muchos desarrolladores se sienten cómodos. Al expresar un valor en pixeles en un elemento el tamaño de dicho elemento será fijo independientemente de la resolución o el tamaño de la pantalla.
Un valor expresado en pixeles siempre aparecerá con el mismo tamaño tanto en un smartphone como en una pantalla de retina (retina es sinónimo de alta densidad — high density).
Sin embargo, pueden haber algunos problemas con esta unidad, considera el siguiente ejemplo:
.box {
width: 500px;
height: 500px;
background-color: rebeccapurple;
}Es probable que en una pantalla de computadora se vea bien ya que este elemento tiene un tamaño fijo porque siempre va a medir 500px pero si conforme vas disminuyendo el tamaño de la pantalla (por ejemplo a 300px), y como el elemento tiene una medida fija que no cambia, provoca que se genere una barra de scroll horizontal. Por lo tanto, debes usar con cuidado esta unidad.
👁️ Accesibilidad: utilizar unidades relativas para el tamaño de la fuente
Otro problema es cuando se usa los pixeles en el tamaño de fuente. Es posible que hayas escuchado que los píxeles son malos para la accesibilidad porque los usuarios no pueden cambiar su tamaño: si una persona tiene mala visión, puede querer aumentar el tamaño de la fuente, y los píxeles bloquean esa capacidad.
La Accesibilidad Web es un estándar desarrollado por el World Wide Web Consortium (W3C). Nos permite optimizar nuestras interfaces para garantizar el acceso a personas con discapacidades o que puedan experimentar algún tipo de impedimento para acceder al contenido
🔎 Hay dos maneras en que los usuarios pueden aumentar el tamaño del texto en la página:
- Pueden acercarse, pulsando las teclas Ctrl +, esto hace que todo se amplíe, y pueden alejarse pulsando las teclas Ctrl -.
El usuario puede ampliar o reducir la página. Esto escala visualmente todas las fuentes e imágenes y generalmente hace que todo en la página sea más grande o más pequeño. En algunos navegadores, este cambio sólo se aplica a la pestaña actual y es temporal, lo que significa que no se traslada a las nuevas pestañas.
Esta primera opción -ampliar y reducir- funcionará independientemente de las unidades que utilices; ya que escala todo según una proporción.
2. Pueden establecer un tamaño de fuente más grande en la configuración del navegador; en lugar de por defecto 16px (medium), por ejemplo, pueden querer a 20px o 24px.
Esta segunda opción sólo funciona si has utilizado en tu código unidades em o rem, ya que al establecer el texto con unidades relativas como em o rem, en lugar de una unidad absoluta, como px, el tamaño de su texto puede responder a las preferencias del usuario, este tamaño de fuente preferido por el usuario se respetará si utilizas longitudes relativas.
Hay muchos sitios web que tienen el tamaño de fuente o de los elementos en pixeles por los que si el usuario cambia el tamaño de fuente del navegador o hace zoom, las medidas de los elementos y de las fuentes en el sitio web no van a cambiar, permanecerán fijos o intactos y es porque los pixeles sobrescriben las preferencias del usuario.
Dado que un tamaño de fuente por defecto es vital para algunos usuarios, en particular para los que tienen problemas de visión, debería especificar siempre el tamaño de las fuentes con unidades relativas.
✅ Generalmente se recomienda usar rems para tamaños de fuente, porque tiene importantes beneficios de accesibilidad, por lo tanto, rem es mejor que usar pixeles porque se adaptan a las preferencias del usuario, mientras que si usa pixeles puede sobrescribir las preferencias del usuario.
No se considera una buena practica usar pixeles como unidad, especialmente para el tamaño de fuente.
La accesibilidad es un tema muy importante, ya que se hacen pruebas de accesibilidad, así que como desarrolladores frontend es nuestra responsabilidad hacer que los sitios web sean accesibles para todos. No debemos establecer nuestras preferencias por encima de los usuarios.
✍️ En el siguiente articulo explicare a profundidad sobre la unidad rem.
🤔 ¿En que situaciones debo usar Pixeles?
Los píxeles siguen siendo los mejores para establecer bordes especialmente cuando se desea una línea fina y bonita.
.button {
border-radius: 4px;
border: 2px solid #fc87da;
}Sin embargo, hay varios desarrolladores que si usan los pixeles cuando se trata de propiedades relacionadas con el modelo de caja -el padding, el border, el margen-, pero por lo general usan esta unidad para establecer distancias pequeñas.
Con respecto al width dependerá de si quieres que el elemento tenga un tamaño fijo o un tamaño relativo. Puedes querer que un elemento `div` tenga siempre `250px` de ancho, mientras que otro debe tener el 50% del espacio disponible. Todo dependerá de lo que quieras hacer.
.container {
width: 90%;
max-width: 800px;
}Conclusión
Los pixeles nos dan una precisión total ya que son considerados “independiente del dispositivo” (device independent).
El píxel sigue teniendo un lugar en la web y hay muchas ocasiones en las que se requiere que un valor fijo no se escale en función de las preferencias del usuario.
Basta con ver la encuesta anual (The State of CSS Survey) sobre las últimas tendencias en CSS, para darnos cuenta que el pixel es la unidad que mas siguen usando los desarrolladores frontend:
🔎 Lecturas Recomendadas
Gracias por leer 🦸🏻♀️
Mis redes sociales donde comparto notas de código:
