Ich habe diesen Code gefunden, der prüft, ob CSS-calc unterstützt wird:
// Check whether CSS-calc is supported
help = $('<img src="/images/buttonup.png">');
help.css({ width: "10px" });
help.css({ width: "calc(10px + 10px)" });
if (help.width() == 20) var calcSupport = true; else var calcSupport = false;
Funktioniert im Firefox aber nicht im Chrome. Der Grund ist anscheinend, dass width() im Chrome 0 liefert.
Chrome unterstützt calc jedoch, wie das Verhalten an anderer Stelle zeigt.
Nicht dein Ernst, oder?
Du bist doch lange genug dabei, um zu wissen, dass man Code nicht findet, sondern selber schreibt und bei JS-Problemen grundsätzlich die Konsole zu Rate gezogen wird. Zumal das Obige nun wirklich Einsteiger-Niveau ist.
Gib mal $(‚
‘) ein und schau, was die Konsole zurück liefert.
Ich hätte mich wohl besser gleich an die Quelle wenden sollen:
http://stackoverflow.com/questions/31225815/check-for-css-calc-doesnt-work-in-chrome
Dort habe ich mehrere konstruktive Antworten bekommen und das Ergebnis ist, dass Chrome computed styles nicht berechnen kann, wenn das Element nicht im DOM ist. So funktioniert es:
// Check whether CSS-calc is supported
help = $('<img src="/images/buttonup.png">');
$("body").append(help);
help.css({ width: "10px" });
help.css({ width: "calc(10px + 10px)" });
if (help.width() == 20) var calcSupport = true; else var calcSupport = false;
help.remove();
Die Antwort war nach einigen Bierchen und bei der Hitze heute nacht nicht besonders freundlich, aber trotzdem konstruktiv, und überlege dir mal deine Frage: Du schreibst, dass width() auf ein Element im Chrome 0 zurück liefert und hinterher stellt sich heraus, dass dieses Element nicht Bestandteil des DOMs ist. Die von mir vorgeschlagene Konsoleneingabe hätte dir leere Square-Brackets und damit implizit die Antwort geliefert.
Nebenbei bemerkt hat Chrome 43 Probleme mit calc(), sofern man es als calc(100% - XXpx) anwendet. Da hilft es dann, 1 Pixel abzuziehen.