CSS хаки для браузеров
Любой, кто занимался Web-дизайном, сталкивался с такой проблемой: когда все браузеры нормально отображают стиль, применённый к странице, и только один "гадёныш" уродует страницу. Чаще всего этим "гадёнышем" становится браузер Internet Explorer, особенно 6-я версия и ниже, которыми пользуются примерно 7-8% пользователей Интернета. Согласитесь, что это весьма много, чтобы просто так на них забить. Хотя и другие браузеры (даже современные) иногда показывают сюрпризы. Поэтому для того, чтобы любой браузер правильно отображал Вашу страницу и были придуманы CSS хаки.
CSS хак - это специальный синтаксис стиля CSS, который понимает только один определённый браузер. Причём CSS хаки даже часто различаются для разных версий одного браузера.
Однако, прежде чем перейти к CSS хакам, хочется рассказать о другом способе разделения стилей, который более предпочтителен: с использованием PHP или JavaScript, в которых мы можем определить тип и версию браузера, и уже, в соответствии с этим, подключать соответствующий файл стилей. Данный способ рассматривать не будем, так как для того чтобы понять его, необходимо иметь минимальный набор знаний по этим языкам.
Ещё один способ связан с тем, что главным "дезертиром", как правило, является IE. Поэтому для него придуман отдельный способ, даже без использования скриптов. Заключается он в условных комментариях в голове документа (внутри тега <head>). Работает он только для браузеров IE, но, как правило, с ними и бывают проблемы, поэтому данный способ можно встретить очень часто. Выглядит он таким образом:
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->Если перевести на русский язык, то будет примерно так: "Если браузер пользователя - IE, то подключить таблицу стилей из файла css/ie.css".
Если необходимо указать конкретную версию браузера, то вместе с "IE" необходимо поставить ещё и номер версии. Например так:
<!--[if IE 6]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
<![endif]-->Как не трудно догадаться, стиль будет применён только для браузеров IE версии 6. Также бывает необходимо указать таблицу стилей для браузеров ниже определённой версии. В таком случае, используется данный синтаксис:
<!--[if lt IE 6]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
<![endif]-->Данный стиль будет применён для всех версий браузеров IE ниже 6-ой версии. Если бы вместо "lt" поставили "lte", то это бы означало ниже или эквивалентно 6-ой версии.
В большинстве случаев, данных знаний уже достаточно, и надо стараться, чтобы не требовалось большего. Однако, существуют ситуации, когда данные способы не совсем разумны. Например, при ситуации, когда в огромном CSS файле, всего лишь 1-2 стиля нуждаются в особенном виде для отдельных браузеров. Глупо в таком случае создавать отдельный огромный файл, который потом подключать через скрипты или через такие условия. Вот поэтому и были придуманы CSS хаки для браузеров, к которым мы сейчас и переходим. И начнём мы с:
1) Internet Explorer. Данный CSS хак работает для версий IE7 и ниже. Как показывает мой опыт, браузер IE8 уже очень приличный, поэтому с ним у меня ещё проблем не возникало. А вот для браузеров IE7 и ниже показываю хак:
p {
margin-top: 20px; # Для всех браузеров
* margin-top: 30px; # Для браузеров IE7 и ниже.
}Как видите перед вторым свойством "margin-top" стоит символ "*". Это и есть CSS хак. То есть если поставить "*" перед именем свойства, то данное свойство будет применено только для браузеров IE7 и ниже. Вывод: для всех браузеров "margin-top" будет в значении "20px", а для браузеров IE7 и ниже в значении "30px". Если требуется указать стиль только для IE6 и ниже (это часто бывает, потому что с IE7 гораздо лучше дела обстоят и чаще всего править стиль для этого браузера не требуется), то существует другой CSS хак:
p {
margin-top: 20px; # Для всех браузеров
_margin-top: 30px; # Для браузеров IE6 и ниже.
}Как не трудно заметить, перед вторым свойством стоит знак "_", который и является CSS хаком для браузеров IE6 и ниже.
2) Mozilla Firefox. Данный CSS хак работает только для браузеров Mozilla Firefox. Вот его пример:
p, x:-moz-any-link {
margin-top: 30px;
}В данном примере сообщается, что стиль к селектору "p" будет применён только для браузеров Mozilla Firefox, а все остальные браузеры данный стиль проигнорируют.
3) Opera. Этот CSS хак используется для браузеров Opera. Пример его использования:
* |html[xmlns*=""] p {
margin-top: 30px;
}Здесь я думаю, что также всё понятно.
Вот и всё, что хотелось написать в этой статье. Однако, ещё раз напоминаю, что CSS хаки - это плохо, очень часто они не проходят при проверке валидности кода, а это уже не есть хорошо. В общем, старайтесь их не использовать при создании сайта или использовать только в самом крайнем случае. А, вообще, рекомендую Вам ознакомиться с основами CSS, тогда у Вас будет меньше проблем, связанных с разным представлением стилей у браузеров.
-
Создано 05.08.2010 12:04:35
-
Михаил Русаков
Комментарии (69):
Там в условных комментариях надо два тире поставить: <!--[if IE]> .......... <![endif]--> И где указываются в квадратных скобках версии IE нужен пробел перед цифрой: [if IE 6] А то не работает ни фига!
Ответить
Спасибо, уже дописано.
Ответить
А можно написать только один хак на всю страницу? Или можно все написать, чтобы любой браузер отображал всё правильно?
Ответить
Хаки - это плохо, поэтому чем меньше их - тем лучше. В идеале, их вообще быть не должно. Все хаки смысла писать не имеет, так как в большинстве случаев браузеры очень похожи. И для них стили будут одинаковыми.
Ответить
Спасибо! Кстати, можете объяснить почему у меня изображения не отображаются в Mozilla Firefox?
Ответить
Если на всех сайтах не отображаются, то, значит, показ изображений выключен в настройках. Если на одном конкретном сайте, то здесь вариантов бесчисленное множество.
Ответить
А где тут "Настройки"?
Ответить
Инструменты/Настройки/Содержимое. Должен быть включён чекбокс "Автоматически загружать изображения".
Ответить
"Инструменты" есть, а "Настройки" и "Содержимое" нету. Может я где-то не там ищу? Я ищу в мозилле.
Ответить
В меню Инструменты есть пункт "Настройки". Кликайте по этому пункту, а дальше откроется окно, в котором выберите вкладку "Содержимое".
Ответить
Я не вижу пункт "Настройки"...
Ответить
Какая версия Mozilla?
Ответить
Не помню, помойму 4-ая
Ответить
Тогда не знаю, потому что у меня firefox 3.
Ответить
Михаил чего у меня неработуют хаки браузеров,опера отображает стиль нормально , а вот мозила,хром отображают стиль изуродованым
Ответить
Если Вы используете хак для оперы, то очевидно, что мозила, хром и другие браузеры, данный стиль применять не будут.
Ответить
Ну а как сделать чтоб все браузеры отображали нормально,а не одна опера мини.
Ответить
Не использовать хаки, а просто писать свойства, тогда они будут применяться ко всем браузерам.
Ответить
Ну я вобще теперь хаки неиспользую,но почему все браузеры кроме оперы портят и уродуют сайт?
Ответить
Кривой код, кривая вёрстка. Учитесь верстать, ничего другого здесь добавить никто не сможет.
Ответить
Ну а как сделать чтоб браузеры отображали нормально
Ответить
Вот курс, где обо всём этом говорится: http://srs.myrusakov.ru/makeup Здесь в двух словах не описать. Но можно сказать так: если писать по уму, если всё делать аккуратно, то таких проблем не возникает, разве что в очень малых количествах и в очень сложных дизайнах. И вот как писать правильно, аккуратно и по уму данный курс и обучает.
Ответить
У вас ктоекто которого вы учите стырил код дать сылку
Ответить
Вотона она http://vasya.xe0.ru/ стырил её илья денисов
Ответить
Спасибо, что сообщили. Вреда это не принесёт, но всё равно лучше удалить данный сайт.
Ответить
Чей его?
Ответить
Ильи Денисова.
Ответить
А кто будет удалять вы?
Ответить
Написал его хостеру просьбу удалить сайт и заблокировать его аккаунт.
Ответить
А за это могут посадить?
Ответить
Смотря, насколько сильный ущерб. В большинстве случаев, это штраф, но он очень большой может быть, который ни он, ни его родители за всю жизнь не выплатят. Также могут посадить за фишинг, это до 3-х лет.
Ответить
А сколько примерно денег?А вы сами дезайн придумавали?И почему за сайт много штрафа?
Ответить
Зависит от сайта, мне ущерба не нанесли, поэтому в суд подавать я не буду. А скопируй он какой-нибудь сайт Сбербанка, то там может счёт идти на миллионы долларов (копирование сайта - это потеря клиентов), плюс уголовного преследования ему не избежать.
Ответить
Только неговори ему что я тебе сказал просто он мой друг!
Ответить
Ну выже сами показавали видиоурок как скапировать зачем?
Ответить
Я не показывал урока, как копировать сайты, тем более, ещё так плохо скопировать.
Ответить
нет я както раз чтото набрал а с бока там был видиоурок я нажал и там было показано как что определит
Ответить
Firebug нужно использовать для своих сайтов, а не для воровства чужих.
Ответить
а почему у меня наглавной странице шапка сайта нормальная какая и должна быть а на другой где больше написано расплывчтая?
Ответить
Потому что она растягивается, а при растяжении качество ухудшается.
Ответить
нет у меня на главной стоит 16% и на другой тоже 16% только на другой качество плохое
Ответить
16% - это относительный размер, который будет тем больше, чем больше контента.
Ответить
всё сделал спасибо!
Ответить
почемуто непоявляеться почему опять разплывчата?
Ответить
Михаил почему у меня код невалидный <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <img src = "logotype.png" width = "17%" alt = "шапка сайта"/> <img src = "colamn1.png" width = "3%" alt = "шапка сайта"/> <meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251"> <title>как создать свой сайт</title> <link rel="stylesheet" type="text/css" href="style.css"> <div id="panelMenu"> <a href = "главная.html"><div id="menu" style="position: absolute; left: 4px;" href = "new 2.html">Главная страница</div></a> <a href = "малат.html"><div id="menu" style="position: absolute; left: 177px;" href = "гибир.html">програмирование</div></a> </div> </head> <body text = "blue"> <table> <tr> <td style = 'width: '30%;' > <div style = "text-align: left;"> <p style = "text-align: left;"> <p>Здравствуйте.Если вы находитесь на этом сайте,то наверника пришли сюда по поиску информации.Сдесь вы можие скачать горезонтальный и вериткальные меню.Научиться програмированию.Вобщем поищите по сайту!</p> </td> </tr> </table> </body> </html>
Ответить
Очень много ошибок, валидатор их все указывает и даёт комментарий. Если не знаете английский, то используйте переводчик.
Ответить
можишь мне его исправить чтоб валидный был
Ответить
Я-то могу, конечно, но ведь Вам нужно учиться.
Ответить
ну я научюсь а выь мне покачто исправите на валидный а я посмотрю и запомню
Ответить
Вы не научитесь, если я исправлю.
Ответить
В самом первом листинге после type нет "=", в листинге хака для IE 6 в css-комменте 7 вместо 6. Пардон за придирки ;-)
Ответить
Исправил, спасибо!
Ответить
Здравствуйте, Михаил. Подключил таблицу стилей для ІЕ, а в Експлорере всё равно отображается основная таблица стилей. Таблицу поместил в голову документа, перед ссылкой на основную таблицу. Что я делаю не так? Спасибо.
Ответить
Наоборот сделайте. Тогда все остальные браузеры проигнорируют вторую запись css, заключенную в условные комментарии, а IE как раз примет её.
Ответить
Спасибо, Михаил. Сделал.
Ответить
Здравствуйте, Михаил. У меня на странице 5 фоновых изображений (в теге body), но Експлорер их не отображает, поскольку не может отобразить больше одного фонового изображения. Какой хак нужно применить для того, чтобы во всех Експлорерах цвет фона был чёрным? При этом таблицу стилей подключать нельзя.
Ответить
Примените люблой хак из статьи выше так, чтобы после основного свойства шло свойство создания черного фона для эксплорера. Не обязательно делать это в отдельной таблице стилей.
Ответить
Спасибо большое. Хак сработал.
Ответить
Михаил! Спасибо за интересную статью! Вот еще CSS хаки для браузера IE Возможно, стоит их дописать в вашу статью для полноты информации 1) двойной слеш (//) перед css-свойством даст видимость данного свойства только браузеру IE любой версии. 2) звездочка (*) или слеш (/) перед css-свойством даст видимость данного свойства только браузерам IE6 и IE7. 3) Подчеркивание (_) или дефис (-) перед css-свойством даст видимость данного свойства только браузеру IE6.
Ответить
У меня страницы отображаются нормально во всех браузерах, проблемы с одним браузером OPERA. причем с одной его версией. Такое чувство, что страница сверстана наизнанку. Пробовал применить для нее хак * |html[xmlns*=""], вставляю просто в таблицу стилей, но она (опера) просто игнорирует его.
Ответить
Если эта не новая версия Opera, то не обращайте внимания.
Ответить
А вот как быть с браузером Yandex и стилем "position: fixed;" на сайте: http://filter-tver.com/. Ситуация такая - во всех браузерах (что пробовал)корзина отображается как надо кроме браузера Yandex. В Yandex корзина попадает в левый угол окна. Хотелось бы прописать какой-нибудь хак для него - только как это сделать..?
Ответить
Похоже ответа на этот вопрос здесь я не дождусь..(((((
Ответить
привет,как добавить к тегу body этот хак,для браузера chrome? @media all and (-webkit-min-device-pixel-ratio:0) { }
Ответить
Для таких браузеров как chrome, opera и firefox, i9 и ie10 вообще хаков не надо использовать. В новых версиях они, во-первых, могут уже не работать, во-вторых, это достаточно адекватные браузеры и под них надо подстраиваться одним CSS-файлом без всяких хаков.
Ответить
Есть проблема: в IE картинку на фон отображает, а в Chrome и Opera - ни к черту. Стоит ли делать хак? И что делать вообще?
Ответить
Максим, нужно смотреть. Так ничего не посоветую.
Ответить
Здравствуйте, скажите пожалуйста есть ли какие-нибудь хаки для Яндекс браузера? У меня в яндексе 2 блока на сайте съежают вниз примерно 30-40 пикселей, у всех остальных браузерах все нормально.
Ответить
Отвечаю сам. Все норм стало. Хаки не понадобились. Спасибо за оперативный ответ. :)
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.