En esta página:
La páginas web modernas no tendrían sentido si la tecnología CSS, si bien HTML 5 hace que las páginas web se vean bien, tengan un estructura agradable y que cada elemento se coloque en el lugar que le corresponde, CSS es imprescindible para que un sitio web tenga un aspecto agradable para los visitantes. CSS esta en constante cambio y cada año aparecen nuevas características que muchos desarrolladores no llegan a conocer porque prefieren a veces que las nuevas características tengan un poco más de tiempo en el mercado para poder considerarlas como características maduras o porque no investigan, entre otros factores. En este Post te quiero compartir 10 características de CSS que en el año 2021 talves no conocías, vamos con ello.
Partes
- Parte 1
- Parte 2 (Final)
Antes de continuar te invito a leer los siguiente artículos:
- Crear una web con CSS 3 Flexbox
- Implementando “Facebook Reactions” con CSS 3
- Mostrar un Esqueleto antes de Cargar el contenido de una Web
- Como Trabajar con Variables en CSS
- Como funcionan los Combinadores CSS
- Implementando Media Queries con CSS 3
- Como funcionan las Nuevas Propiedades Lógicas CSS
- El Estado actual de CSS para el 2020 – Parte 1
- Los 5 mejores Frameworks CSS para Desarrolladores en 2020
- Como Depurar CSS con Chrome DevTools
- Como crear el Efecto modo Oscuro – Claro en un Sitio Web (Mantener el modo seleccionado en las demás Páginas)
- Trabajando con Selectores de Atributos en CSS 3
- Puedes leer más Posts en la categoría CSS
Asimismo te invito a escuchar el Podcast: “Como Hacer De La Programación Un Estilo De Vida”:
| 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 1.
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.
@supports
Esta regla es similar a las media queries o consultas de medios, pero en vez de condicionar las reglas CSS al tamaño de la pantalla o al tipo de dispositivo, esta permite permite hacer lo mismo pero dependiendo de las propiedades y valores de CSS que admita el navegador del usuario.
En este Post que consta de 2 partes podemos ver muchas funciones de CSS y no todas con compatibles con todos los navegadores y dispositivos. Si bien a menudo podemos lidiar con esto utilizando declaraciones de respaldo, en algunos casos, si no incluyes específicamente un soporte para navegadores anteriores, puedes dañar seriamente tu sitio web.
Puedes usar @supports para agregar funciones adicionales o estilos para navegadores más modernos que puedan manejarlos (razón por la cual las consultas con @supports también se conocen como “consultas de características”).
Si has usado o estas familiarizado con las media queries o consultas de medios usar la verificación de soporte @supports te será muy fácil, veamos un ejemplo a continuación.
|
1 2 3 4 5 6 7 |
@supports (display: grid) { .contenido { display: grid; } } |
En el código anterior puedes ver que a la regla le agregamos la propiedad y valor que se desea verificar entre paréntesis, después de eso viene la declaración CSS habitual sobre qué reglas aplicar si se cumple la condición.
La regla @supports comprende los operadores not, and y or (también se pueden combinar) para crear reglas más específicas, como un respaldo para los navegadores que no admiten esa característica en particular, veamos el siguiente ejemplo.
|
1 2 3 4 5 6 7 |
@supports not (display: grid) { .contenido { float: right; } } |
Para saber que navegadores admiten esta característica, puedes visitar el siguiente enlace.
content-visibility
Esta nueva característica de CSS es útil, porque permite mejorar el rendimiento de un sitio web, básicamente funciona como una carga diferida, solo que no para imágenes sino para cualquier elemento HTML. Puedes usar content-visibility para evitar que se cargue cualquier parte de tu sitio web hasta que sea visible.
El uso de esta característica es muy fácil, solo aplícalo a un elemento que desees, por ejemplo.
|
1 2 3 4 5 |
.contenido { content-visibility: auto; } |
La propiedad content-visibility toma 3 valores, de forma predeterminada se establece en visible, en cuyo caso el elemento se carga como de costumbre. Alternativamente, puedes configurarlo en hidden, en cuyo caso el elemento no se representa, sin importar si es visible o no. Cuando se establece en auto, por otro lado, los elementos fuera del área visible se omitirán y luego se renderizarán una vez que aparezcan en la pantalla.
Para saber que navegadores admiten esta característica, puedes visitar el siguiente enlace.
Ajuste de Desplazamiento (Scroll Snap)
Esta característica te permite bloquear la ventana del usuario en ciertas partes o elementos de tu sitio web, es muy útil para crear transiciones interesantes y ayudar a los usuarios a centrarse en los elementos más importantes de la página mientras se desplazan hacia abajo.
Este efecto es muy visible en las aplicaciones móviles, sin embargo, con el ajuste de desplazamiento, también puedes llevarlo a los sitios web.
El uso de esta característica es relativamente sencillo en el nivel más básico, solo aplica el tipo de ajuste de desplazamiento a un contenedor y define dónde deben ajustarse sus hijos, veamos un ejemplo.
|
1 2 3 4 5 6 7 8 9 |
.contenedor { scroll-snap-type: y mandatory; } .contenedor div { scroll-snap-align: start; } |
Para saber que navegadores admiten esta característica, puedes visitar el siguiente enlace.
:is y :where
Las pseudoclases :is y :where te permiten reducir la repetición en el marcado CSS al acortar las listas de selectores CSS, por ejemplo compara esto:
|
1 2 3 4 5 6 7 |
.contenedor a:hover, .sidebar a:hover, .footer a:hover { /* Acá va el marcado */ } |
A esto:
|
1 2 3 4 5 |
:is(.contenedor, .sidebar, .footer) a:hover { /* Acá va el marcado */ } |
Lo mismo funciona con la pseudoclase :where :
|
1 2 3 4 5 |
:where(.contenedor, .sidebar, .footer) a:hover { /* Acá va el marcado */ } |
Si el marcado es el mismo, entonces ¿ Cuál es la diferencia ?, bueno la diferencia es que la pseudoclase :is es mucho más específica. Toma el nivel de especificidad del elemento más específico entre paréntesis. En contraste con eso, la especificidad de la pseoudoclase :where siempre es cero. En consecuencia, es mucho más fácil anular más adelante si se requiere hacerlo en la línea del código y no afecta a los elementos si se elimina.
Para saber que navegadores admiten esta característica, puedes visitar el siguiente enlace para :is y el siguiente enlace para :where.
conic-gradient
Esta función te permite 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 degradado cónicas se colocan alrededor de la circunferencia de un círculo. Para crear un gráfico circular, podemos usar paradas de color que se superponen (tienen transiciones abruptas), por ejemplo.
|
1 2 3 4 5 |
.grafico-pie{ background: conic-gradient(red 120deg, green 120deg 240deg, blue 240deg); } |
Para saber que navegadores admiten esta característica, puedes visitar el siguiente enlace.
Bueno hasta aquí llegamos con esta primera parte del Post en donde conocimos 5 de las 10 nuevas características que talvez no conocías de CSS en el año 2021.
Ten Paciencia, lo que quiero es que conozcas bien acerca de estas nuevas características y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.
Nota (s)
- En la siguiente parte y última veremos las 5 últimas características nuevas de CSS que talvez no conocías en el año 2021.
- 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.