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

Основы кроссбраузерной верстки — что нужно знать

Корректное отображение во всех нужных браузерах на сегодняшний день — must have для любого сайта. Любой маркетолог расскажет, как это важно для лояльности пользователей и конверсии, как это влияет на user experience и еще много аргументов за, но это буду не я 🙂

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

Что такое кроссбраузерность?

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

Почему этот термин вообще вообще возник?

На рынке браузеров существует несколько крупных игроков, которые часто по-разному отображают те или иные HTML элементы и по-разному имплементируют те или иные свойства CSS. Появляется все большее количество новых мобильных устройств со своими браузерами. Internet Explorer продолжает медленно, но уверенно терять своих пользователей, которые переходят в более современные браузеры. Chrome продолжает насиловать оперативную память компьютеров. Microsoft не устает пытаться реабилитировать Edge и с переходом на движок Chromium в марте 2020 года вышел на второе место по количеству пользователей. Все это и многое другое происходит на рынке браузеров, и веб-разработчикам приходится с этим жить, и все это учитывать.

Какие браузеры нужно поддерживать?

Хорошей практикой в любом проекте, будь то продуктовая компания с большим опытом на рынке, или аутсорс, поддерживающий legacy проект или только появившийся старт-ап — изучение целевой аудитории и составление списка поддерживаемых браузеров на основе аналитических данных (чаще всего с помощью инструментов Google Analytics и/или Yandex Metrica).

В Google Analytics собираются примерно такие данные (разумеется, их можно настроить под свои нужды, тут только пример):

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

Что делать, если таких данных нет? Например, вы только-только начали разрабатывать сайт?

Если у вас нет четких требований от маркетологов или других ЛПР (лица принимающие решения) о списке поддерживаемых браузеров, обычно за основу берутся самые доминирующие игроки рынка — Internet Explorer (обычно только 11 версии), Google Chrome, Opera, Мozilla FireFox, Safari, Microsoft Edge — и ориентируются на последние 2–3 их версии.

Как верстать кроссбраузерно?

1. Используйте сброс или нормализацию стандартных стилей браузера. Reset.css или normalize.css. Если кратко говорить о подходах, то смысл reset-а в том, чтоб большинство дефолтных стилей браузеров обнулить (все отступы, форматирование и т.д) и на этой основе писать свое. Смысл normalize — привести все эти стили к единому виду и значениям. Подробнее можно изучить по ссылкам:) Есть много сторонников первого подхода, есть много сторонников второго. Можно очень долго с пеной у рта обсуждать преимущества или недостатки каждого из них, но всегда нужно помнить, что инструмент должен подходить под задачу. Выбирайте то, что вам подходит.
2. Используйте вендорные префиксы, где это необходимо. Вендорные префиксы — это приставки, добавляемые в свойства CSS, используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт CSS свойств. То есть, например, если какой-нибудь из браузеров решил добавить что-нибудь крутое, но этот функционал и правила его поведения еще до конца не оговорены и не утверждены с составителями стандартов, то браузер может имплементировать его с соответствующей приставкой. Свойство с такой приставкой будет работать только в браузере, для которого эта приставка актуальна. Существуют следующие вендорные префиксы:

• -o-для браузера Опера
• -moz- для браузеров из семейства Mozilla
• -ms- для Internet Explorer 8
• —webkit-префикс для браузеров, построенных на движке Webkit, в частности Safari и Chrome (ну и конечно же, новый Edge:)
• -icab-для браузера iCab (альтернативного, как заявлено на родном сайте, браузера для Apple)
• -khtml- KHTML — компонент для просмотра HTML документов разработанный для среды KDE для UNIX-систем.

Например, мы уже давно можем стилизировать placeholder для input-ов, но какие-то браузеры имплементировали это как псевдоэлемент, а какие-то — как псевдокласс. Поэтому, чтобы стилизовать placeholder одинаково для всех браузеров, нужно писать примерно так:

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

Но так как мы в 2020, то скорее всего в вашем проекте используется какой-нибудь сборщик, Gulp или Webpack. Для них есть множество плагинов, в частности autoprefixer, которые сами добавят нужные вендорные префиксы в ваш CSS код. Для того, чтобы эти плагины понимали, какие браузеры нужно поддерживать, обычно используется такая вещь, как Browserslist. Просто перечислите настройки и плагины сами добавят эти префиксы там, где нужно.

3. Новые свойства CSS и JS перед использованием проверяйте на сайте caniuse.com. Это ресурс, который отслеживает поддержку самыми популярными браузерами различных свойств CSS и JS. Если вы хотите использовать какую-то технологию, но точно не уверены, кроссбраузерная ли она, и можно ли ее использовать в соответствии с вашими правилами поддержки браузеров, заходите на caniuse и проверяйте. Например, вы думаете, использовать ли в проекте position: sticky для своего хэдера. Вы в процессе изучения данного свойства могли заметить, что иногда авторы статей прямым текстом предупреждают, что технология еще не до конца имплементирована во все браузеры. Идем на caniuse. В поисковую строку вводим position:sticky

И видим таблицу. В данной таблице показано — браузеры, их версии и эти вещи окрашены в разные цвета.

• Ярко зеленый цвет, означает, что свойство полностью поддерживается, вендорный префикс не требуется. По наведению на соответствующий квадрат, можно получить дополнительную информацию
• Светло-зеленый(болотный) цвет, означает, что данное свойство поддерживается частично. Частичная поддержка это значит либо с вендорным префиксом, либо что-то может некорректно отрабатывать в некоторых случаях. По наведению на соответствующий квадрат, можно получить дополнительную информацию и увидеть, что именно может работать не так или не работать вовсе.
• Красный цвет означает, что свойство не поддерживается в данной версии браузера вообще.

Внизу под таблицей есть разные вкладки, которые тоже стоят внимания. Known issues, Notes — это пометки по свойству, о багах или особенностях его поведения в разных браузерах, о которых широко известно. С этой информацией тоже стоит ознакомиться. И тут можно ее искать, если вы столкнулись с багом, связанным с кроссбраузерностью (у вас что-то некорректно работает только в одном браузере, а в остальных все ок).

Глянули? Подходит для вашего проекта? Подходит по всем параметрам, используйте. Не подходит — или не используйте и ищите другие варианты или используйте полифиллы

4. Тестируйте свою работу в разных браузерах. Установите себе самые популярные браузеры последней версии. Некоторые браузеры вы, конечно, не сможете себе установить (например Safari для Windows не выпускают с 2012 года), но все самые популярные, типа Chrome, Mozilla Firefox, Opera, Internet Explorer 11, Edge и так далее у вас должны стоять. Вы должны проверять свою работу, как минимум на тех, что для вашего проекта обозначены обязательными.

Скорее всего, вы не работаете одновременно в Windows, Ubuntu и Mac OS. Наиболее вероятно также то, что у вас на компьютере всего 1 операционная система, которой вам вполне достаточно для продуктивной работы. Но, допустим, вам поставили баг на какое-то окружение, которое вы физически не можете воспроизвести (как вариант — Chrome 79 версии в Windows 10, а вы на Mac OS и в гробу видали этот Windows).

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

Также есть масса сервисов, которые делают скриншоты сайта. Их суть — просто делать скриншоты вашего сайта, эмулируя нужные окружения. Это удобно использовать тестировщикам, но я не нашла от них пользы для разработки. Видеть, что где-то проблема — не велика польза, если не можешь посмотреть причину. В browserstack же для многих окружений доступна опция dev tools. И ты не только видишь проблему, но и можешь ее по-человечески изучить.

5. Интересуйтесь последними обновлениями в браузерах и во фронт-энде в целом. Масса сайтов, типа habr.ru, dou.ua, codeguida.com публикуют подборки с самыми интересными и свежими материалами по фронт-энду. В них часто мелькают различные обновления браузеров, и новинки в веб-разработке. Читайте эти подборки, интересуйтесь обновлениями, держите руку на пульсе.

6. Если вам ставит кто-либо (чаще всего отдел тестирования) баг по кроссбраузерности, попытайтесь выяснить как можно больше деталей. Например, вам ставят баг — в Mozilla Firefox кнопка некликабельна, необходимо исправить. Такой информации обычно недостаточно. Выясните, повторяется ли этот баг только в Mozilla Firefox, или в остальных браузерах тоже. В каких версиях браузера этот баг повторяется, или, возможно, во всех. В какой операционной системе (Ubuntu, Windows, MacOS, может другие). Эти вопросы помогут вам локализировать проблему и знать, где ее воспроизвести, подробно ее изучить и правильно решить. И эти вопросы важно задавать, так как частенько случается, что баг ставят на один браузер, но по факту, функционал не работает нигде. И тогда, это не совсем проблема браузера 🙂

7. Когда случаются конкретные ошибки, как бы это очевидно не звучало — гуглите. Пример из реальной практики: в один прекрасный момент тестировщики заметили, что в браузерах Safari на iOS определенной версии текст в кнопках не выровнен по центру. Это было характерно только для браузеров Safari на iOS 9 версии и ниже, что было выяснено как путем самостоятельной проверки, так и общения с тестировщиками. Текст в этих кнопках выравнивался с помощью flex. Я зашла на browserstack.com, в эмулятор нужного окружения, и увидела, что на данном окружении, почему-то эффект не работает. Путем долгого поиска в интернете по разнообразнейшим запросам, был найден комментарий на stackoverflow, в котором было написано, что тег button, согласно философии Safari, не может быть flex-контейнером. Flex-элементом он может быть, но контейнером — нет. Почему? Ну, так решили, даже вроде логика какая-то была. Потом, конечно опомнились и в следующих версиях исправили, но мне-то надо, чтоб работало и в этой. Все, избавились от display: flex, выровняли по-другому, баг исправлен.

В процессе решения вопроса я использовала все, что описала выше — browserstack, caniuse (где искала возможные проблемы с флексами), также помогает MDN, https://developer.mozilla.org/ где частенько можно встретить описание ошибок в конкретных браузерах. Ну и также, мне помогло знание английского языка, которое позволило мне изучать много информации по моим гугловским запросам и высокая стрессоустойчивость в тот момент, когда я преодолевала все стадии — принятия, отрицания и так далее 🙂

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

Кроссбраузерная вёрстка

Если собрать охапку современных браузеров, то разложить её можно по-разному: по устройствам, по платформам, по типу работы, да хоть по цвету иконок. Самое полезное для разработчика — уметь разложить их по движкам. Именно движок, то есть самое ядро браузера, определяет как он работает с вашей вёрсткой.

При всём разнообразии браузеров, независимых движков довольно мало, а новые появляются очень редко. Так что вместо десятков браузеров вам нужно поддерживать не больше пяти независимых движков. А ещё бывает, что браузеры с одним названием используют разные движки на разных платформах! В общем, всё очень сложно и интересно.

Самый популярный в мире браузерный движок — это Blink. Его использует Chrome и браузеры на его основе: Opera, Samsung Internet, Яндекс.Браузер и другие. Для работы с JavaScript, эти браузеры используют движок V8 — тот же, что и в Node.js. Один из главных разработчиков открытого движка Blink — Google, но в разработке активно участвует не меньше десятка компаний.

WebKit, другой популярный движок, очень похож на Blink. А вообще, наоборот — это Blink похож на WebKit. Это как? В 2013 году Blink форкнули из WebKit. По сути, скопировали. Google собрала вещи и сказала Apple, основному разработчику WebKit, что ей не нравятся её методы работы и теперь всё будет по-другому. Что поделать, опенсорс. И действительно, стало по-другому: основа у WebKit и Blink общая (префиксы webkit , например), но возможности уже довольно разные. На новом WebKit сейчас работают мобильные и десктопные браузеры Safari, на старом — встроенный браузер на Android до версии KitKat.

На движке Gecko работает браузер Firefox, когда-то очень популярный, а сегодня сохраняющий небольшую долю и важную роль в развитии веба и технологий. Префиксы у Gecko свои: moz — Mozilla, но для лучшей совместимости Firefox специально поддерживает некоторые свойства WebKit. Полноценный Firefox на Gecko работает на десктопных платформах и на Android. Параллельно с Gecko, Mozilla разрабатывает экспериментальный движок Servo и меняет некоторые части Gecko прямо на ходу. Например, в следующем Firefox 57 движок CSS заменят на новый.

Браузер Edge работает на всех современных платформах Microsoft, включая мобильные и Xbox. В его основе движок EdgeHTML — недавно как раз вышла его 16-я версия. EdgeHTML тоже форкнули от движка Trident или MSHTML, на котором работал браузер Internet Explorer. Удивительно похоже на историю Blink и WebKit: оба движка сохраняют общие префиксы ( ms и опять немного webkit для совместимости), но сильно отличаются по возможностям. EdgeHTML отбросил всякое старьё и смело развивается: пара крупных релизов в год и даже система голосования за фичи. Trident и IE закрыли в 2015 году.

Кроме движков, полезно ещё знать особенности платформ. Например, на мобильной платформе iOS куча браузеров, помимо встроенного Safari: Chrome, Firefox, Opera, Яндекс, UC и даже Edge недавно выпустили. Но все эти браузеры — просто оболочки над встроенным в систему движком WebKit. Правила этой платформы запрещают использовать другие браузерные движки. А вот на Android большинство браузеров поставляются со своими движками: Firefox, Opera, Samsung, но некоторые используют встроенный Chromium.

Ну вроде всё? А нет! Есть ещё отдельная группа необычных браузеров: они живут не на устройствах пользователей, а глубоко на серверах. На устройствах стоит только лёгкая оболочка, которая запрашивает адрес и получает с сервера набор скриншотов и ссылок, слепленных в сайт. Это прокси-браузеры и они безумно сжимают трафик, но по пути теряют: фирменные шрифты, фоновые картинки, градиенты, скруглённые уголки, тени и вроде того. Opera Mini — один из самых популярных прокси-браузеров. На сервере у него крутится устаревший движок Presto, а ставят его чаще всего на простые телефоны. Но есть и другие, подробнее вам расскажет Тим Кадлек.

Некоторые браузеры работают только на одной платформе: Edge и IE есть только на Windows, Safari только на macOS и iOS. Были когда-то попытки интервенций, но ничего не вышло. Это конечно усложняет тестирование. К счастью, есть сервисы вроде BrowserStack, которые дают вам доступ ко всем существующим браузерам, а Microsoft выкладывает компактные образы Windows для тестирования Edge и IE в виртуальных машинах.

Ладно! Про браузеры мы теперь знаем. А что делать, если тот же браузер, тот же движок — а результат на разных платформах разный? А ничего не поделаешь! На деле браузеры могут сильно отличаться в зависимости от платформы или устройства. Самая большая разница между десктопными и мобильными браузерами — в последних очень много оптимизаций и просто магии. Но можно поймать и разное поведение на десктопных Windows и macOS.

Думаю вы уже поняли, к чему я клоню. Кроссбраузерность — это такой радужный единорог, за которым все гоняются, но никто не может поймать. Цель у погони, безусловно, благородная: чтобы сайты выглядели и работали одинаково хорошо на всех браузерах и всех платформах. И если размеры отступов, шрифта, высоту строки, цвета мы ещё можем более-менее гарантировать, то сглаживание текста, размытие теней, рендеринг графики и внешний вид системных контролов лучше даже не пытаться привести к общему виду.

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

И ещё про тестирование. Как бы хорошо ни имитировал устройства и браузеры эмулятор Chrome DevTools — это только намёк на то, как они будут выглядеть в реальности. Важно проверить результат на настоящих платформах и устройствах, как минимум: на Windows, Android, macOS и iOS. Настоящие пальцы на настоящем устройстве, настоящие браузеры в естественной среде обитания расскажут вам много нового о том, как именно будут пользоваться вашими интерфейсами. Это гораздо важнее того, насколько они похожи на макет.

Подпишитесь на новости браузеров в Твиттере, поставьте себе Chrome Canary, Firefox Nightly, Safari Technology Preview. Включайте флаги, пробуйте, будьте в курсе и главное — хватит гоняться за пикселями, займитесь хорошими интерфейсами. Сайты не должны выглядеть одинаково во всех браузерах.

Что такое кроссбраузерность сайтов и как этого добиться

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

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

Основные движки:

• Blink — принадлежит компании Google, имеет открытый исходный код, входит в состав проекта Chromium. Используют браузеры: Chrome, Opera, Яндекс.Браузер, Vivaldi и др. Над развитием этого движка работают многие крупные компании: Opera, Intel, IBM, Yandex, Vivaldi и другие.
• WebKit — принадлежит компании Apple, имеет открытый исходный код, используется в браузере Safari. Именно этот движок c 2008 г. по 2013 г. использовала компания Google в своем браузере Chrome.
• Gecko — принадлежит компании Mozilla, имеет открытый исходный код, используется в браузерах Firefox и Tor Browser.
• EdgeHTML — принадлежит компании Microsoft, имеет закрытый исходный код, используется в браузере Edge. Пришел на смену движку Trident (использовался в Internet Explorer), с запуском Windows 10, и работает только на этой операционной системе. 15 января 2020 года Microsoft выпустило обновление для браузера Edge (Microsoft Edge 79 stable), в котором перешла на Chromium с браузерным движком Blink.

Примечание.
Последующие сравнения с браузером Edge справедливы для версий ниже 79.

Проблема различного отображения верстки заключена в том, что разные движки по-разному воспринимают и обрабатывают некоторые html-теги и css-стили, а также содержимое самих тегов. Например, браузер Edge подсвечивает все номера телефонов добавляет свои стили.

На самом сайте эти номера телефонов прописаны как обычный текст без ссылок, но браузер Edge отображает их в виде ссылок. Исправить это можно, добавив свои стили для номера телефона, либо добавив в тег, содержащий номер телефона, атрибут x-ms-format-detection=»none» .

В результате получаем номер телефона без добавления стилей:

Подробнее о html и css расскажем ниже.

Как добиться одинакового отображения сайта в разных браузерах?

Разобравшись с понятием кроссбраузерной верстки, возникает вопрос: а как добиться корректного отображения верстки во всех этих браузерах? Откроем несколько секретов html-верстальщиков. =)

1. Использование префиксов

Префиксы — приставки к названиям CSS-свойств, используемые для конкретных браузеров.

Производители браузеров называют несколько причин использования префиксов:

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

• -moz- используется в Firefox;
• -ms- используется в Edge и Internet Explorer;
• -webkit- используется в Safari, Chrome и браузерах на основе движков WebKit и Blink;
• -o- — используется в старых версиях браузера Opera, работающего на движке Presto. С 2013 г. Opera перешла на движок Blink.

-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;

• -webkit-flex-wrap — свойство для Chrome с 4 по 28 версии, Safari с 3.1 по 8 версии;
• -ms-flex-wrap — свойство для Internet Explorer 10.

2. CSS-хаки

Это использование специальных свойств, понимаемых только определенными браузерами. Разберем пример css-хака, работающего только в Firefox. Создадим квадрат и закрасим его в красный цвет:

А теперь добавим свойство, которое будет работать только в Firefox:

3. Разделение стилей для браузеров

Метод заключается в том, чтобы определить вид браузера и подключить определенный файл стилей. В Internet Explorer используются условные комментарии, которые понимаются только этим браузером, остальные браузеры видят такой код как обычный комментарий.

Пример для Internet Explorer 9:

Файл style-for-ie9.css подключится только в браузере Internet Explorer 9.

• В основном для кроссбраузерной верстки используют префиксы, это увеличивает объем кода, но он остается быть валидным и понятным.
• CSS-хаки являются нежелательным способом исправления ошибок. Использование их приводит к плохой читабельности кода, невалидности, некачественной поддержке в будущем.
• Разделение стилей с помощью условных операторов используется для поддержки браузеров Internet Explorer.

Больше статей на схожую тематику:

Рассмотрим возникающие проблемы кроссбраузерности на небольшом примере.

Создадим html-документ и посмотрим отображение элементов и стилей в браузерах: Chrome, Firefox, Edge, Safari, Internet Explorer 9/11. В документе создадим две горизонтальные линии, поле для ввода текста, кнопку и ссылку.

Посмотрим в браузерах:

Internet Explorer 9:

Internet Explorer 11:

Как видите, есть отличия в отображениях горизонтальных линий (<hr>), кнопок, и в Internet Explorer 9 нет текста placeholder. Атрибут placeholder у тегов input и textarea появился в стандарте html5, поддержка которого стала доступной в Internet Explorer с 10 версии.

Чтобы в Internet Explorer 9 появился placeholder, придется использовать JavaScript. Можно написать свое решение, либо воспользоваться готовым плагином Placeholders.js. Для использования данного скрипта нужно подключить к странице jQuery и сам плагин:

Больше никаких действий производить не нужно, плагин все сделает самостоятельно. Данный плагин поддерживает большое количество браузеров, включая Internet Explorer 6.

Добавим всем элементам отступы, цвет красный (color: red) и посмотрим, что изменилось:

Internet Explorer 9:

Internet Explorer 11:

В Firefox горизонтальные линии окрасились в красный цвет, а в Chrome, Edge и Safari placeholder остался черным. Добавим цвет placeholder в оставшихся браузерах, увеличим высоту горизонтальной линии и зальем ее красным цветом:

Internet Explorer 9:

Internet Explorer 11:

Все горизонтальные линии стали красными, но в Firefox толщина отличается от других. Связано это с тем, что в браузере Firefox стиль color: red окрашивает рамку вокруг элемента, в то время как в остальных браузерах этот стиль не действует на рамку, и она остается прозрачной. Уберем рамку и свойство color: red. Для исправления цвета placeholder’а у текстового поля в Edge необходимо воспользоваться префиксами: -ms-input-placeholder и -ms-input-placeholder:

Добавим остальные стили:

Internet Explorer 9:

Internet Explorer 11:

Внешний вид отличается только у браузеров Internet Explorer.

Начнем с 11-ой версии. Мы сделали ссылку в виде черной кнопки и текст расположили по центру. Для этого использовали свойство display: flex, но специально добавили свойство min-height: 40px. Поддержка flex у Internet Explorer с 10-ой версии, но с некоторыми ошибками, одну из которых мы продемонстрировали. Если у элемента задана минимальная высота, то в IE 11 не работает вертикальное выравнивание. Исправим это с помощью css-хака, добавим свойства, которые будут работать только в IE 11:

Получаем правильное отображение:

Как писали выше, поддержка flex в Internet Explorer стала доступной только с 10-ой версии, из-за этого ссылка в 9-ой версии отображается как строковый элемент display: inline.

Исправим это с помощью добавления условного комментария в html-документ, в котором подключим новый файл стилей.

И пропишем в новом файле стили для ссылки:

Помимо неправильного отображения ссылки, у кнопки нет фона градиента. Это также связано с тем, что поддержка линейных градиентов появилась в Internet Explorer c 10-ой версии. Создадим файл gradient.svg с графикой линейного градиента и в стилях для IE9 зададим фон изображением созданного градиента background: url(gradient.svg).

Получаем следующие стили для IE9:

В итоге получится такой же внешний вид всех элементов, что и в других браузерах:

Из приведенного примера мы видим, что основные проблемы с кроссбраузерностью возникают при разработке под Internet Explorer. Целесообразно ли поддерживать старые браузеры? Ответ на этот вопрос зависит от посещаемости вашего сайта. Необходимо проанализировать статистику посещения браузерами вашего сайта. Статистика statcounter.com показывает, что в России доля Internet Explorer составляет всего 3%, а статистика liveinternet.ru — 1.5% (на июнь 2019 года).

Для современных сайтов стоит отказаться от поддержки Internet Explorer, т.к. без использования всех современных возможностей CSS придется выполнять практически вторую верстку сайта под браузер с долей 1,5-3%. Но, как говорилось выше, все зависит от пользователей, посещающих ваш сайт.

Нравится статья? Тогда смотрите наши курсы!

Проверка кроссбраузерности: наши рекомендации

Увы, установить все версии браузеров на компьютер нельзя, можно воспользоваться сервисами, предоставляющими возможность проверить сайт во всевозможных браузерах. Посмотрим на некоторые из них:

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

Примеры роста кликов, конверсий, заказов и прибыли:

Вывод

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

Хотите, чтобы проверили кроссбраузерность вашего сайта и поправили ошибки? Просто сообщите о своем желании – проверим кроссбраузерность, подскажем, что поправить.

Кроссбраузерная вёрстка сайта. Что это?

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

Что такое кроссбраузерная вёрстка?

Кроссбраузерность вёрстки предполагает что вёрстка страницы должна одинаково выглядеть во всех популярных браузерах. А именно Opera, Mozilla Firefox, Google Chrome, Safari, Internet Explorer, Яндекс браузер и другие. При этом особое внимание необходимо уделить такому браузеру как Internet Explorer (IE). Дело в том, что этот браузер портит жизнь веб-разработчикам уже много лет подряд. Так как он не понимает многих современных HTML тегов, CSS стилей и у него специфический подход к отображению некоторых CSS свойств, отличающийся от всех остальных браузеров.

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

Если Вы планируете заказать вёрстку сайта у верстальщика, то обязательно уточняйте момент кроссбраузерности. И указывайте начиная с какой версии браузера IE должна поддерживаться вёрстка. Это позволит Вам избежать недопонимания и проблем в будущем.

На сегодняшний день актуальными являются версии 8, 9, 10

Для того чтобы Вам сделали вёрстку, которая будет нормально отображаться в IE начиная с версии 7 и выше, обычно указывают так «поддержка IE7+»

Будьте готовы к тому что за создание вёрстки, которая будет поддерживаться начиная с IE7 у Вас могут просить дополнительную плату, так как если вёрстка сложная, то такое требование значительно увеличит объём работы верстальщику.

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

Если же Вы взялись верстать сайт самостоятельно и хотите чтобы он был кроссбраузерным и нормально поддерживался IE разных версий, то вот Вам несколько советов:

1. Постарайтесь не использовать тегиHTML5 так как IE старых версий их не понимает и отображает непонятно что, а если используете, то не забудьте подключить специальный плагин, который научит IE понимать теги HTML5.
   Вот ссылка на скачивание этого плагина: плагин HTML5 для Internet Explorer

1. Избегайте использования псевдоклассов. Большую часть псевдоклассов CSS3 IE не поймёт и искусственно научить его понимать их (как в случае с тегами HTML5) у Вас не получится.
   Особенно это касается псевдоклассов :first-child, :last-child и им подобных.

1. Не используйте псевдоэлементыCSS3 (:before, :after). Причина та же что и в случае с псевдоклассами. Мало того, тут к «любимому» браузеру веб-разработчиков IE присоединяется браузер Safari, который используется на устройствах Apple, и у которого тоже проблемы с корректным отображением псевдоэлементов.
2. Тестируйте вёрстку не отходя от кассы. Делайте кроссбраузерное тестирование не в конце вёрстки, а на каждом этапе. Например, сверстали шапку сайта – сразу проверили во всех браузерах, потом блок контента и так далее. Иначе в конце вёрстки Вас может ждать неприятный сюрприз, который Вам скорее всего преподнесёт всеми любимый Internet Explorer, а может и не только он.
3. Табличная вёрстка в помощь. Если вёрстка не сложная и адаптивность не нужна, то есть смысл сделать её табличной. Так как это значительно упростит процесс создания кроссбраузерной вёрстки.
   Более подробно о блочной и табличной вёрстках написано здесь.
4. Используйтеcss хаки для разных браузеров. Будьте готовы к тому, что разные браузеры по разному отображают шрифты и рассчитывают размеры блоков. Особенно это касается браузера Mozilla Firefox, который за счёт иного способа отображения шрифтов делает блоки на несколько пикселей шире чем другие браузеры.
   Для решения данной проблемы используются CSS хаки, которые дают возможность прописать стили для каждого браузера по отдельности.

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

На этом у меня всё. Если у Вас есть вопросы или уточнения по данной статье я буду рада если Вы напишите их в комментариях.

Желаю Вам удачной вёрстки, качественных сайтов и высокой посещаемости.

До встречи в моих новых статьях.

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

2 комментария

Здравствуйте Юлия, подскажите пожалуйста если перед обновлением темы WordPress скопировать файл style ssс. Потом обновить тему и вставить скопированный файл style ssс.(вместо нового) Не будет ли потом проблем с темой так как тема обновлена, а файл style ssс со старой версии темы? (просто очень много уже изменений внесены в тему «»»шрифт, убраны ссылки с подвала, изменения по contact form 7 …..)

Здравствуйте, Вячеслав!
Каждая тема уникальна. При обновлении темы файл стилей может вообще существенно отличаться от предыдущей версии темы.
Поэтому сказать однозначно нельзя.
Советую вам полностью скопировать с сервера папку с Вашей темой и на всякий случай сделать резервную копию базы данных сайта, а только потом уже обновлять.
Дальше алгоритм Ваших действий будет примерно следующим:
1) После обновления можно будет попробовать просто заменить содержимое файла style.css со старого на новый (при этом у Вас обязательно должен быть резерв того файла стилей который Вы заменяете!). Если всё получилось — отлично! Если нет, то переходим к шагу 2
2) Снова заменяем файл стилей на тот, который использует обновлённая тема. А затем копируем содержимое файла стилей старой версии темы и просто вставляем в файл стилей новой версии обязательно в самом конце! Это позволит Вам сохранить стили новой темы и добавить к ней те изменения, которые были внесены позже.
Можно воспользоваться этим вариантом сразу но в этом случае у Вас получится очень длинный CSS файл.

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

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