English
Почти любому веб-разработчику знакомо чувство, когда ты, сжимая кулачки, открываешь свою страничку в каком-нибудь динозавре, с тоской и грустью взираешь на поплывшие блоки, неработающие js-скрипты, делаешь тяжелый вздох, крестишься и садишься писать костыли. В этой небольшой подборке мы собрали ряд полезных советов по подготовке клиентской части сайта. Что-то из этого – вещи общеизвестные (однако, порой, упорно игнорируемые), что-то знают лишь единицы. В любом случае, надеемся, что данный материал будет полезен и избавит вас от многих и многих печалей.
Преамбула. Философский вопрос №1. Какие браузеры мне нужно поддерживать?
По этому вопросу (как и по всякому предмету холивара) существует целый ряд точек зрения. Приведем некоторые из них:
- Нужно поддерживать все существующие браузеры. Нужно разрабатывать сайты так, чтобы они корректно отображались даже на никому не известных браузерах из китайской провинции, которыми пользуется их разработчик, его мама, папа и еще пару друзей.
- Нужно разрабатывать сайты в соответствии со стандартами. Звери вроде IE8 идут лесом. Да кто в здравом уме пользуется IE8 в 2016? Да и вообще, если ребята из Microsoft забили на стандарты десять лет назад, почему это должно волновать меня в 2016?
- Пишем костыли для IE8 (ну и еще на всякий случай протестируем сайт на Safari и тоже напишем пару костылей), для всех остальных браузеров по умолчанию предполагаем, что они корректно поддерживают стандарт.
Впрочем, зачастую среди тысяч постов на подобные темы встречаются те, что пытаются донести примерно следующую мысль: Статистика использования браузеров «вообще» для большинства проектов представляет из себя данные, которые не значат ничего. Подобная информация имеет значение лишь для пары десятков популярных сервисов, которыми пользуются все. Для конкретного проекта, при принятии решения о поддержке того или иного браузера (впрочем, данный тезис может быть распространен на любую технологию) имеет значение его распространенность среди пользователей конкретного проекта.
Вы разрабатываете сайт, агрегатор или блог комьюнити для IT-специалистов? Тогда поддержка старых браузеров будет пустой тратой времени (вежливости ради, все же стоит озаботиться приятной «заглушкой» с предложением обновить браузер).
Вы разрабатываете сайт визитку для компании, поставляющей металлопрокат розничным продавцам по всей России? Тогда следует озаботиться адекватным отображением сайта в IE8 и старше плюс все современные браузеры (автор данного поста, к слову, однажды работал в компании, системный администратор которой был убежден, что использование всеми сотрудниками Internet Explorer’a значительно способствует безопасности внутрикорпоративной сети).
В любом случае, веб-разработчику следует иметь хотя бы общее представление о том, что работает, а что не работает на тех или иных браузерах. Адаптируя любимый шаблон для DLE (уж не говоря о разработке собственного) стоит внимательно изучить шапку в шаблоне main.tpl, а также, хотя бы мельком, проглядеть CSS.
Разобравшись с философией и холиварами, предположим, что вы уже четко приняли решение о том, что вы собираетесь поддерживать, а что нет. Начнем.
Совет №1. Использование условных комментариев для IE.
Чтобы облегчить разработчикам написание
<!--[if lte IE 8]> HTML <![endif]-->В данном примере, IE младше 8 включительно отобразит HTML код заключенный между <!--[if lte IE 8]> и <![endif]-->. В этом коде мы можем подключить специально для них отдельный css или jаvascript файл. Использование такой конструкции крайне удобно: ведь все остальные браузеры будут считать наши костыли простым комментарием. Ну, впрочем, вы наверняка про это все знаете. С полным перечнем условий и их синтаксисом можно ознакомиться здесь: http://htmlbook.ru/samlayout/internet-explorer/uslovnye-kommentarii
Часто на практике встречается и обратная задача – скрыть определенный код от IE и показывать его во всех других браузерах. С этой целью используется следующая, довольно хитрая конструкция:
<!--[if !IE]><!-->
<div></div>
<!-- <![endif]-->В данном случае, блок div увидят все браузеры, кроме IE (который сочтет HTML код закомментированным).
Совет №2. HTML5-теги.
Использовать HTML5 теги важно и нужно как минимум потому, что большинство поисковиков отдают предпочтение сайтам с HTML5 разметкой. Однако, стандарт HTML5 относительно молод, и весьма вероятна ситуация, при которой браузер пользователя просто не поймет всех этих <header> <nav> и <footer> посчитав их ересью (IE 8, например, игнорирует их вовсе, что, кстати, совершенно противоречит стандарту HTML4). А нам бы очень хотелось пользоваться всеми возможностями последнего стандарта, да и к тому же, применять к новым элементам css. К счастью, умные люди уже обо всем позаботились и упаковали решение этой проблемы в простой JS скрипт html5shiv.
Если вы хотите его использовать, необходимо скачать файл html5shiv.min.js со странички проекта https://github.com/aFarkas/html5shiv. Скачанный файл подключаем в шапку странички (в случае c DLE – в файл main.tpl):
<script type="text/javascript" src="/js/html5shiv.js "></script>Скрипт загрузится вместе со страничкой и позаботится о поддержке HTML5 в старых браузерах. Однако, скрипт обеспечит поддержку HTML5 только для тех элементов, которые загружаются сразу. А что если какой-то HTML код вставляется в DOM уже после загрузки страницы, скажем, с использованием jQuery или чистого jаvascript? Никаких проблем! Достаточно лишь обернуть весь вставляемый код в функцию innerShiv:
$('selector').append(innerShiv('<header></header>'));Использовать обертку нужно только в том случае, если во вставляемом коде есть HTML5 теги. Во всех остальных случаях, это будет совершенно излишним.
Совет №3. Медиа-запросы.
К счастью, в наше время, сайты просматриваются не только с экранов компьютера, но и с огромного числа самых различных устройств. С этой целью, премудрыми разработчиками была придумана такая прекрасная вещь как медиа-запросы. Медиа-запросы позволяют применять определенные стили для элементов только в том случае, если разрешение экрана пользователя находится в определенном диапазоне. Это открыло колоссальные возможности для использования адаптивного дизайна: верстка сайта перестраивается в зависимости от размеров экрана.
К сожалению, здесь тоже есть одна проблема: IE 8 не поддерживает медиа-запросы. Учитывая то, что в css-файле с медиа-запросами хранятся стили для различных разрешений наш выверенный адаптивный дизайн в IE 8 превращается в полную кашу. Здесь существует несколько возможных подходов к решению задачи. Один из них заключается в использовании специально js скрипта respond.js. Скрипт отлавливает размер окна и налету изменяет стили элементов для IE 6-8. Скачать скрипт можно по ссылке: https://github.com/scottjehl/Respond/tree/master/dest
Подключаем на страницу:
<!--[if lte IE 9]>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->Однако, данный скрипт хорошо работает лишь с медиа-запросами min-width. С другими медиа-запросами (например, с использованием интервалов) могут возникнуть проблемы. С этой целью приведем еще один, крайне примечательный подход, который основан на следующем умозаключении: люди, просматривающие сайт со старых браузеров с высокой вероятностью, смотрят его с десктопов с шириной от 1024 до 1900 пикселей, а потому, им можно просто отдавать верстку на десктопы.
Для этого, открываем наш основной CSS файл и копируем все стили, которые находятся внутри медиа-запросов для десктопов в отдельный файл. Содержимое исходного CSS:
.products {
background-color: #05aaf7;
}
@media (min-width: 320px) {
.icons-background {
padding-top: 45px;
padding-bottom: 25px;
}
}
@media (min-width: 768px) {
.icons-background {
padding-top: 45px;
padding-bottom: 25px;
}
.products {
margin-left: 6.25%;
}
}
@media (min-width: 992px) {
.icons-background {
padding-top: 55px;
padding-bottom: 35px;
}
.products {
margin-left: 6.25%;
}
}В нашем примере мы должны скопировать стили для icons-background и products.
Содержимое css-файла для IE:
.icons-background {
padding-top: 55px;
padding-bottom: 35px;
}
.products {
margin-left: 6.25%;
}
Получившийся файл называем как-нибудь вроде iefix.css и подключаем для старых версий НИЖЕ нашего основного CSS:
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="css/iefix.css">
<![endif]-->Все браузеры кроме IE просто проигнорируют наш дополнительный CSS. IE младше 9, напротив, подключит его и переопределит все используемые в основном CSS стили. Таким образом, в старых IE мы будем видеть жесткую десктопную верстку, а во всех браузерах, поддерживающих медиа-запросы – элегантный адаптивный дизайн.
К слову, данный способ прекрасно работает с bootstrap. Проделайте все вышеуказанное с CSS-файлом bootstrap'а и получите корректное отображение вашего сайта в старых версиях IE (не забудьте, кстати, при запуске проекта пожать все CSS файлы).
К слову сказать, подключение отдельного CSS с фиксами для ie – подход совершенно универсальный и может применяться не только для решения проблемы с медиа-запросами, но и для любых других CSS танцев с бубнами.
Совет №4. Использование js-скриптов.
jаvascript – язык динамично развивающийся. С целью обратной совместимости, по умолчанию jаvascript работает в режиме поддержки всех старых браузеров. Это означает, что вы не можете в полной мере использовать все возможности последнего стандарта. Чтобы «включить» поддержку последнего стандарта, в начале скрипта необходимо указывать специальную директиву:
'use strict'
var array = new Array();
for ( let i = 0; i < 10; i++) {
array[i] = i;
}К сожалению, данная директива была введена в стандарте ECMAScript 5 и старые версии браузеров могут просто не понять наш код. Однако, не все так плохо. Для корректного отображения нового кода в старых браузерах зачастую бывает достаточно подключить легкую библиотеку ES-shim. По ссылке Вы можете скачать ее для поддержки стандарта ES5: https://github.com/es-shims/es5-shim
Аналогичная библиотека, разумеется, имеется и для самого последнего на данный момент стандарта (однако, в ней все же решили отказаться от поддержки IE младше 9). В 90 процентах случаев поддержки ES5 бывает вполне достаточно.
Наиболее остро проблема поддержки старых браузеров встает при использовании jquery начиная со второй версии. Ребята держались очень долго, морщились, кривились, но все же писали костыли для IE8 вплоть до версии 1.9. После чего было решено прекратить эти страдания и отказаться от старых IE. Зачастую, проблему можно решить, подключив для IE jquery 1.8:
<!--[if !IE]><!-->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<![endif]-->Разумеется, данный способ совершенно не годится, если вы используете в своем проекте самые последние фичи jquery (однако, вы практически наверняка пользуетесь проверенными временем методами, присутствующими в jquery с момента ее основания).
Совет №5. Favicon
Вы все еще подключаете одну единственную fav-иконку в формате ico в 2016? Никогда не слышали про специальные иконки для apple touch или плитки Windows 8? Спешим Вас разочаровать! Всех интересующихся и желающих глубоко разобраться в данном вопросе мы отошлем к полной боли и страдания статье Филипа Бернарда. Ее перевод на хабре: https://habrahabr.ru/post/260777/
Хотите, чтобы ваша иконка корректно (без пикселизации и выходов за границу отведенных ей блоков интерфейса) отображалась где угодно? Что ж, тогда вам придется подключить до 30 различных favicon (и это не шутка!). Слава богу, есть отличный сервис, генерирующий favicon для чего угодно: http://realfavicongenerator.net.
Он и сами иконки подготовит, и код для HTML сгенерирует. При использовании DLE полученный код необходимо вставить в файл main.tpl, а иконки положить в папку images вашего шаблона. Не забудьте корректно прописать путь до иконки, вставив служебный тег {THEME} по аналогии с уже подключёнными иконками.
Здесь же отметим, что для большинства сайтов, предполагать, будто бы кто-то будет создавать на него ярлыки на iphone или вставлять его на панель задач windows крайне самонадеянно. Кроме того, каждое обращения к каждой иконке – это дополнительный запрос на сервер. Поэтому, разумнее всего будет ограничиться лишь минимальным необходимым набором favicon. Этот минимальный набор и реализован в последних шаблонах DLE.
Совет №6. Hi-DPI (Retina) дисплеи.
Ретина – это собирательное маркетинговое название для экранов устройств компании Apple. Данные дисплеи отличаются от всех остальных использованием повышенной плотности пикселей. Это означает, что на каждый виртуальный пиксель изображения, такой экран показывает 4 (а то и более) физических пикселя экрана. Такой подход позволяет «сгладить» изображение настолько, что человеческий глаз просто не увидит пикселей.
С векторной графикой нет никаких проблем. Hi-DPI монитор отобразит ее корректно без каких-либо усилий с нашей стороны. Что же касается с растровых картинок, давайте разберёмся на примере.
Предположим, у нас есть некоторое изображение myimage.png , которое нам нужно отобразить размером 200 на 200 пикселей. Как же обеспечить это на Hi-DPI (Retina) дисплеях.
Можно использовать примерно следующее:
HTML:
<img class="image" src="/images/myimage@2x.png"/>CSS:
.image {
width: 200px;
height: 200px
}Где myimage@2x.png – специально подготовленное изображение, увеличенное в два раза (относительно исходного). То есть размером 400 на 400 пикселей.
Однако, при применении указанного выше подхода, все другие устройства будут вынуждены грузить изображения в два раза больших размеров. А это не есть хорошо.
К счастью, и здесь универсальное решение имеется. Достаточно использовать следующий HTML код:
<img class="image" src="/images/myimage.png" srcset="/images/myimage@2x.png 2x">Который укажет браузеру, что если используется обычный дисплей, то грузить картинку myimage.png, а если используется дисплей с удвоенной плотностью, то использовать картинку myimage@2x.png
Заключение.
Разумеется, данный перечень советов не является полностью достаточным. Опытный фронтендер расскажет еще пару десятков подобных «лайфкахов». В данной небольшой подборке советов мы постарались охватить как самые известные, так и часто игнорируемые моменты. Что из этого действительно необходимо использовать в вашем проекте, а что нет – решать только вам. Ведь только вы по-настоящему знаете свою аудиторию (включая те браузеры и устройства, которые она использует).
Будем рады вашим дополнениям и уточнениям в комментариях.
Хорошего дня и успешных проектов! Подписывайтесь на нашу страницу в социальной сети "Вконтакте" https://vk.com/dlepage
Комментарии