Кроссбраузерная верстка css. Что такое кроссбраузерность. Применение CSS для IE5 и IE5.5 одновременно или для нескольких версий

От автора: CSS верстка – это, по сути, второй этап верстки сайта. И определенно очень важный, потому что в итоге именно он формирует внешний вид сайта. Сегодня хотелось бы еще раз подчеркнуть некоторые важные принципы работы с касакадными таблицами стилей.

Верстка с помощью css – что это и зачем оно нужно?

Ну сначала все же немного разъяснений для новичков. Css – это замечательный язык, который полностью состоит из свойств и их значений. Эти самые свойства позволяют определенным образом влиять на внешний вид элементов. Например, свойство color определяет цвет текста, background – фон элемента, font – его шрифт и т.д и т.п.

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

Так вот, css придуман для того, чтобы создавать внешний вид. И со своей задачей он справляется замечательно. HTML позволяет создавать элементы, формировать разметка, а css – оформлять все это дело. Эти два языка связаны неразлучно, так что если отнять один – другой просто станет неполноценным.

Поэтому всегда верстальщик в начале работы создает структуру, необходимые элементы, а потом все это оформляет.

Основные вещи, которые можно сделать в css

Табличная верстка с помощью css. На самом деле от таблиц как от способа верстать во многом отказались из-за громоздкого html-кода, но не так давно в css появились возможности, которые позволили любые элементы превратить в табличные. Вот они: Display: table, display: table-row, display: table-cell.

Соответственно, свойство display определяет, как тот или иной элемент будет отображаться на странице. Первое значение преобразует нужный элемент в таблицу, второе – в ряд таблицы, а третье – в отдельную ячейку. Вот так вот за счет таких нехитрых манипуляций вы можете смастерить искусственную таблицу на странице без единого тега table или td в коде.

Кроссбраузерная верстка. Как css может в этом помочь

А помочь он может очень просто – сбросьте все отступы и правила, которые браузеры могут добавлять по умолчанию, и вы уже добьетесь определенной кроссбраузерности. По крайней мере, веб-обозреватели будут работать по вашим правилам, а не вы по ихним. Этот подход еще называют как css reset. То есть создается набор стилей, который сбрасывает настройки по умолчанию.

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

padding : 0 ; margin : 0 ; ul { list - style : none ;

То есть мы просто убрали все внутренние и внешние отступы и всех элементов, а также убрали маркеры у списков, потому что сегодня мало кто использует их. Цель css reset – позволить вам начать описание стилей с чистого листа.

Рис.1. Каждому из этих товарищей нужно угодить, иначе можно потерять потенциальных посетителей сайта.

Адаптивная верстка в css

Адаптивная верстка это вообще отдельная ветвь в сайтостроении, но в этой статье я всего лишь объясню вам, что это такое с простейшим примером. Вообще я думаю, что названа она очень правильно. Адаптироваться, значит, меняться. А в сайтостроении в основном нужно меняться под разные разрешения экрана. Сайту меняться, всмысле, не человеку же.

Вообще адаптивность сегодня чуть ли не обязательный параметр нормального сайта. Суть ее в том, что дизайн сайта и его структура немного меняются на разных разрешениях экрана. На смартфонах и планшетах, например, пропадает боковая колонка, а на больших экранах макет перестает увеличиваться и центрируется.

Адаптивность реализуется с помощью так называемых медиа-запросов. Обычно их пишут прямо в главном файле стилей. Простейший пример медиа-запроса:

@media and only screen (max-width: 600px){ img{ float: none; } }

@ media and only screen (max - width : 600px ) { img { float : none ;

Что происходит? Этим запросом мы указали браузеру, что если ширина экрана будет меньше 600 пикселей, то нужно отменить обтекание текста изображениями. Зачем? Ну хотя бы потому, что изображение и текст в одной строке, шириной всего 600 пикселей, будут смотреться очень плохо.

Основа адаптивности закладывается с помощью свойства max-width. Например, max-width: 1320px означает, что максимум блок будет тянуться на 1320 пикселей, но если размер окна будет меньше, то он тоже будет уменьшаться. Никакого горизонтального скролла!

Рис.2. Пример записи медиа-запросов. Как видите, для одного шаблона может понадобиться приличное количество правил и стилей, чтобы реализовать нормальную адаптивность.

Какой редактор использовать для работы с css?

Конечно, программа для css верстки должна быть более менее толковой – с поддержкой подсветки синтаксиса как минимум, потому что это очень важно для визуального восприятия кода.

Скриншот с кодом, который вы только что могли наблюдать, сделан из программы Notepad++, где и был открыт css-файл. Мне кажется, этот редактор просто отлично подходит для работы с этим языком – очень хорошо подсвечиваются различные составные части кода, а если разработчик еще и придерживается определенных правил оформления, то код читается просто замечательно.

Узнайте css лучше

Кроссбраузерность, адаптивность, работа с таблицами и многое другое – все это можно очень долго рассматривать отдельно, потому что css предоставляет нам все необходимое для реализации отличного внешнего вида у сайта.

Подробнее о том, как использовать эту технологию при верстке под мобильные устройства, вы можете узнать из . Также в нашем премиум разделе вы можете найти обучающие уроки по основам этой технологии, а также более продвинутый материал по CSS3, поэтому вам не нужно ничего искать, все уже есть, только бери и учись.

Невозможно в столь короткой статье рассказать вам подробно обо всем, что дает верстка с помощью технологии css, но кое-какие моменты, я думаю, вы уловили. Для создания сайта этого просто необходимый язык, без которого нельзя обойтись, а в его изучении вам помогут материалы на нашем сайте, среди которых много и бесплатных. Также я рекомендую вам подписаться на обновления, чтобы было проще получать от нас новые уроки.

Добрый день, союзники!

Мне, как верстальщику, приходится ежедневно сталкиваться с различными CSS3 свойствами, которые, хочется мне или нет, приходится использовать так, чтобы они корректно отображались во всех современных и несовременных браузерах. Само собой, у меня собралась некая библиотека, которую я использую при верстке различных проектов. Собирал я свою коллекцию, из различных ресурсов и форумов, на безграничных просторах сети Интернет, так что неудивительно, если кто-то уже сталкивался с чем-то в отдельности.

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

Для корректной работы CSS3 во всех браузерах, приходится использовать некоторые внешние библиотеки.

Собственно, после всех приготовлений, можно переходить непосредственно к свойствам CSS3, над которыми мы будем издеваться.

Закругленные края или border-radius .border-radius { border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); }
Свойство background-clip: padding-box; исключает возможность того, что картинка на заднем фоне будет залезать на наши закругленные области.

Строка behavior: url(PIE.htc); подключает наш PIE файл, для поддержки данного свойства IE.

Тень блока или box-shadow .box-shadow{ box-shadow: 3px 3px 4px #444; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444"); behavior: url(PIE.htc); }
Свойства filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444"); используются для IE.Градиент на фоне или background: linear-gradient() .gradient{ background-color: #444444; background: -webkit-linear-gradient(top, #444444, #999999); background: linear-gradient(to bottom, #444444, #999999); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr="#81a8cb", endColorstr="#4477a1"); -pie-background: linear-gradient(to bottom, #444444, #999999); behavior: url(PIE.htc); } Двойной задний фон или background: url(), url(); .multiple-background{ background: url(back1.png) 0 0 no-repeat, url(back2.png) 0 0 no-repeat; -pie-background: url(back1.png) 0 0 no-repeat, url(back2.png) 0 0 no-repeat; behavior: url(PIE.htc); }
Современные браузеры, вроде, все понимают, а для IE опять используем PIE.Картинка вместо обводки или border-image: url(); .border-image{ -webkit-border-image: url("image.png") 30 round round; border-image: url("image.png") 30 round round; behavior: url(PIE.htc); }
Здесь свойство behavior не будет работать в IE10.Тень текста или text-shadow На этом прелести PIE заканчиваются. Для использования тени текста в IE, необходимо использовать, вышеупомянутую, библиотеку jQuery.textshadow.

Для использования, необходимо, для начала, в стилях указать нашу тень, для обычных браузеров
.text-shadow{ text-shadow: 1px 1px 3px #000; }

А затем, c помощью библиотеки, просим необычные браузеры IE нас понять
$(function(){ $(".text-shadow").textShadow(); })
предварительно, не забывая, подключить эту библиотеку и все, что необходимо, для ее работы.

Алгоритм расчета ширины и высоты элемента (да, именно такой перевод) или box-sizing .box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; }
К сожалению данное свойство не будет работать в браузерах IE7 и младше. На данный момент я не нашел корректного решения данного вопроса, но это вовсе не означает, что его не существует. Ставим блоки в линию или display: inline-block Прекрасное современное свойство, которое позволяет ставить блоки в один ряд, не используя свойства float и так далее. К моему сожалению, на практике, столкнулся с тем, что многие используют его в чистую. То есть так
.inline-block{ display: inline-block; }
Код в таком исполнении поддерживается лишь последними современными браузерами. Для полной поддержки, в него необходимо добавить немного строчек. Полный код таков:
.inline-block{ min-height: 250px; display: inline-block; vertical-align: top; zoom: 1; *display: inline; _height: 250px; }
Здесь
display: -moz-inline-stack; используется для понимания inline-block старой Mozilla.
Свойство vertical-align: top; выравнивает все блоки по вертикали по верху. В зависимости от задачи можно и по низу.
И наконец свойства
zoom: 1; *display: inline; _height: 250px;
используются для IE. Обратите внимание что в данном случае _height: 250 используется потому, что IE не знает свойства min-height .Прозрачность или opacity .opacity{ opacity: 0.5; filter: alpha(opacity=50); }
Обращаем внимание на то, что в фильтрах, которые используются для IE, значение прозрачности указывается в диапазоне от 0 до 100, а не от 0 до 1 как обычно.Анимация или transition .transition { -webkit-transition: all 1s ease; transition: all 1s ease; } Трансформация объектов или transform .transform{ -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); }
Свойства transition и transform не поддерживаются браузерам IE ниже 9 версии, а transition и вовсе только с 10 версии. Решения для старых IE я пока тоже не нашел. Размер заднего фона или background-size .background-size{ background: url("back.jpg") no-repeat top center; -webkit-background-size: cover; background-size: cover; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="back.jpg", sizingMethod="scale"); } Селекторы CSS3 Речь идет о таких селекторах как
ul li:fist-child{} ul li:last-child{} ul li:nth-child(3){} input{} a:hover{}
И других полезных селекторах: которые были добавлены в CSS3. Для того, чтобы обеспечить качественную поддержку таких селекторов, мы используем, вышеупомянутую, библиотеку Selectivizr. Чтобы она сработала, необходимо просто подключить ее перед нашим файлом CSS.
Полный список селекторов с которыми работает Selectivizr, можно ознакомиться на официальной страничке , в разделе «How does it work?».

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

Обновил свойства border-raduius и opacity. Спасибо pepelsbey за строгое замечание!

Обновил большинство свойств в соответствии с рекомендациями. Спасибо огромное пользователю Aingis за огромную помощь!

При верстке веб-сайтов очень часто возникает ситуация, когда невозможно написать набор css-свойств, который будут одинаково хорошо понимать все основные браузеры. И если с браузерами Firefox, Google Chrome, Opera и Safari такая проблема чаще всего не возникает, то в случае с различными версиями Internet Explorer добиться кроссбраузерной верстки очень сложно. Поэтому для решения этой проблемы нужно написать часть css-свойств специально для некоторых версий IE (чаще всего это IE6 и IE7). Сделать это можно двумя способами: первый — использование условных комментариев Internet Explorer (Conditional comments), второй — применение css-хаков (например, *margin-left:10px или _margin-left:10px). Оба способа имеют ряд недостатков, но, к счастью, есть еще одно решение, которое я считаю самым оптимальным для создания кроссбраузерных css-файлов.

Сначала более подробно о недостатках первых двух способах. В случае с использованием условных комментариев мы подгружаем отдельный css-файл с дополнительными стилями для различных версий Internet Explorer. Например, так:

Недостатки такого способа заключаются в следующем:

• мы получаем дополнительные http-запросы для подгрузки файлов со стилями для различных версий Internet Explorer, что негативно скажется на времени загрузки страницы;
• стили разбиваются на разные файлы, что очень сильно затрудняет их поиск во время работы над версткой сайта (я сам очень часто работал с такими проектами, где отдельные css-файлы для ie7 являются нормой, и потратил кучу времени на понимание, откуда же, черт возьми, грузится тот или иной стиль для IE).

Причем второй недостаток я считаю очень существенным. И в этом плане даже использование css-хаков для IE кажется более удачным способом добиться кроссбраузерной верстки. Но у css-хаков тоже есть недостаток — сайт, на котором они используются не пройдет валидацию. Если валидация веб-страницы не важна, то можно использовать хаки, но существует более изящное решение, чем первые два, которое лишено описанных выше недостатков. С его помощью можно писать все стили в одном файле, который успешно пройдет валидацию. Этот способ описан на сайте Пола Айриша . Его суть заключается в том, что с помощью условных комментариев мы не подгружаем дополнительный css-файл, а просто выставляем особый класс для тега , подобно тому, как выставляет классы js-библиотека Modernizr .

Код для открывающего тега , таким образом, будет выглядеть так:

В моем блоге, кстати, используется именно этот способ кроссбраузерной верстки, чтобы в браузерах IE6 и IE7 страницы сайта отображались также, как и в других браузерах.

От автора: люди пользуются разными браузерами для просмотра веб-страниц. Конечно, есть самые популярные, такие как Chrome. Есть и менее используемые (Safari, Internet Explorer), но если вы делаете сайт для людей, то должны знать про кроссбраузерность – как сделать ее и что это вообще такое. Давайте посмотрим, как добиться одинакового отображения сайта во всех основных браузерах.

Главная цель кроссбраузерности – не допустить значительных изменений дизайна сайта в разных веб-обозревателях. Если разница есть только в мелочах и на общее восприятие сайта это не влияет, то можно сказать, что с проблемой кроссбраузерности вы справились. Но все-таки, какие реальные советы можно дать по этому поводу?

Как добиться кроссбраузерности

На сегодняшний момент есть 5 основных самых популярных браузеров, под которые и нужно оптимизировать сайт. И если с самыми новыми версиями веб-обозревателей обычно подружиться несложно, то чем старее версия, тем больше может быть проблем.

Например, IE6 является одним из самых проблемных браузеров в плане поддержки новых тегов html и свойств css. И все же некоторые сегодня до сих пор требуют нормальное отображение сайта в этом браузере. Как по мне, это уже чересчур. Поддержки IE8 достаточно.

Впрочем, это небольшое отступление. Теперь давайте рассмотрим реальные шаги, которые помогут сделать кроссбраузерность сайта.

Используйте по максимуму готовые решения. Если вы хотите реализовать новые свойства и научить старые браузеры их понимать, понадобятся javascript-библиотеки. Без них в данном случае просто никуда. Вы должны установить jQuery.

Есть такая замечательная javascript-библиотека под названием Modernizr. Ее возможности позволяют реализовать альтернативу для тех свойств, которые не поддерживаются. Именно ее я рекомендую использовать и вам.

Итак, сначала нужно проследовать на официальный сайт. https://modernizr.com/download. Здесь нужно отметить галочками те технологии, которые вы планируете использовать на своем сайте. Нужно сказать, что список достаточно длинный и без среднего знания современных веб-стандартов и английского языка вы едва ли сможете разобраться. В любом случае, есть и интуитивно понятные свойства. Даже если вы отметите галочками все, то полученный код не будет слишком громоздким.

Рис. 1. Выбор технологий, которые будет проверять библиотека.

Проверка работы библиотеки

После скачивания пользовательской версии библиотеки нужно проверить ее работу. Ее необходимо будет подключить с помощью тега script, указав путь до файла. Если все правильно, то у тега html должно появиться много новых стилевых классов. Эти классы названы по тем технологиям, которые вы отметили галочками.

>p?Соответственно, если в теге html будет указан такой класс, значит, технология в этом браузере работает. Если же что-то не поддерживается, то будет прописан класс “no-название технологии”. Сразу же приведу пример:

К примеру, вам надо проверить свойство box-shadow. Для справки, оно задает тень элементу. Если браузер поддерживает его, то в теге html появится этот стилевой класс. Если веб-обозревателей не распознает свойство, то появится класс “no-boxshadow”.

Рис. 2. В теге html вы увидите множество классов. В этом случае видим, что браузер поддерживает практически все технологии.

Теперь управление кроссбраузерностью полностью в ваших руках. Достаточно классу no-boxshadow задать какие-то альтернативные свойства и во всех браузерах, которые не поддерживают свойство box-shadow, вместо этого будут применены эти правила. Это очень удобно.

На хабрахабре я нашел еще один пример, который хотел бы вам здесь привести. Там был приведен пример того, как можно использовать библиотеку для реализации альтернатив в старых браузерах.

Multiplebgs selector { background-image: url("изображение.png") center 40px no-repeat, url("изображение2.png"); } .no-multiplebgs selector { background-image: url("изображение.png") center 40px no-repeat lightgray; }

Multiplebgs selector { background - image : url ("изображение.png" ) center 40px no - repeat , url ("изображение2.png" ) ; } No - multiplebgs selector { background - image : url ("изображение.png" ) center 40px no - repeat lightgray ; }

Объяснение примера. Нас интересует технология множественных фонов, которые давно поддерживаются в СSS3. Для этого достаточно перечислять адреса картинок и их параметры через запятую. Естественно, старые браузеры не поддерживают этого, поэтому для них прописываем свои стили, используя класс.no-multiplebgs. Он указывает на то, что стили применяться в том случае, если браузер не поддерживает множественные фоны.

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

Конечно же, функционал библиотеки намного шире. Можно проводить тестирования поддержки различных технологий и на выходе цеплять события к результату. Пример.

Кроссбраузерность — это способность сайта корректно отображаться в различных браузерах. Ресурс должен работать одинаково во всех версиях обозревателей.

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

Раньше дизайнер создавал макет дизайна в Photoshop , который затем переносился в HTML и CSS . На сегодняшний день технологические изменения заставляют переосмыслить эту концепцию. Мы больше не можем предсказать, какой браузер, разрешение или устройство будут использоваться для просмотра сайта. Ушли в прошлое те времена, когда большинство компьютеров использовало фиксированное разрешение 1024 на 768 пикселей, и можно было разрабатывать сайты со статическими размерами.

Современные браузеры полностью поддерживают HTML5 и CSS3 . Но один и тот же код HTML / CSS / JavaScript в старых браузерах интерпретируется по-разному, что приводит к «кроссбраузерной несовместимости » сайта. Особенно это касается старых версий Internet Explorer .

В данной статье мы рассмотрим текущую статистику по просмотрам веб-страниц, приведем перечень средств, которые помогают решать различные проблемы совместимости.

1. Текущая ситуация

Общемировая статистика за 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 . Чтобы обосновать эту стратегию, можно привести несколько примеров решений известных компаний: Google прекратила поддержку IE8 в ноябре 2012 года, а IE9 — в октябре 2013 года.

Github больше не поддерживает IE 7 и 8 . Кроме этого часть функционала Twitter не работает в IE8 . И, наконец, популярный фреймворк не будет поддерживать IE8 , начиная с 4 версии .

Тем не менее, статистика использования может варьироваться в зависимости от региона: 6,11% пользователей в Китае в 2015 году по-прежнему просматривали страницы через IE8 . Если принять во внимание, что в Китае было около 724400000 интернет-пользователей, можно понять, что в этом году примерно 44200000 китайцев продолжают использовать IE8 .

Поэтому региональные рынки, специфические клиенты и требования отрасли могут существенно отличаться. Особенно это касается корпоративных и правительственных учреждений.

2. Проанализируйте свою аудиторию

Основной принцип здесь такой: чем выше требуемая кроссбраузерность, тем больше времени потребуется на разработку, что приводит к увеличению стоимости проекта. Чтобы принять взвешенное, экономически обоснованное решение, нужно задать себе следующие вопросы:

• Какова ваша целевая аудитория?
• На какой географический регион нужно настроить таргетинг?
• Какие браузеры и устройства используют ваши посетители?
• Существуют ли в компании или отрасли технические факторы, которые заставляют вас поддерживать конкретные версии старых браузеров?
• Каковы с точки зрения электронной коммерции коэффициенты конверсии и рентабельности различных групп пользователей по версиям браузеров?

Ответив на эти вопросы с помощью статистических данных, например, из Google Analytics , можно получить объективную картину.

3. Проблемы в устаревших браузерах и различные подходы к разработке

Адаптивный веб-дизайн во многом зависит от медиа-запросов, с помощью которых изменяется CSS для различных разрешений экрана. Кроме этого современные сайты характеризуются использованием семантических элементов HTML5 (например, , , , , ) для группировки компонентов дизайна. Селекторы CSS3 используются для выбора конкретных элементов и дальнейшего назначения стилей (например, , :checked , :nth-child(n) , :not(selector) , :last-child)) . И, наконец, адаптивная типографика часто задается с помощью единиц REM (root em ).

Это подводит нас к следующим техническим сложностям при реализации CSS кроссбраузерности:

• Медиа-запросы CSS3
• Семантические элементы 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 , лично я склоняюсь к использованию постепенного упрощения и черного списка браузеров при разработке совместимых сайтов.

4. Тестирование, тестирование, тестирование…

Чтобы как можно скорее обнаружить потенциальные проблемы кроссбраузерности JavaScript , нужно в процессе разработки тестировать сайт в различных браузерах и разрешениях. Существуют различные программные эмуляторы, которые могут нам помочь:

• Browserstack — это коммерческий сервис, который предоставляет доступ к тестовой среде, в которой можно проверить свой проект более чем на 700 стационарных браузерах и мобильных устройствах с помощью виртуальной машины в облаке;
• Microsoft Virtual Machines — если вы работаете в Linux, у вас не будет доступа к Internet Explorer . Решение может заключаться в том, чтобы загрузить образы виртуальных машин для IE6 в IE11 , которые затем могут использоваться в сочетании с Oracle VM Virtualbox или Vagrant для локального тестирования;
• Различные разрешения экрана для конкретного браузера можно быстро протестировать с помощью онлайн-сервиса Screenfly . С использованием плагинов для браузеров, таких как Window Resizer для Google Chrome , или непосредственно в разделе инструментов для разработчиков Chrome и Firefox .

5. Normalize.css и CSS Autoprefixer

Обычно я начинаю новые проекты со сброса 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: ["last 2 versions", "ie >= 8", "Firefox >= 12", "iOS >= 7", "Android >= 4"] }

В качестве примера рассмотрим следующий класс 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; }

6. Условные комментарии

Если нужно создать резервный 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 :

7. Полифиллы

Технические несоответствия устаревших браузеров для адаптивного веб-дизайна можно исправить с помощью полифилла. Он представляет собой фрагмент 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 или в виде файла в корректном формате внутри условных комментариев в разделе (не забудьте включить одну из необходимых для Selectivizr библиотек JavaScript ):

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

8. Определение функций с помощью Modernizr

Библиотека Modernizr , написанная на JavaScript , поможет проверить кроссбраузерность сайта: поддерживается ли в различных браузерах конкретная функция HTML5 или CSS3 . Если функция не доступна, то может быть загружен альтернативный CSS или JavaScript-код .

Идея заключается в том, чтобы напрямую определять функциональные возможности браузера, а не пытаться установить его конкретную версию. И на основании этого выводить его функциональные возможности, что является менее эффективным и надежным способом.

Стоит отметить, что Modernizr не добавляет недостающие функции в браузер. Поэтому вам нужно будет предоставить код из резервного CSS или полифилла.

Для начала необходимо скачать полнофункциональную сборку. Позже, когда вы будете готовы к разработке, можно создать пользовательскую сборку со специфическими функциями, которые вы тестируете. Все, что нужно сделать, это добавить класс .no-js в HTML-тег сайта и включить скрипт Modernizr в разделе head после любого CSS-файла :

Modernizr Demo Modernizr Demo

This is a Modernizr exercise.

Класс .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?3"); width: 164px; height: 49px; } .no-svg .logo { background-image: url("/logo.svg?3"); 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"; }

Заключение

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