7 nuevas funciones para crear un sitio web receptivo
El CSS moderno toma todo el control del estilo del sitio web con la ayuda del JavaScript requerido. En este artículo, destacaremos siete nuevas actualizaciones de CSS para simplificar el futuro del estilo. Además, estamos considerando la compatibilidad con los navegadores Chrome, Edge y Firefox. Finalmente, discutiremos los problemas, las soluciones y prácticamente todo lo que necesitará para comenzar de inmediato.
Teniendo en cuenta todos los trucos y técnicas, aquí hay algunas características CSS cuidadosamente seleccionadas que valen la pena. Entonces, sin más preámbulos, profundicemos en ello.
1. Subcuadrícula CSS
A diferencia de la capacidad de CSS flexbox para moverse solo en una dirección, puede definir ambas dimensiones en cuadrículas. A medida que comiencen a ser poderosos y populares en las próximas décadas, se presenciarán cambios tremendos en los diseños web. Las cuadrículas anidadas se utilizan para dibujar cuadrículas dentro de las cuadrículas. Pero, ¿cuáles son los principales inconvenientes que provocaron la solicitud de subcuadrículas CSS?
- Las cuadrículas anidadas después del nivel 2 solían desbordar el contenido fuera de la cuadrícula más grande que afectaba en gran medida la capacidad de respuesta de un sitio web.
- Las rejillas anidadas actuaron como elementos independientes dentro del contenedor de rejilla más grande. No hubo ninguna referencia al contenedor principal para ningún cambio.
Sin subcuadrículas:
Después de las subcuadrículas:
A continuación, le mostramos cómo puede implementar subcuadrículas:
.container {
width: 700px;
height: 500px;
background: rgb(214, 255, 139);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
.container div {
background: rgb(72, 170, 137);
grid-row: 2/ 3;
grid-column: 2 / 5;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}Puede colocar varias subcuadrículas. La excepción notable es que las subcuadrículas heredan la propiedad de brecha de cuadrícula principal. Dará como resultado la creación de todas las subcuadrículas con las mismas propiedades de espacio dentro de cada cuadrícula principal.
Lo mejor de las subcuadrículas es que son muy sensibles, ajustables y escalables.
Compatibilidad del navegador: Firefox
2. Propiedad de relación de aspecto
Puede eliminar todos los problemas de ajuste y cálculo cambiando la relación de aspecto de un contenedor determinado. Si su objetivo es insertar un video, todo lo que necesita hacer es fijar una relación de aspecto en relación con el tamaño variable de la pantalla. Pero, al trabajar con cuadrículas múltiples bidimensionales, existen posibilidades de desbordamientos y vista predeterminada.
Puede solucionarlo admitiendo la propiedad de relación de aspecto con el atributo de ancho. Resulta útil para imágenes receptivas, ya que puede definir una altura o un ancho.
Así es como puede implementar la propiedad de relación de aspecto:
.container {
width: 700px;
aspect-ratio: 16 / 9;
background: rgb(72, 170, 137);
}
También puede ingresar la relación de aspecto: automático en lugar de especificar la relación. La desventaja del valor automático predeterminado es que el navegador seleccionará la dimensión original de la imagen. Sin duda, obstaculiza la capacidad de respuesta del sitio.
Compatibilidad del navegador: Chrome, Edge, Firefox (parcial)
3. Hueco de caja flexible
Grid-gap es bastante popular para crear un espacio igual entre cada cuadrícula. Pero, se suponía que debía aplicar márgenes negativos, selectores de pseudo-clases y selectores complejos para manejar el espacio entre cada elemento flexible. Por lo tanto, la brecha de Flexbox da como resultado menos líneas de código con mayor escalabilidad.
Así es como puede implementar la brecha de flexbox:
.container {
width: 700px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
gap: 1em;
}Producción:
Compatibilidad del navegador: todos los navegadores principales, incluidos Chrome, Edge y Firefox.
4. Desplazar Snap
El desplazamiento ayuda a compartir más información sobre un único sitio web sin saturar la copia web. Sin embargo, la principal desventaja del desplazamiento es que puede detenerse en la mitad del párrafo o de la imagen. A veces, el control del contenido paginado se deja a la mitad. JavaScript se usa cuidadosamente para evitar la personalización del desplazamiento. Pero, no fue un resultado completamente satisfactorio hasta que llegó CSS Scroll Snap.
Con Scroll Snap, puede definir límites específicos para arreglar el diseño y la visibilidad de un contenedor determinado. Por ejemplo, funciona de maravilla para crear carruseles y secciones definidas de sitios web. Tenga en cuenta que no necesitará JS para ningún ajuste.
Así es como puede implementar el ajuste de desplazamiento:
.container {
width: 100%;
height: 100%;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
section {
flex: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 15em;
font-family: Arial, Helvetica, sans-serif;
scroll-snap-align: end;
width: 100%;
height: 100%;
}Producción:
El ajuste de desplazamiento CSS tiene propiedad principal y secundaria. La propiedad padre o contenedor decide la dirección del desplazamiento (xoy) y el comportamiento del ajuste de desplazamiento. Por ejemplo, puede establecer scroll-snap-type: x obligatorio. Otorgará al usuario el control para decidir el punto de desplazamiento sin considerar la posición de desplazamiento.
Por otro lado, la proximidad scroll-snap-type: y funciona solo cuando el visitante del sitio web está más cerca del punto de desplazamiento.
La propiedad secundaria es scroll-snap-align para alinear los elementos durante el ajuste de desplazamiento CSS. Introduce valores de inicio, final y centro para alinear los elementos en consecuencia.
5. Consultas sobre funciones
Las consultas de características se utilizan para hacer frente a la degradación elegante. Por ejemplo, las cuadrículas CSS son bastante populares hoy en día. Pero vale la pena mencionar que los navegadores más antiguos no pueden procesarlo.
Aquí, las consultas de características verifican si ese navegador en particular admite una propiedad específica o no y brinda un sistema de soporte que fomenta la referencia a una propiedad de CSS solo si es compatible con ese navegador. De lo contrario, se considera el valor predeterminado. En este caso, puede colocar bloques en lugar de cuadrículas para cualquier respaldo previsto.
A continuación, le mostramos cómo puede implementar consultas de funciones:
@supports (content-visibility: auto) {
body{
background: teal;
width: 100%;
height: 100%;
}
}Por lo tanto, solo aquellos navegadores que muestren propiedades de visibilidad de contenido tendrán un color de fondo verde azulado; de lo contrario, se consideraría el valor predeterminado. Tenga en cuenta que @ es similar a @media de las consultas de medios, donde se suponía que debía establecer un ancho máximo o mínimo para ajustes improvisados. Simplifica recordar las consultas de funciones @supports.
Compatibilidad del navegador: todos los navegadores principales, incluidos Chrome, Edge y Firefox.
6. Propiedad de visibilidad de contenido
La representación rápida funciona como columna vertebral de un sitio web interactivo para el usuario. Con la creciente popularidad de los dispositivos móviles, el rendimiento de la representación de un sitio web actúa como un cuello de botella para conseguir un sitio web atractivo.
Aquí, la propiedad de visibilidad del contenido juega un papel crucial. Porque, por defecto, los navegadores renderizan todos los elementos del sitio web a la vez. Disminuye el tiempo de carga y el rendimiento general del sitio, especialmente si su sitio web tiene muchas animaciones pesadas. Por otro lado, la propiedad de visibilidad del contenido solo representa los elementos de la ventana gráfica y muestra otros elementos a medida que se desplaza por la página.
#main {
content-visibility: auto;
/* contain-intrinsic-size: 0 500px; */
}La propiedad de visibilidad de contenido ingresa tres valores. contenido-visibilidad: visible no muestra ningún efecto mientras que contenido-visibilidad: oculto es similar a mostrar: ninguno donde el elemento omite los contenidos inaccesibles. La visibilidad del contenido: omite automáticamente el contenido irrelevante, pero está disponible como una página normal para las funciones de usuario-agente.
Midamos el poder de la visibilidad del contenido. Aquí está el resultado:
7. Transición, transformación y animación
En CSS, tenemos dos formas de aplicar la animación. La transición se utiliza para realizar cambios suaves en las propiedades visuales de los elementos. Por otro lado, sin transición, transform manipularía abruptamente de un estado a otro.
Las animaciones se utilizan con @keyframes que establecen estilos en varios puntos durante la duración de la animación. Lo interesante es que @keyframes define cuándo ocurrirá el cambio , la transformación y la animación toman el control del cambio, y la transición se encarga de cómo ocurrirá el cambio (por ejemplo, efectos de desplazamiento).
.child {
background: teal;
height: 150px;
width: 150px;
color: white;
transition: transform 0.2s ease-in-out;
animation: myAnimation 2s infinite;
}
.child:hover {
transform: scale(2, 2) rotate(45deg);
}
@keyframes myAnimation {
0% {
}
50% {
transform: translateX(400px)
}
100% {
transform: translateX(0px)
}
}Compatibilidad del navegador: todos los navegadores principales, incluidos Chrome, Edge y Firefox.
Terminando
El marcado de hojas de estilo en cascada evoluciona continuamente con mejores funciones. Hasta ahora, conoció estas siete características increíbles que incluyen subcuadrícula CSS, propiedad de relación de aspecto, espacios de flexbox, ajuste de desplazamiento, consultas de características, propiedad de visibilidad de contenido, transición, transformación y animación.
Al final del día, debe asegurarse de qué funciones simplifican el estilo de su sitio web.