How to Access the Value of Invalid/Custom CSS Properties from JavaScript

Can I access the value of invalid/custom CSS properties from JavaScript?

I don't think you can access invalid property names, at least it doesn't work in Chrome or Firefox for me. The CSSStyleDeclaration simply skips the invalid property. For the given CSS:

div {
    width: 100px;
    -my-foo: 25px;
}

style:CSSStyleDeclaration object contains only the following keys:

0: width
cssText: "width: 100px"
length: 1

However, interestingly this is what the DOM-Level-2 Style spec says:

While an implementation may not recognize all CSS properties within a CSS declaration block, it is expected to provide access to all specified properties in the style sheet through the CSSStyleDeclaration interface.

implying that the CSSStyleDeclaration object ought to have listed the -my-foo property in the above example. Maybe there is some browser out there which supports it.

The code I used for testing is at http://jsfiddle.net/q2nRJ/1/.

Note: You can always DIY by parsing the raw text. For example:

document.getElementsByTagName("style")[0].innerText

but that seems like a lot of work to me, and not knowing your reasons for doing this, I can't say if a better alternate for your problem exists.

Accessing CSS custom variable with Javascript

Most (all?) browsers won't load unknown CSS into the DOM, and JavaScript cannot directly access CSS styles directly, only the ones that are loaded into the DOM.

The only way I can think of would be to implement your own CSS parsing JavaScript, but for the mostpart, that would probably be excessive for what you want to do, and a pure JavaScript solution or a class value would better.

e.g. In HTML

<div class="moveable"></div>

Using that example, you could use your JavaScript to get the classname of the element, and if it has the "moveable" class, you know it can move.

EDIT:
In @Anurag's posted link to the Mozilla bug, it is mentioned that unknown CSS properties are to be ignored as part of the CSS 2.1 specification.

How to read a browser's unsupported CSS properties?

For IE9:

After some testing, I made a further discovery.

Although 'transition' is not a supported property in IE9, it DOES show up in document.stylesheets[n].cssRules[n].cssText, unlike in other browsers, and ultimately shows up as getComputedStyle(node).transition. This means reading it is easy. Double joy!

Interestingly, and probably uselessly, all the prefixed rules show up as well - so you can read -moz- and -webkit- prefixed rules in your JavaScript.

For FF3.6 / WebKit

No such tricks for FF3.6 or below, or WebKit, although I'm not too worried. I reckon the takeup of FF4 will be pretty speedy.

CSS & Javascript: Get a list of CSS custom attributes

Short Answer: IE 9 will give you these values.

However, Firefox/Chrome/Safari parse them out.

example jsfiddle

you can loop through the document's stylesheets to find a match to the desired selector (note that this can be a costly procedure especially on sites with large/multiple CSS files)

var css = document.styleSheets, 
    rules;

// loop through each stylesheet
for (var i in css) {
    if (typeof css[i] === "object" && css[i].rules || css[i].cssRules) {
        rules = css[i].rules || css[i].cssRules;
        // loop through each rule
        for (var j in rules) {
            if (typeof rules[j] === "object") {
                if (rules[j].selectorText) {
                    // see if the rule's selectorText matches
                    if (rules[j].selectorText.indexOf('.test') > -1) {
                        // do something with the results.
                        console.log(rules[j].cssText);
                        $('.test').html(rules[j].cssText);
                    }
                }
            }
        }
    }
}

you'll notice in browsers other than IE 9 (haven't tested IE 8 or lower) that the -custom- styles have been removed from the cssText.

CSS Invalid Property Value?

change

background-color:

to

background:

Because background is a shorthand property for

• background-color
• background-image
• background-position
• background-repeat
• background-attachment

Is it possible to check if a CSS variable is defined or not?

Because what I would like is that when the variable is not define to get the style that it will have if that line was not there in the CSS.

This is not possible even if you use an invalid value.

From the specification

A declaration can be invalid at computed-value time if it contains a var() that references a custom property with its initial value, as explained above, or if it uses a valid custom property, but the property value, after substituting its var() functions, is invalid. When this happens, the computed value of the property is either the property’s inherited value or its initial value depending on whether the property is inherited or not

And

If a property contains one or more var() functions, and those functions are syntactically valid, the entire property’s grammar must be assumed to be valid at parse time. It is only syntax-checked at computed-value time, after var() functions have been substituted.

So any property using a css variable will be valid whatever its content. It will be invalid only at computed time and will fallback to inherit or initial (never to another value specified somewhere else)

See the below example.

html {
   background:red;
   background:lol-gradient(var(--c), super-power-red-color);
}

how to reset a CSS variable (aka custom properties) and use the fallback one?

You can unset the value using initial to use the fallback one:

:root {

  --border-width-top: 2px;

  --border-width-right: 2px;

  --border-width-bottom: 2px;

  --border-width-left: 2px;

  --border-width: 0;

}

div {

  margin:5px;

  border-color: red;

  border-style: solid;

  border-width: var(--border-width, var(--border-width-top) var(--border-width-right) var(--border-width-bottom) var(--border-width-left));

}

div.box {

  --border-width:initial;

  --border-width-top: 10px;

}

<div>some content</div>

<div class="box">some content</div>

---

Related Topics