Log in   Register a New Account

Accessify Forum - Discuss Website Accessibility

New to the forum?

Only an email address is required.

Register Here

Already registered? Log In

list of browsers' default CSS

  • Reply to topic
  • Post new topic
Reply with quote 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)
Reply with quote 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
Reply with quote 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)
Reply with quote 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.
Reply with quote Oops, got the directory name wrong - that should be res/html.css

Jim O'Donnell
work: Royal Observatory Greenwich
play: eatyourgreens
Reply with quote 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)
Reply with quote 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
Reply with quote 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/wiki/default.aspx/Channel9.InternetExplorerDevToolbar
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/support/mastering/sysadmin/#locations

Jim O'Donnell
work: Royal Observatory Greenwich
play: eatyourgreens
Reply with quote 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/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/#comment-960
Those paths work on the Mac here (OSX 10.3, Safari 1.3.2)

Jim O'Donnell
work: Royal Observatory Greenwich
play: eatyourgreens
Reply with quote 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)
Reply with quote 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?
Reply with quote 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)
Reply with quote In that case, you might want Todd Fahrner's base.css
http://style.cleverchimp.com/corestyle/base.html
(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

Display posts from previous:   

All times are GMT

  • Reply to topic
  • Post new topic