Este repo está hecho en directo desde el canal de Twitch de Eduardo Fierro Pro y estará resubido en 3 partes en mi canal de Youtube
Lo que hacemos en este repo es revisar y repasar la documentación oficial con pequeños ejemplos reales las próximas novedades de CSS que se ven en la encuesta de State of CSS 2021.
Te agradecería que si usas este repo para mostrarlo en tu canal de Youtube o Streaming en Twitch me menciones porque es muy... ¡De frontends!🥰
Es una encuesta que se realiza cada año a diferentes desarrolladores (tú también puedes hacerla desde su web) y nos permite saber nuestros conocimientos como developers.
En este archivo tienes los diferentes enlaces más "oficiales" sobre cada una de las estas propiedades.
La gran mayoría de estas propiedades no se usarán hasta dentro de unos años. Todas pasan por un proceso de validación de la W3C.
Si no sabes lo que es la W3C, entonces mira este vídeo.
En ciertas propiedades CSS hemos añadido una leyenda cuyos iconos significan:
-
🚨 He encontrado algo de info pero estoy seguro de ese enlace en concreto.
-
🧪 Esta propiedad es experimental y la definición que escribo en este repo puede cambiar en el futuro.
-
🤷♂️ No he encontrado información sobre esta propiedad ni en documentos oficiales ni en "tutoriales". Si alguien encuentra o sabe del tema que nos avise por discord o aquí en Github.
Nos permite hacer rejillas dentro de una etiqueta
Es un valor que nos permite es "heredar" el número de columnas y rows de una etiqueta contenedora.
Es una forma de maquetación que nos permite organizar elementos en columnas y filas.
Es una forma de maquetación que nos permite organizar elementos hijos en columnas dentro de una contenedora.
Nos permiten cambiar la orientación de todo nuestro contenido web, en base a las formas de escritura "de mano".
Es un position que nos permite es hacer que una etiqueta sea relative al inicio y fixed cuando toca un borde de la ventana.
Nos permiten es "simplificar" el uso de propiedades de box-model (propiedades físicas) en base al writting-mode; es decir, con "propiedades lógicas".
Nos permite especificar el ratio de un elemento sin darle un tamaño previo. Se usa en conjunto a object-fit: cover.
Mejora el rendimiento, haciendo que una etiqueta que no se encuentre en el viewport (no se vea) NO se renderize, mejorando así la carga de la web.
Nos permite evitar usar "margin"
Es una regla de CSS3 que nos permite aplicar técnicas "responsive" a una etiqueta hija en base al tamaño de su contenedora.
Nos permiten que el texto se adapte a la forma del elemento, en base a la propiedad "shape-outside".
Nos permite configurar el tamaño de la imagen dentro de una <img> y lo podemos combinar con la propiedad object-position.
Nos permite generar formas (que pueden usarse como máscara) para etiquetas.
Son efectos para colocar en etiquetas o imágenes basadas en los efectos de capa de Photoshop. Y existen dos tipos, los mix-blend-mode y los blend-mode.
Nos permite aplicar efectos de filtro a una imagen. Efectos como blur, grayscale, saturate, etc.
backdrop-filter Nos permite aplicar un efecto de desenfoque al fondo de una imagen y se combina con un background en rgba().
Es una regla usada para configurar los colores segun el perfil de pantalla.
Nos permite configurar el punto de fuga al hacer transformaciones.
Valores que podemos usar en las propiedades como width, height... y que no se centran en la etiqueta sino en su contenido.
Son degradados de ángulo conocidos como conic gradients.
Es una función que nos permite configurar un color para un perfil de pantalla personalizado.
Nos permite cambiar el color por defecto de ciertos elementos en HTML como radius o checkboxes.
Nos permite que cuando deslizemos / scroll en la página los elementos se centren sólo con CSS. Sustituto de Javascript.
Cuando hacemos scroll en una etiqueta con overflow-x / overlow-y en hidden, la rueda del ratón no afecta al scroll de una contenedora o la página.
🚨 Esta propiedad está activada por defecto en los navegadores que lo soportan. (No hay ejemplo de esta propiedad)
En el caso de que añadamos contenido mediante Javascript a una con overflow-anchor el contenido se centra en lo que estábamos viendo: aunque cambie la altura de la .
Nos permite configurar qué eventos de "pantalla" podemos usar con un elemento, es decir si podemos hacer scroll, pinch, etc.
🚨 A nivel de Accesibilidad es recomendable no usar touch-action: none.
Nos sirve para desactiva o activar los punteros de ratón en un elemento mediante CSS.
Nos permite hacer efectos de Parallax en Scroll con CSS.
Nos permiten configurar cómo las ligaduras opciones de configuración de los textos.
Establece el nº de líneas que ocupa la primera letra.
🚨 No parece que funcione ni en Safari.
Nos permite configurar los glifos, fracciones... de una tipografía.
Nos sirve para confirgurar la forma de cargar la fuente.
Nos permite definir por un lado el número de líneas que se pueden mostrar en un elemento. Y el símbolo de los ... al final de esas líneas. Como un "Read More".
Son propiedades para una tipografía editable que se añaden dentro del @media.
En vez de enlazar 20 tipografías podemos definir múltiples valores para una misma tipografía y ahorrar carga.
Es un breakpoint de dispositivo que nos permite aplicar propiedades (normalmente animation) cuando el usuario ha seleccionado la opción de "Reducir movimiento".
Es un breakpoint de dispositivo que nos permite configurar propiedades CSS dependiendo de la configuración de color del sistema operativo, es decir del "Dark Mode".
Es un breakpoint de dispositivo que nos permite definir si algo en CSS (tipografía, ...) se carga o no dependiendo de si el usuario ha definido.
Nos permite de una lista de colores en CSS determinar el color que mejor con más contraste.
Se debería de usar en conjunto con prefers-color-scheme y nos permite que el navegador configure los colores que nosotros no podemos modificar de ciertos elementos como formulario o barras de scroll cuando el usuario esté usando el lightmode o darkmode.
No he encontrado información sobre el tema, lo más relevante sería el tabindex de HTML pero es un atributo de HTML que funciona desde IE 7.
Atributos usados para la accesibilidad de una web y son atributos que se colocan en los elementos HTML.
Eduardo Fierro - Documentación y trabajo inicial
Soy profesor en la Escuela Trazos donde impartimos Cursos y Másters sobre desarrollo web con una bolsa de trabajo con Alta Empleabilidad. ¡Píde información sobre los cursos donde soy profesor desde este enlace!
👉https://trazos.net/contacto-eduardofierro
MIT Public License v3.0 No puede usarse comencialmente.