ブラウザのデフォルトスタイルを見てみよう

ユーザエージェントスタイルシートを読むことで、コードの無駄を減らし、未来の新機能に備えよう！

Transcript

1. ϒϥ΢βͷσϑΥϧτελΠϧΛݟͯΈΑ͏ USER AGENT STYLESHEETS
2. WordPress core contributor Kite KITERETZ inc. CEO & Founder kite.koga ixkaito ixkaito Web & graphic designer Programmer Ruby on Rails contributor React contributor Wocker developer Bathe developer Frasco developer
3. มଶత
   $44
   τϦοΫ $44
   ͱ͍͑͹ ΋͠
   XFC
   ۀքͷྲྀߦޠେ৆͕͋ͬͨΒɺ͖ͬͱʮมଶత
   $44ʯɺ ΋͘͠͸ʮมଶతʓʓʯ͕ड৆͍ͯ͠ΔͩΖ͏
   
   ˘Т˘
   
4. 0 1 2 3 4 5 6 ͖͔͚ͬ
   ϨϯμϦϯάΤϯδϯ
   MBZPVU
   FOHJOF
   6"ελΠϧγʔτ͸Ͳ͜Ͱ֬ೝͰ͖Δͷ͔
   ֤ϒϥ΢βͷελΠϧ͕࣮͸ڞ௨͍ͯ͠Δʁ
   ࿦ཧతͳϓϩύςΟͱ஋
   Ξ΢τϥΠϯɾΞϧΰϦζϜ
   ·ͱΊ CONTENTS
5. ͖͔͚ͬ 6OSFTFU
   $44
   Λ࡞Δʹ͋ͨͬͯɺ
 ֤ϒϥ΢βͷσϑΥϧτελΠϧʹ͍ͭͯௐ΂·ͨ͠ɻ
 IUUQTHJUIVCDPNJYLBJUPVOSFTFUDTT 0
6. ϨϯμϦϯάΤϯδϯ
   LAYOUT ENGINE ϒϥ΢βͷσϑΥϧτελΠϧ͸ɺϢʔβΤʔδΣϯτ
   6"
   ελΠϧγʔ τͱݺ͹Ε͓ͯΓɺجຊతʹ͸ϨϯμϦϯάΤϯδϯʹґଘ͠·͢ɻ
   ֤ϒϥ΢β͸ͲͷϨϯμϦϯάΤϯδϯΛ࠾༻͍ͯ͠ΔͰ͠ΐ͏͔ʁ 1
7. Firefox Gecko Chromium/Chrome 28 Ҏ্, Opera 15 Blink Safari, Chrome 27 ҎԼ, Opera 14 Webkit Opera 7-12 Presto Internet Explorer Trident Edge EdgeHTML
8. 2֤ϒϥ΢β
   ϨϯμϦϯάΤϯδϯ
   ͷ
   σϑΥϧτελΠϧγʔτ͸
   Ͳ͜Ͱ֬ೝͰ͖Δͷ͔ʁ
9. Gecko (Firefox)
 https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css Blink (Chromium/Chrome 28+, Opera 15+)
 https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css Webkit (Safari, Chrome before 28, Opera 14)
 http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css Presto (Opera 7 to 12)
 http://www.iecss.com/opera-10.51.css Trident (Internet Explorer)
 http://www.iecss.com/ie-9.css Edge (EdgeHTML)
 http://www.iecss.com/edgehtml-13.10586.css 6OSFTFU
   $44
   ͷ
   3&"%.&
   ʹ΋ৄࡉ͕ه ࡌ͞Ε͍ͯ·͢ɻ͞Βʹɺ֤
   $44
   ϑΝΠ ϧ͕ϑΥϧμʹ·ͱΊΒΕ͍ͯ·͢ɻ
10. 3 ֤ϒϥ΢βͷελΠϧ͕࣮͸
    ڞ௨͍ͯ͠Δʁ
11. h1 h1 { display: block; font-size: 2em; font-weight: bold; margin-block-start: .67em; margin-block-end: .67em; } Gecko (Firefox) Blink (Chrome, Opera) Webkit (Safari) h1 { display: block; font-size: 2em; -webkit-margin-before: 0.67__qem; -webkit-margin-after: 0.67em; -webkit-margin-start: 0; -webkit-margin-end: 0; font-weight: bold } h1 { display: block; font-size: 2em; -webkit-margin-before: 0.67__qem; -webkit-margin-after: 0.67em; -webkit-margin-start: 0; -webkit-margin-end: 0; font-weight: bold; } Internet Explorer Edge Presto (Opera before 28) h1 { display: block; font-size: 2em; font-weight: bold; margin: 0.67em 0; page-break-after: avoid; } h1 { display: block; font-weight: 700; margin-bottom: 0.5em; margin-top: 0.5em; page-break-after: avoid; } h1 { display: block; font-size: 2em; font-weight: bold; margin: 0.67em 0; page-break-after: avoid; }
12. margin-block-start = -webkit-margin-before = margin-top
 margin-block-end = -webkit-margin-after = margin-bottom margin-inline-start = -webkit-margin-start = margin-left margin-inline-end = -webkit-margin-end = margin-right ͜ΕΛ౿·͑ͯ΋͏Ұ౓֤ϒϥ΢βͷ
    I
    λάͷελΠϧΛݟͯΈ·͠ΐ͏ margin-block-start
    ΍
    -webkit-margin-before
    ͳͲ͸ ࿦ཧϓϩύςΟ
    ޙड़
    ͱݺ͹Εɺࠨ͔Βӈͷԣॻ͖ʹ͓͍ͯɺ
13. h1 h1 { display: block; font-size: 2em; font-weight: bold; margin-block-start: .67em; margin-block-end: .67em; } Gecko (Firefox) Blink (Chrome, Opera) Webkit (Safari) h1 { display: block; font-size: 2em; -webkit-margin-before: 0.67__qem; -webkit-margin-after: 0.67em; -webkit-margin-start: 0; -webkit-margin-end: 0; font-weight: bold } h1 { display: block; font-size: 2em; -webkit-margin-before: 0.67__qem; -webkit-margin-after: 0.67em; -webkit-margin-start: 0; -webkit-margin-end: 0; font-weight: bold; } Internet Explorer Edge Presto (Opera before 28) h1 { display: block; font-size: 2em; font-weight: bold; margin: 0.67em 0; page-break-after: avoid; } h1 { display: block; font-weight: 700; margin-bottom: 0.5em; margin-top: 0.5em; page-break-after: avoid; } h1 { display: block; font-size: 2em; font-weight: bold; margin: 0.67em 0; page-break-after: avoid; }
14. &EHF
    Ҏ֎΄΅ಉ͡
15. h2 h2 { display: block; font-size: 1.5em; font-weight: bold; margin-block-start: .83em; margin-block-end: .83em; } Gecko (Firefox) Blink (Chrome, Opera) Webkit (Safari) h2 { display: block; font-size: 1.5em; -webkit-margin-before: 0.83__qem; -webkit-margin-after: 0.83em; -webkit-margin-start: 0; -webkit-margin-end: 0; font-weight: bold } h2 { display: block; font-size: 1.5em; -webkit-margin-before: 0.83__qem; -webkit-margin-after: 0.83em; -webkit-margin-start: 0; -webkit-margin-end: 0; font-weight: bold; } Internet Explorer Edge Presto (Opera before 28) h2 { display: block; font-size: 1.5em; font-weight: bold; margin: 0.83em 0; page-break-after: avoid; } h2 { display: block; font-weight: 700; margin-bottom: 0.5em; margin-top: 0.5em; page-break-after: avoid; } h2 { display: block; font-size: 1.5em; font-weight: bold; margin: 0.83em 0; }
16. I
    ಉ༷ &EHF
    Ҏ֎΄΅ಉ͡
17. ࣮͸ଟ͘ͷλάʹ͍ͭͯɺ
    ֤ϒϥ΢βͰڞ௨ͨ͠ελΠϧ͕ઃఆ͞Ε͍ͯ·͢ɻ
18. 4 ࿦ཧతͳϓϩύςΟͱ஋
19. ԣॻ͖͔ɺॎॻ͖͔ɺࠨ͔Βӈ͔ɺӈ͔Βࠨ͔ͳͲͷ ॻࣈํ޲ʹରԠ͢Δ͜ͱΛҙຯ͠·͢ɻ͜Εʹରͯ͠ɺ ීஈզʑ͕Α͘࢖͍ͬͯΔ΋ͷ͸෺ཧతͳϓϩύςΟ ͱ஋Ͱ͋ΓɺϖʔδશମʹରԠͨ͠΋ͷͰ͢ɻ ࿦ཧతͱ͸
20. margin-block-start: 2em; -webkit-margin-before: 2em; margin-before: 2em; ԣॻ͖ ॎॻ͖ ྫ
21. ࿦ཧతͳϓϩύςΟͱ஋͸ɺ
 XSJUJOHNPEF
    ϓϩύςΟͱͷ૊Έ߹Θͤ΍ɺ
 ॎॻ͖͕ෆՄܽͰ͋Δిࢠॻ੶ͳͲͰͷ׆༻͕ظ଴͞Ε·͢ɻ
22. 5 Ξ΢τϥΠϯɾΞϧΰϦζϜ
23. 8FCLJU
    ΍
    (FDLP
    ͷ
    I
    ʹ஫໨͢Δͱɺ
 BSUJDMF
    BTJEF
    OBW
    TFDUJPO
    ಺ͷ
    I
    ʹ
 ผͷελΠϧ͕ઃఆ͞Ε͍ͯΔ͜ͱʹؾ͖ͮ·͢ɻ :-webkit-any(article,aside,nav,section) h1 { font-size: 1.5em; -webkit-margin-before: 0.83__qem; -webkit-margin-after: 0.83em; } :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 { font-size: 1.17em; -webkit-margin-before: 1__qem; -webkit-margin-after: 1em; }
24. ηΫγϣχϯάɾίϯςϯπͭͷ৔߹͸
    I
    ͱಉ͡ελΠϧɺ
 ηΫγϣχϯάɾίϯςϯπͭͷ৔߹͸
    I
    ͱಉ͡ελΠϧɺ
 ࠷େͰηΫγϣχϯάɾίϯςϯπͭͰ
    I
    ͱಉ͡ελΠϧͱͳΔΑ͏ઃఆ͞Ε͓ͯΓɺ ηΫγϣχϯάɾίϯςϯπͷਂ౓ʹΑͬͯɺI
    ͷݟͨ໨͕มΘΓ·͢ɻ
25. ·ͱΊ 6
26. SER AGENT STYLESHEETS 6"ελΠϧγʔτΛಡΉ͜ͱͰɺ ίʔυͷແବΛݮΒ͠ɺະདྷͷ৽ػೳʹඋ͑Α͏ʂ
27. HAPPY CSS LIFE! THANK YOU!