Вендорні префікси CSS + генератор онлайн
3, Чер, 2013
Власне, вендорні префікси далеко не новина і на даний час широко застосовується, але все ж, на мій погляд, це корисна і цікава річ, яка варта уваги.
Вендорні префікси – це приставки, які використовують браузери, для експериментальних 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 систем
Як застосовувати? Візьмемо простий приклад:
1 2 3 |
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; |
Як бачимо, префікси ставляться перед CSS властивістю. При цьому основну властивість (без префікса) пишемо в кінці списку.
CSSFx – генератор CSS префіксів.
Ми ознайомились із поняттям вендорних префіксів, розібрались для чого вони, а тепер ознайомимося з автоматичним генератором префіксів.
У відповідному вікні, на сайті, записуємо CSS правило і натискаємо кнопку для генерації префіксів.
Так ми отримаємо згенерований код. Але, якщо нам потрібне це застосувати для всього коду на сайті, як тоді краще вчинити?
Все просто, на цьому ж сайті є скрипт. Якщо ми його підключемо, ми отримаємо автоматичну генерацію префікса для завантажуваного браузера, зручно, чи не так?
Браузери, які підтримуються:
- Firefox 3+
- Chrome 1+
- Internet Explorer 6+
- Safari 3+
- Opera 9+
І так, давайте підключимо його. Для цього, переходимо на сайт і завантажуємо останню версію скрипта.
В header.php вашої теми додаємо наступне:
1 2 |
<link rel="stylesheet" href="effects.css" class="cssfx"> <script src="cssfx.min.js"></script> |
effects.css – ваш CSS файл.
CSSFX сайт: imsky.github.io/cssFx
От і все. Успіхів і натхнення вам :)
0