Krypton Solid

Pedido de cantidad con CSS – Revista Smashing

Pedido de cantidad con CSS – Revista Smashing

Aquí está su misión, si decide aceptarla: crear una tabla de elementos. Cada elemento debe abarcar un tercio del área de contenido, con el cuarto elemento comenzando en una nueva fila, al igual que los flotantes. Sin embargo, un artículo en particular siempre debe mostrar el precio al final de la primera fila. Entonces, si solo hay dos elementos, el elemento de precio sería el segundo. Pero si hay más de tres artículos, el precio sería el último elemento de la primera fila. Puede suponer que JavaScript sería la mejor solución: simplemente recorra los elementos y, si hay más de tres, actualice el estilo. Pero, ¿y si te dijera que puedes hacerlo solo con CSS?

Aquí está su misión, si decide aceptarla: crear una tabla de elementos. Cada elemento debe abarcar un tercio del área de contenido, con el cuarto elemento comenzando en una nueva fila, al igual que los flotantes. Sin embargo, un artículo en particular siempre debe mostrar el precio al final de la primera fila.

Entonces, si solo hay dos elementos, el elemento de precio sería el segundo. Pero si hay más de tres artículos, el precio sería el último elemento de la primera fila.

Otras lecturas en SmashingMag:

Puede suponer que JavaScript sería la mejor solución: simplemente recorra los elementos y, si hay más de tres, actualice el estilo. Pero, ¿y si te dijera que puedes hacerlo solo con CSS?

Recuento de CSS puro

Últimamente he apostado por flexbox, enseñándolo junto con los flotadores como método de diseño en nuestro pequeño proyecto llamado HackerYou, y he descubierto que los estudiantes lo toman bien. La especificación de flexbox contiene propiedades que nos permiten modificar el marcado de nuevas formas. Uno de estos es order, que nos permite modificar el orden de presentación del contenido sin tocar el marcado o la estructura.

Usado con consultas de medios, order es extremadamente útil, ya que nos permite cambiar el orden del contenido con el tamaño de la ventana gráfica. Eso me hizo pensar: ¿Por qué no podemos cambiar el orden de los elementos según la cantidad de contenido?

Consultas de cantidad

Una idea explorado por Lea Verou, André Luis y Heydon Pickering, las consultas de cantidad cuentan el número de elementos hermanos y aplican estilos si hay un número determinado.

¿Qué pasa si combinamos las consultas de cantidad y el order propiedad para cambiar la forma en que se lee el contenido de acuerdo con la cantidad que hay?

Usando Flexbox

Flexbox, o el «Módulo de diseño de caja flexible, ”Es una especificación CSS que permite que el contenido se distribuya en cualquier dirección y que los niños se adapten al tamaño de sus padres fácilmente. Introducido originalmente en 2009, flexbox ha pasado por muchos cambios a lo largo de los años. Sin embargo, es compatible en todos los navegadores actuales, a excepción de Internet Explorer 9+.

Uno de los cambios más significativos dentro de flexbox es la sintaxis de nomenclatura de las propiedades y valores asociados. Debido a que la especificación evolucionó a lo largo de los años, los proveedores de navegadores usarían la sintaxis que se estaba desarrollando en ese momento. Por lo tanto, se recomienda el uso de prefijos de proveedores para garantizar la compatibilidad con los navegadores heredados.

Una herramienta recomendada para administrar la compatibilidad con varios navegadores en CSS es Autoprefixer, que normalmente se incluye en preprocesadores y archivos Gulp y Grunt.

Entendiendo el orden

Antes de profundizar en las consultas de cantidad y cómo funcionan, debemos entender cómo utilizar la order propiedad. Primero, necesitamos envolver el contenido con un elemento padre y aplicar display: flex lo.

Aquí está el HTML:

<div class="container">
  <p class="itemOne">Hello</p>
  <p class="itemTwo">World!</p>
</div>

Y aquí está el CSS:

.container {
  display: flex;
}

Ver la pluma LVVXxz por Drew Minns (@drewminns) en CodePen.

De forma predeterminada, los elementos aparecerán en su orden en el marcado. Todos los elementos secundarios de un padre flexbox comparten un order valor de 1.

Este valor no tiene unidades y simplemente se refiere al orden del elemento en relación con los otros elementos que lo rodean. Sin embargo, podemos cambiar el valor de un elemento individual usando el order propiedad.

p.itemOne {
  order: 2;
}

Ver la pluma Artículo de muy buen trabajo por Drew Minns (@drewminns) en CodePen.

En el ejemplo anterior, cambiamos el orden de p.itemOne a un valor de 2, haciéndolo caer después p.itemTwo y de ese modo cambiar el orden de presentación para el usuario. Sin embargo, tenga en cuenta que el marcado sigue siendo el mismo.

Contando con CSS

Consultas de medios, ¿eh? Una herramienta tan impresionante para aplicar CSS cuando se cumplen ciertas condiciones. Esas condiciones podrían ser el tipo de dispositivo, el tamaño, el color y más, cosas bastante poderosas. Pero la consulta se aplica solo al dispositivo que está usando el espectador; no hay un método CSS definido para consultar el Monto de contenido en un elemento.

Sin embargo, si nos volvemos creativos con los pseudo-selectores CSS existentes, podemos crear herramientas que cuenten el número de elementos secundarios en un elemento y luego aplicar estilos en consecuencia. Para este ejemplo, usemos una lista ordenada simple:

<ul class="ellist">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li class="target">6</li>
</ul>

La magia de contar elementos hermanos está en el selector de abajo. Este ejemplo aplica estilos a elementos cuando hay cuatro o más disponibles.

ul.ellist li:nth-last-child(n+4) ~ li,
ul.ellist li:nth-last-child(n+4):first-child {
  // styles go here
}

Ver la pluma WvvYyN por Drew Minns (@drewminns) en CodePen.

Espera, No. ¡Eso es una locura!

Sí, ese es el selector. En inglés, podría traducirse así: «Cuando hay cuatro o más elementos secundarios, obtenga los otros elementos de la lista y el primer elemento secundario».

Analicemos esto. Primero, el conteo:

ul.ellist li:nth-last-child(n+4) {
  // Styles!
}

Esto se traduce como, «Ve al último niño y cuenta cuatro niños hacia atrás». Aplica los estilos al cuarto elemento y a todos los elementos anteriores.

Continúe y experimente editando el Codepen y cambiando el selector a un número diferente.

Ver la pluma Pqqvqp por Drew Minns (@drewminns) en CodePen.

Entonces, ahí está, contando. Si se cuentan menos de cuatro hermanos, no se selecciona nada y no se aplica ningún estilo. Ahora podemos modificar este selector para seleccionar todo li elementos que utilizan el combinador general de hermanos.

ul.ellist li:nth-last-child(n+4) ~ li {
  // Styles!
}

El problema es que esto no selecciona el primer elemento secundario. Podemos agregar otro selector para hacer eso:

ul.ellist li:nth-last-child(n+4) ~ li,
ul.ellist li:nth-last-child(n+4):first-child {
  // Styles!
}

Por supuesto, podemos hacer que el selector sea más agnóstico simplemente proporcionando el elemento padre y dejando que elija a todos los hijos. Hacemos esto con el * selector.

element > *:nth-last-child(n+4) ~ *,
element *:nth-last-child(n+4):first-child {
  // Styles!
}

Pedido basado en cantidad

Ahora que hemos explorado cómo contar con selectores de CSS y cómo usar flexbox para ordenar contenido, mezclémoslos para construir una herramienta que ordene elementos según el número de hermanos.

Nuevamente, estamos tratando de hacer que nuestro último elemento sea el tercer elemento (es decir, que aparezca como el último elemento en la primera fila) cuando hay más de tres hermanos.

Apliquemos algo de CSS para un estilo de presentación. Aplicaremos display: flex al contenedor principal, lo que nos permite aplicar el order propiedad en los elementos secundarios. Además, aplicaremos un estilo predeterminado a la .target elemento para diferenciarlo.

ul.ellist {
  margin: 20px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
}
ul.ellist > * {
  border: 10px solid #27ae60;
  text-align: center;
  flex: 1 0 calc(33.33% - 20px);
  padding: 20px;
  margin: 10px;
}
.target {
  color: white;
  background: #2980b9;
  border: 10px solid #3498db;
}
ul.ellist, ul.ellist > * {
  box-sizing: border-box;
}
ul.ellist {
  margin: 20px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
}
ul.ellist > * {
  border: 10px solid #27ae60;
  text-align: center;
  flex: 1 0 calc(33.33% - 20px);
  padding: 20px;
  margin: 10px;
}
ul.ellist .target {
  color: white;
  background: #2980b9;
  border: 10px solid #3498db;
}

Ahora que tenemos un estilo base con el que trabajar, podemos crear algo de lógica para ordenar nuestros artículos en consecuencia. Nuevamente, de forma predeterminada, todos los elementos tienen un order valor de 1 y se muestran según el orden en que aparecen en el marcado.

Mediante una consulta de cantidad, podemos contar si hay más de tres artículos.

ul.ellist > *:nth-last-child(n+3) {
  // Styles!
}

Luego podemos modificar nuestra consulta para seleccionar el .target elemento solo si se cumple el número de elementos. Por ahora, aplicaremos un order de -1, para que aparezca al principio de nuestra lista.

ul.ellist > *:nth-last-child(n+3) ~ .target {
  order: -1;
}

¡Voilà! Acabamos de diseñar un elemento en función del número de hermanos que tiene. Usando este código, podemos poner un elemento delante de otro.

Pero, ¿y si necesita ir entre elementos?

Un poco de pensamiento lógico

Aquí está el problema, en tres argumentos:

  • De forma predeterminada, todos los elementos tienen un order ajustado a 1. Necesitamos los elementos al principio de la lista para mantener ese order valor.
  • Nuestro objetivo se presentará al final de la primera fila. Entonces, necesitamos el objetivo order valor sea más alto que los del principio, es decir 2.
  • Necesitamos todos los elementos de tres en adelante para tener un mayor order que nuestro objetivo y elementos principales. Entonces, tendrán un order valor de 3.

¿Qué tal esto?

Porque todos los elementos tienen un valor predeterminado de 1, no necesitamos declarar eso. Permitamos que nuestro elemento objetivo tenga una order valor de 2 a través de nuestra consulta de cantidad, colocándola efectivamente por encima de las demás.

ul.ellist > *:nth-last-child(n+3) ~ .target {
  order: 2;
}

Luego, usando otra consulta de cantidad que utiliza nth-child(), Lo haremos contar desde el principio de la lista, en lugar de desde el final. Porque nuestro .target La consulta de cantidad es más específica, el último elemento será ignorado, pero todos los otros tres y superiores tendrán su orden cambiado.

ul.ellist > *:nth-last-child(n+3) ~ .target {
  order: 2;
}
ul.ellist > *:nth-child(n+3) {
  order: 3;
}

¡Guau! Repasemos eso de nuevo

Contamos desde el final de un elemento principal si había varios elementos secundarios. Si los hubiera, aplicamos algunos estilos a un elemento de nuestra elección. Luego contamos desde el principio y aplicamos estilos a todos los elementos más allá de ese punto.

Lo bueno es que si elimináramos elementos, el elemento de destino seguiría apareciendo en la posición correcta.

<ul class="ellist">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="target">4</li>
</ul>

La tarea resultante

Mi primer pensamiento cuando se me dio esta tarea fue utilizar un lenguaje de programación. Debido a que el sitio web se creó en WordPress, pude modificar «el ciclo» para contar e inyectar el elemento donde sea necesario.

Sin embargo, debido a que estoy construyendo el sitio web para una escuela de desarrollo front-end, quería hacerlo con CSS puro y explorar las posibilidades que ofrece flexbox. order permite.

A continuación se muestra un ejemplo de la página resultante, realizada íntegramente con CSS.

Ver la pluma Pedido de cantidad por Drew Minns (@drewminns) en CodePen.

Usándolo en el mundo real

Hablar con descaro a

Las consultas de cantidad son un concepto bastante nuevo y escribir los selectores puede ser un desafío. Sin embargo, la comunidad está adoptando el concepto y está creando herramientas y escribiendo mixins de Sass que pueden ayudarnos a escribir consultas de manera efectiva. Bibliotecas como la de Daniel Guillan, llamado a Cantidad Consultas Mixin, permítanos escribir consultas de medios como simples inclusiones.

@include at-least($count) { … }
@include between($first, $last) { … }

Una gran cantidad de artículos también explican el concepto y el poder detrás de esto. James Steinbach escribió un gran artículo sobre «Uso de Sass para consultas de cantidad. «

PostCSS

PostCSS es una nueva herramienta que permite transformar CSS con JavaScript. El ecosistema PostCSS actual incluye muchos complementos desarrollados por la comunidad, incluido un Consulta de cantidad enchufar.

El complemento permite pseudo-selectores personalizados para apuntar valores dentro de un cierto rango, al menos, o como máximo.


p:at-least(4) { … }

p:between(4,6) { … }

Soporte del navegador

Actualmente, el soporte para pseudo-selectores CSS y caja flexible es genial en los navegadores modernos. Si su proyecto está dirigido a usuarios de IE 10 y superior, puede utilizar consultas de cantidad y pedidos de flexbox juntos.

Dónde usarlo

Al crear sitios web, a menudo usamos lenguajes de programación que nos permiten contar y modificar nuestro contenido según sea necesario. Sin embargo, a medida que CSS ha mejorado, nos hemos alejado de los lenguajes de programación hacia propiedades CSS avanzadas.

Un ejemplo son las animaciones CSS. Lo que antes solo era posible a través de Flash o JavaScript ahora se puede lograr con CSS puro, un lenguaje para definir la presentación de nuestro contenido.

El pedido de cantidad nos permite eliminar bucles modificados que cuentan e insertan contenido en consecuencia, lo que permite que nuestro contenido se lea semánticamente.

Un gran ejemplo de la utilidad de los pedidos por cantidad sería un sitio web de noticias con publicidad. En el marcado, todos los artículos se organizan juntos y los anuncios se colocan al final. En términos de accesibilidad, esto permite un flujo ininterrumpido de contenido. Luego, los anuncios se pueden colocar en todo el contenido, utilizando pedidos por cantidad solo en una capa de presentación.

Ver la pluma vOLGPg por Drew Minns (@drewminns) en CodePen.

Si bien el pedido se puede utilizar para cambiar la visualización de presentación de los elementos, por motivos de accesibilidad, puede dañar la experiencia. Tenga en cuenta cómo fluye el contenido y cómo se leerá en los dispositivos de accesibilidad.

Conclusión

Las consultas de cantidad y los pedidos de cantidad son conceptos avanzados y pueden asustar a los principiantes. Sin embargo, a medida que cambiamos el estilo de presentación de los lenguajes de programación a CSS, deberíamos usar estas herramientas cada vez más.

Incluso mientras muchos miembros de nuestra industria exploran consultas de contenido, ahora podemos usar consultas de cantidad para modificar el orden del contenido simplemente contando.

Extracto de la imagen: Markus Spiske

Deja un comentario