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

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

Transcript

1. ϒϥ΢βͷσϑΥϧτελΠϧΛݟͯΈΑ͏
   USER AGENT STYLESHEETS
   

   View Slide

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
   

   View Slide

3. มଶత$44τϦοΫ
   $44ͱ͍͑͹
   ΋͠XFCۀքͷྲྀߦޠେ৆͕͋ͬͨΒɺ͖ͬͱʮมଶత$44ʯɺ
   ΋͘͠͸ʮมଶతʓʓʯ͕ड৆͍ͯ͠ΔͩΖ͏ ˘Т˘
   
   

   View Slide

4. 0
   1
   2
   3
   4
   5
   6
   ͖͔͚ͬ
   ϨϯμϦϯάΤϯδϯ MBZPVUFOHJOF
   
   6"ελΠϧγʔτ͸Ͳ͜Ͱ֬ೝͰ͖Δͷ͔
   ֤ϒϥ΢βͷελΠϧ͕࣮͸ڞ௨͍ͯ͠Δʁ
   ࿦ཧతͳϓϩύςΟͱ஋
   Ξ΢τϥΠϯɾΞϧΰϦζϜ
   ·ͱΊ
   CONTENTS
   

   View Slide

5. ͖͔͚ͬ
   6OSFTFU$44Λ࡞Δʹ͋ͨͬͯɺ

   ֤ϒϥ΢βͷσϑΥϧτελΠϧʹ͍ͭͯௐ΂·ͨ͠ɻ

   IUUQTHJUIVCDPNJYLBJUPVOSFTFUDTT
   0
   

   View Slide

6. ϨϯμϦϯάΤϯδϯLAYOUT ENGINE
   ϒϥ΢βͷσϑΥϧτελΠϧ͸ɺϢʔβΤʔδΣϯτ 6"
   ελΠϧγʔ
   τͱݺ͹Ε͓ͯΓɺجຊతʹ͸ϨϯμϦϯάΤϯδϯʹґଘ͠·͢ɻ
   ֤ϒϥ΢β͸ͲͷϨϯμϦϯάΤϯδϯΛ࠾༻͍ͯ͠ΔͰ͠ΐ͏͔ʁ
   1
   

   View Slide

7. Firefox Gecko
   Chromium/Chrome 28 Ҏ্, Opera 15 Blink
   Safari, Chrome 27 ҎԼ, Opera 14 Webkit
   Opera 7-12 Presto
   Internet Explorer Trident
   Edge EdgeHTML
   

   View Slide

8. 2֤ϒϥ΢β ϨϯμϦϯάΤϯδϯ
   ͷ
   σϑΥϧτελΠϧγʔτ͸
   Ͳ͜Ͱ֬ೝͰ͖Δͷ͔ʁ
   

   View Slide

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ϑΝΠ
   ϧ͕ϑΥϧμʹ·ͱΊΒΕ͍ͯ·͢ɻ
   

   View Slide

10. 3 ֤ϒϥ΢βͷελΠϧ͕࣮͸
    ڞ௨͍ͯ͠Δʁ
    

    View Slide

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;
    }
    

    View Slide

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ͳͲ͸
    ࿦ཧϓϩύςΟ ޙड़
    ͱݺ͹Εɺࠨ͔Βӈͷԣॻ͖ʹ͓͍ͯɺ
    

    View Slide

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;
    }
    

    View Slide

14. &EHFҎ֎΄΅ಉ͡
    

    View Slide

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;
    }
    

    View Slide

16. Iಉ༷
    &EHFҎ֎΄΅ಉ͡
    

    View Slide

17. ࣮͸ଟ͘ͷλάʹ͍ͭͯɺ
    ֤ϒϥ΢βͰڞ௨ͨ͠ελΠϧ͕ઃఆ͞Ε͍ͯ·͢ɻ
    

    View Slide

18. 4
    ࿦ཧతͳϓϩύςΟͱ஋
    

    View Slide

19. ԣॻ͖͔ɺॎॻ͖͔ɺࠨ͔Βӈ͔ɺӈ͔Βࠨ͔ͳͲͷ
    ॻࣈํ޲ʹରԠ͢Δ͜ͱΛҙຯ͠·͢ɻ͜Εʹରͯ͠ɺ
    ීஈզʑ͕Α͘࢖͍ͬͯΔ΋ͷ͸෺ཧతͳϓϩύςΟ
    ͱ஋Ͱ͋ΓɺϖʔδશମʹରԠͨ͠΋ͷͰ͢ɻ
    ࿦ཧతͱ͸
    

    View Slide

20. margin-block-start: 2em;
    -webkit-margin-before: 2em;
    margin-before: 2em;
    ԣॻ͖ ॎॻ͖
    ྫ
    

    View Slide

21. ࿦ཧతͳϓϩύςΟͱ஋͸ɺ

    XSJUJOHNPEFϓϩύςΟͱͷ૊Έ߹Θͤ΍ɺ

    ॎॻ͖͕ෆՄܽͰ͋Δిࢠॻ੶ͳͲͰͷ׆༻͕ظ଴͞Ε·͢ɻ
    

    View Slide

22. 5 Ξ΢τϥΠϯɾΞϧΰϦζϜ
    

    View Slide

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;
    }
    

    View Slide

24. ηΫγϣχϯάɾίϯςϯπͭͷ৔߹͸Iͱಉ͡ελΠϧɺ

    ηΫγϣχϯάɾίϯςϯπͭͷ৔߹͸Iͱಉ͡ελΠϧɺ

    ࠷େͰηΫγϣχϯάɾίϯςϯπͭͰIͱಉ͡ελΠϧͱͳΔΑ͏ઃఆ͞Ε͓ͯΓɺ
    ηΫγϣχϯάɾίϯςϯπͷਂ౓ʹΑͬͯɺIͷݟͨ໨͕มΘΓ·͢ɻ
    

    View Slide

25. ·ͱΊ
    6
    

    View Slide

26. SER AGENT STYLESHEETS
    6"ελΠϧγʔτΛಡΉ͜ͱͰɺ
    ίʔυͷແବΛݮΒ͠ɺະདྷͷ৽ػೳʹඋ͑Α͏ʂ
    

    View Slide

27. HAPPY CSS LIFE!
    THANK YOU!
    

    View Slide