Slide 1
Slide 1 text
ϒϥβͷσϑΥϧτελΠϧΛݟͯΈΑ͏
USER AGENT STYLESHEETS
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
มଶత$44τϦοΫ
$44ͱ͍͑
͠XFCۀքͷྲྀߦޠେ͕͋ͬͨΒɺ͖ͬͱʮมଶత$44ʯɺ
͘͠ʮมଶతʓʓʯ͕ड͍ͯ͠ΔͩΖ͏ ˘Т˘
Slide 4
Slide 4 text
0
1
2
3
4
5
6
͖͔͚ͬ
ϨϯμϦϯάΤϯδϯ MBZPVUFOHJOF
6"ελΠϧγʔτͲ͜Ͱ֬ೝͰ͖Δͷ͔
֤ϒϥβͷελΠϧ͕࣮ڞ௨͍ͯ͠Δʁ
ཧతͳϓϩύςΟͱ
ΞτϥΠϯɾΞϧΰϦζϜ
·ͱΊ
CONTENTS
Slide 5
Slide 5 text
͖͔͚ͬ
6OSFTFU$44Λ࡞Δʹ͋ͨͬͯɺ
֤ϒϥβͷσϑΥϧτελΠϧʹ͍ͭͯௐ·ͨ͠ɻ
IUUQTHJUIVCDPNJYLBJUPVOSFTFUDTT
0
Slide 6
Slide 6 text
ϨϯμϦϯάΤϯδϯLAYOUT ENGINE
ϒϥβͷσϑΥϧτελΠϧɺϢʔβΤʔδΣϯτ 6"
ελΠϧγʔ
τͱݺΕ͓ͯΓɺجຊతʹϨϯμϦϯάΤϯδϯʹґଘ͠·͢ɻ
֤ϒϥβͲͷϨϯμϦϯάΤϯδϯΛ࠾༻͍ͯ͠ΔͰ͠ΐ͏͔ʁ
1
Slide 7
Slide 7 text
Firefox Gecko
Chromium/Chrome 28 Ҏ্, Opera 15 Blink
Safari, Chrome 27 ҎԼ, Opera 14 Webkit
Opera 7-12 Presto
Internet Explorer Trident
Edge EdgeHTML
Slide 8
Slide 8 text
2֤ϒϥβ ϨϯμϦϯάΤϯδϯ
ͷ
σϑΥϧτελΠϧγʔτ
Ͳ͜Ͱ֬ೝͰ͖Δͷ͔ʁ
Slide 9
Slide 9 text
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ϑΝΠ
ϧ͕ϑΥϧμʹ·ͱΊΒΕ͍ͯ·͢ɻ
Slide 10
Slide 10 text
3 ֤ϒϥβͷελΠϧ͕࣮
ڞ௨͍ͯ͠Δʁ
Slide 11
Slide 11 text
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;
}
Slide 12
Slide 12 text
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ͳͲ
ཧϓϩύςΟ ޙड़
ͱݺΕɺࠨ͔Βӈͷԣॻ͖ʹ͓͍ͯɺ
Slide 13
Slide 13 text
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;
}
Slide 14
Slide 14 text
&EHFҎ֎΄΅ಉ͡
Slide 15
Slide 15 text
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;
}
Slide 16
Slide 16 text
Iಉ༷
&EHFҎ֎΄΅ಉ͡
Slide 17
Slide 17 text
࣮ଟ͘ͷλάʹ͍ͭͯɺ
֤ϒϥβͰڞ௨ͨ͠ελΠϧ͕ઃఆ͞Ε͍ͯ·͢ɻ
Slide 18
Slide 18 text
4
ཧతͳϓϩύςΟͱ
Slide 19
Slide 19 text
ԣॻ͖͔ɺॎॻ͖͔ɺࠨ͔Βӈ͔ɺӈ͔Βࠨ͔ͳͲͷ
ॻࣈํʹରԠ͢Δ͜ͱΛҙຯ͠·͢ɻ͜Εʹରͯ͠ɺ
ීஈզʑ͕Α͍ͬͯ͘ΔͷཧతͳϓϩύςΟ
ͱͰ͋ΓɺϖʔδશମʹରԠͨ͠ͷͰ͢ɻ
ཧతͱ
Slide 20
Slide 20 text
margin-block-start: 2em;
-webkit-margin-before: 2em;
margin-before: 2em;
ԣॻ͖ ॎॻ͖
ྫ
Slide 21
Slide 21 text
ཧతͳϓϩύςΟͱɺ
XSJUJOHNPEFϓϩύςΟͱͷΈ߹Θͤɺ
ॎॻ͖͕ෆՄܽͰ͋Δిࢠॻ੶ͳͲͰͷ׆༻͕ظ͞Ε·͢ɻ
Slide 22
Slide 22 text
5 ΞτϥΠϯɾΞϧΰϦζϜ
Slide 23
Slide 23 text
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;
}
Slide 24
Slide 24 text
ηΫγϣχϯάɾίϯςϯπͭͷ߹Iͱಉ͡ελΠϧɺ
ηΫγϣχϯάɾίϯςϯπͭͷ߹Iͱಉ͡ελΠϧɺ
࠷େͰηΫγϣχϯάɾίϯςϯπͭͰIͱಉ͡ελΠϧͱͳΔΑ͏ઃఆ͞Ε͓ͯΓɺ
ηΫγϣχϯάɾίϯςϯπͷਂʹΑͬͯɺIͷݟ͕ͨมΘΓ·͢ɻ
Slide 25
Slide 25 text
·ͱΊ
6
Slide 26
Slide 26 text
SER AGENT STYLESHEETS
6"ελΠϧγʔτΛಡΉ͜ͱͰɺ
ίʔυͷແବΛݮΒ͠ɺະདྷͷ৽ػೳʹඋ͑Α͏ʂ
Slide 27
Slide 27 text
HAPPY CSS LIFE!
THANK YOU!