Loading repository data…
Loading repository data…
eduardofierropro / repository
En este repo hemos hecho un repaso con códigos de ejemplo y documentación oficial sobre todas las características de CSS que aparecen en el State of CSS 2021.
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.