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
74k
WordPress でも大丈夫!実例で見るウェブパフォーマンス改善
ixkaito
7
5.3k
WordPress でも大丈夫!実例で見るウェブパフォーマンス改善
ixkaito
22
7.8k
タイポグラフィベーシック (+ デザインアイデア)
ixkaito
13
4k
WordPress の今とこれから
ixkaito
1
1.9k
世界で一人しかできない WordPress コアを写経する話 ― 修行の先に見たものとは?
ixkaito
5
15k
WordPress の今とこれから
ixkaito
4
2.6k
Let's Think about Right Answers of Design and UI/UX
ixkaito
0
410
What's New in Twenty Seventeen
ixkaito
3
7.5k
Other Decks in Programming
See All in Programming
Introduce Hono CLI
yusukebe
6
3.1k
AkarengaLT vol.38
hashimoto_kei
1
120
CSC305 Lecture 10
javiergs
PRO
0
260
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
320
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
130
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
810
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
130
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
650
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
16k
Go言語の特性を活かした公式MCP SDKの設計
hond0413
2
540
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
How STYLIGHT went responsive
nonsquared
100
5.9k
Six Lessons from altMBA
skipperchong
29
4k
Designing for humans not robots
tammielis
254
26k
For a Future-Friendly Web
brad_frost
180
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
GitHub's CSS Performance
jonrohan
1032
470k
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!