Why Doesn't [CSS Feature] Work in [Browser] But Works in Others

Why doesn't [CSS feature] work in [browser] but works in others?

Though it is not always the case, one of the most common reasons why a property like transition or animation works on some browsers and not others is because of vendor prefixes.

What are vendor prefixes?

At the time version 4 of Firefox was introduced, the CSS transition module specification was a Working Draft. Before a spec is finalized (in practice, this is when it reaches Candidate Recommendation), browser vendors add vendor prefixes to properties, values, and @-rules to prevent compatibility problems in case the spec changes.

Vendor prefixes are exactly what their name describes - a vendor-specific (vendor meaning a company who develops a browser) prefix of a property or value. They are often implemented in a specific way for each browser because the property or value is still in one of the many experimental phases before the Candidate Recommendation stage, which is the stage where they are considered implementation-ready.

The most common ones are -moz- (Mozilla Firefox), -webkit- (Chrome, Safari, etc.), and -ms- (Microsoft Internet Explorer), but there are more.

When do I need to use them?

That depends completely on what browsers you're looking to serve, what properties and values you're using, and at what point in time you are developing your website. There are sites that try to keep a current list but they are not always accurate or kept up-to-date.

Following are some of the most commonly prefixed properties and values. If your project does not supporting the browsers mentioned in the comment to the right of the property, then there is no need to include it in your CSS.

Transitions

An unprefixed property sometimes has prefixed equivalents, such as -webkit-transition.

In order to get full possible browser support, the following is necessary:

.foo {
    -webkit-transition: <transition shorthand value>; /* Safari 3.1-6, Chrome 1-25, Old Android browser, Old Mobile Safari, Blackberry browser */
    -moz-transition: <transition shorthand value>;    /* Firefox 4-15 */
    -o-transition: <transition shorthand value>;      /* Old opera */
    transition: <transition shorthand value>;         /* Modern browsers */
}

Note that an -ms- prefix exists for transition, however it was only implemented by pre-release versions of IE10 which are no longer functional, and it is therefore never needed. It is implemented unprefixed in IE10 RTM and newer.

Transforms

.foo {
    -webkit-transform: <transform-list>; /* Chrome 21-35, Safari, iOS Safari, Opera 22, many mobile browsers */
    -ms-transform: <transform-list>;     /* IE9 */
    transform: <transform-list>;
}

Animations

Animations need to have the property prefixed and the corresponding keyframes prefixed, like so:

.foo {
  -webkit-animation: bar; /* Safari 4+ */
  -moz-animation: bar;    /* Fx 5+ */
  -o-animation: bar;      /* Opera 12+ */
  animation: bar;         /* IE 10+, Fx 16+ */
}

@-webkit-keyframes bar { /* Keyframes syntax */ }
@-moz-keyframes bar { /* Keyframes syntax */ }
@-o-keyframes bar { /* Keyframes syntax */ }
@keyframes bar { /* Keyframes syntax */ }

Flexbox

Values can also be prefixed, as in the case of flexbox. Note: For maximum browser compatibility, flexbox-specific properties like ordinal-group, flex-flow, flex-direction, order, box-orient, etc. need to be prefixed in some browsers in addition to the following:

.foo {
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;     /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;  /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -webkit-box-flex: <flex shorthand value>;
    -moz-box-flex: <flex shorthand value>;
    -webkit-flex: <flex shorthand value>;
    -ms-flex: <flex shorthand value>;
    flex: <flex shorthand value>;
}

Calc

.foo {
    width: -webkit-calc(<mathematical expression>); /* Chrome 21, Safari 6, Blackberry browser */
    width: -moz-calc(<mathematical expression>);    /* Firefox <16 */
    width: calc(<mathematical expression>);         /* Modern browsers */
}

Gradients

See CSS Gradients on CSS-Tricks for more information.

.foo {
    background-color: <color>; /* Fallback (could use .jpg/.png alternatively) */
    background-image: url(bar.svg); /* SVG fallback for IE 9 (could be data URI, or could use filter) */  
    background-image: -webkit-gradient(linear, left top, right top, from(<color-stop>), to(<color-stop>)); /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */  
    background-image: -webkit-linear-gradient(left, <color-stop>, <color-stop>); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */  
    background-image: -moz-linear-gradient(left, <color-stop>, <color-stop>); /* Firefox 3.6 - 15 */
    background-image: -o-linear-gradient(left, <color-stop>, <color-stop>); /* Opera 11.1 - 12 */
    background-image: linear-gradient(to right, <color-stop>, <color-stop>); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
}

Note that left and to right represent the same direction, left-to-right, and therefore left and to left point opposite ways. See this answer for some background info.

Border-radius (Not needed in most cases)

.foo {
    -webkit-border-radius: <length | percentage>; /* or iOS 3.2 */
    -moz-border-radius: <length | percentage>;    /* Firefox 3.6 and lower */
    border-radius: <length | percentage>;
}

Box shadow (Not needed in most cases)

.foo {
    -webkit-box-shadow: <box-shadow shorthand value>; /* iOS 4.3 and Safari 5.0 */
    -moz-box-shadow: <box-shadow shorthand value>;    /* Firefox 3.6 and lower */
    box-shadow: <box-shadow shorthand value>;
}

How can they be implemented with JavaScript?

To access prefixed attributes and events in JavaScript, use the camelCase equivalent of the CSS prefix. This is true for event listeners like foo.addEventListener('webkitAnimationIteration', bar ) as well (foo being a DOM object, like document.getElementsById('foo')).

foo.style.webkitAnimation = '<animation shorthand value>';
foo.style.mozAnimation = '<animation shorthand value>';
foo.style.oAnimation = '<animation shorthand value>';

Prefixing tools

Online prefixers can be helpful but are not always reliable. Always make sure to test your project on the devices you wish to support to make sure that each has the appropriate prefix included.

CSS Pre-processor functions:

• SASS & SCSS properties prefixer
• LESS properties prefixer

JavaScript prefixer functions:

• -prefix-free for CSS properties and values
• Event prefixer

See also: Why do browsers create vendor prefixes for CSS properties?

css doesn't work in firefox, but in all other browser it does

the doctype is missing, try adding <!DOCTYPE html>before the <html> tag

Why does this CSS work on Codepen but not directly in browser?

The problem is that you have the styles in LESS format. LESS is a CSS pre-processor. Is not supported natively by the browser. You should compile your LESS styles to CSS and then add those styles to your page.

In codepen the code works because the CSS panel is configured to use LESS but is just a codepen feature, sadly you can't do it for your site / page.

Check out LESS docs to see how to compile it to a valid CSS.

CSS Background image is only working in Chrome and no other browser

Look at your css file. You're path is CSS/styles.css which is a relative file path.

For your images, you're using /Images/image.jpg which is an absolute file path.

If you use /Images on a hosting account online, it will go to whatever your root directory is which is what you intend. If you use /Images on your local device... it will go as far back to get to the root as you can go.

So if my computer structure is:

my-computer
-desktop
--my-project
---index.html
---Images
----image.jpg
---CSS
----styles.css

/Images is going all the way back to the my-computer folder and looking for it there. It wont find it there though.

What you want to do is ../Images to move back one level outside of the css folder and look for the images folder.

Why are my CSS3 media queries not working on mobile devices?

All three of these were helpful tips, but it looks like I needed to add a meta tag:

<meta content="width=device-width, initial-scale=1" name="viewport" />

Now it seems to work in both Android (2.2) and iPhone all right...

CSS Filter didnt work - Chrome Inspector strikes trough

Chrome based on webkit-engine, so you have to use somethink like this.

-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));

Why are there vendor prefixes in CSS3?

This has been asked before, but the short answer is that CSS3 is not a finished product. CSS 2.1 wasn't published until 2011, and only a handful of CSS3 modules have even reached the level of a formal recommendation, so it's premature to talk about a CSS3 specification that is universally implemented. Thankfully, modern browser makers are helping to push things forward and are helping to craft the standard which follows the lead of real-world practice. As they move closer to general standards, the prefixes are dropped.

What is the most practical way to check for @supports support using only CSS?

@supports currently only tests property/value combinations, and nothing else. Your other options don't work because none of them are valid (including the last one with just the at-keyword followed by the opening brace!). The property/value pair requirement is dictated by the grammar for @supports, which you can find in the spec.

Simply test for a property/value pair that you know is guaranteed to work across all user agents whether or not @supports is implemented. This (sort of) eliminates the possibility that you'll run into a user agent that implements @supports but not that property/value combination, focusing on its support for @supports instead.

Your given example of display: block will suffice. Your use of the cascade to check if a browser does not implement @supports by overriding declarations within a @supports rule for browsers that do support it is also acceptable (being the only obvious way to do it anyway).

---

Related Topics