css_value_processing_tgif_20181130.pdf

CSS プロパティの値が決まるまでの工程をざっくり説明したスライドです。社内LTで発表しました。詳しくはW3C のドキュメントの以下のページで定義されているので、興味のある方は参照してください。
https://www.w3.org/TR/css-cascade-3/#value-stages

Transcript

1. CSSϓϩύςΟͷ஋͕ܾ·Δ·Ͱ ʙW3CυΩϡϝϯτʹજΔཱྀʙ 2018/11/30 ᖂᖒ ࢙࠸
2. CSS Α͘࢖͍·͢ΑͶ ʢ۪໰ʣ
3. CSS ͷ஋ͬͯɺͲ͏΍ͬͯ ܾ·ͬͯΔΜͰ͠ΐ͏Ͷ ʢ۪໰ʣ
4. W3C ͷυΩϡϝϯτΛಡΜͰΈ ·ͨ͠ɻ ʢ۪ߦʣ
5. https://www.w3.org/TR/css-cascade-3/#value-stages
6. ղઆ͍͖ͯ͠·͢Μ ʢ۪ʣ
7. એݴ஋ (Declared Value) … ϓϩύςΟͷ஋Λྻڍ ࢓༷஋ (Specified Value) … ΧεέʔσΟϯά ܭࢉ஋ (Computed Value) … ઈର஋ʹม׵ ࢖༻஋ (Used Value) … ઈର஋ʹม׵ʢ਌ࢠؔ܎Λߟྀʣ ࣮ࡍ஋ (Actual Value) … ֤ϒϥ΢βͷ࢓༷ʹ४ڌ 1 2 3 4 5
8. એݴ஋ (Declared Value) … ϓϩύςΟͷ஋Λྻڍ ࢓༷஋ (Specified Value) … ΧεέʔσΟϯά ܭࢉ஋ (Computed Value) … ઈର஋ʹม׵ ࢖༻஋ (Used Value) … ઈର஋ʹม׵ʢ਌ࢠؔ܎Λߟྀʣ ࣮ࡍ஋ (Actual Value) … ֤ϒϥ΢βͷ࢓༷ʹ४ڌ 1 2 3 4 5
9. એݴ஋ (Declared Value) … ϓϩύςΟͷ஋Λྻڍ 1 ɾCSSϑΝΠϧʹ͋ΔϓϩύςΟ ͷ஋Λͱʹ͔͘ྻڍɻ ɾ͜͜ͰͲͷHTMLཁૉʹ͍ͭ͘ ஋͕͋Δ͔ʢ·ͨ͸ͳ͍͔ʣΛ ໌֬ʹ͢Δɻ ※ ΠϝʔδͰ͢
10. એݴ஋ (Declared Value) … ϓϩύςΟͷ஋Λྻڍ ࢓༷஋ (Specified Value) … ΧεέʔσΟϯά ܭࢉ஋ (Computed Value) … ઈର஋ʹม׵ ࢖༻஋ (Used Value) … ઈର஋ʹม׵ʢ਌ࢠؔ܎Λߟྀʣ ࣮ࡍ஋ (Actual Value) … ֤ϒϥ΢βͷ࢓༷ʹ४ڌ 1 2 3 4 5
11. 1 ࢓༷஋ (Specified Value) … ΧεέʔσΟϯά 2 ɾΧεέʔσΟϯάͱΑ͹ΕΔ ޻ఔΛ౿Ήɻ → ϓϩύςΟͷ஋ͷ͏ͪɺͲΕ ͕ద༻͞ΕΔ΂͖͔Λܾఆ͢Δɻ ※ ΠϝʔδͰ͢
12. એݴ஋ (Declared Value) … ϓϩύςΟͷ஋Λྻڍ ࢓༷஋ (Specified Value) … ΧεέʔσΟϯά ܭࢉ஋ (Computed Value) … ઈର஋ʹม׵ ࢖༻஋ (Used Value) … ઈର஋ʹม׵ʢ਌ࢠؔ܎Λߟྀʣ ࣮ࡍ஋ (Actual Value) … ֤ϒϥ΢βͷ࢓༷ʹ४ڌ 1 2 3 4 5
13. 1 ܭࢉ஋ (Computed Value) … ઈର஋ʹม׵ 3 ɾ૬ର஋Λઈର஋ʹม׵͢Δɻ → auto, initial, inherit ͳͲɺ਺஋ Ͱ͸ͳ͍஋Λ਺஋ʹม׵͢Δɻ →͜ͷ࣌఺Ͱม׵Ͱ͖ͳ͍஋΋ ͋Δɻ ※ ΠϝʔδͰ͢
14. એݴ஋ (Declared Value) … ϓϩύςΟͷ஋Λྻڍ ࢓༷஋ (Specified Value) … ΧεέʔσΟϯά ܭࢉ஋ (Computed Value) … ઈର஋ʹม׵ ࢖༻஋ (Used Value) … ઈର஋ʹม׵ʢ਌ࢠؔ܎Λߟྀʣ ࣮ࡍ஋ (Actual Value) … ֤ϒϥ΢βͷ࢓༷ʹ४ڌ 1 2 3 4 5
15. 1 ࢖༻஋ (Used Value) … ઈର஋ʹม׵ʢ਌ࢠؔ܎Λߟྀʣ 4 ɾ૬ର஋Λઈର஋ʹม׵͢Δɻ → HTMLͷϨΠΞ΢τ͕ܾ·ͬͯ ͔ΒͰͳ͍ͱܭࢉͰ͖ͳ͍஋Λ ม׵͢Δɻ ※਌ཁૉͷ width: inherit; ͳͲɻ ※ ΠϝʔδͰ͢
16. એݴ஋ (Declared Value) … ϓϩύςΟͷ஋Λྻڍ ࢓༷஋ (Specified Value) … ΧεέʔσΟϯά ܭࢉ஋ (Computed Value) … ઈର஋ʹม׵ ࢖༻஋ (Used Value) … ઈର஋ʹม׵ʢ਌ࢠؔ܎Λߟྀʣ ࣮ࡍ஋ (Actual Value) … ֤ϒϥ΢βͷ࢓༷ʹ४ڌ 1 2 3 4 5
17. 1 ࣮ࡍ஋ (Actual Value) … ֤ϒϥ΢βͷ࢓༷ʹ४ڌ 5 ɾ֤ϒϥ΢β͕ཧղͰ͖Δ਺஋ ʹม׵͢Δɻ →ϒϥ΢βʹΑͬͯখ਺఺ҎԼ ͷѻ͍͕ඍົʹҧͬͨΓ͢Δɻ ※ ΠϝʔδͰ͢
18. એݴ஋ (Declared Value) … ϓϩύςΟͷ஋Λྻڍ ࢓༷஋ (Specified Value) … ΧεέʔσΟϯά ܭࢉ஋ (Computed Value) … ઈର஋ʹม׵ ࢖༻஋ (Used Value) … ઈର஋ʹม׵ʢ਌ࢠؔ܎Λߟྀʣ ࣮ࡍ஋ (Actual Value) … ֤ϒϥ΢βͷ࢓༷ʹ४ڌ 1 2 3 4 5
19. એݴ஋ (Declared Value) … ϓϩύςΟͷ஋Λྻڍ ࢓༷஋ (Specified Value) … ΧεέʔσΟϯά ܭࢉ஋ (Computed Value) … ઈର஋ʹม׵ ࢖༻஋ (Used Value) … ઈର஋ʹม׵ʢ਌ࢠؔ܎Λߟྀʣ ࣮ࡍ஋ (Actual Value) … ֤ϒϥ΢βͷ࢓༷ʹ४ڌ 1 2 3 4 5 ͜ΕΒ͢΂ͯͷ ϓϩηεΛܦͯɺ ΍ͬͱϒϥ΢βʹ ϨϯμϦϯά͞ΕΔʂ
21. END