Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブラウザのデフォルトスタイルを見てみよう
Search
Kite
January 29, 2017
Programming
3
1.5k
ブラウザのデフォルトスタイルを見てみよう
ユーザエージェントスタイルシートを読むことで、コードの無駄を減らし、未来の新機能に備えよう!
Kite
January 29, 2017
Tweet
Share
More Decks by Kite
See All by Kite
個人からチームまで、情報・タスク管理の一元化はNotionにお任せ!
ixkaito
13
72k
WordPress でも大丈夫!実例で見るウェブパフォーマンス改善
ixkaito
7
5k
WordPress でも大丈夫!実例で見るウェブパフォーマンス改善
ixkaito
22
7.6k
タイポグラフィベーシック (+ デザインアイデア)
ixkaito
13
3.8k
WordPress の今とこれから
ixkaito
1
1.8k
世界で一人しかできない WordPress コアを写経する話 ― 修行の先に見たものとは?
ixkaito
5
14k
WordPress の今とこれから
ixkaito
4
2.5k
Let's Think about Right Answers of Design and UI/UX
ixkaito
0
330
What's New in Twenty Seventeen
ixkaito
3
7.4k
Other Decks in Programming
See All in Programming
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
280
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
GAEログのコスト削減
mot_techtalk
0
120
CI改善もDatadogとともに
taumu
0
170
WebDriver BiDiとは何なのか
yotahada3
1
150
時計仕掛けのCompose
mkeeda
1
310
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
130
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
Introduction to kotlinx.rpc
arawn
0
740
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
170
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
880
2024年のWebフロントエンドのふりかえりと2025年
sakito
3
260
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Building Adaptive Systems
keathley
40
2.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
How GitHub (no longer) Works
holman
314
140k
The Invisible Side of Design
smashingmag
299
50k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Visualization
eitanlees
146
15k
Statistics for Hackers
jakevdp
797
220k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Transcript
ϒϥβͷσϑΥϧτελΠϧΛݟͯΈΑ͏ USER AGENT STYLESHEETS
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
มଶత$44τϦοΫ $44ͱ͍͑ ͠XFCۀքͷྲྀߦޠେ͕͋ͬͨΒɺ͖ͬͱʮมଶత$44ʯɺ ͘͠ʮมଶతʓʓʯ͕ड͍ͯ͠ΔͩΖ͏ ˘Т˘
0 1 2 3 4 5 6 ͖͔͚ͬ ϨϯμϦϯάΤϯδϯ MBZPVUFOHJOF
6"ελΠϧγʔτͲ͜Ͱ֬ೝͰ͖Δͷ͔ ֤ϒϥβͷελΠϧ͕࣮ڞ௨͍ͯ͠Δʁ ཧతͳϓϩύςΟͱ ΞτϥΠϯɾΞϧΰϦζϜ ·ͱΊ CONTENTS
͖͔͚ͬ 6OSFTFU$44Λ࡞Δʹ͋ͨͬͯɺ ֤ϒϥβͷσϑΥϧτελΠϧʹ͍ͭͯௐ·ͨ͠ɻ IUUQTHJUIVCDPNJYLBJUPVOSFTFUDTT 0
ϨϯμϦϯάΤϯδϯLAYOUT ENGINE ϒϥβͷσϑΥϧτελΠϧɺϢʔβΤʔδΣϯτ 6" ελΠϧγʔ τͱݺΕ͓ͯΓɺجຊతʹϨϯμϦϯάΤϯδϯʹґଘ͠·͢ɻ ֤ϒϥβͲͷϨϯμϦϯάΤϯδϯΛ࠾༻͍ͯ͠ΔͰ͠ΐ͏͔ʁ 1
Firefox Gecko Chromium/Chrome 28 Ҏ্, Opera 15 Blink Safari, Chrome
27 ҎԼ, Opera 14 Webkit Opera 7-12 Presto Internet Explorer Trident Edge EdgeHTML
2֤ϒϥβ ϨϯμϦϯάΤϯδϯ ͷ σϑΥϧτελΠϧγʔτ Ͳ͜Ͱ֬ೝͰ͖Δͷ͔ʁ
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ϑΝΠ ϧ͕ϑΥϧμʹ·ͱΊΒΕ͍ͯ·͢ɻ
3 ֤ϒϥβͷελΠϧ͕࣮ ڞ௨͍ͯ͠Δʁ
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; }
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ͳͲ ཧϓϩύςΟ ޙड़ ͱݺΕɺࠨ͔Βӈͷԣॻ͖ʹ͓͍ͯɺ
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; }
&EHFҎ֎΄΅ಉ͡
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; }
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 STYLESHEETS 6"ελΠϧγʔτΛಡΉ͜ͱͰɺ ίʔυͷແବΛݮΒ͠ɺະདྷͷ৽ػೳʹඋ͑Α͏ʂ
HAPPY CSS LIFE! THANK YOU!