TL;DR: Este blog utiliza ejemplos de código para explorar cinco de los mejores estilos y características CSS para el desarrollo web: consultas de contenedor, subcuadrícula, pseudoclases, propiedades lógicas y espacio de color de laboratorio. Mejoran la capacidad de respuesta, simplifican los diseños y mejoran la coherencia del diseño.

Las hojas de estilo en cascada (CSS) son un lenguaje de estilo muy conocido que se utiliza para diseñar páginas web. Con CSS, puedes personalizar elementos HTML agregando espacio; definir colores, tamaños de fuente y estilos de fuente; y más. CSS ha mejorado mucho en los últimos años con nuevas funciones para mejorar la experiencia del desarrollador.

Por lo tanto, este artículo analizará cinco funciones CSS innovadoras que puedes utilizar en tu próximo proyecto.

1. Consultas de contenedores

Las consultas de contenedores CSS introdujeron un nuevo enfoque de la capacidad de respuesta. Anteriormente, utilizamos consultas de medios para crear interfaces de usuario que se adaptaban a diferentes tamaños de pantalla. Pero no fue tan fácil como parece. Hubo problemas de mantenimiento, rendimiento, flexibilidad y superposición de estilos.

Las consultas de contenedores resuelven estos problemas al permitir a los desarrolladores personalizar elementos según el tamaño de su contenedor principal. Dado que este método no depende del tamaño de la ventana gráfica, hace que los componentes HTML sean completamente modulares y autónomos.

A continuación se muestra un ejemplo sencillo de cómo funcionan las consultas de contenedor.

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}
@container (min-width: 500px) {
  .profile-card {
    grid-template-columns: 150px 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 20px;
  }

  .profile-card header,
  .profile-card .bio {
    grid-column: 2;
  }

  .profile-card .profile-image {
    grid-row: 1 / 3;
    grid-column: 1;
  }
}

Esta consulta de contenedor ajusta el diseño de la tarjeta de perfil cuando su ancho alcanza 500 px o más. Cambia la tarjeta de un diseño apilado (con la imagen en la parte superior) a un diseño de dos columnas donde la imagen aparece a la izquierda y el contenido del texto se alinea a la derecha.

Consulta las siguientes imágenes.

Las consultas de contenedores son muy útiles en sistemas de diseño donde los componentes deben adaptarse en función de su entorno inmediato en lugar de toda la ventana gráfica. Sin embargo, las consultas de contenedores aún carecen de compatibilidad total con el navegador. Si sus usuarios utilizan navegadores no compatibles o versiones anteriores, es posible que tengan problemas de estilo.

Nota: Eche un vistazo a esta demostración funcional para consultas de contenedores CSS.

2. Subcuadrícula

Subgrid es una adición interesante al modelo de diseño de cuadrícula CSS que le permite heredar la estructura de cuadrícula del contenedor de cuadrícula principal en los elementos de la cuadrícula secundaria. En palabras simples, una subcuadrícula le permite alinear elementos secundarios según las filas o columnas de la cuadrícula principal. Con este método, puedes crear fácilmente cuadrículas anidadas complejas sin utilizar anulaciones de cuadrículas anidadas.

En el siguiente ejemplo de código, el diseño utiliza un enfoque de subcuadrícula dentro de una lista.

.product-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.product-card {
  display: grid;
  grid-template-rows: subgrid; /* Allows the nested grid to align directly with the parent grid */
}

En el ejemplo, el product-wrapper crea un diseño de cuadrícula flexible para controlar el número de columnas según el ancho del contenedor. Luego, cada tarjeta-producto alinea sus filas directamente con las cuadrículas definidas por el envoltorio-producto.

Subgrid es particularmente útil para sitios de comercio electrónico donde las tarjetas de productos pueden contener cantidades variables de contenido pero deben mantener una apariencia uniforme.

Consulta las siguientes imágenes.

Nota: Consulte la demostración funcional de la subcuadrícula CSS.

3. Pseudoclases

Pseudoclases como :hover, :focus y :first-child son ​​opciones que seleccionan elementos HTML en función de su estado en lugar de su jerarquía o secuencia en el documento. Estos selectores permiten a los desarrolladores crear interfaces de usuario más interactivas y responsivas sin utilizar JavaScript.

El siguiente ejemplo de código muestra varias pseudoclases en acción.

// HTML
...
.hover-section:hover {
  background-color: rgb(82, 11, 145); /* Changes the background color on hover */
  color: white;
}
.input-section input[type="text"]:focus {
  border-color: orange; /* Highlights the input field when focused */
  background-color: lightyellow;
}
.list-section li:first-child {
  color: green; /* Styles the first item in a list */
}
.list-section li:last-child {
  color: red; /* Styles the last item in a list */
}

Este ejemplo de código CSS muestra cómo mejorar la interacción del usuario cambiando los estilos según las acciones del usuario, como desplazarse o centrarse en elementos, y cómo aplicar estilos a elementos secundarios específicos de un contenedor.

Estas pseudoclases son bastante útiles al desarrollar formularios, menús de navegación y contenido interactivo que requiere señales visuales para guiar las interacciones del usuario.

Consulta la siguiente imagen.

Nota: Consulte esta demostración funcional para pseudoclases.

4. Propiedades lógicas

Las propiedades lógicas de CSS permiten a los desarrolladores gestionar el diseño y el espaciado de forma independiente de la dirección. En otras palabras, con las propiedades lógicas de CSS, puedes usar diferentes modos de escritura, como de izquierda a derecha (LTR) y de derecha a izquierda (RTL), sin cambiar el código estructural.

A continuación se muestra un ejemplo que utiliza propiedades lógicas para ajustes de diseño.

.lab-gradient-generator {
  margin-inline-start: 2rem; /* Responsive margin that adjusts based on text direction */
}
.lab-gradient-display {
  background: linear-gradient(
    to right, 
    lab(var(--l-start) var(--a-start) var(--b-start)), 
    lab(var(--l-end) var(--a-end) var(--b-end))
  ); /* Creates a gradient using LAB colors */
}

En este ejemplo de código, margin-inline-start utiliza propiedades lógicas para garantizar que los márgenes estén siempre en el lado del contenido inicial, adaptándose automáticamente a diferentes sistemas de escritura. La propiedad fondo con un LAB color gradiente ilustra el uso de propiedades lógicas para definir transiciones de color visualmente consistentes.

Las propiedades lógicas son particularmente útiles en aplicaciones globales que requieren soporte para múltiples idiomas, manteniendo los diseños iguales independientemente de la direccionalidad.

Consulta la siguiente imagen.

Nota: Consulte la demostración práctica sobre cómo se pueden utilizar las propiedades lógicas de CSS con la internacionalización.

5. Espacio de color de laboratorio

El espacio de color Lab le permite especificar colores para alinearlos más estrechamente con la visión humana. Este método proporciona una gama de colores más amplia y precisa, lo que facilita una mayor coherencia en diferentes pantallas.

Aquí hay un ejemplo de código que muestra el uso del espacio de color de laboratorio en CSS.

.color-strip:nth-child(1) {
  --l: 90%;
  --a: -80;
  --b: 80;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(2) {
  --l: 75%;
  --a: -40;
  --b: 40;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(3) {
  --l: 60%;
  --a: 0;
  --b: 0;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(4) {
  --l: 45%;
  --a: 40;
  --b: -40;
  background-color: lab(var(--l) var(--a) var(--b));
}
.color-strip:nth-child(5) {
  --l: 30%;
  --a: 80;
  --b: -80;
  background-color: lab(var(--l) var(--a) var(--b));
}

Este ejemplo de código configura una serie de divs (banda de colores), cada uno con un color de fondo único definido en el espacio de color del laboratorio. Muestra cómo los colores de laboratorio producen una variedad de tonos y matices que son consistentes en varias pantallas.

Los colores de laboratorio son invaluables en el diseño digital, particularmente en industrias donde la precisión del color es fundamental, como el arte digital, el comercio en línea y el diseño de marcas.

Consulta la siguiente imagen.

Nota: Para obtener más detalles, consulte la demostración del espacio de color del laboratorio.

Conclusión

¡Gracias por leer! Estas funciones CSS ofrecen ventajas únicas y nuevas posibilidades para mejorar la funcionalidad y la experiencia del usuario de su aplicación. También mejoran la experiencia del desarrollador, ya que estas funciones les simplifican tareas complejas.

Así que asegúrese de probar estos ejemplos usted mismo e implementarlos en su próxima aplicación web para que sea moderna.

Blogs relacionados

• React Styling: consejos y trucos esenciales para diseñadores
• Las 7 mejores formas de escribir CSS en tu aplicación React o Next.js
• El diseño web adaptable evolucionó: introducción de consultas de contenedor CSS
• CSS Flex: lo que todo desarrollador debe saber