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.

원추형 그라디언트

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);
}

반복 원추 기울기() 함수는 매개변수 목록에 있는 반복 원추형 기울기를 생성할 수 있습니다.

.sunburst{
    background: repeating-conic-gradient(red 0 15deg,darkred 0 30deg);
}

브라우저 지원

종횡비 기능

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 consistents y de tamaño uniforme, como tarjetas

Creación de iframe 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.

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;
  }
}

브라우저 지원

콘텐츠 가시성 속성

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é. ¡ 정확합니다! 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 reference, 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은 Dev.to에 대한 리뷰를 검토하기 위해 분석을 요청했습니다.

브라우저 지원

CSS 하위 그리드

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 */
  }
}

PROBAR EN CODEPEN


브라우저 지원



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

살루도스!!