How to Get All Valid Keywords for CSS Property

How to get a list of valid values for a CSS property with javascript?

I know your question is asking for a way to check valid values for vendor specific cursors (and, potentially, other CSS properties), but if all you are looking for is a cross-browser solution for styling cursors, you might just want to use your own images for the cursors in question.

http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur
http://www.google.com/intl/en_ALL/mapfiles/openhand.cur

For example, you could use:

document.getElementById('foo').style.cursor = "url(/closedhand.cur) 4 4";

You might even wish to use this in conjunction with a check to see if known properties are valid, for example:

if( window.CSS.supports('cursor','grab') )
{
  cursor = 'grab';
}
else if( window.CSS.supports('cursor', '-moz-grab') )
{
  cursor = '-moz-grab';
}
else
{
  cursor = 'url(/grab.cur)';
}
document.getElementById('foo').style.cursor = cursor;

You could easily extend this to test all of the popular vendor prefixes, then only apply this logic to the properties with which you know have limited browser support.

CSS.supports API Browser Compatibility

CSS.supports MDN

Get all available values of css property

No, I don't think there's anywhere in the standard browser environment (such as it is!) accessible with JavaScript that lists all of the possible values of CSS properties. (Not even for those properties that do have a constrained set of possible values.)

This information is covered by various specifications, though, the CSS 2010 snapshot covers the main body of it (the list of properties is particularly useful for what you're describing). The CSS Basic User Interface Level 3 CR also has a lot of stuff (box-sizing, for instance), and there are several further proposals covered in various additional CRs and LCs [and even WDs] on the W3C website.

Those are primary sources. (I prefer to cite primary sources.) There seems to be a pretty good secondary source here, without (as of this writing) massive adverts, and with links per property to both primary (W3C) and useful secondary (MDN) sites.

How do I get all supported CSS properties in WebKit?

The answer is

>> document.defaultView.getComputedStyle(document.body, '')
-> CSSStyleDeclaration
   0: "background-attachment"
   1: "background-clip"
   2: "background-color"
   3: "background-image"
   4: "background-origin"
   5: "background-position"
   6: "background-repeat"
   7: "background-size"
   8: "border-bottom-color"
   9: "border-bottom-left-radius"
   ...

Thanks to Anton Byrna for his solution.

---

One problem still remains: getComputedStyle() does not return shortcuts like background and border.

Are all CSS rules allowed on all HTML elements and can they all be inherited?

Temani's answer was very helpful and pointed me in the right direction. After a bit of research I think I can now post a more elaborate and properly referenced answer to my own question.

Is it legal to apply any valid CSS rule to any HTML element?

Yes, it is. This is stated quite clearly in the CSS2.1 spec: https://www.w3.org/TR/CSS2/about.html#applies-to (CSS3 is a module-based backwards-compatible extension of CSS2.1, so this still applies). It says:

All elements are considered to have all properties, but some properties have no rendering effect on some types of elements. For example, the 'clear' property only affects block-level elements.

All elements are considered to have all properties implicitly means that any property can be set on any element.

Some properties have no rendering effect on some elements means that some elements simply ignore certain properties when rendering (this does not mean that they can't be inherited, read on).

Can any rule be inherited?

To answer this question, let's look at the CSS Values and Units Module Level 3 spec: https://www.w3.org/TR/css3-values/#common-keywords. It states that:

All CSS properties also accept the CSS-wide keyword values as the sole component of their property value.

There are three CSS-wide keyword values: initial, inherit and unset.

The spec is essentially saying that any property can use inherit as its value, thus the answer to the question is yes. The important detail, however, is how the inherited value is determined. As Temani has already pointed out, it's not as straightforward as it may seem.

How are inherited values computed?

A great read on cascading and inheritance is the CSS Cascading and Inheritance Level 3 spec: https://www.w3.org/TR/css-cascade-3/. It states that:

The inherited value of a property on an element is the computed value of the property on the element’s parent element.

Based on the spec, here's my simplified version of the process of determining the computed value for any property on any element:

1. Collect all the declared values for a property on an element - i.e. all the relevant and valid CSS declarations found in developer stylesheets and style attributes, user agent stylesheets, etc.

2. Determine the cascaded value - the winning value of all the declared values (this is where rules are prioritised and a single one comes out on top).

3. If there is no cascaded value, use the inherited value if the property is inherited.

4. If the property is not inherited (see this question for a list of properties that are inherited by default: Which CSS properties are inherited?), use the initial value. Each and every property has an initial value according to the spec (e.g. the initial font-size is medium; worth noting that it is not an absolute value like 16px!).

5. At this point a property will have some value assigned to it, but it may be a relative value, i.e. dependant on some other CSS properties (e.g. a percentage value depends on some absolute value, such as the parent's absolute dimensions). At this step a value will be resolved as far as possible so that it is unambiguous and ready for inheritance.

   It is important to note that just like the spec defined an initial value for every property, it also defines how to derive the computed value. E.g. MDN specified this computed value for font-size:

as specified, but with relative lengths converted into absolute lengths

So medium remains medium, but 1.2em becomes, say 19.2px (if the parent's font size is 16px).

The important bit

The same Cascading and Inheritance spec points out that:

The computed value exists even when the property does not apply (as defined by the “Applies To” line). However, some properties may change how they determine the computed value based on whether the property applies to the element.

So every element will have a computed value for every property, but may not use it (the so-called used value, which is the next step after computed value, is none). The computed value is what will be inherited.

What all this means for my SVG button example:

1. I am definitely allowed to set stroke and fill on a <button>. It will ignore this property when rendering itself, but will pass it on to its children, if required.
2. The child SVG will inherit these properties by default (I don't even need to explicitly specify that).
3. The computed values for stroke and fill do not have any caveats so I can expect the correct colour to be inherited (and it is!).

Difference between CSS Keywords and Properties?

Not quite.

A keyword is a pre-defined value that can be used as the value of a CSS property, which combined become a declaration. For example, left and right are keywords that can be used with the float property. There are also other kinds of values that can be used with properties, such as length values (such as 10px or 20em for properties like width or height), strings such as "hello!" for properties such as content, and functions, such as rgba() for the color and background-color properties. Functions use round brackets to hold additional values.

See the definition of keywords at http://www.w3.org/TR/css3-values/#keywords

What is the most practical way to check for @supports support using only CSS?

@supports currently only tests property/value combinations, and nothing else. Your other options don't work because none of them are valid (including the last one with just the at-keyword followed by the opening brace!). The property/value pair requirement is dictated by the grammar for @supports, which you can find in the spec.

Simply test for a property/value pair that you know is guaranteed to work across all user agents whether or not @supports is implemented. This (sort of) eliminates the possibility that you'll run into a user agent that implements @supports but not that property/value combination, focusing on its support for @supports instead.

Your given example of display: block will suffice. Your use of the cascade to check if a browser does not implement @supports by overriding declarations within a @supports rule for browsers that do support it is also acceptable (being the only obvious way to do it anyway).

understanding css important keyword in this example

It's a.readMore instead of .readMore a (the first case would search for an element with class .readMore and append the CSS to any children a-elements)

and #mainNewsBody .news should be #mainNewsBody.news (you should 'concatenate' the id and class since they refer to the same element)

making a total of #mainNewsBody.news a.readMore

Fiddle

EDIT

I see many notes on simplifying your css to just classes. This really depends on what you're trying to accomplish. If you're working with a huge CSS file, I'd recommend specifying as strict as possible. This to prevent any CSS being applied on places where you don't want it to.

a { } for example will mess with all your links, a.news { } will only mess with a class='news'

Reset/remove CSS styles for element only

The CSS3 keyword initial sets the CSS3 property to the initial value as defined in the spec. The initial keyword has broad browser support except for the IE and Opera Mini families.

Since IE's lack of support may cause issue here are some of the ways you can reset some CSS properties to their initial values:

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

#reset-this-root {
    all: initial;
    * {
        all: unset;
    }
}

• Relevent github repo with a december 2017 more exaustive list
• Related
• Related from MDN
• Related W3C specs

As mentioned in a comment by @user566245 :

this is correct in principle, but individual mileage may vary. For
example certain elements like textarea by default have a border,
applying this reset will render those textarea's border less.

---

JAVASCRIPT ?

Nobody thought about other than css to reset css? Yes?

There is that snip fully relevant : https://stackoverflow.com/a/14791113/845310

getElementsByTagName("*") will return all elements from DOM. Then you
may set styles for each element in the collection:

answered Feb 9 '13 at 20:15 by VisioN

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...
}

---

With all this said; i don't think a css reset is something feasable unless we end up with only one web browser .. if the 'default' is set by browser in the end.

For comparison, here is Firefox 40.0 values list for a
<blockquote style="all: unset;font-style: oblique"> where font-style: oblique triggers DOM operation.

align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
paint-order: unset;
perspective-origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
ruby-align: unset;
ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
writing-mode: unset;
z-index: unset;

---

Related Topics