ChatGPT解决这个技术问题 Extra ChatGPT

Browsers' default CSS for HTML elements

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)?

Not a site but in the chrome devleoper tools it shows the inherited css rules and the ones marked "user agent stylesheet" will show the chrome ones. Sorry i couldn't be more help. also: dowebsitesneedtolookexactlythesameineverybrowser.com
Just a note, the reset.css does not stop the basic things. Your input boxes will still be highlighted in Chrome. You'll just lose the random padding-differences across the browsers. So you can start off with the same behavior in all browsers (padding/margin/... wise).
@James Khoury - Also true of Firebug.
@nayish: “For example Input boxes are displayed differently in different browsers.” — Specifically regarding form fields, their styles can’t be entirely described using CSS. See meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness and webkit.org/blog/51/text-fields

t
thirtydot

It's different for each browser, so:

Firefox (Gecko): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css. Or, browse to resource://gre-resources/ and look at html.css.

Chrome/Safari (WebKit): http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css Chrome (Blink): https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css

Chrome (Blink): https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css

Internet Explorer (Trident), older versions: http://web.archive.org/web/20170122223926/http://www.iecss.com/

You can also look at the HTML5 Boilerplate stylesheet, which "normalizes the display of a lot of stuff without being a reset in the traditional sense". It also fixes quite a few bugs/inconsistencies.

It's also worth looking at: https://github.com/necolas/normalize.css/blob/master/normalize.css


Which, funnily enough, is mostly the same stuff as I linked to in my answer to the question linked to above which is, apparently, 'way out of date'. Though I did only add the IE link to that 2 days ago.
@nayish What else do you think there is apart from the browser defaults?
@nayish There is no separate definition of the default CSS for HTML elements outside of what browsers have implemented in their default stylesheets
@nayish That's specified against each individual property in the spec, though note that opacity isn't inherited in the CSS sense
Just a note, HTML5 boilerplate is much more than normalizing CSS. To just normalize CSS they use Normalize tool: necolas.github.com/normalize.css
O
Offirmo

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

Default Styles for Gecko / Firefox -- Default Styles for Internet Explorer -- Default Styles for Webkit / Safari -- Default Styles for Blink / Chrome -- Default Styles for Opera -- Default Styles for HTML4 (W3C spec) -- 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 }
}

On a side note, it is interesting to see things like the infamous nobr tag in the W3C's HTML5 stylesheet.
still up to date ?
The link for Firefox does not contain all the defaults. For example, it does not contain the default css for textarea. You can find that in resource://gre-resources/forms.css . In general, browse through the files in resource://gre-resources to find all the default information. Or for all browsers, see html.spec.whatwg.org/multipage/rendering.html .
ul {list-style-type: disc} is missing.
E
Elias Zamaria

No one has mentioned any source for the CSS defaults in Edge. I looked, and I couldn't find anything authoritative, but I found this stylesheet that looks plausible: https://gist.github.com/jonathantneal/abc52743caa0a019d359ec4ba2ce965b


N
NVRM

While this is an old cross browser problem, as each browsers has his own rendering and behavior with some html elements like medias and inputs elements, we can now in 2017 use pretty safely the css filters proprety on top of them.

This allow to give a color palette with the hue-rotate filter that will render pretty well cross browsers.

The following snippets show a way to use a input type color to render this effect in realtime on a video element with javascript.

To use only css, this is mandatory to use each one of this filters: sepia not at 0, high saturation, grayscale at 0, high contrast, and then give a color with the hue-rotate property, following my tests. The invert filter isn't mandatory, but is giving some deep effects.

As well, the drop-shadow filter is working pretty nicely cross browser. To be use like this: filter:drop-shadow(2px 20px 50px red) [X,Y,RADIUS,COLOR]

function styloElem() { stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0) media.style.cssText += ";filter:sepia(100%) saturate(1000%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)" } styloElem() body { text-align:center; background:#001; color: white } video { width:500px;max-width:500px } Colors:

Can i use css filters:

http://caniuse.com/#feat=css-filters

A toolbar I made around css filters, from where are coming this notes:

https://github.com/webdev23/ponyFilters

A more complete codepen example:

http://codepen.io/Nico_KraZhtest/pen/bWExEB/


It appear to be a bit aside, you are right! This was my hard work at this date. Since this is only css, this won't change the browser element behavior, but can give a way to render this kind of elements with an identical color/brightness, in any browser, without write special code for each of them. This was not doable at the time of the question. Thanks.