Krypton Solid

Sprites receptivos y eficiencia de consultas de medios – Revista Smashing

Sprites receptivos y eficiencia de consultas de medios – Revista Smashing

¡Hola amigos! Bienvenido a más preguntas y respuestas sobre CSS de Smashing Magazine. Funciona así: envía las preguntas que tenga sobre CSS y, al menos una vez al mes, seleccionaremos las mejores preguntas y las responderemos para que todos puedan beneficiarse del intercambio. Su pregunta podría ser sobre un problema muy específico que está teniendo, o incluso podría ser una pregunta sobre un enfoque filosófico. Tomaremos de todo tipo.

Si está interesado en explorar más preguntas y respuestas, hay muchas más en mi archivo de autor.

Sprites conscientes de la resolución

Joshua Bullock pregunta:

Su última ronda de preguntas se tituló «Box-Sizing And CSS Sprites», que ofreció excelentes respuestas para dos elementos separados, pero no los llevó un paso más allá para el diseño receptivo. En última instancia, mi pregunta es la siguiente: ¿Existe una forma preferida / sugerida de manejar sprites receptivos para múltiples resoluciones y escalado de imágenes? ¿Es esto siquiera posible?

Este es un tema candente últimamente debido al aumento de las pantallas de «retina». Pero realmente, este problema se ha ido acumulando durante un tiempo. Los diseñadores web de nosotros a menudo trabajamos en «píxeles», por ejemplo, estableciendo el ancho de una imagen: img { width: 100px; }. Pero, ¿qué es 100px? Ha pasado mucho tiempo desde que literalmente hizo referencia a un píxel en la pantalla. En estos días es una medida bastante arbitraria. 100px termina siendo alrededor de una pulgada en una pantalla física, independientemente de su resolución.

Las pantallas Retina dieron un gran salto en resolución realmente rápido. La pantalla Thunderbolt Cinema de 27 ”de Apple tiene 109 PPI (píxeles por pulgada) mientras que la MacBook Retina de 15” tiene 220 PPI (literalmente, el doble de densa), lo que significa que hay más píxeles en la pantalla drásticamente más pequeña.

Si está dibujando un cuadro rojo sólido en la pantalla, ¡no hay problema en absoluto! La pantalla de mayor resolución simplemente lo dibujará con más píxeles. Pero, ¿qué pasa con un pequeño icono que diseñó con “píxeles” de 16×16 en Photoshop? Tanto una pantalla de alta resolución como una pantalla de baja resolución deben mostrar ese icono con el mismo tamaño físico, pero la pantalla de alta resolución debe simular muchos de esos píxeles. Es como cuando agrandas una foto en Photoshop, inmediatamente comienza a verse como una mierda.

Una solución es agrandar todas sus imágenes originales. En lugar de una imagen de «píxeles» de 16×16, en realidad puede convertirla en 32×32 en Photoshop pero hacer que CSS tenga un tamaño de 16×16. Entonces la información está ahí para la pantalla de alta resolución.

Tu pregunta fue explícitamente sobre los sprites. ¿Cómo podemos hacer una imagen de sprite que sea el doble del tamaño de las pantallas de retina sin que sea un gran dolor de cabeza? Afortunadamente, Maykel Loomans publicó recientemente un técnica muy simple e inteligente para esto.

Esencialmente, haces que el sprite sea exactamente (y literalmente) dos veces más grande, mientras mantienes sus proporciones. Luego, en tu CSS «normal», cargas el sprite «normal» y haces todas las background-position y dimensionar cosas para que tu sprite funcione. Luego, utilizando consultas de medios, sobrescribe el background-image con tu nuevo objeto retina (cuando las condiciones sean las correctas). Tu usas background-size para encoger el sprite de la retina, para que no tengas que tocar las tediosas cosas de posicionamiento / tamaño. ¡Hurra!

span.rss-icon {
   /* Size of sprite image is 200px ✕ 200px */
   background: url(sprite-1x.png)  72px 181px;
   width: 16px;
   height: 16px;
}

@media
  (min--moz-device-pixel-ratio: 2),
  (-o-min-device-pixel-ratio: 2/1),
  (-webkit-min-device-pixel-ratio: 2),
  (min-device-pixel-ratio: 2) {

  span.rss-icon {
    /* Size of retina sprite image is 400px ✕ 400px */
    background-image: url(sprite-2x.png);
    /* Bring down size to 1x size */
    background-size: 200px 200px;
  }

}

Aquí hay una demostración de eso.

Líquido – Fijo – Líquido

Niels Matthijs pregunta:

El diseño que estoy tratando de crear es L1F2L3, lo que significa que la primera y la tercera columna son líquidas, mientras que la columna central es fija. He estado probando algunas cosas, y aunque estuve cerca un par de veces, la solución nunca me gustó mucho. ¿Tienes algo sobre esto?

El método Flexbox en CSS puede conectarte con esta solución, y es bastante fácil:

<div class="grid">
  <div class="col fluid">
    ...
  </div>
  <div class="col fixed">
    ...
  </div>
  <div class="col fluid">
    ...
  </div>
</div>
.grid {
  display: -webkit-flex;
  display: flex;
}
.col {
  padding: 30px;
}
.fluid {
  flex: 1;
}
.fixed {
  width: 400px;
}

Flexbox

Ver demostración. Dudo en recomendar esto como una solución del «mundo real» porque la especificación para flexbox ha cambiado bastante dramáticamente recientemente. El código anterior es la sintaxis más nueva que solo es compatible con Chrome 21+ en el momento de escribir este artículo (ver tablas de soporte). Hay una sintaxis más antigua (ver demo) que tiene un soporte de navegador más amplio, pero probablemente algún día dejará de funcionar.

Si se encuentra en una posición en la que sabe que la columna del medio será la más larga, puede hacer que el contenedor principal tenga un porcentaje de relleno en los lados derecho e izquierdo y coloque absolutamente las columnas izquierda y derecha dentro de él (en el ancho de ese porcentaje ). Y si no lo sabe, siempre puede medir las tres columnas con JavaScript y establecer la altura del contenedor principal en la más alta de las tres.

El nuevo

Peter Karlstein pregunta:

¿Cuáles son los consejos, técnicas y trucos de CSS más útiles que ha aprendido recientemente? ¿Puede presentar un par de sus recientes «¡Ajá!» momentos con CSS?

Jugar con las últimas cosas de flexbox (como hice antes) fue bastante divertido, aunque todavía no es realmente útil.

En los últimos meses he pasado por completo a usar Brújula, que ha sido tremendamente útil. Con el tiempo, me he cansado de las cosas repetitivas y delicadas en CSS. Pero Sass y Compass hacen que la creación de CSS vuelva a ser divertido para mí.

En cuanto a los pequeños «trucos» de CSS, he tenido que utilizar Éste varias veces últimamente. Esencialmente, si de alguna manera una cadena de texto superlarga entra en un contenedor sin espacios, saldrá del contenedor de una manera superpuesta y muy incómoda. Esto es más común con contenido generado por usuarios y usuarios que pegan URL. Me gusta aplicar esta clase a cualquier contenedor de texto generado por el usuario:

.prevent-text-breakouts {
  -ms-word-break: break-all;
      word-break: break-all;
      word-break: break-word;
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
}

Antes:

Largas cadenas de texto saliendo del contenedor.

Después:

Se corrigieron cadenas largas de texto.

También, Caja acolchada vieja del tío Dave es bueno tenerlo en tu caja de herramientas.

Tamaño de fuente relativo

Greg Nelson pregunta:

¿Crees que algún día (con suerte pronto) habrá una forma de establecer un tamaño de fuente para que esté en relación directa con el ancho de su elemento principal, o alguna otra medida verdaderamente receptiva? Por ejemplo,

el tamaño de fuente podría ser un porcentaje del ancho de un div de la barra lateral en el que se encuentra, de modo que a medida que cambia el ancho de la pantalla (y el ancho de la barra lateral cambia, si también es un porcentaje del ancho de ), el tamaño de la fuente también cambiará?

¡Sí, ya viene! Podrás establecer el tamaño de fuente con vw y vh unidades. Estos significan «ancho de la ventana gráfica» y «altura de la ventana gráfica». 1vw = 1% del ancho de la ventana del navegador actual. Aquí está la especificación CSS para eso. Y aqui un tutorial sobre su uso. Así es como funcionará:

En el momento de escribir esto, solo hay soporte en Chrome 20+ e IE 10. Si necesita soporte completo para el navegador ahora (y no le importa usar un poco de JavaScript), puede usar FitText.js (mejor solo para encabezados).

FitText

Eficiencia de consulta de medios

Mark Roland pregunta:

Al organizar las consultas de medios en un archivo CSS, ¿existe alguna ventaja o desventaja en cómo se agrupan?

Por ejemplo, ¿existe una diferencia de rendimiento del navegador entre el uso de varios bloques de consulta de medios (por ejemplo, «pantalla @media y (ancho máximo: 480px) {}») para que los estilos de los elementos se definan juntos (encabezado, navegación, pie de página, etc.) versus colocar todos los estilos de elementos para la consulta de medios específica en un solo bloque de consulta de medios?

El primero permite un desarrollo más fácil, pero cuesta un mayor tamaño de archivo. ¿Existen costos de renderización del navegador para consultas de medios redundantes?

Técnicamente, probablemente sí. La peor ofensa es el tamaño de archivo adicional que causa. Usar uno es claramente menos texto que usar varios. Pero el hecho es que si gzip / desinfla contenido (probablemente eres), que comerá ese código repetitivo para el desayuno y ni siquiera aumentará demasiado el tamaño del archivo. En cuanto al tiempo de análisis de CSS, esas cosas ocurren tan rápido que realmente no necesitas pensar en ello.

Entonces, a nivel práctico: no se preocupe. Si tiene algo de tiempo para hacer que su sitio web sea más rápido, optimizando sin pérdidas sus imágenes hará una diferencia mucho mayor.

ImageOptim

Si alguien está confundido sobre por qué Mark pregunta esto, lo más probable es que se deba a la capacidad que tienen Sass y LESS para «anidar» las consultas de los medios (ver). Esta es una característica realmente interesante que hace que trabajar con consultas de medios sea mucho más limpio e intuitivo, como usted es el autor. Sin embargo, el resultado final da como resultado muchas consultas de medios duplicadas. Sé que abordar este problema está en la mente del desarrollador principal de Sass.

¡Adelante!

¡Sigan con las buenas preguntas, amigos! ¿Tienes uno bueno? Envíalo y elegiremos los mejores para la próxima edición.

Imagen fuente de la imagen en la portada.

Deja un comentario