10 Nuevas Características que Talvez no Conocías de CSS en el Año 2021 – Parte 2 (Final)

Nube Colectiva

hace 3 años

En la Parte Anterior llamada 10 Nuevas Características que Talvez no Conocías de CSS en el Año 2021 – Parte 1 conocimos las primeras 5 características CSS y estaban geniales, te permitían hacer tareas que talvez no conocías, en esta Parte 2 y última conoceremos las 5 últimas características que talvez no conocías de CSS en el año 2021. vamos con este Post.

Partes

Parte 1
Parte 2 (Final)

Antes de continuar te invito a leer los siguiente artículos:

Asimismo te invito a escuchar el Podcast: “Porque Algunos Desarrolladores no Terminan El Proyecto de Un Cliente”:

Spotify:	Sound Cloud:	Apple Podcasts

Del mismo modo te invito a tomar el curso CSS 3 desde 0 completamente Gratis, en donde aprenderás en detalle a usar las propiedades, módulos, etc. de CSS 3 que te permitirán darle un mejor diseño y diferentes características visuales a una Página HTML 5:

Bien ahora continuemos con el Post: 10 Nuevas Características que Talvez no Conocías de CSS en el Año 2021 – Parte 2 (Final).

Igual que en la Primera Parte, para conocer mejor estas características, voy a colocar el nombre de la característica una descripción y un ejemplo en código CSS.

Función color()

Esta función nos permite especificar un color en un espacio de color particular, en vez del espacio de color sRGB implícito en el que operan la mayoría de las otras funciones de color. Esto permite a los desarrolladores web especificar una gama de colores mucho mayor en el futuro.

Hasta la fecha de este Post, los dispositivos físicos reales aún no pueden producir todos los colores posibles que el ojo humano puede ver. La gama de colores que puede producir un dispositivo determinado se denomina gama. Las gamas de diferentes espacios de color se pueden comparar observando el volumen (en unidades cúbicas de laboratorio) de colores que se pueden expresar.

Por ejemplo veamos a continuación la siguiente tabla que muestra espacios de colores predefinidos disponibles en CSS.

Espacio de Color	sRGB	display-p3	a98-rgb	prophoto-rgb	rec2020	laboratorio
Volumen (Millones de unidades de laboratorio)	0,820	1.233	1.310	2.896	2.042	6.578

Puedes encontrar más información sobre los espacios de colores disponibles en CSS en el siguiente enlace.

De la tabla anterior podemos concluir que display-p3 es alrededor de un 35% más grande que sRGB. Muchas pantallas modernas cubren ahora el 100% del espacio de color display-p3.

Sabiendo lo anterior, podemos usar la función color() y proporcionarle un color sRGB compatible con versiones anteriores a través de una consulta de función como el siguiente ejemplo a continuación.


/* color sRGB */
:root {
    --verde-luminoso: rgb(0, 255, 0);
}

/* color display-p3 (Cuando es compatible) */ 
@supports (color: color(display-p3 1 1 1)) {
    :root {
        --verde-luminoso: color(display-p3 0 1 0);
    }
}

footer {
    color: var(--verde-luminoso);
}

/* color sRGB */

:root {

--verde-luminoso: rgb(0, 255, 0);

}

/* color display-p3 (Cuando es compatible) */

@supports (color: color(display-p3 1 1 1)) {

:root {

--verde-luminoso: color(display-p3 0 1 0);

}

footer {

color: var(--verde-luminoso);

}

Para saber que navegadores admiten esta característica, puedes visitar el siguiente enlace.

Función aspect-ratio()

Esta característica se refiere a la relación proporcional entre un ancho y un alto. Mantener una relación de aspecto consistente es importante para crear diseños receptivos y para prevenir cambios de diseño acumulativos (una métrica de rendimiento vital de los sitios web).

Estos son algunos de los entornos en donde se suele utilizar la relación de aspecto:

Creación de contenedores de marcador de posición para el contenido que se cargará.
Creación de componentes consistentes y de tamaño uniforme, como las Cards del framework Bootstrap o las que son creadas de manera personalizada.
Creación de iframes responsives (receptivos).

Con la función aspect-ratio() puedes fijar la relación de aspecto en cualquier elemento. Las imágenes y los videos tienen una relación de aspecto intrínseca, pero otros elementos no.

El uso de la función aspect-ratio() es muy sencillo, solo agregamos la función y dentro de ella le colocamos los valores: relación de ancho y relación de altura, estos 2 valores deben estar separados por una barra diagonal o slash.


.contenedor {
  aspect-ratio: 16 / 9;
}

.contenedor {

aspect-ratio: 16 / 9;

}

Puedes hacer uso de la regla @supports que vimos en la primera parte de este Post, veamos el siguiente ejemplo.


.estandar {
  aspect-ratio: 4 / 3;
}

@supports not (aspect-ratio: 4 / 3) {
  .estandar {
    width: 16rem;
    height: 9rem;
  }
}

.estandar {

aspect-ratio: 4 / 3;

}

@supports not (aspect-ratio: 4 / 3) {

.estandar {

width: 16rem;

height: 9rem;

}

Para saber que navegadores admiten esta característica, puedes visitar el siguiente enlace.

Huecos de Flexbox

Uno de los puntos débiles del módulo de diseño Flexbox de CSS ha sido durante mucho tiempo los huecos de flexbox, esto significa la posibilidad de definir saltos entre filas y columnas.

Por suerte la compatibilidad del navegador con esta función CSS esta mejorando. Ahora puedes usar espacios, espacios entre filas y espacios entre columnas para crear espacio en diseños creados con Grid, Flexbox y Multi-Column Layouts, veamos el siguiente ejemplo.


.contenedor {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 18px;
}

.contenedor {

display: inline-flex;

flex-wrap: wrap;

gap: 18px;

}

Si bien es posible hacer esto mediante márgenes, necesitamos mucho más marcado y soluciones alternativas que simplemente declarar el tamaño del espacio.

Para saber que navegadores admiten esta característica, puedes visitar el siguiente enlace para flexbox-gap, row-gap y column-gap.

Propiedades Lógicas

Estas propiedades son equivalentes del modo de escritura de las propiedades físicas, ofrecen una forma de escribir el diseño de las páginas web en un vocabulario universal que no es ambiguo en diferentes idiomas.

Una propiedad lógica es aquella que hace referencia a un lado, una esquina o un eje del modelo de caja en el contexto de la dirección del lenguaje aplicable.

Si bien las propiedades lógicas ya existen desde hace tiempo, pero el soporte era mínimo en la mayoría de los navegadores. Ahora el soporte es mucho mejor en todos los ámbitos, veamos el siguiente ejemplo en donde podemos crear una versión más corta de la propiedad.


/* Versión Normal */
margin-inline-start: 4ch;
margin-inline-end: 2ch;

/* Versión Corta */ 
margin-inline: 4ch 2ch;

/* Versión Normal */

margin-inline-start: 4ch;

margin-inline-end: 2ch;

/* Versión Corta */

margin-inline: 4ch 2ch;

Algunas versiones abreviadas de propiedades todavía se consideran experimentales. Hasta que estas propiedades tengan un amplio soporte, es complicado utilizar propiedades lógicas al por mayor.

Para saber que navegadores admiten esta característica, puedes visitar el siguiente enlace.

CSS Subgrid

La Subcuadrícula CSS hace que varios patrones de diseño difíciles sean mucho más sencillos de realizar, es como la guinda del pastel de CSS Grid.

Si ya trabajaste con CSS Grid, no te será complicado aprender acerca de la Subgrid CSS, la nueva sintaxis es sencilla.

De manera conceptual, una cuadrícula definida como subcuadrícula es prácticamente lo mismo que una cuadrícula anidada normal, pero comparte las pistas de la cuadrícula principal. El beneficio es que proporciona una forma de alinear una cuadrícula anidada con su cuadrícula principal.

Como ejemplo podríamos considerar las tarjetas o Cards que tienen diferentes secciones, estas secciones pueden variar en tamaño según el contenido. Una cuadrícula anidada regular no puede mantener la alineación vertical de las mismas secciones entre diferentes tarjetas (ver más abajo).


.contenedor {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.card {
    display: grid;
}

.contenedor {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 18px;

}

.card {

display: grid;

}

Si cambiamos la tarjeta para que sea una subcuadrícula, podemos conseguir que las secciones estén perfectamente alineadas verticalmente.


.card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: auto / span 3;
}

.card {

display: grid;

grid-template-rows: subgrid;

grid-row: auto / span 3;

}

Puedes usar la propiedad rápidamente y usar una consulta de funciones para proporcionar una respaldo para cualquier navegador donde no sea compatible.


@supports not (grid-template-rows: subgrid) {
  .card {
    /* Acá va un diseño alternativo */
  }
}

@supports not (grid-template-rows: subgrid) {

.card {

/* Acá va un diseño alternativo */

}

Para saber que navegadores admiten esta característica, puedes visitar el siguiente enlace.

Conclusión

En este Post que consta de 2 partes te he brindado una descripción general de las últimas funciones principales de CSS que llegaran a los navegadores poco a poco. Recuerda que si las pones en práctica estarás actualizado como diseñador o desarrollador web.

Nota (s)

Hasta la fecha de este Post, Algunas de las características mencionadas en este Post que consta de 2 partes no están soportadas por los navegadores, pero en el futuro puede que si, esto no depende de mi, si no de las organizaciones que dan soporte a los navegadores.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.