CSS está creciendo en alcance y poder con cada año que pasa. Es un gran momento para ser desarrollador web, pero mantenerse actualizado con las funciones más recientes puede ser un desafío.
Para que no sea un dolor de cabeza, aca estan las ultimas novedades, al menos del ultimo año y lo que llevamos de 2021.
Conical gradients
La función de conic-gradient se puede utilizar para crear una gama interesante de patrones de imagen, como formas cónicas, gráficos circulares, ruedas de colores y superficies brillantes.
Los degradados cónicos rotan las paradas de color alrededor de un punto central (en lugar de irradiar desde un punto central como un degradado radial). Las paradas de color de degradado cónicas se colocan alrededor de la circunferencia de un círculo.
Para crear un gráfico circular, usamos paradas de color que se superponen (tienen transiciones abruptas).
pie-chart{ background: conic-gradient(red 120deg, green 120deg 240deg, blue 240deg); } La función repeating-conic-gradient() ofrece la posibilidad de crear impresionantes patrones repetidos con una breve lista de parámetros.
.sunburst{ background: repeating-conic-gradient(red 0 15deg,darkred 0 30deg); } Browser Support
The Aspect Ratio Feature
Otra característica nueva es la relación de aspecto, que es la relación proporcional entre ancho y alto. Mantener una relación de aspecto consistente es importante para crear diseños receptivos y para evitar cambios de diseño acumulativos (una métrica de rendimiento vital de la web).
Algunos ejemplos de dónde 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 tarjetas
- Creación de iframes receptivos
Esta propiedad le permite 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.
La sintaxis es muy sencilla. El valor es: la relación de ancho, una barra inclinada y la relación de altura.
.widescreen { aspect-ratio: 16 / 9; } Es importante tener en cuenta que los elementos no respetarán la relación de aspecto si se definen tanto la altura como el ancho para un elemento.
Puede empezar a utilizar la propiedad de inmediato y utilizar unA feature query para proporcionar una alternativa, como se muestra a continuación.
.standard { aspect-ratio: 4 / 3; } @supports not (aspect-ratio: 4 / 3) { .standard { width: 16rem; height: 9rem; } } Browser Support
Content-visibility property
La propiedad de visibilidad del contenido es una nueva propiedad de CSS que puede mejorar el rendimiento de la representación de la página. Permite al navegador omitir el trabajo de renderizado de un elemento hasta que sea necesario (cuando un elemento está a la vista). Si una gran parte de su contenido está fuera de la pantalla, aprovechar esta propiedad puede reducir drásticamente el tiempo de carga inicial de una página.
Aprovechar los beneficios de la visibilidad del contenido requiere que considere qué contenido debe cargarse inicialmente y qué contenido podría aplazarse. La propiedad tiene una opción automática que permite al navegador decidir si puede omitir la representación de un elemento.
Hay algunas consideraciones importantes al usar esta propiedad, como:
-
La altura de la página: el navegador hará que un elemento con visibilidad de contenido: auto o visibilidad de contenido: oculto sea invisible al hacer que su altura sea cero hasta que se renderice. Esto cambia la altura de la página y el desplazamiento.Puede usar la propiedad content-intrinsic-size para dar una altura explícita al elemento para compensar esto, es probable que esto sea una suposición de su parte, pero no es necesario que lo esté. ¡exacto! Orkan analiza este tema en este artículo.
-
El impacto en la accesibilidad: si utiliza la visibilidad del contenido en una sección que tiene encabezados y puntos de referencia, los lectores de pantalla no podrán acceder a ellos cuando se cargue la página. Desafortunadamente, esto degrada la accesibilidad de su contenido. Marcy Sutton analiza este caso de uso para una solicitud de extracción reciente que revisó para Dev.to.
Browser Support
CSS SubGrid
CSS Subgrid hace que varios patrones de diseño difíciles sean mucho más sencillos de realizar. Es la guinda y la guinda del pastel CSS Grid.
Si ya conoces la cuadrícula CSS, no requerirá mucho esfuerzo aprender la subcuadrícula CSS. La nueva sintaxis es breve y sencilla.
Conceptualmente, 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. La recompensa es que proporciona una forma de alinear una cuadrícula anidada con su cuadrícula principal.
Un ejemplo común sería un diseño de tarjeta que tiene diferentes secciones. Estas secciones pueden variar en tamaño según el contenido. Con una cuadrícula anidada regular, no puede mantener la alineación vertical de las mismas secciones entre diferentes tarjetas.
.container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } Si cambiamos la tarjeta para que sea una subcuadrícula, podemos conseguir que las secciones estén perfectamente alineadas verticalmente .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; } por las dudas usamos un fallback
@supports not (grid-template-rows: subgrid) { .card { /* ..alternative layout */ } } Browser Support
y basicamente eso es todo por la parte 1, en breve estare subiendo la parte 2 con mas features nuevas e interezantes que podemos encontrar en CSS para este 2021