Кросс-браузерная совместимая тень коробки с переходом

У меня есть следующий CSS для создания тонкой тени, которая появляется с переходом 0,15 с.

#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;
}

Мой вопрос таков: будет ли переход 0,15 с применяться к браузерам, которые выбирают версию box-shadow с префиксом поставщика?

Я не хочу применять переход ко "всем" следующим образом:

transition: all 0.15s

Как обеспечить согласованное поведение в разных браузерах?


person Amit    schedule 24.02.2017    source источник
comment
box-shadow существует с 2010 года, кроссбраузерный, без префикса, поэтому нет необходимости использовать для него префикс.   -  person Ason    schedule 24.02.2017


Ответы (1)


Поставщики браузеров иногда добавляют префиксы к экспериментальным или нестандартным свойствам CSS, поэтому разработчики могут экспериментировать, но изменения в поведении браузера не нарушают код в процессе стандартизации. Разработчикам следует подождать с включением свойства без префикса, пока поведение браузера не будет стандартизировано.

Обычно поставщики используют следующие префиксы:

-webkit- (Chrome, Safari, более новые версии Opera.)

-moz- (Файрфокс)

-o- (Старые версии Opera)

-ms- (Internet Explorer)

Вендоры также используют префиксы в API. В интерфейсах они обычно используют:

Webkit (Chrome, Safari, более новые версии Opera.)

Моз (Firefox)

O (Старые версии Opera)

МС (Интернет Эксплорер)

В свойствах и методах они обычно используют:

webkit (Chrome, Safari, более новые версии Opera.)

муз (Firefox)

о (Старые версии Opera)

мс (Internet Explorer)

person Priyank Makwana    schedule 24.02.2017
comment
Извините, это не ответ на мой вопрос - person Amit; 24.02.2017