No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

CSS Triggers: layout, paint y composite

9/12
Recursos

Aportes 8

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Este curso es lo máximo. Lo único malo es que si no viste la peli te comes spoilers 😄

  • Composite: Ordena las partes de la página. Propiedades como opacity y transform.

  • Paint: Rellena píxeles. Implica colores, imágenes, textos, sombras…

  • Layout: Diseño de la página. Ancho, margin, padding, border…

Hay una extensión de VSCode donde te muestra su procesamiento que debe utilizar el navegador para que se ejecute en nuestra pantalla. La extensión se llama CSS Triggers

Aquí la pagina que la profe usa
👇
CSS Triggers

Recomiendo ver esta lectura, cuenta con GIF y ilustraciones que te permitirán entender mejor como funcionan los procesos.
link: https://developers.google.com/web/updates/2018/09/inside-browser-part3

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.

Notas de la clase

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