Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
Zurück zur Übersicht
Javascript: Clip-Path Unterstützung ermitteln
#Tutorials#Javascript#CSS
Möchte man die neue clip-path CSS Eigenschaft verwenden, aber vorher testen, ob der Browser die Eigenschaft überhaupt unterstützt, so kann man dies mit dem folgender Funktion leicht überprüfen.
// Check if clip-path is supported. From http://stackoverflow.com/a/30041538.
function ClipPathSupported() {
var base = 'clipPath',
prefixes = [ 'webkit', 'moz', 'ms', 'o' ],
properties = [ base ],
testElement = document.createElement( 'testelement' ),
attribute = 'polygon(50% 0%, 0% 100%, 100% 100%)';
// Push the prefixed properties into the array of properties.
for ( var i = 0, l = prefixes.length; i < l; i++ ) {
var prefixedProperty = prefixes[i] + base.charAt( 0 ).toUpperCase() + base.slice( 1 ); // remember to capitalize!
properties.push( prefixedProperty );
}
// Interate over the properties and see if they pass two tests.
for ( var i = 0, l = properties.length; i < l; i++ ) {
var property = properties[i];
// First, they need to even support clip-path (IE <= 11 does not)...
if ( testElement.style[property] === '' ) {
// Second, we need to see what happens when we try to create a CSS shape...
testElement.style[property] = attribute;
if ( testElement.style[property] !== '' ) {
return true;
}
}
}
return false;
};
Das ganze lässt sich dann natürlich einfach verwenden. Die Funktion gibt true oder false zurück, ob clip-path unterstützt wird.
var clipPathSupport = ClipPathSupported();
Kommentare
Es gibt noch keine Kommentare. Sei der Erste!
Hinterlasse einen Kommentar