ユーザエージェントスタイルシートを読むことで、コードの無駄を減らし、未来の新機能に備えよう!
ϒϥβͷσϑΥϧτελΠϧΛݟͯΈΑ͏USER AGENT STYLESHEETS
View Slide
WordPress core contributorKiteKITERETZ inc. CEO & Founderkite.koga ixkaito ixkaitoWeb & graphic designerProgrammerRuby on Rails contributorReact contributorWocker developerBathe developerFrasco developer
มଶత$44τϦοΫ$44ͱ͍͑͠XFCۀքͷྲྀߦޠେ͕͋ͬͨΒɺ͖ͬͱʮมଶత$44ʯɺ͘͠ʮมଶతʓʓʯ͕ड͍ͯ͠ΔͩΖ͏ ˘Т˘
0123456͖͔͚ͬϨϯμϦϯάΤϯδϯ MBZPVUFOHJOF6"ελΠϧγʔτͲ͜Ͱ֬ೝͰ͖Δͷ͔֤ϒϥβͷελΠϧ͕࣮ڞ௨͍ͯ͠ΔʁཧతͳϓϩύςΟͱΞτϥΠϯɾΞϧΰϦζϜ·ͱΊCONTENTS
͖͔͚ͬ6OSFTFU$44Λ࡞Δʹ͋ͨͬͯɺ ֤ϒϥβͷσϑΥϧτελΠϧʹ͍ͭͯௐ·ͨ͠ɻ IUUQTHJUIVCDPNJYLBJUPVOSFTFUDTT0
ϨϯμϦϯάΤϯδϯLAYOUT ENGINEϒϥβͷσϑΥϧτελΠϧɺϢʔβΤʔδΣϯτ 6"ελΠϧγʔτͱݺΕ͓ͯΓɺجຊతʹϨϯμϦϯάΤϯδϯʹґଘ͠·͢ɻ֤ϒϥβͲͷϨϯμϦϯάΤϯδϯΛ࠾༻͍ͯ͠ΔͰ͠ΐ͏͔ʁ1
Firefox GeckoChromium/Chrome 28 Ҏ্, Opera 15 BlinkSafari, Chrome 27 ҎԼ, Opera 14 WebkitOpera 7-12 PrestoInternet Explorer TridentEdge EdgeHTML
2֤ϒϥβ ϨϯμϦϯάΤϯδϯͷσϑΥϧτελΠϧγʔτͲ͜Ͱ֬ೝͰ͖Δͷ͔ʁ
Gecko (Firefox) https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.cssBlink (Chromium/Chrome 28+, Opera 15+) https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.cssWebkit (Safari, Chrome before 28, Opera 14) http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.cssPresto (Opera 7 to 12) http://www.iecss.com/opera-10.51.cssTrident (Internet Explorer) http://www.iecss.com/ie-9.cssEdge (EdgeHTML) http://www.iecss.com/edgehtml-13.10586.css6OSFTFU$44ͷ3&"%.&ʹৄࡉ͕هࡌ͞Ε͍ͯ·͢ɻ͞Βʹɺ֤$44ϑΝΠϧ͕ϑΥϧμʹ·ͱΊΒΕ͍ͯ·͢ɻ
3 ֤ϒϥβͷελΠϧ͕࣮ڞ௨͍ͯ͠Δʁ
h1h1 {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 EdgePresto (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;}
margin-block-start = -webkit-margin-before = margin-top margin-block-end = -webkit-margin-after = margin-bottommargin-inline-start = -webkit-margin-start = margin-leftmargin-inline-end = -webkit-margin-end = margin-right͜ΕΛ౿·͑ͯ͏Ұ֤ϒϥβͷIλάͷελΠϧΛݟͯΈ·͠ΐ͏margin-block-start-webkit-margin-beforeͳͲཧϓϩύςΟ ޙड़ͱݺΕɺࠨ͔Βӈͷԣॻ͖ʹ͓͍ͯɺ
&EHFҎ֎΄΅ಉ͡
h2h2 {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 EdgePresto (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;}
Iಉ༷&EHFҎ֎΄΅ಉ͡
࣮ଟ͘ͷλάʹ͍ͭͯɺ֤ϒϥβͰڞ௨ͨ͠ελΠϧ͕ઃఆ͞Ε͍ͯ·͢ɻ
4ཧతͳϓϩύςΟͱ
ԣॻ͖͔ɺॎॻ͖͔ɺࠨ͔Βӈ͔ɺӈ͔Βࠨ͔ͳͲͷॻࣈํʹରԠ͢Δ͜ͱΛҙຯ͠·͢ɻ͜Εʹରͯ͠ɺීஈզʑ͕Α͍ͬͯ͘ΔͷཧతͳϓϩύςΟͱͰ͋ΓɺϖʔδશମʹରԠͨ͠ͷͰ͢ɻཧతͱ
margin-block-start: 2em;-webkit-margin-before: 2em;margin-before: 2em;ԣॻ͖ ॎॻ͖ྫ
ཧతͳϓϩύςΟͱɺ XSJUJOHNPEFϓϩύςΟͱͷΈ߹Θͤɺ ॎॻ͖͕ෆՄܽͰ͋Δిࢠॻ੶ͳͲͰͷ׆༻͕ظ͞Ε·͢ɻ
5 ΞτϥΠϯɾΞϧΰϦζϜ
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;}
ηΫγϣχϯάɾίϯςϯπͭͷ߹Iͱಉ͡ελΠϧɺ ηΫγϣχϯάɾίϯςϯπͭͷ߹Iͱಉ͡ελΠϧɺ ࠷େͰηΫγϣχϯάɾίϯςϯπͭͰIͱಉ͡ελΠϧͱͳΔΑ͏ઃఆ͞Ε͓ͯΓɺηΫγϣχϯάɾίϯςϯπͷਂʹΑͬͯɺIͷݟ͕ͨมΘΓ·͢ɻ
·ͱΊ6
SER AGENT STYLESHEETS6"ελΠϧγʔτΛಡΉ͜ͱͰɺίʔυͷແବΛݮΒ͠ɺະདྷͷ৽ػೳʹඋ͑Α͏ʂ
HAPPY CSS LIFE!THANK YOU!