Матвей Земсков

Заметки веб-мастера

Четверг, 20 августа 2015 15:05

Узнаем о поддержке CSS-свойств браузерами с помощью командной строки

Оцените материал
(0 голосов)

Обычно при создании сайта используются различные технологии, которые могут полностью не поддерживаться во всех браузерах. Возьмем для примера, CSS. В некоторых браузерах какое-то определенное свойство поддерживается частично, а в каких-то не поддерживается совсем.

Для того, чтобы узнать поддерживает ли браузер какое-то определенное правило CSS, веб-разработчики используют сайт http://caniuse.com. На нем довольно подробно описано в каких-браузерах (с учетом версии) работают правила CSS, а в каких — нет.

На сайте http://caniuse.com кроме информации о CSS, вы сможете узнать о поддержке браузерами различных возможностей HTML, SVG и JS API. На страницах сайта находятся ссылки на спецификации W3C, указан статус спецификации. По возможности, создатели сайта добавляют информацию о некорректной работы каких-либо свойств в браузерах. При этом учитывается версия браузера.

Например, на скриншоте одной из страниц сайта caniuse.com, представленной ниже, мы можем видеть, что IE, Firefox и Opera mini не поддерживают CSS Reflection, а в остальных браузерах эти CSS-правила нужно использовать с указанием префиксов.

Скриншот страницы сайта caniuse.com

Де-факто, CanIUse — это инструмент, благодаря которому можно узнать в какой степени в десктопных и мобильных браузерах поддерживаются современные веб-стандарты.

Кроме сайта caniuse.com, существует приложение CanIUse, которое можно использовать с помощью терминала или командной строки. Если вы часто пользуетесь командной строкой, то для экономии вашего времени вам будет полезно получать информацию в терминале, а не искать ее на сайте.

Установка приложения

Чтобы установить CanIUse, вам необходимо сначала установить NodeJS и npm.

Если команды npm -v или node -v возвращают номер версии (как показано на рисунке ниже), то вы готовы к установке консольного приложения CanIUse. В противном случае (если вы увидели сообщение “command not found ”), скачайте и установите NodeJS. Перед загрузкой инсталятора выберите свою ОС. Приложение доступно для Windows, OS X и Linux.

Установлен ли NodeJS?

Чтобы установить CanIUse запустите в терминале следующую команду:

npm install -g caniuse-cmd

Эта команда установит приложение глобально, что позволит вам иметь к нему доступ, находясь в любой папке вашего компьютера. После установки вам будет доступна команда caniuse. Каких-то особенных правил поиска информации при использовании этой команды не предусмотрено. Поиск в терминале особо не отличается от поиска на сайте caniuse.com. Например, команда caniuse box shadow выведет описание правила CSS3 box-shadow.

Пример использования CanIUse

Обратите внимание, что название свойств необходимо писать через пробел.

В основном, результаты поиска через командную строку ничем не отличаются от результатов поиска на сайте. Даже если поиск производится по части слова, например, soc или sock, первым пунктом списка в результатах поиска вы увидите информацию о Web Socket.

Поиск через CanIUse

В заключении статьи хочется отметить, что CanIUse является отличным дополнением к таким инструментам, работающим в терминале, как Gulp или Grunt. В конечном итоге, использование перечисленных инструментов позволяет значительно ускорить ваш рабочий процесс. Работая с CanIUse, у вас «отпадает» необходимость покидать терминал, для того, чтобы проверить поддерживает ли определенный браузер современные возможности HTML, CSS или SVG.

Оригинал статьи - http://www.hongkiat.com/blog/browser-compatibility-command-line-caniuse/

Прочитано 1001 раз

Добавить комментарий


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: