El día de hoy, hablaremos de estas últimas tres, estos son los procesos que tienen que hacer algunas de nuestras propiedades para poder renderizarse en la web 💻. Sucede en cuestión de milisegundos.
Composite: Ordena las partes de la página. Propiedades como opacity y transform.
Paint: Rellena píxeles. Implica colores, imágenes, textos, sombras, etc.
Layout: Diseño de la página. Ancho, margin, padding, border, etc.
Si nos dirigimos a csstriggers.com{target="_blank"}, podremos ver todas las propiedades de CSS que utilizamos y cómo actúan en los diferentes navegadores y motores. A continuación veremos una vista previa 👇.
Resumen de la articlase 🎯
Existen algunas propiedades en css que hacen que las paginas tarden mas en cargar. Esto se debe a que tienen que pasar por ciertas “capas” de renderizado hasta que se pinten en la pantalla.
En pocas palabras, las propiedades que tengan relacion con una gran cantidad de pixeles nos van a afectar en el performance de la pagina web. Por eso el background afecta al desempeño de la pagina web ⌛.
Contribución creada con los aportes de: Joseph Darwin Carhuaz Villagomez, Irving Juárez y Angel David Osorio Leyva.
Layout: Diseño de la página. Ancho, margin, padding, border...
Notas de la clase
:o Que software usas para tus apuntes?
One Note de Windows
Resumen de la clase
Existen algunas propiedades en css que hacen que las paginas tarden mas en cargar. Esto se debe a que tienen que pasar por ciertas "capas" de renderizado hasta que se pinten en la pantalla.
.
En pocas palabras, las propiedades que tengan relacion con una gran cantidad de pixeles nos van a afectar en el performance de la pagina web. Por eso el background afecta al desempeño de la pagina web.
.
Este tema también se ve en el curso pasado, aunque no se toca muy a fondo.
CSS Triggers
Estos son los procesos que influyen en el renderizado de la web, podemos centrarnos principalmente en:
Layout → Este se encarga del diseño de nuestra pagina, sus dimensiones y organizacion.
Paint → Se encarga de rellenar todos los pixeles, entra en juego el tema de colores, imagenes, sombras y mas.
Composite → Este se encarga de ordenar todas las partes de nuestra pagina, podemos relacionarlo con propiedades como transform u opacity
¿Qué significa Blink, Geecko, WebKit y EdgeHTML? son motores de navegadores, supongo yo pero ¿En qué navegadores están?
¡Hola! Así es, son motores, pero no precisamente para navegadores, aquí te dejo enlaces donde se listan cada uno de los softwares que utilizan dichos motores 👀
Softwares que usan Blink#Platforms)
Softwares que usan Gecko#Software_donde_se_utiliza_Gecko)
Softwares que usan Webkit
Softwares que usan EdgeHTML
Tener en cuenta que Webkit y Gecko son los que están a la vanguardia con el estandar de la web.
Si background no podemos usarlo que otra opcio usariamos para cambiar el color?
Podrías tener dos elementos uno encima del otro. Cuando quieras cambiar de color, cambiar el opacity a 0 del elemento que quieras ocultar dejando solo el de atras
no me sirvio el link a la pagina de css Triggers a alguno le esta pasando lo mismo?
Si, parece que la pagina expiro
El LCP (Largest Contentful Paint) mide la velocidad de despliegue del contenido más extenso de una página web. Es decir, marca el tiempo que tarda en renderizar la imagen o el bloque de texto más grande con relación al momento en que comenzó a cargarse la página
¿Qué es CLS? # CLS es una medida de la ráfaga más grande de las puntuaciones de cambio de diseño para cada cambio de diseño inesperado que se produce durante toda la vida útil de una página. Se produce un cambio de diseño cada vez que un elemento visible cambia su posición de un fotograma renderizado al siguiente
como se llama la fuente que usa la profe?
Intenté optimizar mis animaciones usando transform pero no puedo usarlo de la misma manera que max-width, verán, max-height me permite trabajar con porcentajes mientras que transform no, si bien transform acepta medidas relativas, aun no encuentro la manera de hacer que mi menú tenga las mismas animaciones que uso con max-width que con transform, si alguien quiere revisar mi código en el menú de mi página acepto sugerencias...
.encabezado{width:100%;height:4.4vh;background: yellow;display: flex; justify-content: center; align-items: center;}.headnav{width:100%;height:100%;display: flex; align-items: center; justify-content: center; list-style: none; text-align: center;}.headnav ul { list-style: none;}.headnav.level1{width:100%;height:100%;display: flex; justify-content: space-around; align-items: center;}.headnav.level1> li {position: relative;height:100%;display: flex;flex: auto; justify-content: center; align-items: center;border: solid 1px black;background: red;transition: background .5s;}.headnav.level1> li:hover {background: sandybrown;}.headnav li > ul {width:100%;position: absolute;top:-700%; max-height:0;overflow: hidden;transition: top .5s, max-height .5s;}.headnav li:hover > ul {top:100%; max-height: 1234px;overflow: visible;}.headnav ul li a {display: block;padding:0.2rem;background: palegoldenrod; border-radius: 24rem;border: solid 1px sandybrown;transition: background .5s, border .5s, color .5s;}.headnav ul li a:hover {background: goldenrod;border: solid 1px maroon;color: black;}.headnav.level1 ul li {position: relative;}.headnav.level1 ul ul { max-width:0;top:0;left:100%;transition: all 0.5s;}.headnav.level1 ul li:hover ul { max-width: 1234px;transition: all 2s;}
De igual manera, opacity en este caso no me sirve para nada porque el elemento se oculta pero sigue activo por lo que puede interferir en la experiencia de usuario lo cual me devuelve a jugar con el posicionamiento (top, left, etc), que tampoco es una buena práctica.
Total, mientras mi página funcione bien sin bugs, no tengo problema en seguir usando max-height
¿Cuáles son las propiedades que debo usar para que se vayan contando las veces que se dan clic al conejito?
un link que les puede interesar, para ver los css triggers (para ver todos en una lista completa, similar a la que se muestra en la clase -ojo, que no es la misma-)
Según veo, la mayor eficienca la ofrece Gecko, es momento de usar mas Mozilla.
Layout: Es el proceso de determinar la posición y tamaño de los elementos en la página web, así como su relación entre ellos. Este proceso es importante para definir la estructura de la página y se realiza mediante propiedades CSS como display, position, float, flexbox y grid.
Paint: Es el proceso de dibujar los píxeles en la pantalla basándose en el diseño establecido en el proceso de layout. En esta etapa se aplica el color, sombras, bordes, entre otros estilos a los elementos. Este proceso puede ser costoso en términos de rendimiento, por lo que es importante tener en cuenta las propiedades CSS que influyen en esta etapa, como background-color, box-shadow, border y transform.
Composite: Es el proceso de combinar todos los elementos de la página en una sola imagen para mostrarla en la pantalla. En esta etapa se determina el orden en que se superponen los elementos, se aplican las transparencias y se muestran los elementos que están en la misma capa. En este proceso se utilizan propiedades CSS como z-index, opacity y transform.
Y los spoilers 🤔 , alguien quiere pensar en los spoilers 😥
no se si a todos les pasa pero no me deja reproducir la clase numero 9 y 10 :/
siempre veo mis clsases en el ordenador, lo intente ver por la APP y nada :(
