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

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!