Публікації блогу Міки > Рубрика: Моя справка по PHP та ін. > "Вендорні префікси. Що це?"


Вендорні префікси. Що це?


12 Липень 2011 02:44:54


Вендорні префікси - це приставки до назв CSS властивостей, які додають виробники браузерів для нестандартних властивостей. Це приставки CSS властивостей, які заточені під конкретні браузери, які дозволяють їм розуміти експерементальні CSS властивості та ігнорувати властивості написані для інших браузерів.

Згідно специфікації CSS 2.1 CSS ідентифікатори, які починаються з "-" чи "_" зарезервовані для CSS розширень браузерів. Присутність цих знаків на початку властивостей гарантує, що в майбутньому розширення браузерів ніколи не перетнуться із стандартними CSS властивостями. Тобто, жоден браузер не буде "випадково" розуміти властивість, яка для нього не призначена.

Властивості з вендорними префіксами не відповідають стандартам та не пройдуть валідацію.


Які бувають вендорні префікси?

Вендорні префікси популярних браузерів:

Вендорний префікс Виробник Браузер Двигунець браузера
-o-, -op-, -xv- Opera Software Opera Presto
-moz- проект Mozilla Firefox, SeaMonkey, Camino и др. Gecko
-ms- Microsoft Internet Explorer 8 Trident
-khtml- проект KDE Safari до версии 3, Konqueror и др. KHTML послужил основой для WebKit
-webkit- Apple Safari 3+, Google Chrome и др. WebKit

Як це працює?

Для елемента прописується CSS властивість в прямому виді для браузерів, які її розуміють. Слідом за ним через крапку з комою перераховується та ж саме властивість, тільки з різними вендорними префіксами для різних браузерів. Браузер з такого коду інтерпретує тільки ті властивості, які написані під нього, а написане для інших браузерів - ігнорує.

Наприклад, CSS властивість opacity, яка відповідає за прозорість елементу, кросбраузерно використовується так:

opacity:0.5/*  Safari 2.0+ , Chrome, Firefox Opera, */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5-7*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8*/
-moz-opacity:0.5;/* Mozilla 1.6 */
-khtml-opacity:0.5;/* Konqueror 3.1, Safari 1.1 */

Для чого це потрібно?

В своєму блозі розробники Internet Explorer називають три причини використання вендорного префікса -ms- для браузера IE8:

- Якщо ця властивість розроблена тільки для Microsoft IE і не описана в специфікації та CSS модулі;

- Якщо CSS модуль, до якого відноситься ця властивість знаходиться в розробці W3C та ще не досягнув статусу кандидата для рекоментації (Candidate Recommendation);

- Якщо властивість тільки частково виконує функції властивості, описаної в CSS модулі чи специфікації.

Інші розробники використовують вендорні префікси по подібних причинах. Наприклад Mozilla меє великий список індивідуальних CSS властивостей та їх значень з вендорними префіксами -moz-, які розроблені спеціально для Firefox, та не описані, ні в модулі CSS, ні в специфікації.

Крім того, розробники Microsoft вмудрилися за допомогою вендорних префіксів ховати від валідатора не валідні конструкції. Це стосується, перш за все, фільтрів. Для IE 5.5-7 фільтр виглядає так:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5-7*/

Така конструкція пройти валідацію не може! Але її (валідацію) проходить нова конструкція того ж фільтру, тільки вже для IE 8:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8*/

Звісно, не дуже хочеться в коді писати вендорні властивості під кожен браузер замість одного рядка коду зі стандартними властивостями. Але варто пам'ятати, що специфікація CSS3 поки ще знаходиться в розробці. Можливо, що в описі властивостей при стандартизації щось зміниться, або її взагалі не буде в специфікації.


Приємний бонус

Завдяки вендорним префіксам виробники браузерів вже вбудовують CSS3 властивості на свій страх та ризик.

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

Прикладом такої реалізації може бути використання CSS3 властивості transition. Поставимо собі завдання - для посилання, при наведенні курсору, плавно змінювати колір, не використовуючи JavaScript. Для цього в CSS для посилання потрібно прописати код:

transition:background-color 5s ease-in 3s;/* в прямом виде не поддерживает ни один браузер */
-webkit-transition:background-color 5s ease-in 3s;/* работает в Safari 3.1+, Chrome 1+ */
-o-transition:background-color 5s ease-in 3s;/* работает в Opera 10.5+ */
-moz-transition:background-color 5s ease-in 3s;/* планируется для Firefox 4.0+ */

Джерело інформації

Автор: Міка
Кількість переглядів: 4467

Рейтинг: Рейтинг
Ваша оцінка:
1
2
3
4
5






Коментарів ще нема

  • X
    Ваше ім'я:

    Ваш E-mail:
    Ваш коментар:

    Ми хочемо знати, що Ви не робот. Будь ласка введіть суму цифрами:
    Сімсот Сімдесять Сім