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
remfor 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-styleshould be overwritten by the rules forul liandol 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 ofabbrto avoid stylingabbrwith no title. - 20Note that
acronymis now obsolete

