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
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
220
WebDriver BiDiとは何なのか
yotahada3
1
140
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
9
3.4k
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
250
技術を根付かせる / How to make technology take root
kubode
1
240
Ruby on cygwin 2025-02
fd0
0
140
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
190
Domain-Driven Transformation
hschwentner
2
1.9k
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
Spring gRPC について / About Spring gRPC
mackey0225
0
220
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
427
64k
Typedesign – Prime Four
hannesfritz
40
2.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Visualization
eitanlees
146
15k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Statistics for Hackers
jakevdp
797
220k
Building an army of robots
kneath
302
45k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
320
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
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!