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

Загрузка...

Cобственно, вендорные приставки далеко не новость и в настоящее время широко применяется, но все же, на мой взгляд, это полезная и интересная вещь, которая стоит внимания.

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

 

Немножко истории.

Вендорные приставки появились с приходом 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 систем

 

Как применять? 

Возьмем простой пример:

-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+

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

И так, давайте подключим его. Для этого, переходим на сайт и скачиваем последнюю версию скрипта. В  header.php (если вордпресс) вашей темы добавляем следующее:

<link rel="stylesheet"href="effects.css"class="cssfx"><script src="cssfx.min.js"></script>

 

CSSFX сайт: imsky.github.io/cssFx Вот и все. Успехов и вдохновения вам.

 

Загрузка...

Скопировать и поделиться:

Анонс: Вендорные префиксы CSS и генератор онлайн 2015 Cобственно, вендорные приставки далеко не новость и в настоящее время широко применяется, но все же, на мой взгляд, это полезная и интересная вещь, которая стоит внимания. Вендорные префиксы - это

Читайте также:

Ключевые слова статьи: генератор, ксс, префиксы, онлайн, в интернете, стили, приставки, css 3.
© При копировании полного текста или его фрагмента (цитирования), укажите открытую и индексируемую ссылку на сайт-источник (ссылка должна вести на главную страницу или страницу с той статьтей, которую скопировали).

Комментирование записей временно запрещено...

Чтобы задать интересующий вас вопрос - обращайтесь через форму контактов. Внимание! Данный сайт не хранит на своих серверах видео, защищенные авторскими правами, а лишь воспроизводит их из популярных видеохостингов Youtube, Rutube и VK, где разрешено встраивание видео на внешних ресурсах.
Все ролики загружены случайными пользователями социальных сетей или взяты из официальных каналов. Если вы - правообладатель, то выключайте данную функцию в менеджере загруженных видео для того, чтобы запретить показ выпуска / серии на сторонних сайтах.
Также, для удобства просмотра данного сайта, рекомендуется отключить Adblock, который может блокировать элементы навигации на веб-странице. После просмотра какого-либо ролика, который по случайности заблокировал Адблок, вы можете снова активировать работу расширения.
Копирование текстовой информации и фото с сайта разрешено только с дополнительной установкой активной, прямой, индексируемой ссылки на страницу с записью или на главную страницу Newkittyy.ru.

Навигация: » » Вендорные префиксы CSS и генератор онлайн 2015