[DISKUSSION] CSS Propertys und Values mit JS prüfen

[jspit]

Hi,
ich möchte gerne per JS prüfen, ob bestimmte Eigenschaften wie "background" vom Browser akzeptiert werden und auch Eigenschaften in Verbindung mit bestimmten Werten, z.B. "font-size: 1.125rem;". font-size wird mit Sicherheit von allen Browsern erkannt, nicht aber rem als Dimension.
Nun gibt es zahlreiche CSS-Checker, ich möchte dies aber selbst ermitteln.
Hab zugegeben die Suche im Web relativ schnell aufgegeben und versucht eine eigene Lösung zu erstellen.
Als Resultat kam diese relativ überschaubare Funktion raus:

    function isCssPropertySupported(propVal){
      if(document){
        propVal = propVal.replace(/;.*$/,"");
        if(propVal == "") return false;
        var style = document.createElement("div").style;
        style.cssText=propVal;
        propVal = propVal.split(":");
        var prop = propVal[0]
          .replace(/^\s+|\s+$/g, '')
          .toLowerCase()
          .replace(/\-./g,  function(v) {return v.substring(1,2).toUpperCase(); });
        var jsVal = style[prop];
        if(typeof(jsVal) === "undefined") return false;
        return propVal[1] ? ((jsVal+"").length > 0) : true;
      }
      return false;
    }

Zum Testen hab ich hier mal ein Schnellschuss zum spielen hochgeladen.

Mein Anliegen:
- gibt es grundsätzliche Bedenken?
- kann die Funktion noch optimiert werden?

LG jspit

Edit: Code verbessert 09.12.2015, Dank an Korbinian

 

[mikdoe]

ich lese gerade in der screenguide über Featurequeries. vielleicht interessiert dich das.
https://blog.kulturbanause.de/2015/03/css-feature-queries-supports/
Can I use... Support tables for HTML5, CSS3, etc

 

[kkapsner]

Das Ganze sieht nicht schlecht aus, aber bei der RegExp im .replace fehlt der g-Flag. Es können ja mehr als ein Bindestrich vorkommen.
Außerdem sind die Eigenschaften nicht immer Strings. So kann z.B. zIndex im IE eine Zahl sein. Ich würde da einfach nur prüfen, ob es undefined ist. Das bringt auch Probleme mit der Prüfung auf jsVal.length.

PS: In den meisten modernen Browsern kann man die CSS-Eigenschaften auch mit dem Bindestrichschreibweise adressieren.

 

[jspit]

Danke für deine Hinweise, hab sie eingearbeitet. Moderne Browser sind nicht mein Problem, mehr die alten und die von der Norm abweichen.
Daher muss der Code auch so geschrieben sein, das nur gestandene Javascriptanweisungen verwendet werden. Hatte z.B. erst trim() drin, dies wird aber vom IE8 nicht unterstützt.

 

[kkapsner]

Ich würde nicht testen, ob die Eigenschaft nach dem Setzen einen Wert hat, sondern ob sich dieser Wert geändert hat. Damit würdest du dann das umgehen:

alert(isCssPropertySupported("length: odiodi;"));
alert(isCssPropertySupported("parent-rule: wirklich?;"));

 

[jspit]

Nur beim Abtesten auf Wertänderung gibt es ein neues Problem.
Wird als cssText z.B. "color:#123" gesetzt, liefert style.color den Wert "rgb(17, 34, 51)" zurück.
Muss nochmal ganz in Ruhe überlegen, wie ich solche style-Eigenschaften die nix mit CSS zu tun haben wie length behandle.

 

[kkapsner]

Ich meinte nicht, dass du die Eingabe mit dem Wert überprüfen sollst, sondern dass du vor dem Setzen den Wert ausliest und dann nach dem Setzen überprüfst, ob sich der Wert geändert hat.

 

[jspit]

Hab dein Tipp umgesetzt und setze die aktuelle Version hier einfach mal rein (Nehme mal den php-Tag, sieht auch für Javscript besser aus):

    function isCssPropertySupported(cssPropVal){
      if(document){
        cssPropVal = cssPropVal.replace(/;.*$/,"");
        if(cssPropVal == "") return false;
        var style = document.createElement("div").style;
        var propValArr = cssPropVal.split(":");
        var styleName = propValArr[0]
          .replace(/^\s+|\s+$/g, '')
          .toLowerCase()
          .replace(/\-./g,  function(v) {return v.substring(1,2).toUpperCase(); });
        var jsValDefault = style[styleName];
        style.cssText = cssPropVal;
        var jsValNew = style[styleName];
        if(typeof(jsValNew) === "undefined" || jsValNew === null) return false;
        if(!propValArr[1]) return true;
        var propVal = propValArr[1].replace(/^\s+|\s+$/g, '');
        return propVal ? (jsValNew != jsValDefault) : true;
      }
      return false;
    }

Ich selbst bin mit den Resultaten so ganz zufrieden, wenn auch immer noch Fälle konstruiert werden können, wo das Script versagt.

LG jspit