Кроссбраузерность
Под кроссбраузерностью мы понимаем доступность информации в любом из распространенных браузеров.
Но отображение этой информации получается не везде одинаковым :(
Что может пойти не так?
- Не поддерживаются стили или элементы
- Отображение шрифтов
- Свои стили у каждого браузера по умолчанию
(reset и normalize)
Посмотрим на статистику
Internet Explorer aka IE
Но на практике...
Условные комментарии
<!--[if lte IE 8]>
<link rel="stylesheets" href="css/ie.css" >
<![endif]-->Ключевые слова в условных комментариях
- lt – меньше (<)
- lte – меньше или равно (<=)
- gt – больше (>)
- gte – больше или равно (>=)
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->Хаки
Поддержка браузерами css свойств
Retina
- images@2x
- svg
- fonts
Но должен ли сайт одинаково
выглядеть в разных браузерах?
Progressive enhancement #
постепенное улучшение:
начать с содержимого и постепенно улучшать до
совершенства в зависимости возможностей браузеров
Graceful degradation #
«изящная деградация» или «отказоустойчивость»
принцип сохранения работоспособности при потере части функциональности.
Мы должны хотя бы показывать юзеру окошко типа «Хочешь больше фишек, выше скорость? Поставь Хром!»
Потому что иначе обычный пользователь все-таки подумает не «хреновый у меня браузер», а «хреновый у них сайт».
Материалы по теме
Tools
- IETester
- VirtualMachines
- http://www.browserstack.com/
- Modernizr
Old browsers plugins
- https://browser-update.org/
- Юзайте следующий
http://outdatedbrowser.com/
Браузеры такие разные...
If web browsers were Girls
Задание
Установить браузеры
Cross browser
By Alexey Kalyuzhnyi
