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
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
440
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
520
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
240
Software Architecture
hschwentner
6
2.3k
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1k
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
15
5.7k
品質ワークショップをやってみた
nealle
0
530
チームの境界をブチ抜いていけ
tokai235
0
190
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
180
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
オープンソースソフトウェアへの解像度🔬
utam0k
16
3k
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
66k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
A Modern Web Designer's Workflow
chriscoyier
697
190k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Site-Speed That Sticks
csswizardry
13
910
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
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!