CSS - Префиксы браузеров. Css для разных браузеров

CSS хаки. Как задать CSS стили для разных браузеров

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

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

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

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

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

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

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

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

.block{ border:2px solid red; }

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

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

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

@-moz-document url-prefix() { .block{ border:1px solid red; }

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

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

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

CSS хаки для Internet Explorer

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

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

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

/**Вариант 1**/ *:first-child+html .block { border:1px solid red; } /**Вариант 2**/ *+html .block { border:1px solid red; } /**Вариант 3**/ html>body .block { *border:1px solid red; } /**Вариант 4**/ *:first-child+html .block { border:1px solid red; } /**Вариант 5**/ *:first-child+html .block { border:1px solid red; } /**Вариант 6**/ @media \0screen .block { border:1px solid red; } /**Вариант 7**/ :root .block { border:1px solid red; }

Во всех этих вариантах вместо .block вы пишете название класса или ID того блока, для которого вы задаёте стили.Вместо border:1px solid red; — пишете свои CSS стили

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

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

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

<!--[if IE ]> <style> .block { border:1px solid red; } </style> <![endif]-->

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

<!--[if IE 7 ]> <style> Здесь наши стили </style> <![endif]-->

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

CSS хак для Mozila Firefox

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

@-moz-document url-prefix() { .block{ border:1px solid red; } }

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

CSS хак для GoogleChrome

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

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .block{ border:1px solid red; } }

CSS хаки для Opera

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

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

html:first-child .block { border:1px solid red; }

Ещё вариант:

o:-o-prefocus .block { border:1px solid red; }

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

@media all and (min-width: 0) { .menu { border:1px solid red; } }

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

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

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

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

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

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

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

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

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

impuls-web.ru

CSS - Префиксы браузеров | ИТ Шеф

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

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

Например, при рассмотрении стилей какого-нибудь сайта веб-разработчик может столкнуться со свойствами, содержащими впереди некоторые непонятные слова: -webkit-, -moz-, -ms- и др.

Что же это такое? На самом деле всё просто, эти непонятные слова являются префиксами следующих браузеров:

• -webkit-: браузеры Chrome, Safari, Opera;
• -moz-: браузер Mozilla Firefox;
• -ms-: браузер Internet Explorer.

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

Причин для появления префиксов было достаточно много:

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

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

Рассмотрим в качестве примере следующий код:

Данный код применяет свойства CSS, которые изменяют алгоритм расчёта ширины и высоты для всех элементов веб-страницы. Первое CSS свойство -webkit-box-sizing со значением border-box предназначено для браузеров, использующих движок webkit (Safari) или blink (Chrome, Opera, Яндекс.Браузер). Второе CSS свойство -moz-box-sizing со значением border-box предназначено для браузеров, использующих движок Gecko (Mozilla Firefox). Последнее CSS свойство предназначено для браузеров, в которых это свойство уже протестировано и внедрено в соответствии со стандартом.

При использовании префиксов для свойств CSS, необходимо помнить, что их следует располагать до свойства CSS без префикса. Почему это так важно? Это важно потому, что если когда-то в браузере будет реализовано оригинальное свойство (без префикса), то будет использоваться именно оно (т.к. оно располагается последним), а не его экспериментальная версия.

Например: применение свойства CSS ко всем элементам веб-страницы в браузере Google Chrome версии 40.

На рисунке выше видно, что оригинальное свойство box-sizing уже внедрено в этот браузер, и из-за того, что оно располагается последним, браузер использует именного его, а не вышеприведенное свойство -webkit-box-sizing.

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

Например: проверим, как реализовано свойство transform в браузерах.

На сайте "CanIUse" браузеры отмечаются различными цветами, в зависимости от того в каком состоянии находится поддержка определённых свойств или тегов:

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

itchief.ru

CSS хаки для браузеров

Любой, кто занимался Web-дизайном, сталкивался с такой проблемой: когда все браузеры нормально отображают стиль, применённый к странице, и только один "гадёныш" уродует страницу. Чаще всего этим "гадёнышем" становится браузер Internet Explorer, особенно 6-я версия и ниже, которыми пользуются примерно 7-8% пользователей Интернета. Согласитесь, что это весьма много, чтобы просто так на них забить. Хотя и другие браузеры (даже современные) иногда показывают сюрпризы. Поэтому для того, чтобы любой браузер правильно отображал Вашу страницу и были придуманы CSS хаки.

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

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

Ещё один способ связан с тем, что главным "дезертиром", как правило, является IE. Поэтому для него придуман отдельный способ, даже без использования скриптов. Заключается он в условных комментариях в голове документа (внутри тега <head>). Работает он только для браузеров IE, но, как правило, с ними и бывают проблемы, поэтому данный способ можно встретить очень часто. Выглядит он таким образом:

Если перевести на русский язык, то будет примерно так: "Если браузер пользователя - IE, то подключить таблицу стилей из файла css/ie.css".

Если необходимо указать конкретную версию браузера, то вместе с "IE" необходимо поставить ещё и номер версии. Например так:

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

Данный стиль будет применён для всех версий браузеров IE ниже 6-ой версии. Если бы вместо "lt" поставили "lte", то это бы означало ниже или эквивалентно 6-ой версии.

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

1) Internet Explorer. Данный CSS хак работает для версий IE7 и ниже. Как показывает мой опыт, браузер IE8 уже очень приличный, поэтому с ним у меня ещё проблем не возникало. А вот для браузеров IE7 и ниже показываю хак:

Как видите перед вторым свойством "margin-top" стоит символ "*". Это и есть CSS хак. То есть если поставить "*" перед именем свойства, то данное свойство будет применено только для браузеров IE7 и ниже. Вывод: для всех браузеров "margin-top" будет в значении "20px", а для браузеров IE7 и ниже в значении "30px". Если требуется указать стиль только для IE6 и ниже (это часто бывает, потому что с IE7 гораздо лучше дела обстоят и чаще всего править стиль для этого браузера не требуется), то существует другой CSS хак:

Как не трудно заметить, перед вторым свойством стоит знак "_", который и является CSS хаком для браузеров IE6 и ниже.

2) Mozilla Firefox. Данный CSS хак работает только для браузеров Mozilla Firefox. Вот его пример:

В данном примере сообщается, что стиль к селектору "p" будет применён только для браузеров Mozilla Firefox, а все остальные браузеры данный стиль проигнорируют.

3) Opera. Этот CSS хак используется для браузеров Opera. Пример его использования:

Здесь я думаю, что также всё понятно.

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

• Создано 05.08.2010 12:04:35
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

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

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

myrusakov.ru

Смотрите также

• 
  Буфер обмена яндекс браузера
• 
  Игры в браузере наруто
• 
  Роутер настроить через браузер
• 
  Очистить кэш браузера сафари
• 
  Значок во вкладке браузера
• 
  Телевизор с браузером wifi
• 
  Телевизор lg вылетает браузер
• 
  Windows 10 свойства браузера
• 
  Шашки в браузере онлайн
• 
  Браузер яндекс отключить картинки
• 
  Как отключить браузер эксплорер