Accessify Forum: list of browsers' default CSS

27 Jun 2006 10:25 am

P: 318

Beloved colleagues,

Seems like an odd request (I can explain the reason why if you really give a damn), but does anyone know where to find default stylesheet of the major browsers (e.g., how much padding, margin IE/ Firefox/ Opera etc apply to <ul>, <p>, etc if there's no stylesheet)?

Kisses,

Bruce
_________________
www.brucelawson.co.uk
Web Evanglist, Opera, WaSP Accesibility Task Force
Study the Web Standards Curriculum

International Lothario (retired)

Share:

Back to Top

27 Jun 2006 10:35 am

eatyourgreens

P: 1193
L: Greenwich, London

For Firefox, look for gre/html.css under the Firefox installation directory on Windows. There's also quirk.css, which must be the quirks mode rules, I suppose.
_________________
Jim O'Donnell
work: Royal Observatory Greenwich
play: eatyourgreens

Share:

Back to Top

27 Jun 2006 10:48 am

brucelawson

P: 318

rocking, Jim, thanks! Anyone got similar for IE, or should I email Bill Gates?
_________________
www.brucelawson.co.uk
Web Evanglist, Opera, WaSP Accesibility Task Force
Study the Web Standards Curriculum

International Lothario (retired)

Share:

Back to Top

27 Jun 2006 10:50 am

Ben Millard

P: 3775
L: Hampshire, UK

The default styling some browsers apply might not actually use the CSS mechanism. For example, most browsers won't use a CSS mechanism for the layout of markers on <li> elements. Similarly, most graphical browsers support tables but some do not support the table values of the display property from CSS. Also such, some of their rendering is likely done through proprietary methods all the time.

The W3C made a sample HTML 4 CSS 2.0 stylesheet and a default HTML 4 CSS 2.1 stylesheet. They are each included as an informative appendix in their specification. Browser default style will probably be very similar between browsers and over browser versions to avoid breaking flimsy pages. If you can't get actual stylesheets from all browsers, these are probably the next best thing.

Every graphical browser I've used has seemed to display HTML identically, although I've read that some browsers use margin for indents while others use padding.
_________________
My CV type thing and my Life of Ben (Blog). Nigel Peck's Accessify Forum Requirements.

Share:

Back to Top

27 Jun 2006 10:52 am

eatyourgreens

P: 1193
L: Greenwich, London

Oops, got the directory name wrong - that should be res/html.css
_________________
Jim O'Donnell
work: Royal Observatory Greenwich
play: eatyourgreens

Share:

Back to Top

27 Jun 2006 10:53 am

brucelawson

P: 318

Cheers! You're both officially Lovely Fluffy Squirrels.
_________________
www.brucelawson.co.uk
Web Evanglist, Opera, WaSP Accesibility Task Force
Study the Web Standards Curriculum

International Lothario (retired)

Share:

Back to Top

27 Jun 2006 10:57 am

Mikea

P: 3093
L: (work) Corby (live) Kettering UK

Many moons ago I found a list of Elements and their use with browsers from the University of Toronto. It is a bit out of date now, and I don't have the link as the list is at home, but if you visit their website you might get a pointer Cool

_________________
Mike Abbott
Accessible to everyone

Share:

Back to Top

27 Jun 2006 11:08 am

eatyourgreens

P: 1193
L: Greenwich, London

I bet IE's default CSS is buried away in a dll somewhere.

If you download the IE developer's toolbar from
http://channel9.msdn.com/...
you can inspect unstyled elements and see their default styles by clicking on them. It's not as useful as having them all listed together, I'm afraid.

EDIT: You might find some info about Opera's defaults here:
http://www.opera.com/...
_________________
Jim O'Donnell
work: Royal Observatory Greenwich
play: eatyourgreens

Share:

Back to Top

27 Jun 2006 12:49 pm

eatyourgreens

P: 1193
L: Greenwich, London

I found Safari's CSS files - buried deep inside /System/Library/Frameworks followed by some long path I can't be bothered to type out. Fortunately, a more energetic person has already written them down:
http://meyerweb.com/...
Those paths work on the Mac here (OSX 10.3, Safari 1.3.2)
_________________
Jim O'Donnell
work: Royal Observatory Greenwich
play: eatyourgreens

Share:

Back to Top

27 Jun 2006 01:14 pm

brucelawson

P: 318

Cheers Jim. Here's Safari, for those without one of those new-fangled Mac things

Code:

/*
* The default style sheet used by khtml to render HTML pages
* (C) Lars Knoll (knoll@kde.org) 2000
*
* Konqueror/khtml relies on the existence of this style sheet for
* rendering. Do not remove or modify this file unless you know
* what you are doing.
*/

@namespace "http://www.w3.org/1999/xhtml";

html {
display: block
}

/* The children of the <head> element all have display:none */

head {
display: none
}

meta {
display: none
}

title {
display: none
}

link {
display: none
}

style {
display: none
}

script {
display: none
}

/* generic block-level elements */

body {
display: block;
margin: 8px
}

p {
display: block;
margin: 1.0__qem 0px
}

div {
display: block
}

layer {
display: block
}

marquee {
display: inline-block;
overflow: marquee
}

address {
display: block
}

blockquote {
display: block;
margin: 1__qem 40px 1em 40px
}

q {
display: inline
}

q:before {
content: '"'
/* FIXME: content: open-quote; */
}

q:after {
content: '"'
/* FIXME: content: close-quote; */
}

center {
display: block;
/* special centering to be able to emulate the html4/netscape behaviour */
text-align: -khtml-center
}

hr {
display: block;
margin: 0.5em auto;
border-style: inset;
border-width: 1px
}

map {
display: inline
}

/* heading elements */

h1 {
display: block;
font-size: 2em;
margin: .67__qem 0 .67em 0;
font-weight: bold
}

h2 {
display: block;
font-size: 1.5em;
margin: .83__qem 0 .83em 0;
font-weight: bold
}

h3 {
display: block;
font-size: 1.17em;
margin: 1__qem 0 1em 0;
font-weight: bold
}

h4 {
display: block;
margin: 1.33__qem 0 1.33em 0;
font-weight: bold
}

h5 {
display: block;
font-size: .83em;
margin: 1.67__qem 0 1.67em 0;
font-weight: bold
}

h6 {
display: block;
font-size: .67em;
margin: 2.33__qem 0 2.33em 0;
font-weight: bold
}

/* tables */

table {
display: table;
border-collapse: separate;
text-align: -khtml-auto;
border-spacing: 2px;
border-color: gray
}

table[align="center"] {
margin-left: auto;
margin-right: auto
}

thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit
}

tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit
}

tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit
}

col {
display: table-column
}

colgroup {
display: table-column-group
}

tr {
display: table-row;
vertical-align: inherit;
border-color: inherit
}

td, th {
display: table-cell;
vertical-align: inherit
}

th {
font-weight: bold
}

caption {
display: table-caption;
text-align: -khtml-center
}

/* Lists */

ul, menu, dir {
display: block;
list-style-type: disc;
margin: 1__qem 0 1em 0;
-khtml-padding-start: 40px
}

ol {
display: block;
list-style-type: decimal;
margin: 1__qem 0 1em 0;
-khtml-padding-start: 40px
}

li {
display: list-item
}

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 {
display: block;
-khtml-margin-start: 40px
}

dl {
display: block;
margin: 1__qem 0 1em 0
}

dt {
display: block
}

ol ul, ul ol, ul ul, ol ol {
margin-top: 0;
margin-bottom: 0
}

/* form elements */

form {
display: block;
margin: 0__qem 0 1em 0
}

legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: none
}

fieldset {
display: block;
margin-left: 2px;
margin-right: 2px;
padding: 0.75em 0.625em;
border: 2px groove ThreeDFace
}

button {
display: inline-block;
border: 2px outset ButtonFace;
background-color: ButtonFace;
color: ButtonText;
padding: 2px 2px 2px 2px;
cursor: default
}

button:active {
border-style: inset
}

input, textarea {
text-align: -khtml-auto
}

/* If we support for CSS2 system fonts, then we won't have to hard code Lucida Grande here. */
input, textarea, select, button {
margin: 0__qem;
font: 11px 'Lucida Grande';
color: initial
}

input[type="hidden"] {
display: none
}

input[type="radio"], input[type="checkbox"] {
margin: 3px 0.5ex;
-khtml-user-select: element
}

select, button, input[type="button"], input[type="image"], input[type="submit"], input[type="reset"], img {
-khtml-user-select: element
}

option, optgroup, area, param {
display: none
}

/* inline elements */

u, ins {
text-decoration: underline
}

strong, b {
font-weight: bolder
}

i, cite, em, var, address {
font-style: italic
}

tt, code, kbd, samp {
font-family: monospace
}

pre, xmp, plaintext {
display: block;
font-family: monospace;
white-space: pre;
margin: 1__qem 0
}

big {
font-size: larger;
}

small {
font-size: smaller;
}

s, strike, del {
text-decoration: line-through
}

sub {
vertical-align: sub;
font-size: smaller
}

sup {
vertical-align: super;
font-size: smaller
}

nobr {
display: inline;
white-space: nowrap
}

wbr {
white-space: normal
}

/* End Inline Elements */

:focus {
outline: auto 3px #1f5ccf
}

html:focus, body:focus {
outline: none
}

a:-khtml-any-link {
color: -khtml-link;
text-decoration: underline;
-khtml-user-select: element
}

a:-khtml-any-link:active {
color: -khtml-activelink
}

/* Bidirectionality settings */

bdo[dir="ltr"] {
direction: ltr;
unicode-bidi: bidi-override
}

bdo[dir="rtl"] {
direction: rtl;
unicode-bidi: bidi-override
}

/* End bidi settings */

/* other elements */

noframes {
display: none
}

frameset, frame {
display: block
}

/* noscript is handled internally, as it depends on the html settings */

_________________
www.brucelawson.co.uk
Web Evanglist, Opera, WaSP Accesibility Task Force
Study the Web Standards Curriculum

International Lothario (retired)

Share:

Back to Top

27 Jun 2006 02:12 pm

TSG

P: 153
L: Ipswich

A slightly different tact to what you're asking for Bruce but I use a style sheet that sets (I hope and assume) all browsers to a default setting. It was written by Faruk and Robert Nyman and you can grab a copy from here (a small, old project) it that helps?
_________________
Karl Dawson
http://www.thatstandardsguy.co.uk
http://www.accessites.org

Share:

Back to Top

27 Jun 2006 02:27 pm

brucelawson

P: 318

Actually, I'm trying to go the other way round. I've got a big site redesign going on, and at launch some legacy content is pulled into a standards-compliant framework. The framework zeroes all browser defaults, but the legacy content relies on the defaults, so I need to explicity re-create them in the styles for any content that's in a div id="legacy".

Reconditioned content, which doesn't live in the legacy div, doesn't rely on the browser defaults.
_________________
www.brucelawson.co.uk
Web Evanglist, Opera, WaSP Accesibility Task Force
Study the Web Standards Curriculum

International Lothario (retired)

Share:

Back to Top

27 Jun 2006 02:35 pm

eatyourgreens

P: 1193
L: Greenwich, London

In that case, you might want Todd Fahrner's base.css
http://style.cleverchimp.com/...
(which might be the same stylesheet that the W3C produced as a default style for HTML 4).
_________________
Jim O'Donnell
work: Royal Observatory Greenwich
play: eatyourgreens

Share:

Back to Top

Accessify Forum - Accessibility Discussion

Latest Tweets

Currently Online

list of browsers' default CSS

Partners