Зменшуємо кількість вендорних префіксів

15

Від автора: Для активації певних властивостей деяких браузерах велика частина веб-розробників зараз застосовують вендорные префікси в CSS. Це чудово, але іноді я бачу приклади коду і інструменти додавання префіксів, де з надмірним ентузіазмом додаються всі можливі з коли-небудь вживалися префіксів (а іноді навіть ті, які ніколи не застосовувалися). Я вважаю, що для багатьох властивостей CSS можна безпечно припинити використання вендорних префіксів або, принаймні, значно скоротити їх кількість.

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

Ви подумаєте: «О, ні! Ви відгороджується від тих, хто користується старими версіями браузера X!». Ні, це питання не игонорирования кого-небудь чи «непідтримки» певних версій браузерів. Це питання застосування прогресивного поліпшення для зменшення кількості CSS і спрощення його управління та підтримки. Ми не говоримо тут про важливі властивості. Якщо браузер не підтримує властивість без префікса, ну що ж, в ньому не буде закруглених кутів, або тіней, або градієнтів, або чогось ще. Результат буде виглядати, як в IE8, яким все ще користується більше народу, ніж, скажімо, Firefox 3.6, або Chrome 9, або Safari для iOS 4, або якимись іншими старими версіями браузерів, яким може знадобитися вендорний префікс.

Поки вся розмітка не руйнується при відсутності підтримки якого-небудь властивості, це загалом нормально – за умови, що принаймні пара останніх версій всіх основних браузерів стане застосовувати ваш CSS.

border-radius

Без вендорних префіксів.

.example {
border-radius:10px;
}

Поточна браузерна підтримка border-radius.

box-shadow

Без вендорних префіксів.

.example {
box-shadow:0 0 5px rgba(0,0,0,0.5);
}

Поточна браузерна підтримка box-shadow.

background-origin, background-size and background-clip

Без вендорних префіксів.

.example {
background-origin:content-box;
background-size:100% auto;
background-clip:content-box;
}

Поточна браузерна підтримка фонів CSS3.

Градієнти

Можливо, градієнти (linear-і radial gradient-gradient) – це ті самі властивості, де можна більше всього заощадити при зменшенні кількості префіксів. Я не роблю їх тут повністю беспрефиксными, а використовую тільки префікс -webkit- (і нестарий синтаксис WebKit).

Тому замість чого-небудь подібного (що виходить при застосуванні інструментів додавання вендорних префіксів):

.overkill-example {
background:#f9f9f9;
background:-moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
background:-webkit-gradient(linear, left, top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f2f2f2));
background:-webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
background:-o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
background:-ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
background:linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
filter:програми:DXImageTransform.Microsoft.gradient( startColorstr=’#ffffff’, endColorstr=’#f2f2f2′,GradientType=0 );
}

Я застосував би наступне:

.example {
background:#f9f9f9;
background:-webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
background:linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
}

Тут лише одне додаткове заяву. І, спостерігаючи за браузерною підтримкою градієнтів CSS, я думаю, що через рік-другий опущу і його теж.

calc()

Тут я користуюся тільки префіксом -webkit-.

.example {
background-position:100% 100%;
background-position:-webkit-calc(100% + 30px) -webkit-calc(100% + 16px);
background-position:calc(100% + 30px) calc(100% + 16px);
}

Зауважте, що вам, можливо, доведеться застосовувати calc() з обережністю. Якщо ви користуєтеся їм властивостей, що впливають на розмітку, переконайтеся в наявності заяви-альтернативи для неподдерживающих браузерів уникнути повного краху.

Поточна браузерна підтримка calc().

Переходи

Для переходів я застосовую тільки префікс -webkit-:

.example {
-webkit-transition:background-position 0.5 s;
transition:background-position 0.5 s;
}

Як і у випадку з градієнтами, думаю, через деякий час я зможу повністю відмовитися від префіксів до переходів.

Поточна браузерна підтримка переходів CSS.

Пристосовуйте до свого сценарієм

Вище наведені приклади того, як я зараз володію з вендорными префіксами для даних властивостей CSS. Якщо у вас або ваших клієнтів багато користувачів сидять на старих версіях, таких як Firefox 3.6 або iOS 2.1, і якщо прогресивне поліпшення візуального представлення неприйнятно, вам доведеться користуватися великою кількістю префіксів. Особисто я все ще отримую звіти про помилки щодо пропущених префіксів, але намагаюся заздалегідь пояснити своєму клієнтові ідею прогресивного поліпшення.