DEV Community

loading...
Cover image for Las últimas NOVEDADES de CSS en 2021 parte 1

Las últimas NOVEDADES de CSS en 2021 parte 1

poleselfg profile image Poleselfg ・5 min read
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).

Alt Text

pie-chart{
    background: conic-gradient(red 120deg, green 120deg 240deg, blue 240deg);
}
Enter fullscreen mode Exit fullscreen mode

La función repeating-conic-gradient() ofrece la posibilidad de crear impresionantes patrones repetidos con una breve lista de parámetros.

Alt Text

.sunburst{
    background: repeating-conic-gradient(red 0 15deg,darkred 0 30deg);
}
Enter fullscreen mode Exit fullscreen mode
Browser Support

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

PROBAR EN CODEPEN

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;
  }
}
Enter fullscreen mode Exit fullscreen mode
Browser Support

Alt Text

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

Alt Text

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.

Alt Text

.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;
}
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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

por las dudas usamos un fallback

@supports not (grid-template-rows: subgrid) {
  .card {
    /* ..alternative layout */
  }
}
Enter fullscreen mode Exit fullscreen mode

PROBAR EN CODEPEN

Browser Support

Alt Text

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

SALUDOS!!

Discussion (0)

Forem Open with the Forem app