10 nuevas funciones CSS que quizás no conozca (Edición 2021)

La web moderna no sería posible sin CSS.El lenguaje de marcado es responsable del hecho de que los sitios web se ven bien, tienen un aspecto agradable y que cada elemento permanece donde está.Sin embargo, ¿sabías que aparecen nuevas funciones de CSS todo el tiempo?Con los años, CSS ha ido mucho más allá de los colores de fondo, los bordes, el estilo del texto, los bordes y el patrón de la caja.CSS Modern es capaz de una amplia gama de características para las cuales, en el pasado, necesitaba JavaScript o soluciones alternativas.Para celebrar qué tan lejos ha llegado, en esta publicación queremos ver algunas de las nuevas funciones increíbles que CSS cuenta en 2021 y es posible que no sepa.Destacemos cosas interesantes que los diseñadores y desarrolladores web pueden hacer con CSS Modern, hablaremos sobre casos de uso, soporte de navegador y también le daremos un ejemplo rápido.
Vamos. Nuevas características de CSS: ¿Qué puede hacer CSS moderno? Estas son algunas de las cosas increíbles de las que CSS es capaz de hoy. Propiedades/variables personalizadas Las propiedades personalizadas le permiten definir sustituciones de propiedades CSS en un lugar central para usar para su diseño. La mejor manera de entender por qué es útil es repasar un ejemplo. Por lo general, cuando construye un tema, elegiría un esquema de color y luego declarará esos colores cada vez que sea necesario. A {Color: #CD2653; } .Social-icons a {fondo: #CD2653; } .wp-block-button.is-style-outline {color: #CD2653; } El problema con este enfoque es que si desea realizar cambios en uno de los colores, debe cambiar cada instancia. Aunque los editores de código pueden hacer esto fácilmente mediante búsqueda y reemplazo, todavía es molesto. Especialmente si solo desea hacer una prueba rápida y debe revertir todo nuevamente. Hay una mejor solución, las propiedades personalizadas eliminan esto. Con su ayuda, puede asignar los colores en cuestión a una variable una vez y luego simplemente ingresar esa variable como propiedad CSS cada vez que lo usa de la siguiente manera: root {–global-color-primario: #28303D; } a {color: lima (-global-color-primary); } .Social-icons a {fondo: lima (-global-color-primary); } Por lo tanto, cuando quieres hacer un cambio, solo tienes que hacerlo en un solo lugar. ¿Guay, verdad? En el pasado, tenía que usar un procesador previo, como Sass, para usar variables, ahora es una funcionalidad nativa de CSS.
Como puede ver anteriormente, las propiedades personalizadas también son muy fáciles de usar. Defina sus variables al comienzo del documento bajo el selector: Raíz (¡observe el frontal de doble guión en las variables, esto es lo que las define como propiedades personalizadas también son sensibles a la parte superior y en minúsculas!). Después de eso, puede usarlos en todo el documento a través de la función Lime (). Si desea cambiar una variable, simplemente cambie la declaración a continuación: Root y está listo. Un tema que requiere una gran cantidad de propiedades personalizadas es de veintiún años. Si desea verlos en la acción, le recomiendo leer nuestra reseña. En cuanto a la pregunta de qué tan bien adoptada es esta característica CSS, el portador del navegador es muy bueno:
@Still Supports, tenemos una regla CSS similar a la consulta de medios. Sin embargo, en lugar de acondicionar las reglas CSS del tamaño de la pantalla o el tipo de teléfono, @Supports le permite hacer lo mismo dependiendo de las propiedades y valores del usuario del usuario. ¿Qué es esto bueno? Como verá durante esta publicación, no todas las funciones de CSS se aceptan en todos los navegadores y dispositivos. Aunque a menudo puede resolver esto utilizando declaraciones alternativas, en algunos casos, si no incluye específicamente un soporte tecnológico anterior, puede destruir seriamente su sitio.
Además, puede usar @supports para agregar funciones o estilos adicionales para navegadores más modernos que pueden manejarlos (por eso las consultas de @Supports también se llaman “consulta de características”). Cómo usar las características Si está familiarizado con los interrogatorios de los medios, el uso de cheques de asistencia será muy fácil. Aquí le mostramos cómo usarlo: @supports (display: grid) {.Site-Account {display: grid; }} Como puede ver, es simplemente la regla seguida de la propiedad o el par de valor que desea verificar entre los soportes. Luego sigue la declaración CSS habitual para qué reglas se aplicar si se cumple la condición. El ejemplo anterior establece que si el navegador acepta la cuadrícula CSS (más sobre esto en un minuto) debe aplicar la pantalla: Grid; al elemento con la clase. También es importante tener en cuenta que @Supports comprende los operadores no, y (quién también se puede combinar) para crear reglas más específicas, como una reserva de navegadores que no acepta esta característica especial: @ admite no (Display: Grid) {.Site-Account {float: izquierda; }} Para usar @Supports de manera propiamente, debe ser consciente de lo que Browsere lo acepta (lo sé, este es un tipo de meta). La buena noticia es que todos los navegadores modernos lo hacen.

Sin embargo, debido a que el propósito de estas consultas es activar o desactivar las funciones con las que los navegadores más antiguos no pueden administrarse, asegúrese de crearlas correctamente. Esto significa que si tiene la intención de usar una consulta de características, cree para los navegadores que entienden las características. No tiene sentido decirle a un navegador que ignore algo de una manera que no puede entender. Flexbox Flexbox Gaps es otro módulo CSS Look del que hablamos antes. Una de sus debilidades ha sido durante mucho tiempo los huecos Flexbox, es decir, la posibilidad de definir las interrupciones entre filas y columnas. De la felicidad, el portador del navegador para esta característica CSS mejora. Ahora puede comenzar a usar GAP, GAP de fila y brecha de columna para crear espacio en aspectos creados con aspectos de diseños de cuadrícula, flexbox y múltiples columnas. Aquí hay un ejemplo rápido de cómo se puede ver en Flexbox: .flex-Gap-test {Display: Inline-Flax; Flex-Wrap: envoltura; Brecha: 16px; }!/div>
6
y aquí está en la página:
Aunque es posible obtener el mismo aspecto a través de los bordes, se necesita mucho más marcado y soluciones que la simple declaración del vacío.
Contenido-visibilidad El contenido es una nueva función CSS muy interesante para mejorar el rendimiento del sitio. Básicamente funciona como una carga perezosa, no solo para imágenes, sino para cualquier elemento HTML. Puede usarlo para evitar la carga de cualquier parte de su sitio hasta que sea visible. El uso también es súper ligero. Simplemente aplíquelo a un elemento de su elección, de la siguiente manera: .centent-below-plieve {contenido-visión: car; } La visibilidad de contenido tiene tres valores. Por defecto, se establece en Visible, en cuyo caso el elemento se carga como de costumbre. Alternativamente, puede establecerlo en el oculto, en cuyo caso el artículo no se presenta, independientemente de si es visible o no. Por otro lado, cuando se ajusta al automóvil, los elementos fuera del área visible se omitirán y luego se reproducirán una vez que aparezcan en la pantalla. Una cosa que también podría ser importante en este caso es contener los syses de entrada. Porque los elementos establecidos en la visión de contenido: oculto; En realidad, son de tamaño cero, le permite aplicar una altura y un ancho teóricos a los elementos ocultos, para que el navegador pueda considerarlos desde el principio y no cuando se reproduce el elemento. De esta manera, puede evitar cambios repentinos de apariencia durante el desfile. El portador del navegador para la visión de contenido todavía es ligeramente irregular, pero llega allí. Lo mismo para contener-enter-syize.

Una vez adoptado a gran escala, predigo que se convertirá en una de las herramientas más efectivas para acelerar el proceso de representación.Transiciones, transformaciones, animaciones en los viejos tiempos, si desea que algo se mudara a su sitio, generalmente tenía que llamar a JavaScript (o GIF animados para aquellos que forman parte de la generación de MySpace).Sin embargo, lo que quizás no sepa es que CSS tiene la capacidad de hacer que las cosas se muevan durante años.Las tres herramientas principales para lograr este tipo de trabajo son: transiciones: le permiten hacer un cambio de un valor de propiedad a otro (por ejemplo, efectos de la cogata) en lugar de ser repentino.
Transformaciones: le permite mover, rotar y escalar elementos en el espacio 2D y 3D.

Animaciones: configure animaciones simples o complejas en CSS y configure cómo y cuándo deben ejecutarse.

Por supuesto, no tenemos espacio para analizarlos los tres en detalle aquí. Asegúrese de ver los enlaces anteriores si desea obtener más información. Sin embargo, hagamos algunos ejemplos rápidos para todos, por lo que tiene una impresión de lo que es posible. La transición CSS es un ejemplo rápido para una transición CSS: div {ancho: 100px; Altura: 100px; Transición: altura 3s; } Div: hover {altura: 500px; } El marcado anterior reducirá el aumento de la altura del DIV a tres segundos cuando alguien se sobrepasa el artículo. La transformación CSS a continuación es un ejemplo de transformación CSS. Girará el elemento con 30 grados en el sentido de las agujas del reloj cuando alguien pase el mouse sobre él: div: hover {transform: rotar (30deg); } Animación CSS y, finalmente, un fragmento corto que muestra una animación CSS: @Keyframes Color-Cambio {de {Color de fondo: azul;} a {fondo-orden: amarillo;}} div: hover {name de animación: color: color: color -cambio; Duración de animación: 3s;
} Observe cómo usa @Keyframes para nombrar animación y definir lo que hace, luego aplíquelo a un elemento usando el nombre de animación. La duración de la animación controla cuánto tiempo lleva completar. Hay otras propiedades como esta. Si desea probar todo esto, la buena noticia es que el soporte del navegador es excelente (ver aquí, aquí, aquí y aquí). Por lo tanto, nada le impide proporcionar transiciones, transformaciones y animaciones CSS. Scroll Snap La reparación del desplazamiento le brinda la opción de bloquear la ventana de vista del usuario en una parte o elemento particular de su sitio. Es muy útil crear transiciones interesantes y ayudar a los usuarios a centrarse en los elementos más importantes de la página mientras se agota. Puede encontrar una demostración simple aquí. Este efecto es muy visible en las aplicaciones móviles, sin embargo, con un desfile, puede traerlo a los sitios web. El uso también es relativamente simple en el nivel más elemental. Simplemente aplique el tipo de fijación de un contenedor y defina dónde se deben solucionar sus hijos. .Container {scroll-snap-type: y obligatoria; } .Container div {scroll-snap-align: start; } Por supuesto, es más. Si quieres saberlo, los trucos de CSS tienen una gran escritura. Esto solo deja un vistazo a la compatibilidad del navegador, lo cual es bastante bueno.