Loading icon

Вендорні префікси CSS + генератор онлайн

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

Вендорні префікси – це приставки, які використовують браузери, для експериментальних CSS стилів (які не входять у стандарти W3C)

Про валідність коду (W3C) ви можете почитати у статті: “Що таке валідність і навіщо вона?“, а також про “HTML” і CSS“” валідність.

Трішки історії. Вендорні префікси з’явились із приходом CSS 2.1, коли браузерам дозволили використовувати префікси, які б починались із “-” або “_” і тут понеслось… Для прикладу, ще до появи CSS3 розробники заморочувались із такою відомою нам властивістю як “border-radius“, коли один розробник реалізував це як випуклі кути, а інший як ввігнуті краї. Кому за це дякувати, W3C, чи розробникам?

Благо, прийшли більш стабільні часи, коли розробники браузерів схаменулись і почали розуміти суть властивості і підглядати за іншими, як же без цього :)

Які існують види префіксів? Для прикладу:

  • -o- – Opera
  • -moz- – Mozilla браузери
  • -ms – – Microsoft (наші улюблені IE браузери)
  • -webkit- – для браузерів на Webkit двигуні (Safari і Chrome)
  • -icab- – iCab браузер (альтернатива браузеру від Apple)
  • -khtml- – KHTML компонент для перегляду HTML документыв, якы були розроблены для KDE і UNIX систем

Як застосовувати? Візьмемо простий приклад:

Як бачимо, префікси ставляться перед CSS властивістю. При цьому основну властивість (без префікса) пишемо в кінці списку.

CSSFx – генератор CSS префіксів.

Ми ознайомились із поняттям вендорних префіксів, розібрались для чого вони, а тепер ознайомимося з автоматичним генератором префіксів.

У відповідному вікні, на сайті, записуємо CSS правило і натискаємо кнопку для генерації префіксів.

Так ми отримаємо згенерований код. Але, якщо нам потрібне це застосувати для всього коду на сайті, як тоді краще вчинити?

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

Браузери, які підтримуються:

  • Firefox 3+
  • Chrome 1+
  • Internet Explorer 6+
  • Safari 3+
  • Opera 9+

І так, давайте підключимо його. Для цього, переходимо на сайт і завантажуємо останню версію скрипта.

В header.php вашої теми додаємо наступне:

effects.css – ваш CSS файл.

CSSFX сайт: imsky.github.io/cssFx

От і все. Успіхів і натхнення вам :)

Популярні пости
1
unicode
Символи юнікод (unicode) – Шпаргалка

15 Лис 2012

2
3
3 онлайн сервіса для роботи з кольорами і гамами

4 Тра 2012

3
CSS-Reset
CSS Reset – Скидаємо CSS стилі

5 Вер 2012

    Підпишись

    Якщо хочеш отримувати місячну підбірку найкорисніших постів.