Styles sheets optimisation (for Safari)
Please note that selectors in the table below may be grouped differently than in the original UA’s styles sheet.
Custom Views
Because this is a large table, I am using :target
to show sections. Unfortunately, this will collapse the whole table whenever following a link to the footnotes. You’ll have to hit the back button 🙁
General Views
Group views
- children of the head
- generic block level elements
- heading elements
- table
- lists
- form elements
- form validation
- meter
- progress
- datagrid
- inline elements
- states
- ruby
- other-elements
- page
- misc
mark
, del
and ins
- Declarations with a yellow background are declarations that could be safely left out as they serve no purpose.
- Declarations or values that are striked through are those that are overwritten by author’s styles sheets.
- Declarations or values that are underlined are those that I added myself (they do not come from a styles sheet).
The Cascade
Styles sheets are listed from left to right. This matches the sequence from which they are are imported.
webkit html.css | YUI reset.css (859 bytes) | YUI base.css (761 bytes) | YUI font.css (437 bytes) | YUI combo.css(1,680 bytes) | YUI "optimized.css" (839 bytes) | Custom version starter file (761 bytes) | |
---|---|---|---|---|---|---|---|
html | display:block; |
|
|
font:62.5%/1.3 sans-serif; |
|||
chilren of the <head> |
|||||||
head | display:none; | ||||||
meta | display:none; | ||||||
title | display:none; | ||||||
link | display:none; | ||||||
style | display:none; | ||||||
script | display:none; | ||||||
generic block level elements | |||||||
body |
|
|
|
|
|
|
|
p |
|
|
margin-bottom:1em; |
|
margin-top:0; |
|
|
div | display:block; |
|
|
||||
layer | display:block; | ||||||
article, aside, footer, header, hgroup, nav, section |
display:block; | ||||||
marquee |
|
||||||
address | display:block; | ||||||
blockquote |
|
|
margin:1em; |
|
|
|
|
figcaption | display:block; | ||||||
figure |
|
|
|
||||
q | display:inline; | ||||||
q:before | content:”; | content:”; |
content:”; |
||||
q:after | content:”; | content:”; |
content:”; |
||||
center |
|
||||||
hr |
|
||||||
map | display:inline; | ||||||
heading elements | |||||||
h1 |
|
|
|
|
|
|
|
:-webkit-any(article,aside,nav,section) h1 |
|
||||||
:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 |
|
||||||
:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 |
|
||||||
:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 |
|
||||||
:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 |
|
||||||
h2 |
|
|
|
|
|
|
|
h3 |
|
|
|
|
font-size:108%; |
|
|
h4 |
|
|
font-weight:bold;
|
|
|
|
|
h5 |
|
|
font-weight:bold;
|
|
|
|
|
h6 |
|
|
font-weight:bold;
|
|
|
|
|
table | |||||||
table |
|
|
margin-bottom:1em; |
|
|
|
|
thead |
|
||||||
tbody |
|
||||||
tfoot |
|
||||||
table > tr | vertical-align:middle; |
||||||
col | display:table-column; |
||||||
colgroup | display:table-column-group; |
||||||
tr |
|
||||||
td |
|
|
|
|
|
|
|
tbody th | text-align:start; |
||||||
tbody td | text-align:end; |
||||||
th |
|
|
|
|
|
|
|
caption |
|
|
|
|
margin-bottom:.5em; |
margin-bottom:.5em; |
|
lists | |||||||
menu, dir |
|
|
|||||
ul |
|
|
|
|
|
|
|
ol |
|
|
|
|
|
|
|
li | display:list-item; |
list-style should be overwritten by the rules for ul li and ol li (see below) |
|
||||
ol li |
list-style:decimal outside;
|
list-style:decimal outside;
|
|||||
ul li |
list-style:disc outside;
|
list-style:disc outside;
|
|||||
ul ul, ol ul | list-style-type:circle; |
||||||
ol ol ul, ol ul ul, ul ol ul, ul ul ul |
list-style-type:square; |
||||||
dd |
|
|
padding:0;
|
|
|||
dl dd | margin-left:1em; |
margin:
0
0
0
1em;
|
-webkit-margin-start:1em; |
||||
dl |
|
|
|
|
|
|
|
dt | display:block; |
|
|
||||
dd + dt | margin-top:.8em; |
||||||
ol ul, ul ol, ul ul, ol ol |
|
||||||
li ul, li ol |
-webkit-padding-start:20px; |
||||||
form elements | |||||||
form |
|
|
|
||||
label | cursor:default | ||||||
legend |
|
|
|
padding:0; |
padding:0; |
||
fieldset |
|
|
margin-bottom:1em; |
|
|
|
|
button | -webkit-appearance:button | font:99% arial, helvetica, clean, sans-serif;
|
font:99% arial, helvetica, clean, sans-serif;
|
font:99% arial, helvetica, clean, sans-serif;
|
font:inherit; |
||
keygen, button, isindex, meter, progress |
-webkit-block-flow:tb !important; |
||||||
select | -webkit-block-flow:tb !important; |
|
font:99% arial,helvetica,clean,sans-serif; |
|
font:99% arial, helvetica, clean, sans-serif;
|
|
|
input, textarea |
-webkit-block-flow:tb !important; |
|
font:99% arial,helvetica,clean,sans-serif; |
|
|
font:inherit; |
|
input[type=text] |
|
|
width:12.25em |
||||
input, textarea, keygen, select, button, isindex, datagrid |
|
||||||
input[type=”hidden”] | display:none | ||||||
input, input[type=”password”], input[type=”search”], isindex |
|
||||||
input[type=”search”] |
|
||||||
input[type=”search”]::-webkit-search-cancel-button |
|
||||||
input[type=”search”]::-webkit-search-decoration |
|
||||||
input[type=”search”]::-webkit-search-results-decoration |
|
||||||
input[type=”search”]::-webkit-search-results-button |
|
||||||
input::-webkit-input-list-button |
|
||||||
input::-webkit-inner-spin-button |
|
||||||
input::-webkit-outer-spin-button |
|
||||||
input::-webkit-input-speech-button |
|
||||||
keygen, select |
-webkit-border-radius:5px | ||||||
keygen::-webkit-keygen-select | margin:0 | ||||||
textarea |
|
|
|
width:12.25em |
|||
input::-webkit-input-placeholder, isindex::-webkit-input-placeholder, textarea::-webkit-input-placeholder |
color:darkGray; |
||||||
input[type=”password”] | -webkit-text-security:disc !important |
|
|
width:12.25em |
|||
input[type=”hidden”], input[type=”image”], input[type=”file”] |
|
||||||
input[type=”file”] |
|
||||||
input:-webkit-autofill |
|
||||||
input[type=”radio”], input[type=”checkbox”] |
|
||||||
input[type=”button”], input[type=”submit”], input[type=”reset”], input[type=”file”]::-webkit-file-upload-button |
|
||||||
input[type=”button”], input[type=”submit”], input[type=”reset”], input[type=”file”]::-webkit-file-upload-button |
|
||||||
button |
|
||||||
input[type=”range”] |
|
||||||
input[type=”range”]::-webkit-slider-thumb |
|
||||||
input[type=”button”]:disabled, input[type=”submit”]:disabled, input[type=”reset”]:disabled, input[type=”file”]:disabled::-webkit-file-upload-button, button:disabled, select:disabled, keygen:disabled, optgroup:disabled, option:disabled, datagrid:disabled |
color:GrayText; |
||||||
input[type=”button”]:active, input[type=”submit”]:active, input[type=”reset”]:active, input[type=”file”]:active::-webkit-file-upload-button, button:active |
border-style:inset; |
||||||
input[type=”button”]:active:disabled, input[type=”submit”]:active:disabled, input[type=”reset”]:active:disabled, input[type=”file”]:active:disabled::-webkit-file-upload-button, button:active:disabled |
border-style:outset; |
||||||
area, param |
display:none; |
||||||
input[type=”checkbox”] |
|
||||||
input[type=”radio”] |
|
||||||
select |
|
||||||
select[size], select[multiple], select[size][multiple] |
|
||||||
select[size=”0″], select[size=”1″] |
|
||||||
optgroup | font-weight:bolder; |
||||||
option | font-weight:normal; |
||||||
output | display:inline; |
||||||
form validation | |||||||
::-webkit-validation-bubble |
|
||||||
::-webkit-validation-bubble-message |
|
||||||
::-webkit-validation-bubble-top-outer-arrow |
|
||||||
::-webkit-validation-bubble-top-inner-arrow |
|
||||||
meter | |||||||
meter |
|
||||||
meter::-webkit-meter | -webkit-appearance:meter; |
||||||
meter::-webkit-meter-horizontal-bar |
|
||||||
meter::-webkit-meter-vertical-bar |
|
||||||
meter::-webkit-meter-horizontal-optimum-value |
|
||||||
meter::-webkit-meter-horizontal-suboptimal-value |
|
||||||
meter::-webkit-meter-horizontal-even-less-good-value |
|
||||||
meter::-webkit-meter-vertical-optimum-value |
|
||||||
meter::-webkit-meter-vertical-suboptimal-value |
|
||||||
meter::-webkit-meter-vertical-even-less-good-value |
|
||||||
progress | |||||||
progress |
|
||||||
progress::-webkit-progress-bar-value |
|
||||||
inline element | |||||||
u, ins |
text-decoration:underline; |
||||||
strong | font-weight:bolder; |
|
font-weight:bold;
|
|
font-size:90%; |
||
b | font-weight:bolder; |
font-size:90%; |
|||||
i | font-style:italic; |
||||||
cite, var, address |
|
|
font-style:normal; |
||||
em | font-style:italic; |
|
font-style:italic;
|
|
|||
tt, kbd, samp |
font-family:monospace; |
|
|
||||
kbd | font-size:1.2rem; |
||||||
code | font-family:monospace; |
|
|
|
font-size:1.2rem; |
||
xmp, plaintext, listing |
|
||||||
pre |
|
|
margin-bottom:1em; |
|
|
margin-top:0; |
|
mark |
|
||||||
big | font-size:larger; |
||||||
small | font-size:smaller; |
||||||
s, strike, del |
text-decoration:line-through; |
||||||
sub |
|
vertical-align:text-bottom; |
vertical-align:text-bottom;
|
vertical-align:text-bottom;
|
line-height:0; |
||
sup |
|
vertical-align:text-top; |
vertical-align:text-top;
|
vertical-align:text-top;
|
line-height:0; |
||
nobr | white-space:nowrap; |
||||||
states | |||||||
:focus | outline:auto 5px -webkit-focus-ring-color |
||||||
html:focus, body:focus, input[readonly]:focus | outline:none; |
||||||
input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus |
outline-offset:2px; |
||||||
input[type=”button”]:focus, input[type=”checkbox”]:focus, input[type=”file”]:focus, input[type=”hidden”]:focus, input[type=”image”]:focus, input[type=”radio”]:focus, input[type=”reset”]:focus, input[type=”search”]:focus, input[type=”submit”]:focus, input[type=”file”]:focus::-webkit-file-upload-button |
outline-offset:0; |
||||||
a:-webkit-any-link |
|
||||||
a:-webkit-any-link:active | color:-webkit-activelink; |
||||||
ruby | |||||||
ruby, rt |
text-indent:0; |
||||||
rt |
|
||||||
ruby > rt |
|
||||||
ruby > rp | display:none; |
||||||
other elements | |||||||
noframe | display:none; |
||||||
frameset, frame |
display:block; |
||||||
frameset | border-color:inherit; |
||||||
iframe | border:2px inset; |
||||||
details | display:block; |
||||||
summary | display:block; |
||||||
page | |||||||
@page |
|
||||||
These elements do not belong to the WebKit styles sheet | |||||||
img |
border:0;
|
border:0;
|
|||||
dfn |
|
|
font-style:italic; |
||||
abbr |
|
|
|
|
|||
acronym |
|
|
|
|
Footnotes
- 0
background-color
– if any – should be set on body instead of html - 1Using
rem
for unit (font-sizing withrem
) - 2There should be no need for a font-family fallback
- 3Styled as
figure
- 4Styled the same way YUI base.css styles
blockquote
- 5Styled as
blockquote
- 6Going with default styling
- 7For some reason there is text-alignment by default (may be the result of
table-cell
) - 8Vertical margins do not need to be set
- 9
list-style
should be overwritten by the rules forul li
andol li
- 10This should be set via the ol rule already
- 11This should be set via the ul rule already
- 12See the rule for
dd
- 13Weird initial value for margin(?)
- 14Only the bottom margin needs to be set
- 15If we target a specific platform, there should be no need to use a font-family fallback
- 16Font declarations are not inherited in webkit/Mac unless there is some other styling (i.e. background-color). See test case for bug #57520
- 17Could be better to zero out the line-height
- 18Note that this styling is useless for touch devices
- 19Using
abbr[title]
instead ofabbr
to avoid stylingabbr
with no title. - 20Note that
acronym
is now obsolete