CSS

El navegador determina qué estilos mostrar en un elemento dependiendo de la especificidad de las reglas CSS. Asumimos que el navegador ya ha determinado las reglas que coinciden con un elemento particular. Entre las reglas coincidentes, se calculan cuatro valores separados por comas, a, b, c, d, para cada regla basándose en lo siguiente:

1. a indica si se están utilizando estilos en línea. Si la declaración de la propiedad es un estilo en línea en el elemento, a es 1, de lo contrario 0.
2. b es el número de selectores de ID.
3. c es el número de selectores de clases, atributos y pseudoclases.
4. d es el número de selectores de etiquetas y pseudoelementos.

La especificidad resultante no es una puntuación, sino una matriz de valores que se pueden comparar columna por columna. Al comparar selectores para determinar cuál tiene la mayor especificidad, se mira de izquierda a derecha y se compara el valor más alto en cada columna. Así, un valor en la columna b anulará los valores en las columnas c y d, sin importar cuáles sean. Por lo tanto, una especificidad de 0,1,0,0 sería mayor que una de 0,0,10,10.

En los casos de igual especificidad: la última regla es la que cuenta. Si ha escrito la misma regla en su hoja de estilo (independientemente de si es interna o externa) dos veces, entonces la regla inferior en su hoja de estilo está más cerca del elemento a estilizar, se considera más específica y, por lo tanto, se aplicará.

Escribiría reglas CSS con baja especificidad para que puedan ser fácilmente anuladas si fuera necesario. Al escribir código de bibliotecas de componentes de interfaz de usuario CSS, es importante que tengan bajas especificidades para que los usuarios de la biblioteca puedan anularlos sin usar reglas CSS demasiado complicadas solo por aumentar la especificidad o recurrir a !important.

• Resetear - Resetear tiene como objetivo eliminar todo el estilo predeterminado del navegador en los elementos. Por ejemplo, los margins, paddings, font-sizes de todos los elementos se restablecen para ser iguales. Tendrás que redeclarar el estilo para los elementos tipográficos comunes.
• Normalizar - Normalizar conserva los estilos predeterminados útiles en lugar de "desestilizar" todo. También corrige errores para las dependencias comunes del navegador.

Elegiría resetear cuando tengo un diseño de sitio muy personalizado o poco convencional, de tal manera que necesito hacer mucho de mi propio estilo y no necesito que se preserve ningún estilo predeterminado.

float es una propiedad de posicionamiento de CSS. Los elementos flotantes permanecen como parte del flujo de la página y afectarán el posicionamiento de otros elementos (por ejemplo, el texto fluirá alrededor de los elementos flotantes), a diferencia de los elementos con position: absolute, que se eliminan del flujo de la página.

La propiedad CSS clear se puede usar para posicionarse debajo de los elementos flotantes left/right/both.

Si un elemento padre contiene solo elementos flotantes, su altura se reducirá a cero. Se puede solucionar eliminando el float después de los elementos flotantes en el contenedor pero antes del cierre del contenedor.

El truco .clearfix utiliza un ingenioso pseudoselector de CSS (::after) para limpiar los flotantes. En lugar de establecer el overflow en el padre, le aplicas una clase adicional clearfix. Luego aplicas este CSS:

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Alternativamente, dale la propiedad overflow: auto o overflow: hidden al elemento padre, lo que establecerá un nuevo contexto de formato de bloque dentro de los hijos y se expandirá para contener a sus hijos.

La propiedad z-index en CSS controla el orden de apilamiento vertical de los elementos que se superponen. z-index solo afecta a los elementos que tienen un valor position que no es static.

Sin ningún valor z-index, los elementos se apilan en el orden en que aparecen en el DOM (el más bajo en el mismo nivel jerárquico aparece en la parte superior). Los elementos con posicionamiento no estático (y sus hijos) siempre aparecerán encima de los elementos con posicionamiento estático predeterminado, independientemente de la jerarquía HTML.

Un contexto de apilamiento es un elemento que contiene un conjunto de capas. Dentro de un contexto de apilamiento local, los valores z-index de sus hijos se establecen en relación con ese elemento en lugar de con la raíz del documento. Las capas fuera de ese contexto, es decir, los elementos hermanos de un contexto de apilamiento local, no pueden situarse entre las capas dentro de él. Si un elemento B se encuentra encima del elemento A, un elemento hijo del elemento A, el elemento C, nunca podrá ser más alto que el elemento B, incluso si el elemento C tiene un z-index más alto que el elemento B.

Cada contexto de apilamiento es autónomo: después de que el contenido del elemento se apila, todo el elemento se considera en el orden de apilamiento del contexto de apilamiento padre. Unas cuantas propiedades CSS desencadenan un nuevo contexto de apilamiento, como opacity menor que 1, filter que no es none, y transform que no es none.

Nota: Lo que exactamente califica a un elemento para crear un contexto de apilamiento se enumera en este largo conjunto de [reglas].

Un Contexto de Formato de Bloque (BFC) es parte del renderizado visual CSS de una página web en la que se disponen las cajas de bloque. Los flotadores, los elementos posicionados absolutamente, los inline-blocks, los table-cells, los table-captions y los elementos con overflow distinto de visible (excepto cuando ese valor se ha propagado a la ventana de visualización) establecen nuevos contextos de formato de bloque.

Saber cómo establecer un contexto de formato de bloque es importante, porque sin hacerlo, el cuadro contenedor no [contendrá hijos flotantes]. Esto es similar a la anulación de márgenes, pero más insidioso ya que encontrará cajas enteras que se anulan de formas extrañas.

Un BFC es una caja HTML que satisface al menos una de las siguientes condiciones:

• El valor de float no es none.
• El valor de position no es ni static ni relative.
• El valor de display es table-cell, table-caption, inline-block, flex, o inline-flex, grid, o inline-grid.
• El valor de overflow no es visible.

En un BFC, el borde exterior izquierdo de cada caja toca el borde izquierdo del bloque contenedor (para el formato de derecha a izquierda, los bordes derechos se tocan).

Los márgenes verticales entre cajas de nivel de bloque adyacentes en un BFC se colapsan. Lea más sobre [colapsando márgenes].

• Método div vacío - <div style="clear:both;"></div>.
• Método clearfix - Consulte la clase .clearfix anterior.
• Método overflow: auto o overflow: hidden - El padre establecerá un nuevo contexto de formato de bloque y se expandirá para contener a sus hijos flotantes.

En proyectos grandes, escribiría una clase de utilidad .clearfix y las usaría en los lugares donde las necesito. overflow: hidden podría recortar a los hijos si los hijos son más altos que el padre y no es muy ideal.

Los sprites CSS combinan múltiples imágenes en una sola imagen más grande. Es una técnica de uso común para iconos (Gmail la utiliza). Cómo implementarla:

1. Use un generador de sprites que empaquete múltiples imágenes en una y genere el CSS apropiado para ello.
2. Cada imagen tendría una clase CSS correspondiente con las propiedades background-image, background-position y background-size definidas.
3. Para usar esa imagen, agregue la clase correspondiente a su elemento.

Ventajas:

• Reduce el número de solicitudes HTTP para múltiples imágenes (solo se requiere una única solicitud por hoja de sprites). Pero con HTTP2, cargar múltiples imágenes ya no es un gran problema.
• Descarga anticipada de activos que no se descargarán hasta que sean necesarios, como imágenes que solo aparecen en pseudoestados :hover. No se verían parpadeos.

• Después de identificar el problema y el navegador infractor, utilice una hoja de estilos separada que solo se cargue cuando se esté utilizando ese navegador específico. Sin embargo, esta técnica requiere renderizado del lado del servidor.
• Utilice bibliotecas como Bootstrap que ya manejan estos problemas de estilo por usted.
• Utilice autoprefixer para añadir automáticamente prefijos de proveedor a su código.
• Utilice Reset CSS o Normalize.css.
• Si está utilizando Postcss (o una biblioteca de transpilación similar), puede haber complementos que le permitan optar por utilizar sintaxis CSS moderna (e incluso propuestas del W3C) que transformarán esas secciones de su código en código seguro correspondiente que funcionará en los objetivos que haya utilizado.

• Degradación elegante (Graceful degradation): La práctica de construir una aplicación para navegadores modernos asegurando que siga siendo funcional en navegadores antiguos.
• Mejora progresiva (Progressive enhancement): La práctica de construir una aplicación para un nivel básico de experiencia de usuario, pero añadiendo mejoras funcionales cuando un navegador lo soporta.
• Usar [caniuse.com] para verificar el soporte de funciones.
• Autoprefixer para la inserción automática de prefijos de proveedor.
• Detección de características usando [Modernizr].
• Usar consultas de características CSS [@support]

Estas técnicas están relacionadas con la accesibilidad (a11y).

• width: 0; height: 0. Hace que el elemento no ocupe ningún espacio en la pantalla, lo que resulta en no mostrarlo.
• position: absolute; left: -99999px. Lo posiciona fuera de la pantalla.
• text-indent: -9999px. Esto solo funciona en texto dentro de los elementos block. Este es un truco muy utilizado y famoso, pero tiene [algunas desventajas] como causar problemas de rendimiento, por lo que es posible que desee considerar usar text-indent: 100% en su lugar.
• Meta etiquetas. Por ejemplo, usando Schema.org, RDF y JSON-LD.
• WAI-ARIA. Una especificación técnica del W3C que especifica cómo aumentar la accesibilidad de las páginas web.

Aunque WAI-ARIA es la solución ideal, optaría por el enfoque de posicionamiento absolute, ya que tiene las menores advertencias, funciona para la mayoría de los elementos y es una técnica fácil.

Antes de que Flex se hiciera popular (alrededor de 2014), el sistema de cuadrícula basado en float era el más fiable porque todavía tenía el mayor soporte de navegador entre los sistemas alternativos existentes (flex, grid). Bootstrap usaba el enfoque float hasta Bootstrap 4, que cambió al enfoque basado en flex. Al momento de escribir (2020), flex es el enfoque recomendado para construir sistemas de cuadrícula y tiene un [soporte de navegador decente].

Para los aventureros, pueden investigar [CSS Grid Layout], que usa la nueva y brillante propiedad grid; es incluso mejor que flex para construir diseños de cuadrícula y será la forma de facto de hacerlo en el futuro.

Sí. Un ejemplo sería transformar una navegación de píldoras apiladas en una navegación de pestañas fijada en la parte inferior más allá de un cierto punto de quiebre.

Sí, hay varias formas de colorear formas (incluida la especificación de atributos en el objeto) utilizando CSS en línea, una sección CSS incrustada o un archivo CSS externo. La mayoría de los SVG que encontrará en la web utilizan CSS en línea, pero existen ventajas y desventajas asociadas con cada tipo.

El coloreado básico se puede realizar configurando dos atributos en el nodo: fill y stroke. fill establece el color dentro del objeto y stroke establece el color de la línea dibujada alrededor del objeto. Puede usar los mismos esquemas de nombres de color CSS que usa en HTML, ya sean nombres de color (es decir, red), valores RGB (es decir, rgb(255,0,0)), valores hexadecimales, valores RGBA, etc.

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

El fill="purple" anterior es un ejemplo de atributo de presentación. Curiosamente, y a diferencia de los estilos en línea como style="fill: purple" que también es un atributo, los atributos de presentación pueden ser [anulados por estilos CSS] definidos en una hoja de estilo. Por lo tanto, si hiciera algo como svg { fill: blue; }, anularía el relleno púrpura que hemos definido.

Sí, hay cuatro tipos de propiedades @media (incluyendo screen):

• all - para todos los dispositivos de tipo de medio
• print - para impresoras
• speech - para lectores de pantalla que "leen" la página en voz alta
• screen - para pantallas de ordenador, tabletas, teléfonos inteligentes, etc.

Aquí hay un ejemplo del uso del tipo de medio print:

@media print {
  body {
    color: black;
  }
}

En primer lugar, comprenda que los navegadores hacen coincidir los selectores de derecha a izquierda (selector clave). Los navegadores filtran los elementos en el DOM según el selector clave y recorren sus elementos padre para determinar las coincidencias. Cuanto más corta sea la cadena del selector, más rápido podrá el navegador determinar si ese elemento coincide con el selector. Por lo tanto, evite los selectores clave que sean de etiqueta y universales. Estos coinciden con un gran número de elementos y los navegadores tendrán que trabajar más para determinar si los padres coinciden.

La metodología [BEM (Bloque Elemento Modificador)] recomienda que todo tenga una sola clase y, donde se necesite jerarquía, eso también se incorpore al nombre de la clase, lo que naturalmente hace que el selector sea eficiente y fácil de anular.

Sea consciente de qué propiedades CSS [desencadenan] el refluido, el repintado y la composición. Evite escribir estilos que cambien el diseño (desencadenen el refluido) siempre que sea posible.

Ventajas:

• CSS se vuelve más mantenible.
• Fácil de escribir selectores anidados.
• Variables para un tema consistente. Se pueden compartir archivos de tema entre diferentes proyectos.
• Mixins para generar CSS repetido.
• Las características de Sass como bucles, listas y mapas pueden hacer que la configuración sea más fácil y menos verbosa.
• Dividir su código en varios archivos. Los archivos CSS también se pueden dividir, pero hacerlo requerirá una solicitud HTTP para descargar cada archivo CSS.

Desventajas:

• Requiere herramientas para el preprocesamiento. El tiempo de recompilación puede ser lento.
• No escribir CSS utilizable actualmente y potencialmente. Por ejemplo, al usar algo como [postcss-loader] con [webpack], puede escribir CSS potencialmente compatible con el futuro, lo que le permite usar cosas como variables CSS en lugar de variables Sass. Por lo tanto, está aprendiendo nuevas habilidades que podrían valer la pena si/cuando se estandaricen.

Gustos:

• Mayormente las ventajas mencionadas anteriormente.
• Menos código escrito en JavaScript, lo que funciona bien con Node.

Disgustos:

• Uso Sass a través de node-sass, que es un binding para LibSass escrito en C++. Tengo que recompilarlo con frecuencia al cambiar entre versiones de Node.
• En Less, los nombres de las variables se prefijan con @, lo que puede confundirse con palabras clave nativas de CSS como @media, @import y la regla @font-face.

Usar @font-face y definir font-family para diferentes font-weights.

Esta parte está relacionada con lo anterior sobre escribir CSS eficiente. Los navegadores hacen coincidir los selectores de derecha a izquierda (selector clave). Los navegadores filtran los elementos en el DOM según el selector clave y recorren sus elementos padre para determinar las coincidencias. Cuanto más corta sea la cadena del selector, más rápido podrá el navegador determinar si ese elemento coincide con el selector.

Por ejemplo, con este selector p span, los navegadores primero encuentran todos los elementos <span> y recorren a su padre hasta la raíz para encontrar el elemento <p>. Para un <span> particular, tan pronto como encuentra un <p>, sabe que el <span> coincide y puede detener su búsqueda.

Un pseudoelemento CSS es una palabra clave añadida a un selector que permite aplicar estilos a una parte específica de los elementos seleccionados. Se pueden utilizar para decoración (:first-line, :first-letter) o para añadir elementos al marcado (combinados con content: ...) sin necesidad de modificar el marcado (:before, :after).

• :first-line y :first-letter se pueden usar para decorar texto.
• Se utilizan en el truco .clearfix como se muestra arriba para añadir un elemento sin espacio con clear: both.
• Las flechas triangulares en los tooltips usan :before y :after. Fomenta la separación de preocupaciones porque el triángulo se considera parte del estilo y no realmente del DOM.

El modelo de caja CSS describe las cajas rectangulares que se generan para los elementos en el árbol del documento y se diseñan de acuerdo con el modelo de formato visual. Cada caja tiene un área de contenido (por ejemplo, texto, una imagen, etc.) y áreas opcionales de padding, border y margin que la rodean.

El modelo de caja CSS es responsable de calcular:

• Cuánto espacio ocupa un elemento de bloque.
• Si los bordes y/o márgenes se superponen o se colapsan.
• Las dimensiones de una caja.

El modelo de caja tiene las siguientes reglas:

• Las dimensiones de un elemento de bloque se calculan mediante width, height, padding, borders y margins.
• Si no se especifica height, un elemento de bloque tendrá la altura del contenido que contiene, más padding (a menos que haya flotantes, para los cuales vea a continuación).
• Si no se especifica width, un elemento de bloque no flotante se expandirá para ajustarse al ancho de su padre menos padding.
• La height de un elemento se calcula por la height del contenido.
• La width de un elemento se calcula por la width del contenido.
• Por defecto, los paddings y borders no forman parte de la width y height de un elemento.

• Por defecto, los elementos tienen box-sizing: content-box aplicado, y solo se tiene en cuenta el tamaño del contenido.
• box-sizing: border-box cambia la forma en que se calculan el width y height de los elementos, el border y padding también se incluyen en el cálculo.
• La height de un elemento ahora se calcula por la height del contenido + padding vertical + ancho de border vertical.
• La width de un elemento ahora se calcula por la width del contenido + padding horizontal + ancho de border horizontal.
• Tener en cuenta los paddings y borders como parte de nuestro modelo de caja resuena mejor con la forma en que los diseñadores realmente imaginan el contenido en las cuadrículas.

• none, block, inline, inline-block, flex, grid, table, table-row, table-cell, list-item.

| display | Descripción | | :-- | :-- | | none | No muestra un elemento (el elemento ya no afecta el diseño del documento). Todos los elementos hijos tampoco se muestran. El documento se renderiza como si el elemento no existiera en el árbol del documento. | | block | El elemento consume toda la línea en la dirección de bloque (que suele ser horizontal). | | inline | Los elementos pueden disponerse uno al lado del otro. | | inline-block | Similar a inline, pero permite algunas propiedades de block como establecer width y height. | | table | Se comporta como el elemento <table>. | | table-row | Se comporta como el elemento <tr>. | | table-cell | Se comporta como el elemento <td>. | | list-item | Se comporta como un elemento <li> lo que le permite definir list-style-type y list-style-position. |

Voy a incluir una comparación con block para mayor medida.

| | block | inline-block | inline | | --- | --- | --- | --- | | Tamaño | Ocupa todo el ancho de su contenedor padre. | Depende del contenido. | Depende del contenido. | | Posicionamiento | Comienza en una nueva línea y no tolera elementos HTML a su lado (excepto cuando se añade float). | Fluye junto con otro contenido y permite otros elementos a su lado. | Fluye junto con otro contenido y permite otros elementos a su lado. | | ¿Se puede especificar width y height? | Sí | Sí | No. Se ignorará si se establece. | | ¿Se puede alinear con vertical-align? | No | Sí | Sí | | Márgenes y rellenos | Se respetan todos los lados. | Se respetan todos los lados. | Solo se respetan los lados horizontales. Los lados verticales, si se especifican, no afectan el diseño. El espacio vertical que ocupa depende de line-height, aunque el border y padding aparecen visualmente alrededor del contenido. | | Float | - | - | Se convierte en un elemento similar a block donde se pueden establecer márgenes y rellenos verticales. |

Un elemento posicionado es un elemento cuya propiedad position calculada es relative, absolute, fixed o sticky.

• static - La posición predeterminada; el elemento fluirá en la página como lo haría normalmente. Las propiedades top, right, bottom, left y z-index no se aplican.
• relative - La posición del elemento se ajusta en relación con sí mismo, sin cambiar el diseño (y, por lo tanto, dejando un espacio para el elemento donde habría estado si no se hubiera posicionado).
• absolute - El elemento se elimina del flujo de la página y se posiciona en una posición especificada en relación con su ancestro posicionado más cercano, si lo hay, o de lo contrario en relación con el bloque contenedor inicial. Las cajas posicionadas absolutamente pueden tener márgenes, y no se colapsan con ningún otro margen. Estos elementos no afectan la posición de otros elementos.
• fixed - El elemento se elimina del flujo de la página y se posiciona en una posición especificada en relación con la ventana de visualización y no se mueve al desplazarse.
• sticky - El posicionamiento sticky es un híbrido de posicionamiento relativo y fijo. El elemento se trata como relative posicionado hasta que cruza un umbral especificado, momento en el cual se trata como fixed posicionado.

• Bootstrap - Ciclo de lanzamiento lento. Bootstrap 4 ha estado en alfa durante casi 2 años. Agregaría un componente de botón de carga (spinner), ya que es ampliamente utilizado.
• Semantic UI - La estructura del código fuente hace que la personalización de temas sea extremadamente difícil de entender. Su sistema de temas poco convencional es un dolor de cabeza para personalizar. Ruta de configuración codificada en la biblioteca del proveedor. No está bien diseñado para anular variables a diferencia de Bootstrap.
• Bulma - Se requieren muchas clases y marcado no semánticos y superfluos. No es compatible con versiones anteriores. La actualización de versiones rompe la aplicación de formas sutiles.

Sí. Flexbox está destinado principalmente para diseños unidimensionales, mientras que Grid está destinado para diseños bidimensionales.

Flexbox resuelve muchos problemas comunes en CSS, como el centrado vertical de elementos dentro de un contenedor, el pie de página fijo, etc. Bootstrap y Bulma se basan en Flexbox, y probablemente sea la forma recomendada de crear diseños hoy en día. He probado Flexbox antes, pero me encontré con algunos problemas de incompatibilidad de navegador (Safari) al usar flex-grow, y tuve que reescribir mi código usando inline-blocks y matemáticas para calcular los anchos en porcentajes, no fue una experiencia agradable.

Grid es, con mucho, el enfoque más intuitivo para crear diseños basados en cuadrículas (¡y debería serlo!) pero el soporte del navegador no es muy amplio en este momento.

Tenga en cuenta que estos dos enfoques no son exclusivos.

Hacer un sitio web responsivo significa que algunos elementos responderán adaptando su tamaño u otra funcionalidad de acuerdo con el tamaño de la pantalla del dispositivo, típicamente el ancho del viewport, a través de las media queries de CSS; por ejemplo, haciendo que el tamaño de la fuente sea más pequeño en dispositivos más pequeños.

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

Una estrategia de 'mobile-first' también es responsiva, sin embargo, coincide en que debemos establecer y definir todos los estilos para dispositivos móviles, y solo agregar reglas responsivas específicas a otros dispositivos más tarde. Siguiendo el ejemplo anterior:

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

Una estrategia de 'mobile-first' tiene dos ventajas principales:

• Es más eficiente en dispositivos móviles, ya que todas las reglas aplicadas para ellos no tienen que ser validadas contra ninguna media query.
• Obliga a escribir un código más limpio con respecto a las reglas CSS responsivas.

Tanto el diseño responsivo como el adaptativo intentan optimizar la experiencia del usuario en diferentes dispositivos, ajustándose a diferentes tamaños de viewport, resoluciones, contextos de uso, mecanismos de control, etc.

El diseño responsivo funciona bajo el principio de la flexibilidad: un único sitio web fluido que puede verse bien en cualquier dispositivo. Los sitios web responsivos utilizan consultas de medios, cuadrículas flexibles e imágenes responsivas para crear una experiencia de usuario que se flexiona y cambia en función de una multitud de factores. Es como una sola pelota que crece o se encoge para pasar por varios aros diferentes.

El diseño adaptativo se parece más a la definición moderna de mejora progresiva. En lugar de un solo diseño flexible, el diseño adaptativo detecta el dispositivo y otras características y luego proporciona la característica y el diseño apropiados en función de un conjunto predefinido de tamaños de viewport y otras características. El sitio detecta el tipo de dispositivo utilizado y entrega el diseño preestablecido para ese dispositivo. En lugar de una sola pelota que pasa por varios aros de diferentes tamaños, tendrías varias pelotas diferentes para usar según el tamaño del aro.

Ambos métodos tienen algunos problemas que deben sopesarse:

• El diseño responsivo puede ser bastante desafiante, ya que esencialmente estás utilizando un solo diseño, aunque responsivo, para adaptarse a todas las situaciones. Cómo establecer los puntos de interrupción de las consultas de medios es uno de esos desafíos. ¿Utilizas valores de puntos de interrupción estandarizados? ¿O utilizas puntos de interrupción que tienen sentido para tu diseño particular? ¿Qué pasa si ese diseño cambia?
• El diseño adaptativo generalmente requiere la detección del agente de usuario, o la detección de DPI, etc., todo lo cual puede resultar poco confiable.

Retina es solo un término de marketing para referirse a pantallas de alta resolución con una relación de píxeles superior a 1. Lo clave es saber que el uso de una relación de píxeles significa que estas pantallas están emulando una pantalla de menor resolución para mostrar elementos con el mismo tamaño. Hoy en día, consideramos que todos los dispositivos móviles son pantallas retina de facto.

Los navegadores, por defecto, renderizan los elementos del DOM de acuerdo con la resolución del dispositivo, excepto las imágenes.

Para tener gráficos nítidos y atractivos que aprovechen al máximo las pantallas retina, necesitamos usar imágenes de alta resolución siempre que sea posible. Sin embargo, usar siempre las imágenes de mayor resolución tendrá un impacto en el rendimiento, ya que se necesitarán enviar más bytes a través de la red.

Para superar este problema, podemos usar imágenes responsivas, como se especifica en HTML5. Requiere poner a disposición del navegador diferentes archivos de resolución de la misma imagen y dejar que decida qué imagen es la mejor, utilizando el atributo html srcset y, opcionalmente, sizes, por ejemplo:

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

Es importante tener en cuenta que los navegadores que no son compatibles con srcset de HTML5 (es decir, IE11) lo ignorarán y usarán src en su lugar. Si realmente necesitamos ser compatibles con IE11 y queremos proporcionar esta característica por razones de rendimiento, podemos usar un polyfill de JavaScript, por ejemplo.

Para los iconos, también optaría por usar SVG y fuentes de iconos siempre que sea posible, ya que se renderizan de forma muy nítida independientemente de la resolución.

translate() es un valor de la propiedad transform de CSS. Cambiar transform u opacity no desencadena el redibujado ni el repintado del navegador, pero sí desencadena composiciones; mientras que cambiar el posicionamiento absoluto desencadena el reflow. transform hace que el navegador cree una capa GPU para el elemento, pero cambiar las propiedades de posicionamiento absoluto usa la CPU. Por lo tanto, translate() es más eficiente y resultará en tiempos de pintado más cortos para animaciones más fluidas.

Al usar translate(), el elemento sigue ocupando su espacio original (algo así como position: relative), a diferencia de cuando se cambia el posicionamiento absoluto.