YouTube

Got a YouTube account?

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

Japanese subtitles

← 02-10 Converting CSS to the CSSOM

02-10 Converting CSS to the CSSOM

Get Embed Code
6 Languages

Showing Revision 1 created 12/10/2014 by Udacity.

  1. DOMはページのコンテンツをキャプチャしますが
  2. さらに実際のページそのものを
  3. 表示する方法も理解する必要があります
  4. そのためにはCSSOMを構築する必要があります
  5. 名前から判断するとDOMに似ているようですね
  6. とても近いです 見てみましょう
  7. 以下のCSSを受信したとします
  8. ブラウザがすべき最初の作業は
  9. 正しいトークンの識別です
  10. しかし山括弧がありませんね
  11. はい
    CSSには適切なトークンを識別する方法について
  12. 独自のルールがあります
    しかし詳細は重要ではありません
  13. もし興味があれば
  14. 講師メモでCSSの説明のリンクを確認しましょう
  15. 重要なのはパーサがトークンを
    ノードへ変換することです
  16. またこの場合 最初はbodyで
  17. font-sizeプロパティがあります
    次に段落のノードがあります
  18. これは重要な部分です
  19. これはbodyの子です 表示されている
    すべての内容はbodyの一部分だからです
  20. 待ってください
    それはCSSの仕様上のルールなんでしょうか?
  21. まさにそのとおりです
  22. またbodyノードの子が
  23. 親の16ピクセルのfont-sizeという
    スタイリングのルールを継承することにも
  24. 注意してください
    これは次々に引き継がれるルールと
  25. カスケードスタイルシートであるということです
  26. 興味深いです DOM構築と似ていますが
  27. 少し違いますね というのもCSSのルールは
  28. カスケードダウンつまり
    滝のようにつながるからです
  29. スタイルシートが
    多くのルールを持つと分かりました
  30. ページ表示をより速くするために
    HTMLで行われるような
  31. 段階的なインクリメント処理と
    同じ方法を適用できますか?
  32. すばらしい質問ですが 残念ながら
  33. できません 部分的なCSSツリーを使えません
  34. なぜかを説明しましょう
    CSSの最初の数バイトを受信して
  35. 2つのルールが含まれているとしましょう
  36. すると処理を進めてCSSOMを構築します
  37. このツリーをページのレンダリングに使うことは
  38. 魅力的ですが問題があります
  39. CSSの次のチャンクを得て
    さらなるルールが含まれているとしましょう
  40. この場合 段落がfont-weight:normalです
    CSSはスタイルのプロパティを
  41. 再定義して改善することを許可します
    これは完全に有効ですが
  42. このルールがツリーのCSSの変更を
    許可する点に注意してください
  43. また段落ノードのテキストを
    normalの太さで表示します
  44. ツリーで部分的なCSSを
    実際には使えないということですね
  45. なぜならページをレンダリングする時
  46. 誤ったスタイルを用いることになるからですね
  47. そのとおりです
    CSSのすべてを受信して処理するまで
  48. ブラウザはページのレンダリングを妨げます
    CSSがブロックするのです