1

I have the following CSS for generating a subtle box shadow which appears with a transition of 0.15s.

#product {
    -webkit-transition: box-shadow 0.15s;
    -moz-transition: box-shadow 0.15s;
    -ms-transition: box-shadow 0.15s;
    -o-transition: box-shadow 0.15s;
    transition: box-shadow 0.15s;
    border-collapse: separate;
}

#product:hover {
    -webkit-box-shadow: 0px 0px 14px 0px #C3C3C3;
    -moz-box-shadow: 0px 0px 14px 0px #C3C3C3;
    box-shadow: 0px 0px 14px 0px #C3C3C3;
}

My Question is this - will the transition of 0.15s apply to the browsers which picks up the vendor-prefixed version of box-shadow?

I don't want to apply transition to 'all' like this:

transition: all 0.15s

How do I ensure consistent behavior across browsers?

Amit
  • 1,620
  • 1
  • 15
  • 24
  • `box-shadow` has been around since 2010, cross browser, unprefixed, so no need to use prefix on it – Asons Feb 24 '17 at 07:15

1 Answers1

2

Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties, so developers can experiment but changes in browser behavior don't break the code during the standards process. Developers should wait to include the unprefixed property until browser behavior is standardized.

Typically the vendors use these prefixes:

-webkit- (Chrome, Safari, newer versions of Opera.)

-moz- (Firefox)

-o- (Old versions of Opera)

-ms- (Internet Explorer)

Vendors also use prefixes on API. On interfaces, they typically use:

Webkit (Chrome, Safari, newer versions of Opera.)

Moz (Firefox)

O (Old versions of Opera)

MS (Internet Explorer)

On properties and methods, they typically use:

webkit (Chrome, Safari, newer versions of Opera.)

moz (Firefox)

o (Old versions of Opera)

ms (Internet Explorer)

Priyank Makwana
  • 85
  • 4