Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Kite
January 29, 2017

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

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

Kite

January 29, 2017
Tweet

More Decks by Kite

Other Decks in Programming

Transcript

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

    View full-size 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 full-size slide

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

    View full-size slide

  4. 0
    1
    2
    3
    4
    5
    6
    ͖͔͚ͬ
    ϨϯμϦϯάΤϯδϯ MBZPVUFOHJOF

    6"ελΠϧγʔτ͸Ͳ͜Ͱ֬ೝͰ͖Δͷ͔
    ֤ϒϥ΢βͷελΠϧ͕࣮͸ڞ௨͍ͯ͠Δʁ
    ࿦ཧతͳϓϩύςΟͱ஋
    Ξ΢τϥΠϯɾΞϧΰϦζϜ
    ·ͱΊ
    CONTENTS

    View full-size slide

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

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

    IUUQTHJUIVCDPNJYLBJUPVOSFTFUDTT
    0

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  14. &EHFҎ֎΄΅ಉ͡

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size 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 full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

  26. HAPPY CSS LIFE!
    THANK YOU!

    View full-size slide