Условные комментарии
Если нужно создать резервный CSS или включить кроссбраузерность JavaScript для ранних версий Internet Explorer, то можете использовать условные комментарии. Они поддерживаются в Internet Explorer 5-9, они используют синтаксис комментариев HTML в сочетании с логическими значениями. В зависимости от логического значения (true или false) код внутри тегов комментариев будет выводиться или скрываться в соответствующих версиях браузера:
<!--> КОД, КОТОРЫЙ БУДЕТ ВЫПОЛНЯТЬСЯ <!--> // если Internet Explorer // если НЕ Internet Explorer // если Internet Explorer 7 // если НЕ Internet Explorer 7 // если Internet Explorer 9 или НИЖЕ // если Internet Explorer 7 или ВЫШЕ // если Internet Explorer 6 ИЛИ 7 // если ВЫШЕ Internet Explorer 6 НО НИЖЕ 9
Код автоматически скрывается во всех браузерах, не поддерживающих условные комментарии. Наглядным примером того, как условные комментарии могут быть эффективно использованы на практике, является HTML5 Boilerplate, который добавляет специфические классы CSS для устаревших версий Internet Explorer:
<!--> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <!--> <!--> <html class="no-js lt-ie9 lt-ie8" lang=""> <!--> <!--> <html class="no-js lt-ie9" lang=""> <!--> <!--><!--> <html class="no-js" lang=""> <!--<!-->
Текущая ситуация
Общемировая статистика за 2015 год показывает, что топ-14 используемых разрешений экрана находятся в диапазоне от 1920 на 1080 до 320 на 480 пикселей.
Хотя Windows 7 (31,20%) до сих пор удерживает большую долю рынка, мобильные платформы начинают заменять традиционные, стационарные.
Взглянув на статистику за 2015 год по используемым браузерам, мы видим, что первое место принадлежит Chrome (все версии — 44,87%), второе место — Firefox (все версии — 10,37%), третье Internet Explorer 11 (6,84%).
Ускоренные темпы выпуска новых версий Google Chrome и Firefox позволяют более эффективно разрабатывать проекты для этих платформ. Немного другая картина складывается для «плохого парня» Internet Explorer, потому что в Сети до сих пор можно найти его старые версии. А это приводит к возникновению проблем с кроссбраузерностью сайта.
Корпорация Microsoft остановила поддержку IE6 8 апреля 2014 года. И с 2016 года будет поддерживаться и получать обновления только самая последняя версия Internet Explorer. Это фактически означает, что в начале 2016 года была полностью прекращена поддержка IE7 и IE8, независимо от операционной системы. IE9 будет поддерживаться только в Windows Vista, IE10 — только в Windows Server 2012, IE11 — в Windows 7 и Windows 8.1:
Как следствие, нужно прекратить разработку под IE6 и, а также под IE7. Чтобы обосновать эту стратегию, можно привести несколько примеров решений известных компаний: прекратила поддержку IE8 в ноябре 2012 года, а IE9 — в октябре 2013 года.
Github больше не поддерживает IE 7 и 8. Кроме этого часть функционала не работает в IE8. И, наконец, популярный фреймворк не будет поддерживать IE8, начиная с 4 версии.
Тем не менее, статистика использования может варьироваться в зависимости от региона: 6,11% пользователей в Китае в 2015 году по-прежнему просматривали страницы через IE8
Если принять во внимание, что в Китае было около 724400000 интернет-пользователей, можно понять, что в этом году примерно 44200000 китайцев продолжают использовать IE8
Поэтому региональные рынки, специфические клиенты и требования отрасли могут существенно отличаться. Особенно это касается корпоративных и правительственных учреждений.
Проанализируйте свою аудиторию
Основной принцип здесь такой: чем выше требуемая кроссбраузерность, тем больше времени потребуется на разработку, что приводит к увеличению стоимости проекта. Чтобы принять взвешенное, экономически обоснованное решение, нужно задать себе следующие вопросы:
- Какова ваша целевая аудитория?
- На какой географический регион нужно настроить таргетинг?
- Какие браузеры и устройства используют ваши посетители?
- Существуют ли в компании или отрасли технические факторы, которые заставляют вас поддерживать конкретные версии старых браузеров?
- Каковы с точки зрения электронной коммерции коэффициенты конверсии и рентабельности различных групп пользователей по версиям браузеров?
Ответив на эти вопросы с помощью статистических данных, например, из Google Analytics, можно получить объективную картину.
Определение функций с помощью Modernizr
Библиотека Modernizr, написанная на JavaScript, поможет проверить кроссбраузерность сайта: поддерживается ли в различных браузерах конкретная функция HTML5 или CSS3. Если функция не доступна, то может быть загружен альтернативный CSS или JavaScript-код.
Идея заключается в том, чтобы напрямую определять функциональные возможности браузера, а не пытаться установить его конкретную версию. И на основании этого выводить его функциональные возможности, что является менее эффективным и надежным способом.
Стоит отметить, что Modernizr не добавляет недостающие функции в браузер. Поэтому вам нужно будет предоставить код из резервного CSS или полифилла.
Для начала необходимо скачать полнофункциональную сборку. Позже, когда вы будете готовы к разработке, можно создать пользовательскую сборку со специфическими функциями, которые вы тестируете. Все, что нужно сделать, это добавить класс .no-js в HTML-тег сайта и включить скрипт Modernizr в разделе head после любого CSS-файла:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Modernizr Demo</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<script src="modernizr.js"></script>
</head>
<body>
<h1>Modernizr Demo</h1>
<p>This is a Modernizr exercise.</p>
<script src="script.js"></script>
</body>
</html>
Класс .no-js используется, чтобы проверить, включен ли JavaScript в браузере пользователя. Если он включен, Modernizr заменит .no-js классом .js. Функция тестирования Modernizr анализирует, поддерживается ли в браузере конкретная функция и генерирует ряд классов, которые добавляются в HTML-элемент. Google Chrome 47.0.2526.111, например, будет возвращать следующие классы объектов.
В настоящее время Modernizr доступен в качестве глобального объекта, который можно вызвать в сочетании с названием функции, чтобы проверить существует ли она. Он возвращает логическое значение (true или false).
Рассмотрим два простых примера CSS и JavaScript.
Пример решения проблем CSS кроссбраузерности: проверка поддержки SVG и предоставление в качестве резервного варианта PNG
В настоящее время наблюдается тенденция к все более активному использованию SVG (Scalable Vector Graphics), но эта графика не поддерживается в IE8 и ниже. Если SVG поддерживается в браузере, Modernizr генерирует CSS-класс .svg. Если SVG не доступен, инструмент добавляет в HTML класс.no-svg. С помощью приведенного ниже CSS браузеры с поддержкой SVG будут использовать обычный класс .logo, в то время как браузеры, не поддерживающие SVG — правила .no-svg:
.logo {
background-image: url('logo.svg');
width: 164px;
height: 49px;
}
.no-svg .logo {
background-image: url('logo.png');
width: 164px;
height: 49px;
}
Пример JavaScript: определение border-radius и добавление соответствующих классов CSS
Округление углов рамки не поддерживается в IE8 и ниже. Мы можем создавать различные CSS-классы, которые применяются в зависимости от наличия функции border-radius:
// Класс для браузера с функцией border-radius
.round-borders {
border-radius: 5px;
}
// Класс для браузера без функции border-radius
.black-borders {
border: 3px solid #000000;
}
Теперь можно использовать JavaScript, чтобы сохранить целевой идентификатор в качестве переменной, а затем через условие добавить классы CSS:
var element = document.getElementById('TestID');
if (Modernizr.borderradius) {
element.className = 'round-borders';
} else {
element.className = 'black-borders';
}
Заключение
Когда речь идет об адаптивном веб-дизайне в устаревших браузерах, не существует какого-то универсального решения
Важно проанализировать аудиторию ресурса, чтобы получить представление о реальной численности пользователей браузеров. Затем нужно тщательно протестировать сайт, чтобы выявить потенциальные проблемы кроссбраузерности
Тщательно выбирая правильные полифиллы, добавляемые в условных комментариях, можно обойти отсутствие наиболее существенных функций HTML5. Кроме этого возможность определения с помощью Modernizr является удобным способом предоставить резервные CSS и JavaScript для устаревших браузеров, в которых отсутствует поддержка современного функционала HTML5 и CSS3.
Пожалуйста, опубликуйте ваши комментарии по текущей теме статьи. За комментарии, отклики, дизлайки, лайки, подписки огромное вам спасибо!
Вадим Дворниковавтор-переводчик статьи «Cross-Browser Compatibility Responsive Web Design for Old Browsers»
Элемент
Выпадающий список для автозаполнения каталогов в Google Chrome.
Элемент <datalist> используется для указания всех возможных значений списка. Каждое из них определяется с помощью элемента <option>.
<datalist id="languages"> <option value="HTML"> <option value="CSS"> <option value="JavaScript"> <option value="Java"> <option value="Ruby"> <option value="PHP"> <option value="Go"> <option value="Erlang"> <option value="Python"> <option value="C"> <option value="C#"> <option value="C++"> </datalist>
Элемент <datalist> должен иметь атрибут id. Чтобы связать datalist с <input>, нужно указать атрибут list в поле ввода и установить для него значение id элемента datalist.
<input type="text" list="languages">
Это все, что нужно, чтобы добавить функции автозаполнения к элементу <input>. Браузер позаботится о поиске вариантов datalist для сопоставления значений и их последующего отображения.
Как проверить кроссбраузерность сайта
Самый простой способ определить наличие кроссбраузерности – вручную открыть и проанализировать все страницы сайта в наиболее популярных обозревателях. Согласитесь, метод практически неприемлемый для крупных интернет-проектов, особенно с постоянно обновляемым контентом. Хотя совсем исключать этот способ тоже не стоит.
Сначала нужно понять, какие браузеры нужны для теста. Для этого лучше всего воспользоваться специальными сервисами аналитики – Яндекс.Метрикой и Google Analytics. Они покажут, каким браузерами отдают предпочтение ваши пользователи. Согласно статистике Statcounter, в тройку лидеров в РФ входят: Google Chrome, Яндекс.Браузер и Opera.
Проверить кроссбраузерность веб-ресурса в автоматическом режиме можно с помощью специальных платных и бесплатных сервисов. Рассмотрим некоторые из них подробнее.
CrossBrowserTesting
Сервис является платным, работает в режиме онлайн, поддерживается практически всеми версиями операционных систем и браузерами, в том числе мобильными.
Используются следующие способы проверки:
- «Живой тест». Можно работать с ресурсом в браузере с заранее выбранными параметрами, записывать видео и делать скриншоты.
- Тест Selenium. Подразумевает автоматическую проверку в соответствии с предварительно созданным скриптом. Результаты записываются в формате видеофайла.
- Режим автоматического сохранения скриншотов. Можно комбинировать различные ОС, браузеры, устройства и размеры экранов.
- Локальное подключение. Можно проверить документы, которые еще не загрузились на сайт.
В течение 7 дней доступен бесплатный тестовый период с лимитом в 60 минут.
Browsershots
Онлайн-сервис проверки сайтов на кроссбраузерность в более чем 200 обозревателях и их сборках, в том числе малопопулярных и устаревших. Результат сохраняется в виде скриншотов. Есть бесплатная и платная версии. При бесплатном варианте запрос ставится в очередь, период ожидания может достигать нескольких часов. В случае платной подписки сайт будет проверяться в приоритетном порядке.
IE NetRenderer
Как видно из названия, проверить кроссбраузерность сайта можно только для Internet Explorer, начиная с версии 5.5 и заканчивая 11. Сервис работает онлайн, указать здесь можно только версию браузера и адрес тестируемого ресурса.
Browserling
Осуществляет проверку не в эмулируемом, а в реальном окне браузера, который установлен на виртуальной машине программы. Работает с ОС Windows и 4+ версиями ОС Android в пяти популярных браузерах – Chrome, Opera, IE, Safari, Firefox. Ресурс полностью платный.
Spoon Browser Sandbox
Проводит бесплатную проверку кроссбраузерности сайта в последних версиях Chrome, IE, Opera, Safari и Firefox. Тестирование в старых релизах платное. После загрузки специального плагина доступно тестирование всех параметров кроссбраузерности. Интерфейс русифицирован.
MultiBrowser
Платный сервис проверки кроссбраузерности. Работает со всеми доступными версиями Firefox, Chrome, Safari 5.1, несколькими сборками Explorer и эмуляциями большинства смартфонов и планшетов. Приложение способно подключать браузеры, уже установленные на ПК, либо загружать версии, которые нужны пользователю. Есть функция тестирования сайта в различных браузерах в офлайн-режиме. Бесплатная демо-версия доступна в течение двух недель.
Sauce Labs
Онлайн-сервис тестирования кроссбраузерности. При оформлении платной подписки доступна автоматическая проверка около 700 комбинаций браузеров, разрешений и устройств.
Equafy
Очень эффективная программа, она не только тестирует кроссбраузерность веб-ресурса в режиме онлайн, но и производит автоматическое сканирование и поиск ошибок верстки в самых разных браузерах. В интерфейсе доступно множество настроек, которых нет во многих других подобных сервисах. Отчет сохраняется в скриншотах.
Viewlike.us
Очень хороший инструмент для проверки адаптивности внешнего вида сайта на экранах устройств с разными расширениями. Помимо проверки кроссбраузерности, можно узнать скорость загрузки, размер элементов HTML-кода и изображений. Встроенный инструмент позволяет получить рекомендации касательно правил юзабилити.
Normalize.css и CSS Autoprefixer
Обычно я начинаю новые проекты в CDN со сброса CSS с помощью Normalize.css, который обеспечивает лучшую кроссбраузерность при определении стилей HTML-элементов, используемых по умолчанию, вплоть до Internet Explorer 8. Normalize.css сохраняет нужные стили элементов, нормализует их внешний вид и исправляет ряд ошибок и несоответствий в различных браузерах.
Кроме этого многие устаревшие браузеры не могут интерпретировать неизвестные элементы HTML и свойства CSS. Когда браузер встречает фрагмент HTML или CSS, который он не понимает, то игнорирует его и продолжает процесс отображения. Многие приложения используют вендорные префиксы, чтобы добавить новые, экспериментальные или нестандартные функции CSS до их реализации в спецификации:
// Webkit-браузеры, такие как Chrome и Safari -webkit- // Firefox -moz- // Internet Explorer -ms- // Opera -o-
Проблема заключается в том, что префиксы неудобны в использовании и с ними связано много ошибок. Поэтому я использую плагин CSS Autoprefixer в сочетании с Grunt.
Обычные правила CSS будут обработаны с помощью плагина и к ним будут добавлены префиксы на основе базы данных «Can I Use«. Рекомендуется задать в конфигурации версии браузеров, которые нужно поддерживать, например:
options: {
browsers:
}
В качестве примера рассмотрим следующий класс CSS:
.example {
background-image: linear-gradient(top left, #4676dd, #00345b);
display: flex;
transition: 1s all;
}
С помощью CSS Autoprefixer он преобразуется в:
.example {
background-image: -webkit-linear-gradient(top left, #4676dd, #00345b);
background-image: -moz-linear-gradient(top left, #4676dd, #00345b);
background-image: linear-gradient(top left, #4676dd, #00345b);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-transition: 1s all;
-moz-transition: 1s all;
transition: 1s all;
}
Полифиллы
Технические несоответствия устаревших браузеров для адаптивного веб-дизайна можно исправить с помощью полифилла. Он представляет собой фрагмент JavaScript кода, который «заполняет» специфический функциональный разрыв между устаревшим браузером и функцией. Существует целый ряд полифиллов, которые могут быть использованы для обеспечения поддержки браузером функций HTML5.
Ниже приведено несколько полифиллов, предназначенных для устранения проблем кроссбраузерности сайта, указанных в пункте 3:
- respond.js — реализует медиа-запросы CSS3 для Internet Explorer 6 — 8;
- html5shiv разрешает использование семантических элементов HTML5 в Internet Explorer 6 — 8;
- selectivzr — эмулирует селекторы и псевдоклассы CSS3 в Internet Explorer 6 — 8. Для полной поддержки требуется либо Mootools 1.3, либо NWMatcher 1.2.3. Частичная поддержка доступна с помощью JQuery 1.3/1.4;
- REM-unit-polyfill — определяет, поддерживает ли браузер единицы rem, и обеспечивает запасной вариант. Работает с IE8 и ниже.
Для использования указанных полифиллов, их нужно добавить из CDN или в виде файла в корректном формате внутри условных комментариев в разделе <head> (не забудьте включить одну из необходимых для Selectivizr библиотек JavaScript):
<!--> <script src="app/js/selectivizr.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script> <script src="app/js/rem.min.js"></script> <!-- <! -->
Для каждого проекта необходимо оценить, действительно ли необходимы эти дополнительные скрипты, поскольку они могут привести к проблемам с производительностью. Большинство полифиллов компактные, но каждый дополнительно загружаемый скрипт представляет собой дополнительный HTTP-запрос. Это может замедлить загрузку страницы.
Загрузка вариантов через AJAX
Выпадающий список автозаполнения с вариантами, загружаемыми с помощью AJAX.
Если нужно добавить в элемент <datalist> большое количество вариантов, можно сохранить эти значения во внешнем JSON- файле. Затем получить этот файл с помощью AJAX, и заполнить варианты <datalist> после загрузки страницы. Давайте рассмотрим пример реализации. Начинаем с элементов <input> и <datalist>. Убедитесь, что вы связали их с помощью атрибутов id и list.
<input type="text" id="ajax" list="json-datalist" placeholder="e.g. datalist"> <datalist id="json-datalist"></datalist>
Затем нужно получить ссылки на эти два элемента в JavaScript- коде.
// Получаем элементы <datalist> и <input>.
vardataList = document.getElementById('json-datalist');
var input = document.getElementById('ajax');
После этого загрузить JSON-файл (html-elements.json) и заполнить варианты для элемента <datalist>. В этом примере мы используем массив строк. Но также можно использовать и более сложную структуру данных.
// Создаем новый XMLHttpRequest.
var request = new XMLHttpRequest();
// Обрабатываем изменение состояния для запроса.
request.onreadystatechange = function(response) {
if (request.readyState === 4) {
if (request.status === 200) {
// Парсируем JSON
varjsonOptions = JSON.parse(request.responseText);
// Перебираем через цикл массив JSON.
jsonOptions.forEach(function(item) {
// Создаем новый элемент <option>.
var option = document.createElement('option');
// Устанавливаем значение, используя элементы массива JSON.
option.value = item;
// Добавляем элемент <option> к <datalist>.
dataList.appendChild(option);
});
// Обновляем текст заполнителя.
input.placeholder = "e.g. datalist";
} else {
// Возникла ошибка :(
input.placeholder = "Couldn'tload datalist options :(";
}
}
};
// Обновляем текст заполнителя.
input.placeholder = "Loading options...";
// Настраиваем и выполняем запрос.
request.open('GET', 'html-elements.json', true);
request.send();
Приведенный выше код загружает файл html-elements.json с помощью XMLHttpRequest. После того, как файл извлечен, мы парсим необработанные данные JSON, чтобы получить массив JavaScript. Затем перебираем через цикл элементы массива. Каждый раз, когда мы создаем новый элемент <option>, устанавливается атрибут value для текущего элемента в массиве. После чего добавляем <option> в <datalist>. В следующем примере используется свойство placeholder для элемента <input>, чтобы отобразить статус загрузки параметров элемента datalist.
Демо-версияCodePen
Проблемы в устаревших браузерах и различные подходы к разработке
Адаптивный веб-дизайн во многом зависит от медиа-запросов, с помощью которых изменяется CSS для различных разрешений экрана. Кроме этого современные сайты характеризуются использованием семантических элементов HTML5 (например, <header>, <nav>, <section>, <aside>, <footer>) для группировки компонентов дизайна. Селекторы CSS3 используются для выбора конкретных элементов и дальнейшего назначения стилей (например, , :checked, :nth-child(n), :not(selector), :last-child)). И, наконец, адаптивная типографика часто задается с помощью единиц REM (root em).
Это подводит нас к следующим техническим сложностям при реализации CSS кроссбраузерности:
- Медиа-запросы CSS3: не поддерживается в IE6, 7 и 8;
- Семантические элементы HTML5: не поддерживается в IE6, 7 и 8;
- Селекторы CSS3: не поддерживается в IE6. Только частично поддерживаются в IE7 и 8;
- Единицы REM: не поддерживается в IE6, 7 и 8. Только частично поддерживаются в IE9 и 10;
- Лимит количества правил CSS: IE9 и ниже поддерживают только 4095 CSS-селекторов. Правила после 4095-ого селектора не применяются.
Указанные выше ошибки будут иметь наибольшее влияние на стратегию, применяемую при реализации адаптивного дизайна.
Существуют две основных стратегии разработки: постепенное упрощение и прогрессивное улучшение.
Прогрессивное улучшение — основано на принципе, предполагающем начало разработки с общего знаменателя, с минимальных технических требований и уровня опыта взаимодействия пользователя, предлагаемого сайтом. Посетители, заходящие на сайт через последние версии браузеров и устройств, будут обслуживаться прогрессивно расширяемой версией сайта со всеми новейшими функциями.
С другой стороны, пользователям старых браузеров и медленного интернет-соединения будет предлагаться графически усеченная, но все еще функциональная версия сайта.
Подобный подход при реализации кроссбраузерности предполагает начало разработки с простой версии, к которой затем добавляются более сложные элементы. Старые браузеры смогут отображать сайт с базовым уровнем опыта взаимодействия. А новые функции HTML / CSS / JavaScript будут доступны в браузерах, которые могут реально их использовать.
В противоположность этому, постепенное упрощение обеспечивает полнофункциональный уровень UX в современных браузерах. А затем постепенно уменьшает его сложность для старых браузеров за счет графики, но, не касаясь функционала. Идея заключается в том, чтобы начать разработку с новейших веб-стандартов, а затем попытаться минимизировать проблемы, связанные со старыми браузерами.
Какой подход выберете вы, зависит от личных предпочтений и условий проекта:
- Прогрессивное улучшение обеспечивает большую стабильность, так как вы можете постепенно добавлять новые функции для современных браузеров. Но оно требует более тщательного планирования;
- Некоторые разработчики утверждают, что нет смысла поддерживать устаревшие браузеры и должны использоваться новейшие технологии. Поддержка современных браузеров дает намного лучший опыт взаимодействия;
- Существует мнение, что прогрессивное улучшение мертво, так как множество JavaScript-приложений не работают надлежащим образом при этом подходе;
- Веб-доступность для общественных учреждений может быть определена в юридических требованиях конкретных территориальных образований, и это может повлечь необходимость применения особого подхода.
Учитывая появление таких инструментов для определения функций, как Modernizr, лично я склоняюсь к использованию постепенного упрощения и черного списка браузеров при разработке совместимых сайтов.
