Всё для ВебМастера

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

Почти любому веб-разработчику знакомо чувство, когда ты, сжимая кулачки, открываешь свою страничку в каком-нибудь динозавре, с тоской и грустью взираешь на поплывшие блоки, неработающие js-скрипты, делаешь тяжелый вздох, крестишься и садишься писать костыли. В этой небольшой подборке мы собрали ряд полезных советов по подготовке клиентской части сайта. Что-то из этого – вещи общеизвестные (однако, порой, упорно игнорируемые), что-то знают лишь единицы. В любом случае, надеемся, что данный материал будет полезен и избавит вас от многих и многих печалей.

Преамбула. Философский вопрос №1. Какие браузеры мне нужно поддерживать?

По этому вопросу (как и по всякому предмету холивара) существует целый ряд точек зрения. Приведем некоторые из них:

Нужно поддерживать все существующие браузеры. Нужно разрабатывать сайты так, чтобы они корректно отображались даже на никому не известных браузерах из китайской провинции, которыми пользуется их разработчик, его мама, папа и еще пару друзей.
Нужно разрабатывать сайты в соответствии со стандартами. Звери вроде IE8 идут лесом. Да кто в здравом уме пользуется IE8 в 2016? Да и вообще, если ребята из Microsoft забили на стандарты десять лет назад, почему это должно волновать меня в 2016?
Пишем костыли для IE8 (ну и еще на всякий случай протестируем сайт на Safari и тоже напишем пару костылей), для всех остальных браузеров по умолчанию предполагаем, что они корректно поддерживают стандарт.
В качестве аргумента в подобном споре, часто приводится статистика распространенности браузеров от того или иного ресурса. «Смотрите, браузер (вставить пропущенное) использует всего 1% людей», «У тебя неправильная статистика, смотри здесь (вставить ссылку на действительно заслуживающий уважения ресурс)», «А что если у твоего ресурса миллионная посещаемость? Ведь 1% - это 10 000 пользователей!». И спорам сим нет числа.

Впрочем, зачастую среди тысяч постов на подобные темы встречаются те, что пытаются донести примерно следующую мысль: Статистика использования браузеров «вообще» для большинства проектов представляет из себя данные, которые не значат ничего. Подобная информация имеет значение лишь для пары десятков популярных сервисов, которыми пользуются все. Для конкретного проекта, при принятии решения о поддержке того или иного браузера (впрочем, данный тезис может быть распространен на любую технологию) имеет значение его распространенность среди пользователей конкретного проекта.

Вы разрабатываете сайт, агрегатор или блог комьюнити для IT-специалистов? Тогда поддержка старых браузеров будет пустой тратой времени (вежливости ради, все же стоит озаботиться приятной «заглушкой» с предложением обновить браузер).

Вы разрабатываете сайт визитку для компании, поставляющей металлопрокат розничным продавцам по всей России? Тогда следует озаботиться адекватным отображением сайта в IE8 и старше плюс все современные браузеры (автор данного поста, к слову, однажды работал в компании, системный администратор которой был убежден, что использование всеми сотрудниками Internet Explorer’a значительно способствует безопасности внутрикорпоративной сети).

В любом случае, веб-разработчику следует иметь хотя бы общее представление о том, что работает, а что не работает на тех или иных браузерах. Адаптируя любимый шаблон для DLE (уж не говоря о разработке собственного) стоит внимательно изучить шапку в шаблоне main.tpl, а также, хотя бы мельком, проглядеть CSS.

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

Совет №1. Использование условных комментариев для IE.

Чтобы облегчить разработчикам написание костылей, старые браузеры IE умеют понимать специальную конструкцию типа:



В данном примере, IE младше 8 включительно отобразит HTML код заключенный между <!--[if lte IE 8]> и . В этом коде мы можем подключить специально для них отдельный css или javascript файл. Использование такой конструкции крайне удобно: ведь все остальные браузеры будут считать наши костыли простым комментарием. Ну, впрочем, вы наверняка про это все знаете. С полным перечнем условий и их синтаксисом можно ознакомиться здесь: https://htmlbook.ru/samlayout/internet-explorer/uslovnye-kommentarii

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



В данном случае, блок div увидят все браузеры, кроме IE (который сочтет HTML код закомментированным).

Совет №2. HTML5-теги.

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