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
12
73k
WordPress でも大丈夫!実例で見るウェブパフォーマンス改善
ixkaito
7
5.2k
WordPress でも大丈夫!実例で見るウェブパフォーマンス改善
ixkaito
22
7.7k
タイポグラフィベーシック (+ デザインアイデア)
ixkaito
13
3.9k
WordPress の今とこれから
ixkaito
1
1.8k
世界で一人しかできない WordPress コアを写経する話 ― 修行の先に見たものとは?
ixkaito
5
14k
WordPress の今とこれから
ixkaito
4
2.6k
Let's Think about Right Answers of Design and UI/UX
ixkaito
0
390
What's New in Twenty Seventeen
ixkaito
3
7.4k
Other Decks in Programming
See All in Programming
VS Code Update for GitHub Copilot
74th
1
430
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
童醫院敏捷轉型的實踐經驗
cclai999
0
200
技術同人誌をMCP Serverにしてみた
74th
1
390
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
220
Create a website using Spatial Web
akkeylab
0
310
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
20
3.7k
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
GraphRAGの仕組みまるわかり
tosuri13
8
500
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Facilitating Awesome Meetings
lara
54
6.4k
Practical Orchestrator
shlominoach
188
11k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Producing Creativity
orderedlist
PRO
346
40k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
For a Future-Friendly Web
brad_frost
179
9.8k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Why Our Code Smells
bkeepers
PRO
337
57k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
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!