2

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)

Improve this question

5 Answers 5

Reset to default
3

The default-values are defined in the Recommendation .

But there is no guarantee that browsers follow that Recommendation.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Yes, I know but no one in whole Internet created a simple table with columns like this <name, default property, all applicable properties, etc...> it would be much more helpful than jumping back and forth between pages.
If you think it would be helpful you could be the first one that creates this simple list :)
If I only have time, and this is not only to the javascript, many languages manuals should have taken that cheat-sheet approach.
2

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.”

Improve this answer

1 Comment

Thanks for clarifying, I didn't know that initial !== default.
2

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

Improve this answer

Comments

1

If this is just for IE you may want to check out the runtimeStyle property

Improve this answer

Comments

-1

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?

Improve this answer

2 Comments

I try to create a list of styles that gets computed on a tag from various sources, even from another JS scripts (for debug purposes). But CSSStyleDeclaration can't differentiate if a style was voluntarily touched or not. I don't want to spam my field of view with repetitive data.
This doesn't seem to work anymore. I can see maybe in 2012 it did but right now if I do document.createElement('div').style in Chrome everything is set to ""

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.