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

274c474bb14a19f48ee86907c5be2a1d?s=47 Kite
January 29, 2017

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

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

274c474bb14a19f48ee86907c5be2a1d?s=128

Kite

January 29, 2017
Tweet

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 ͖͔͚ͬ ϨϯμϦϯάΤϯδϯ MBZPVUFOHJOF

     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!