свойство без префикса поставщика, за которым следует префикс свойств поставщика в CSS3

Question

В соответствии с одним из answer: «Почему браузеры создают префиксы поставщиков для свойств CSS?», Одна из причин, по которой необходим префикс поставщика, заключается в том, чтобы избежать разрыва страницы если окончательная спецификация свойства отличается от реализации (интерпретации) поставщика.

Я прочитал книгу, которая говорит, что это, как правило, хорошая практика, чтобы поместить свойство без префикса поставщика после поставщика приставкой объявлений свойств, как показано ниже:

p { 
    -webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    -ms-hyphens: auto; 
    -o-hyphens: auto; 
    hyphens: auto; 
} 

Допустим, что окончательная спецификация дефисов отличается от интерпретация поставщиков. Если кто-то разработал веб-страницу, которая зависит от некоторых префиксных реализаций поставщика, не будет ли разрыв дизайна страницы, потому что, как я полагал, спецификация «дефис» отличается от спецификации поставщиков? Если интерпретации совпадают с окончательной спецификацией, я думаю, что код выше в порядке. Почему код выше, как правило, является хорошей практикой?

Answer 1

фрагмент кода, при условии, считается хорошей практикой, потому что это (надеюсь) вперед и назад совместимо .. .

В основном с нестандартной реализацией каждый браузер может реализовать свойство несколько иначе, чем префиксы. Если все пойдет хорошо, в конечном итоге различные браузеры будут стандартизировать свойство и, как мы надеемся, сделают его таким же образом.

Префиксные версии будут работать в настоящее время и (надеюсь) к тому моменту, когда браузеры стандартизовывают свойство и удаляют префикс, который будет работать без префикса.

Я знаю, что видение, «надеюсь» выше, не настолько обнадеживает, если вы хотите, чтобы ваш CSS был пуленепробиваемым, не используйте новые свойства до тех пор, пока они не будут стандартизированы или не будут деформировать ваши вещи.

---

Некоторые свойства CSS3, как границы радиуса, несколько стандартизированы и будет отображаться корректно без префикса, но не каждый интернет-пользователь сохраняет свой браузер до настоящего времени, так что это может быть хорошей идеей, чтобы продолжать использовать префикс на некоторое время.

С другой стороны, есть некоторые свойства, которые Firefox будет отображать без префикса, который Chrome не будет, например animation и . В этом случае использование префиксной версии, за которой следует не префиксная версия, имеет смысл.

.myClass { 
 
    position: relative; 
 
    -webkit-animation: myAnimation 3s; /* Chrome will use this */ 
 
    animation: myAnimation 3s; /*Firefox will ignore the -webkit- property and use this */ 
 
} 
 
@-webkit-keyframes myAnimation { /* Chrome will use this */ 
 
    from { 
 
    background: red; 
 
    top: 10px; 
 
    } 
 
    to { 
 
    background: blue; 
 
    top: 100px; 
 
    } 
 
} 
 
@keyframes myAnimation { /*Firefox will ignore the -webkit- property and use this */ 
 
    from { 
 
    background: red; 
 
    top: 10px; 
 
    } 
 
    to { 
 
    background: blue; 
 
    top: 100px; 
 
    } 
 
}

<div class="myClass">Hello World</div>

Попробуйте выше фрагмент кода в обоих Firefox и Chrome, чтобы увидеть то, что я говорю.

Answer 2

Код выше является хорошей практикой из-за CSS's overidding feature.

В этом случае вы дать браузеру возможность проверить, если он имеет специфический поставщика префикс (современные браузеры обычно не нужно, но это хорошо, когда поддержку более старые версии) и, наконец, у вас есть общее свойство (catch-all);

, если браузер не распознает ни один из видов собственности, это будет просто ingnore его ...