YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Spanish, Mexican subtitles

← 02-10 Convirtiendo CSS en CSSOM

Get Embed Code
6 Languages

Showing Revision 8 created 09/30/2014 by Fran Ontanaya.

  1. CSSOM
    Convirtiendo CSS en Modelo de Objeto CSS
  2. Vale, entonces el DOM captura
    el contenido de la página,
  3. pero también necesitamos saber
    cómo mostrar la página en sí.
  4. Y para hacerlo, necesitamos crear
    un Modelo de Objeto CSS.
  5. Y a juzgar por su nombre,
    ¿Supongo que similar al DOM?
  6. Se parece mucho.
    Vamos a checarlo.
  7. Digamos que hemos recibido
    la siguiente CSS.
  8. Lo primero que el navegador
    tiene que hacer
  9. es identificar los tokens correctos.
  10. Pero aquí no hay
    paréntesis angulares, ¿verdad?
  11. Sí. La CSS tiene su propio
    conjunto de reglas
  12. de cómo identificar tokens válidos.
  13. Los detalles no son tan importantes.
  14. Si tienes curiosidad, puedes checar
    el link de especificación
  15. en las notas del instructor.
  16. La parte importante es que el parser
    convierta los tokens en nodos
  17. y, en ese caso, el primero
    sería el cuerpo (body),
  18. con la propiedad font-size
    (tamaño de la fuente).
  19. Luego tendríamos el nodo del párrafo
    y esta es la parte importante.
  20. Es como un hijo del cuerpo,
  21. porque todo el contenido visible
    es parte del cuerpo.
  22. Espera, ¿es esa alguna regla
    de especificación de la CSS?
  23. Sí. Exacto.
  24. Además, observa que
    el hijo del nodo del cuerpo
  25. hereda las reglas de estilo de su padre
  26. del tamaño de fuente de 16 píxeles.
  27. A esto es a lo que nos referimos
    con reglas en cascada
  28. y con hojas de estilo
    en cascada (CSS).
  29. Interesante. Entonces es parecido,
    pero no exactamente lo mismo
  30. que la construcción del DOM,
    porque las reglas de CSS
  31. son en cascada hacia abajo. Curioso.
  32. Veamos, tengo una hoja
    de estilo con muchas reglas.
  33. ¿Podríamos también aplicar el mismo truco
    de procesamiento progresivo,
  34. como hacemos con HTML,
  35. para hacer que la página
    se muestre más rápido?
  36. Es una gran pregunta.
    Desafortunadamente, no podemos.
  37. No podemos usar un árbol de CSS parcial.
    Deja que te muestre por qué.
  38. Digamos que acabamos de recibir
    los primeros bytes de nuestra CSS
  39. y contiene las dos reglas
    que tenemos aquí.
  40. Entonces, seguimos adelante
  41. y creamos el Modelo de Objeto CSS.
  42. Es tentador usar este árbol
    para renderizar una página.
  43. Pero hay un problema.
  44. Digamos que ahora obtenemos
    el siguiente fragmento de CSS
  45. que contiene más reglas.
  46. En este caso, tenemos
    el párrafo p: {font-weight: normal}
  47. La CSS nos permite redefinir y refinar
    las propiedades del estilo
  48. Esto es perfectamente válido.
  49. Pero observa que esta regla
  50. nos permitiría cambiar
    nuestra CSS del árbol
  51. y hacer que el texto en el nodo
    del párrafo se muestre con weight: normal.
  52. Entonces, eso es un "¡te pillé!".
  53. Estás diciendo que en realidad
    no podemos usar
  54. una CSS parcial del árbol,
    porque podría llevarnos a utilizar
  55. estilos incorrectos
    cuando rendericemos la página.
  56. Exacto, el navegador bloquea
    el renderizado de la página,
  57. hasta que reciba y procese todas las CSS.
  58. La CSS es una bloqueadora de renderizado.