Все ли браузеры одинаково отображают стили css

Обновлено: 05.07.2024

Каждому браузеру свой стиль

Несмотря на то, что современные браузеры постепенно приближаются друг к другу по своим возможностям и поддержке спецификации CSS, между ними все еще имеются различия в подходах. Каждый браузер интерпретирует по своему усмотрению код HTML и стилей в особенности. При этом можно долго спорить, какой из браузеров «более правильный», суть остается одна — пока существуют несколько браузеров и люди их применяют, сайт надо делать так, чтобы он корректно и без ошибок в них отображался. Большинство пользователей просто равнодушно относятся ко всяким стандартам и спецификациям, хотя бы потому, что и не подозревают об их существовании. Многие даже не знают, что такое HTML и пользуются браузером, который установлен в системе по умолчанию. Люди приходят на сайты за информацией и заинтересованы в том, чтобы получить ее быстро и без проблем. Если любимый браузер «криво» отображает сайт, то проще не разбираться в чем дело, а закрыть сайт и перейти на другой, благо их теперь много по любой теме.

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

Применение JavaScript

Проще всего определить нужный браузер с помощью JavaScript, после чего загрузить для него требуемый файл со стилями. Этот способ хорош еще тем, что позволяет узнать версию браузера, а не просто его название. Сам стилевой файл подключается через метод document.write , который в данном случае будет использоваться так:

где style.css представляет собой файл для конкретного браузера.

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

DOM = document.getElementById;
Netscape4 = document.layer;
Netscape6 = Mozilla = (navigator.appName == "Netscape") && DOM;
Netscape7 = navigator.userAgent.indexOf("Netscape/7") >= 0;
Opera5 = window.opera && DOM;
Opera6 = Opera5 && window.print;
Opera7 = Opera5 && navigator.userAgent.indexOf("Opera 7") >= 0;
IE = document.all && !Opera5;
Firefox = navigator.userAgent.indexOf("Firefox") >= 0;

if(IE) document.write("<link rel='stylesheet' href='/ie.css' type='text/css'>");
else document.write("<link rel='stylesheet' href='/style.css' type='text/css'>");

Не стоит считать, что придется писать отдельные стили для всех браузеров. Например, Netscape (версии 6 и старше), Mozilla и Firefox основаны на одном ядре под названием Gecko, поэтому работают c сайтами примерно одинаково. В какой-то мере по своему подходу близки браузеры Internet Explorer 6 и Opera 7, и в большинстве случаев они отображают результат в равной мере правильно. Получается, что обычно требуется создать всего два разных стиля, предназначенных для браузеров, принадлежавших к разным «лагерям».

Спецификация CSS говорит, что для управления стилем дочерних элементов используется символ > (знак «больше»). Запись H1 > I сообщает браузеру установить зеленый цвет для содержимого тега <I> только в том случае, если заголовок <H1> является для него прямым родителем.

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

Разница между этими видами селекторов следующая. Стиль к дочернему селектору применяется только в том случае, когда он является прямым потомком, иными словами, непосредственно располагается внутри родительского элемента. Для контекстного селектора допустим любой уровень вложенности. Чтобы стало понятно, о чем идет речь, разберем следующий код (пример 2).

Пример 2. Неправильное использование дочернего селектора

В примере показано добавление тега <DIV> , внутри которого размещается параграф <P> , а у него в свою очередь, тег <I> . В стиле прописано изменить цвет текста на красный у селектора <I> , но только в том случае, если он непосредственно находится внутри <DIV> . А в нашем случае тег <I> располагается внутри <P> , поэтому стиль применяться не будет. Чтобы он заработал, надо использовать один из следующих вариантов.

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

Вернемся теперь к браузерам. Internet Explorer (IE) не понимает дочерние селекторы, но зато корректно работает с контекстными. Создавая код CSS, который одновременно содержит и те и другие селекторы, тем самым делаем разграничение стиля для браузера IE и всех остальных. Хотя контекстные селекторы понимаются всеми браузерами, последующая строка переназначает текущие установки стиля (пример 3).

Пример 3. Селекторы для разных браузеров

DIV > P color: red /* Для остальных браузеров */
>
</style>
</head>
<body>

В данном примере показано создание текста зеленого цвета для браузера IE и красного — для всех остальных.

В браузере Internet Explorer 5 замечена интересная особенность — он понимает конструкцию HTML > селектор , которую другие браузеры, в том числе его же старшие версии, игнорируют. Добавив в код стиля текст HTML > DIV получим текст, который находится внутри тега <DIV> , красного цвета. Но только в IE 5.

Для обозначения любого элемента в CSS используется символ звездочки (*), который называется универсальным селектором. Его понимают все браузеры, но вот сочетание * HTML — только один Internet Explorer. Таким образом, изменение стиля для разных браузеров показано в примере 4.

DIV P color: red /* Для остальных браузеров */
>
</style>
</head>
<body>

В данном примере показано создание стиля для IE и всех других браузеров.

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

Внутри квадратных скобок допустимо использовать следующие ключевые слова:
IE — любая версия браузера Internet Explorer;
IE 5 — Internet Explorer 5;
IE 5.5 — Internet Explorer 5.5;
IE 6 — Internet Explorer 6;
lt — номер версии браузера меньше указанной;
gt — номер версии больше указанной;
lte — номер версии меньше или равен указанной;
gte — номер версии браузера больше или равен указанной.

Поскольку указанные элементы можно писать только внутри контейнера <BODY> , то следует добавить тег <STYLE> , как показано в примере 5.

Пример 5. Добавление условных комментариев

В данном примере вначале создается стиль для всех браузеров, а затем, с помощью условных комментарием он переназначается только для браузера IE. Заканчиваются такие комментарии одинаково, путем добавления конструкции <![endif]--> .

Использование тега <COMMENT>

Следует отметить, что для других браузеров тоже существует вариант, когда им «подкладывают» стиль, отличный от стиля IEr. С этой целью применяется тег <COMMENT> , который добавляет комментарий. Хитрость в том, что этот тег понимается только браузером IE, соответственно, все, что находится внутри этого контейнера, в этом браузере не отображается. Остальные браузеры этот тег не понимают, поэтому просто его игнорируют, но при этом содержимое этого тега нормально обрабатывается. Получается, что вначале указываем стиль для браузера IE, а затем внутри тега <COMMENT> повторяем стиль уже для остальных браузеров (пример 6). Когда идет несколько одинаковых описаний стиля для одного и того же селектора, то применяется тот стиль, который располагается в коде ниже других.

Internet Explorer покажет белые буквы на зеленом фоне, а остальные браузеры — зеленые символы на сером фоне.

Примеры использования стиля для разных браузеров

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

Браузеры IE (Opera) и Netscape (в том числе Mozilla и Firefox) по-разному подходят к понятию ширины элемента. IE за ширину принимает значение стилевого атрибута width , а Netscape добавляет к ней значения полей и толщину границ. За счет этой особенности вид элементов может несколько различаться в браузерах. В примере 7 показано создание меню с фиксированной шириной 200 пикселов. Вид меню за незначительными исключениями будет отображаться браузерами правильно, но до тех пор, пока для селектора A не добавляется параметр width: 100% . Дело в том, что использование свойства display: block у ссылок устанавливает их на всю ширину меню (рис. 1), и теперь не обязательно наводить курсор мыши строго на текст. Но только не в браузере Internet Explorer, который в этом случае требует еще добавления ширины через атрибут width . Значение 100% приведет к тому, что в Netscape выделительная полоса начнет выходить за пределы границы, что выглядит довольно небрежно (рис. 2).

Рис. 1. Требуемое меню

Рис. 2. Меню при width: 100%

Есть два способа, чтобы добиться работы меню в браузерах идентично и без ошибок. Первый — установить ширину не 100%, а меньше, например, 97%. Хотя это не лучший вариант, проблему, тем не менее, он решает. И второй метод — добавить атрибут width только для браузера IE, заставив остальные браузеры его проигнорировать, как показано в примере 7.

Пример 7. Создание меню

В браузере Internet Explorer 6 существует следующая ошибка. При использовании нумерованного списка <OL> и значения inside параметра list-style-position , числа идущие с 10, начинают накладываться на текст списка (рис. 3).

Рис. 3. Ошибка в браузере Internet Explorer при использовании списков

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

Чтобы решить указанную проблему, недостаточно использовать отступы и увеличить расстояние от чисел до текста, любые отступы в этом случае браузером полностью игнорируются. Следует указать list-style-position: outside и сместить текст вправо. Вид списка в таком случае будет несколько различаться в разных браузерах, но, тем не менее, отображаться корректно (пример 8).

Пример 8. Исправление ошибок браузера Internet Explorer 6

<ol start="20">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetuer adipiscing elit</li>
<li>Sed diem nonummy nibh euismod</li>
<li>Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</li>
</ol>

В данном примере показана установка стиля для тега <OL> , а затем он переназначается для браузера Internet Explorer 6 с помощью условных комментариев

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

Блок . Современные браузеры

В настоящее время популярными являются следующие браузеры: Internet Explorer (сокращенно IE, браузер от компании Microsoft, встроен в Windows), Opera (норвежский браузер), Mozilla (она же Firefox), Google Chrome (браузер от компании Google), Safari (браузер от Apple). Браузеры в мобильных устройствах: Android, IOS.

Блок . Движки браузеров

Кроме браузеров существует такое понятие, как движок браузера. Движок - это основа браузера, которая преобразует HTML и CSS в видимую на экране картинку. Движков существует намного меньше, чем браузеров и, как следствие, многие браузеры имеют одинаковые движки и поэтому одинаковые особенности и баги (проблемы).

Виды движков: Gecko (Mozilla/Firefox). Webkit (Safari, Google Chrome, Opera 14+, Android, IOS). Presto (Opera до 14 версии). Trident (Internet Explorer).

Обратите внимание на то, что Opera, начиная с 14 версии, перешла на движок Webkit.

В настоящее время Webkit распался на два движка Blink от Google Chrome и Opera 14+ и движок от Safari. Эти два движка по-прежнему поддерживают префикс -webkit, однако, их разделение уже можно наблюдать на некоторых CSS свойствах, например, hyphens

Браузера Internet Explorer официально больше не существует, последняя его версия 11-тая. Однако, фактически, этот браузер сменил название (но не движок) и теперь называется Edge.

Блок . Вендорные префиксы

В настоящее время среди браузеров сложилась следующая ситуация: до того, как свойство CSS появится в спецификации, браузеры могут реализовывать пробную версию этого свойства со специальной приставкой, которая называется вендорным префиксом (от слова vendors – разработчики, префикс разработчиков).

Как это выглядит, давайте посмотрим на примере свойства box-sizing (смена блоковой модели).

Это свойство начало поддерживаться только с Firefox 29, однако уже с версии Firefox 2 оно было доступно с префиксом -moz:

Остальные браузеры имеют аналогичные приставки: -moz - Mozilla/Firefox (движок Gecko), -webkit – браузеры на движке Webkit (Google Chrome, Safari, Opera 14+, Android, IOS), -o – Opera до 13 версии включительно (движок Presto), -ms – IE с версии 8+.

Таким образом, наиболее кроссбраузерный вариант свойства box-sizing, с использованием вендорных префиксов, будет иметь следующий вид (с префиксом -ms его писать не нужно, IE сразу перешел на поддержку этого свойства):

В CSS многие свойства имеют аналогичную реализацию: с префиксом и без него.

Обратите также внимание на то, что Opera с версии 14 перешла на Webkit и теперь для нее будет использоваться префикс -webkit, а префикс -o останется только для старых версий (до 14-той).

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

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

Блок . Где посмотреть какие префиксы писать

Блок . Статистика по браузерам

Блок . Как проверить сайт в разных браузерах

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

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

Существуют и другие подобные сервисы (гуглите).

Блок . Сброс стилей

По умолчанию браузеры добавляют отступы различным элементам: заголовкам h1-h6, абзацам p, спискам ol и ul и т.д.

Разные браузеры добавляют эти отступы по-разному, поэтому на стандартное поведение браузеров полагаться не стоит и следует создать так называемый файл сброса стилей reset.css.

Что должно входить в этот файл?

CSS Reset впервые был применен в 2004 году Эндрю Креспанисом (Andrew Krespanis). В своей статье он советовал использовать универсальный селектор (*) в начале CSS-файла, чтобы задать всем элементам нулевые отступы (margin и padding):

Такой подход имеет ряд преимуществ и недостатков.

Простота.
Небольшое количество кода CSS.

Не охватывает все свойства, которые нужно сбросить.
В Mozilla для select появляется небольшой баг.
Не сбрасывает padding для input.
В некоторых браузерах оформление кнопок по умолчанию теряет свой вид (выглядят как текст с рамкой вокруг, например в Opera).
Несколько замедляет рендеринг (отображение) страницы в Mozilla (актуально для крупных файлов css в тысячи строк кода. В других случаях эта задержка незаметна, исчисляется в микросекундах).

Более продвинутый подход — использование сброса стилей всех необходимых элементов (установка нужных значений) без использования универсального селектора. Одним из популярных сбросов стилей такого типа является сброс от Эрика Мейера (Eric Meyer), смотрите его тут: сброс стилей от Эрика Мейера.

Блок . Нормализация стилей

Кроме сбросов, существует так называемая нормализация - это когда значения свойств (например, margin и padding) не сбрасываются в ноль, а им указываются определенные удобные значения (чтобы во всех браузерах отступы по умолчанию были одинаковыми и удобными).

Приветствую вас, читатель моего блога!
Эта статья о том, как можно задать отдельные CSS стили для разных браузеров, используя CSS хаки. Я дам несколько примеров CSS хаков, и расскажу об их особенностях. А также покажу альтернативные способы решения проблемы задания отдельных CSS стилей для определённых браузеров.

Навигация по статье:

Что такое CSS хаки и для чего они нужны?

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

Для того чтобы решить данную проблему можно использовать специальные css хаки, благодаря которым можно прописать определённые стили только для определённого браузера. При этом все остальные браузеры эти стили просто проигнорируют.

CSS хак – это определённый селектор или группа селекторов стили для которых работают в одних браузерах и игнорируются другими.

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

Например, если мы напишем:

То во всех браузерах для элемента с классом block применится сплошная красная рамка, толщиной в 2 пикселя.

Однако возможно, что в одном из этих браузеров (например Mozilla Firefox) эта рамка будет выглядеть более толстой, чем в остальных или из-за её добавления один из блоков соскочит на новую строку и т.д. при этом в остальных браузерах всё будет отображаться нормально.

Если мы пропишем данные правила следующим образом:

То во всех браузерах у элемента с классом block отобразится рамка толщиной в 2 пикселя, а в браузере Mozilla Firefox отобразится рамка в 1 пиксель и таким образом это решит проблему.

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

Применение CSS хаков целесообразно, в первую очередь, для исправления различных глюков самих браузеров.

CSS хаки для Internet Explorer

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

Я нашла несколько CSS хаков для этого браузера и ни один из них у меня не сработал!

Если хотите, можете сами попробовать. Вот эти CSS хаки:

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

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

Код условных комментариев выглядит так:

Данный код рассчитан на все версии Internet Explorer

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

Данные стили сработают для браузера Internet Explorer версии 7. Если вам нужно прописать стили для другой версии то вместо «7» вы ставит ту версию, которая нужна.

CSS хак для Mozila Firefox

Основной отличительной особенностью данного браузера является то, что по другому отображает шрифты из за чего ширина блоков может немного меняться, а текст перескакивать в две строки или не помещаться в определённый блок.
Для того чтобы задать стили только для Mozila Firefox в CSS файл пишем следующий код:

Вместо .block пишем класс или ID элемента, для которого нужно задать стиль.

CSS хак для GoogleChrome

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

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) <

CSS хаки для Opera

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

Для версии Opera 10 можно попробовать:

@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) <

Для более ранних версий есть следующие варианты:
Opera 9.2 и младше

Ещё вариант:

Есть ещё такой хак:

Но его видит так же Mozilla последних версий и Chrome, поэтому не советую его использовать!

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

На что обратить внимание при использовании CSS хаков.

CSS хаки конечно часто решают проблему с одинаковым отображением элементов и стилей в разных браузерах, но это решение проблемы – не самое надёжное, так как вы не можете быть уверенными на 100% что данный CSS хак будет работать в новых версиях браузеров, кроме того если вы пишете CSS хак для Firefox, к примеру, то вполне вероятно что когда выйдет новая версия Chrome или Opera то они тоже будут видеть и отображать этот хак.

Так что используйте их только в крайних случаях и с осторожностью.

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

Более подробно об этом я напишу в моей следующей статье.

Надеюсь, что данная статья была для вас полезной и теперь вам будет немного проще подогнать свою вёрстку под разные браузеры. Желаю вам успешной вёрстки и хорошего настроения :)

Почему одинаковые свойства CSS в разных браузерах выглядят по разному?

Вопрос задан более трёх лет назад
883 просмотра

Решение нашел. Я убрал все теги span и применил эти стили к тегу a.

Хм, интересно.. надо пробовать.. Тоже столкнулся..
Ну прям до смешного. В Firefox кнопка в нужном месте стоит, а в Google Chrome - вообще в другом..
Отказывался верить в увиденное..

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

Не все теги HTML стандартизированы полностью. Некоторые не воспринимаются частью браузеров вообще, некоторые по-разному. Существуют способы определения каким именно браузером открывается страница Интернета.

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

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

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

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

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 подсвечивает все номера телефонов добавляет свои стили.

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

Подробнее о 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, т.к. без использования всех современных возможностей CSS придется выполнять практически вторую верстку сайта под браузер с долей 1,5-3%. Но, как говорилось выше, все зависит от пользователей, посещающих ваш сайт.

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

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

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