All sites that list css properties such like MDN or w3schools list every CSS property on separate pages.
When I'm iterating over CSSStyleDeclaration
I get bunch of data that 90% of it are default values. Now I have not found another way of checking these values than to go to every page and look and then create my exclusion array so when looping over the object I can filter out not touched values.
But if it were a list somewhere I could copy it and do it a lot quicker than manually looking on every page.
(I assume there is no programatic way of checking from JS if given value is default, I can be almost sure that if it say none
or auto
or normal
or 0px
it is the default but this is not certain way of doing it)
The specifications define initial values, i.e. the values to be used in the absence of any stylesheet or equivalent. The default values, in the sense of values used in the absence of any author stylesheet (= page stylesheet), are implementation-dependent. They depend on browsers (conceptually, on browser default stylesheets) and on their settings (user stylesheets or browser settings).
Finding out the initial values is just raw work, but you shouldn’t expect them to be default values. There doesn’t seem to be any way to programmatically find out the default values. For a specific browser, you might be able to locate its default stylesheet or its description, but they would tell you just the “factory defaults.”
The default-values are defined in the Recommendation .
But there is no guarantee that browsers follow that Recommendation.
If this is just for IE you may want to check out the runtimeStyle property
You can create a new element with the same tag you are examining, and not append it to the document. It will have a style object with only the defaults set, and can be compared to the element in question- but it seems silly.
The defaults are just as real as any style assignments in style sheets- the browser does not ignore them, why would you?
Here's a list of initial values I created after finding the w3 spec documents expectedly difficult to read:
var inheritedStyleInitialValues = {
'azimuth': 'center',
'border-collapse': 'separate',
'border-spacing': '0',
'caption-side': 'top',
'color': '',
'cursor': 'auto',
'direction': 'ltr',
'elevation': '',
'empty-cells': 'show',
'font-family': '',
'font-size': 'medium',
'font-style': 'normal',
'font-variant': 'normal',
'font-weight': 'normal',
'letter-spacing': 'normal',
'line-height': 'normal',
'list-style-image': 'none',
'list-style-position': 'outside',
'list-style-type': 'disc',
'orphans': '2',
'pitch-range': '',
'pitch': '',
'quotes': '',
'richness': '',
'speak-header': '',
'speak-numeral': '',
'speak-punctuation': '',
'speak': '',
'speak-rate': '',
'stress': '',
'text-align': 'left',
'text-indent': '0',
'text-transform': 'none',
'visibility': 'visible',
'voice-family': '',
'volume': '',
'white-space': 'normal',
'widows': '2',
'word-spacing': 'normal'
}
Note that these are only the styles that descendant dom nodes inherit from their ancestors (because those are the only ones I care about for what I'm working on). The ones left blank I either couldn't find defaults for or vary between browsers.
I made this a community wiki so feel free to add to this list