snippetjavascriptTip
Use JavaScript to prefix a CSS property based on the browser
Viewed 0 times
javascriptprefixbasedcssusethepropertybrowser
Problem
Sometimes, you want to use a CSS property that is not yet supported by all browsers. Browsers often support these properties by using a vendor prefix, which is a string that is prepended to the property name. For example, Safari uses
But how can you detect if a browser supports a certain CSS property? And how can you prefix a CSS property based on the current browser? Luckily, the
In order to use this interface, you can access the
This is pretty simple to check for a specific property or browser environment, but it's a hassle to do this for multiple properties and browsers. As browser prefixes are well-known, you can use an array of prefixes to check against each one of them.
Prefixed properties can be checked, using the camel-cased attribute of the
-webkit-, Firefox uses -moz- etc.But how can you detect if a browser supports a certain CSS property? And how can you prefix a CSS property based on the current browser? Luckily, the
CSSStyleDeclaration interface exposes dashed and camel-cased attributes for all supported CSS properties.In order to use this interface, you can access the
style property of the Document.body object. Then, you can check if the property is defined as-is or with a vendor prefix.This is pretty simple to check for a specific property or browser environment, but it's a hassle to do this for multiple properties and browsers. As browser prefixes are well-known, you can use an array of prefixes to check against each one of them.
Prefixed properties can be checked, using the camel-cased attribute of the
CSSStyleDeclaration interface. You can use String.prototype.charAt() and String.prototype.toUpperCase() to capitalize the property name, which will be appended to the vendor prefix string.Solution
// Check if the 'appearance' property is defined
typeof document.body.style.appearance !== 'undefined';
// Check explicitly for the 'webkitAppearance' property
typeof document.body.style.webkitAppearance !== 'undefined';In order to use this interface, you can access the
style property of the Document.body object. Then, you can check if the property is defined as-is or with a vendor prefix.This is pretty simple to check for a specific property or browser environment, but it's a hassle to do this for multiple properties and browsers. As browser prefixes are well-known, you can use an array of prefixes to check against each one of them.
Prefixed properties can be checked, using the camel-cased attribute of the
CSSStyleDeclaration interface. You can use String.prototype.charAt() and String.prototype.toUpperCase() to capitalize the property name, which will be appended to the vendor prefix string.Finally, you can use
Array.prototype.findIndex() to check if Document.body has one of the prefixed properties defined in its CSSStyleDeclaration object. If it does, you can return the prefixed property, otherwise you can return null.Code Snippets
// Check if the 'appearance' property is defined
typeof document.body.style.appearance !== 'undefined';
// Check explicitly for the 'webkitAppearance' property
typeof document.body.style.webkitAppearance !== 'undefined';// Known browser prefixes (empty string for the default property)
const prefixes = ['', 'webkit', 'moz', 'ms', 'o'];const prop = 'appearance';
const prefixes = ['', 'webkit', 'moz', 'ms', 'o'];
const capitalizedProp = prop.charAt(0).toUpperCase() + prop.slice(1);
prefixes.map(prefix => (prefix ? prefix + capitalizedProp : prop));
// [
// 'appearance',
// 'webkitAppearance',
// 'mozAppearance',
// 'msAppearance',
// 'oAppearance'
// ]Context
From 30-seconds-of-code: prefix-css-property
Revisions (0)
No revisions yet.