Asked  7 Months ago    Answers:  5   Viewed   43 times

Where can I find a browser's default CSS for HTML elements?

Many HTML elements come with some default CSS properties which can sometimes result in unknown/unwanted behaviour. For example Input boxes are displayed differently in different browsers. I'm looking for a place that covers the new CSS3 properties and the new HTML5 elements.

I've seen in other (much older) questions (such as Browsers' default CSS stylesheets) answers that suggest a solution of CSS reset. This solution is sometimes not wanted, often I would actually like to keep some of the basic properties (such as the highlighting of input boxes in Chrome). In other words: I don't want to get rid of things just because I don't know what they do.

So, Is there a site that can give me all this information (or perhaps most)?

 Answers

58

A GitHub repository of all W3C HTML spec and vendor default CSS stylesheets can be found here

1. Default Styles for Firefox

2. Default Styles for Internet Explorer

3. Default Styles for Chrome / Webkit

4. Default Styles for Opera

5. Default Styles for HTML4 (W3C spec)

6. Default Styles for HTML5 (W3C spec)

Sample, per the default W3C HTML4 spec:

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}
Tuesday, June 1, 2021
 
weegee
answered 7 Months ago
95

user3360686 is right, your transitions are somehow stacked. I'm not sure why it happens as it's not supposed to.

Anyway what you've done in the header is dangerous, and may trigger weird behaviors :

header * {
  transition: all 0.8s;
  -moz-transition: all 0.8s; 
  -webkit-transition: all 0.8s;
  -o-transition: all 0.8s;

  transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
}

You have about 25 elements in your header, transitions and delays will be applied to each of them. Use specific elements for more efficiency (and elegance).

Using "all" with transition is generally a bad idea, they are a good means to create conflicts. Use specific properties.

This quick and nice answer sums up pretty much everything : CSS3, WebKit Transition Order? How to queue to the transitions?

Friday, July 30, 2021
 
JakeGR
answered 4 Months ago
75

Its not that easy to change form element's style.. each browser has it's own way to render and create those elements. Some browsers will accept having a background image inside your select, others won't.

A simple technique is to add a default color, so the browser will render the color if it cant render the image.

background: #c3c3c3 url(http://www.3dtuning.ru/img/design/gallery-back.png) repeat-x 0 0;

so this way, firefox users will see a background image (something that always looks ugly, in my opinion) and the rest of the browsers will display with a gray background.

Hope this helps

Friday, July 30, 2021
 
KeK0
answered 4 Months ago
31

fieldset {
    font-family: sans-serif;
    border: 5px solid #1F497D;
    background: #ddd;
    border-radius: 5px;
    padding: 15px;
}

fieldset legend {
    background: #1F497D;
    color: #fff;
    padding: 5px 10px ;
    font-size: 32px;
    border-radius: 5px;
    box-shadow: 0 0 0 5px #ddd;
    margin-left: 20px;
}
<section style="margin: 10px;">
<fieldset style="min-height:100px;">
<legend><b> My Statistics </b> </legend>
<label> <br/> </label>
<label> <br/> </label>
</fieldset>

(http://jsfiddle.net/ESkRt/1/)

Wednesday, September 15, 2021
 
edA-qa mort-ora-y
answered 3 Months ago
83

Approach #1 is the far better for a number of reasons, mainly pertaining to flexibility and the other points mentioned by Kevin Boucher, plus your own points with regard to dynamic creation.

I wouldn't recommend not having containing elements - even though it is nicely possible - you deny yourself a lot of extra power with regards to padding, positioning and overflow handling. It also makes dynamic creation more tricky.

Your arguments for going with approach #2 also need not be a benefit either, considering you can set one width for your label container in your css - via a class - and this can easily be changed or designed to be responsive. Basically meaning you only have one place again to change your label dimensions.

Also With #2, whilst making your horizontal label layout more automatic - vertical layout would become more manual and tricky considering you would have to give your label and field containers the same height in order to line up (as they couldn't rely on a mutal parent). I'd make a guess that you'll have more rows than columns so this would just add work ;)

css:

.field-row {
  overflow: hidden;
}

.field-row label {
  display: block;
  width: 30%;
  float: left;
}

.field-row .field-container {
  width: 70%;
  float: left;
}

markup:

<div class="field-row">
  <label>Label Text</label>
  <div class="field-container">
    <input type="text" />
  </div>
</div>

I'd probably go for the above myself as that would cover most of what I've ever needed, however if you wanted more control with regard to possible future changes that might occur in your app, you could do the following:

css 2:

.field-row {
  overflow: hidden;
}

.field-row .label-container {
  width: 30%;
  float: left;
}

.field-row .field-container {
  width: 70%;
  float: left;
}

markup 2:

<div class="field-row">
  <div class="label-container"><label>Label Text</label></div>
  <div class="field-container">
    <input type="text" />
  </div>
</div>

By just adding one extra wrapper you then allow for the ability of more complicated labels (i.e. hiding the text and replacing with images, or adding explanatory text with js) - you also give yourself more control with regards to center or right alignment.

Anyway just my thoughts :)

Monday, November 15, 2021
 
j_random_hacker
answered 2 Weeks ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share