Crossbrowser version? about cssom HOT 10 CLOSED

Way to go man!

Really handy library that is missing in javascript world. Personally, I have a LOT of need to parse custom css declarations in my interface library. Features I'm personally interested in:

• Media queries - for one-file theming capabilities. I put css declaration in a media query making them "invisible" when different theme is used.
• Function calls - used for svg emulation of gradients. I also use some kind of a custom 'calc()' function that builds complex expressions for css calculations (page width - left column width * 1.1).
• Complex css property definitions. Need a lot of improvement in this land, because there practically is no handy way to parse expressions like "background: rgba(1, 1, 1, 0.1) url('...') no-repeat top 10%" or "background-image: gradient(from(#333), to(hsl(0, 3, 4)))". I mean i'd love to!

And well, that's not even a full list. I'd like ie7 support, but currently i don't support it either, so it's only for future. I told about my needs to sir subtleGradient, but apparently he's too busy right now.

P.S. Right now i have to use very fucked up techniques, because my parser cant handle complex expressions: `background-color: "['gradient', rgba(0, 0, 0, 1), rgba(0, 0, 0, 2)]" - already-parsed-evallable-representation-in-string

from cssom.

Widgets.css

.art {
  display: inline-block;
  -art-shadow-blur: 20;
  -art-shadow-offset-y: 5;
  -art-shadow-color: hsb(0, 0, 0, 0.5);
}

I see you are creating some custom CSS properties. I haven't yet used CSS parser for that.

• Media queries is on the top of my todo list.
• You are talking about things like width: ART.Styles.calculate("width", 'parent - 150'), right? So what kind of features you expect from CSSOM?
• Parsing values at the bottom of my todo list. It seems pretty hard task to me.

from cssom.

No custom properties? That's sad :)

On expressions, i'm not absolutely sure. I don't see a reasonable way to represent an expression with parenthesizes and multiple variables that is later easy to use. On the other hand, gecko does it like gradient(from(...), to(...)) so if we could have such expression parsed (nested functions support would be hot) i will re-do the expressions to something like:

calc(subtract(width("parent"), width("left"))) which is basically calc(width("parent") - width("right") sans need to parse expressions.

I have a workaround for complex values setting them in evallable array that gets mapped to a setter function and sets properties in a loop. I'm not proud of this and it's slower. I've seen a webkit spec by your link on parsing complex values and i see that it's much better to have them parsed from the start.

from cssom.

CSSOM.js already can parse -webkit-gradient (or -moz-gradient, whatever). However, it does not parse the value into tokens. It keeps it intact. This is all you can do according to the CSSOM spec:

document.styleSheets[0].cssRules[0].style.setProperty("background-image", "-webkit-gradient(linear, left top, left bottom, from(orange), to(indigo))")
document.styleSheets[0].cssRules[0].style.getPropertyValue("background-image")
-> "-webkit-gradient(linear, 0% 0%, 0% 100%, from(orange), to(rgb(75, 0, 130)))"
document.styleSheets[0].cssRules[0].style.getPropertyCSSValue("background-image")
-> {
  constructor: CSSValueConstructor,
  cssText: "-webkit-gradient(linear, 0% 0%, 0% 100%, from(orange), to(rgb(75, 0, 130)))",
  cssValueType: 3,
  __proto__: {
    CSS_CUSTOM: 3,
    CSS_INHERIT: 0,
    CSS_PRIMITIVE_VALUE: 1,
    CSS_VALUE_LIST: 2,
    __proto__: Object
}

The CSSOM spec does not define any API to parse values like gradients into primitives. I'm not sure I can help you here. You have to parse values using something else.

from cssom.

yeah, that's already something. I could manually parse the funciton calls out.

So then, my personal requests are: Custom properties and consistent parsing of things in media queries without problems with comments and such. I'd be very happy to use the thing.

from cssom.

So if I understand this correctly, basically there wont be support for setting the background-image of an element with multiple declarations for cross-browser compatibility? i.e. something akin to:

.container {
    background-color: #EBEBEB;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), color-stop(0.1, #FAFAFA), color-stop(0.9, #EBEBEB), to(#EBEBEB)); 
    background-image: -webkit-linear-gradient(top, #FFFFFF, #FAFAFA 10%, #EBEBEB 90%, #EBEBEB); 
    background-image: -moz-linear-gradient(top, #FFFFFF, #FAFAFA 10%, #EBEBEB 90%, #EBEBEB); 
    background-image: -ms-linear-gradient(top, #FFFFFF, #FAFAFA 10%, #EBEBEB 90%, #EBEBEB); 
    background-image: -o-linear-gradient(top, #FFFFFF, #FAFAFA 10%, #EBEBEB 90%, #EBEBEB); 
    background-image: linear-gradient(top, #FFFFFF, #FAFAFA 10%, #EBEBEB 90%, #EBEBEB);
}

The way it parses out to now is to only return the last declaration, which is problematic (this property isn't well supported now)

from cssom.

See #16.

from cssom.

I have the need for IE compatibility including IE7 and ideally IE6 for use in a CSS authoring tool.

from cssom.

You'd have to tear up all getters and setters such as cssText.

I'll probably replace __defineGetter__ with Object.defineProperty to make it work in the latest IE but that is all. I don't want to sacrifice nice API and CSSOM spec conformance to make it work in old version of IE.

from cssom.

Fair enough.

from cssom.