Условные комментарии для ie6 и хаки (hacks) для СSS
Если вы еще не забили на отображение сайта (вашего или клиента) в Internet Explorer 6 (имеется в виду ie6, версии ниже в данной статье рассматриваться не будут), то наверняка уже сотню раз сталкивались с тем, что какой-нибудь мелкий “косяк” там да вылезет. Кроссбраузерная верстка, легко реализуемая в Opera, FireFox и Chrome, у вебмастеров порождает только чувство ненависти к Эксплореру, для коего приходится придумывать всякие ухищрения.
Вообщем, будьте готовы занести эту статью в закладки, ибо она будет предельно информативной и полезной:)
Итак, для получения кроссбраузерной верстки, мы можем использовать:
- условные комментарии
- хаки для CSS
Условные комментарии для IE
Условные комментарии используются для написания инструкций для Intenet Explorer (как правило просто дается ссылка на отдельный файл стилей). Код выглядит следующим образом:
<!--[if IE]>Действие для IE<![endif]–>
Например:
<!--[if IE]><link rel="stylesheet" type="text/css" href="styles/ie.css" /><![endif]–>
Обратите внимание на содержимое квадратных скобок. Там возможно использование следующих операторов с указание версии браузера:
- lt (less than) - меньше чем
- lte (less than or equal) - меньше или равно
- gt (greater than) - больше чем
- gte (greater than or equal) - больше или равно
Например:
<!--[if lte IE 7]>Действие для версии IE, меньшей или равной 7<![endif]–>
<!–[if gt IE 6.0]>Действие для версии IE выше 6.0<![endif]–>
CSS xаки для IE
Для правильного отображения в IE6 в файле стилей к требуемому элементу добавляем *html, для EI7 - *+html.
Например:
*html .header {padding: 15px 0px 25px;} /* для IE6 */
*+html .header {padding: 13px 0px 22px;} /* для IE7 */
Также для IE6 срабатывает добавление нижнего подчеркивания (_), дефиса (-), двойной наклонной (//) и звездочки (*) перед свойством (я, например, чаще всего использую последний способ).
Например:
.menu {_padding: 15px 0px;}
.phone {-padding: 15px 20px;}
.footer {*padding: 20px 15px 35px;}
.content {<code>//width: 600px;</code>} /* Для IE 7 и ниже */
IE6 игнорирует следующие правила:
div>span {}
div+span {}
Например:
html>body .header {paddung: 20px 15px;}
Еще пару хаков для IE7:
*:first-child+html {} * html {} /* IE7 и ниже */
*:first-child+html {} /* только IE7 */
html>body {} /* Новые браузеры и IE7 */
html>/**/body {} /* Новые браузеры, без IE7 */
>p {} /* выбирает элемент p только в IE7 */
Ну еще один мной любимый хак - !important
Пример:
p {padding-bottom: 15px !important;} /* Все браузеры кроме IE6 */
p {padding-bottom: 13px;} /* для IE6 */
Все! Этого вам более чем хватит, для кроссбраузерной верстки. Желаю удачной практики.
11 июля 2010 в 10:48
Познавательно
Вообще, конечно, жизнь веб-дизайнера трудна, и чем дальше, тем больше браузеров выходит ))) и под каждый оптимизировать надо.
Кстати, IE 9 на подходе.
По верстке еще есть интересное видео от Яндекса:
Yandex - CSS Framework своими руками (2009)
Его можно найти на просторах сети.
[Ответить]
ArtShok:
июля 11, 2010 в 17:42
9-ая версия меня не пугает. Страшно то, что на 6-ке еще много народу сидит. И либо надо на них плевать и верстать сайт с учетом новых тенденций, либо жертвовать красотой в угоду кроссбраузерности.
[Ответить]
12 июля 2010 в 20:15
а есть подобные хаки для других браузеров?
[Ответить]
ArtShok:
июля 13, 2010 в 5:36
Да, есть, но как правило они не нужны
[Ответить]
overbag:
июля 13, 2010 в 8:20
понятно, спасибо
[Ответить]
15 июля 2010 в 14:38
а почему Вы так редко пишите в свой блог? я посмотрел на даты постов, иногда перерывы по пол года!!!
[Ответить]
ArtShok:
июля 15, 2010 в 17:25
Потому что для меня блоггинг - это скорее путь к саморазвитию и помощь другим, а не способ заработка (хотя попытки монетизации тоже есть, но мелкие). Есть основная работа, на которую уходит все время и силы. Здесь же пишу как приходит вдохновение, или назревает какая-то тема. Так как статьи по теме блога пишутся с примерами, на них уходит времени больше, чем если бы просто писалась всякая никому не нужна фигня.
Так что если интересует какой-то вопрос или часто сталкиваетесь с какой-то проблемой - то welcome. Помогу решить.
[Ответить]
overbag:
июля 15, 2010 в 19:30
ну, это в какой-то степени правильный подход, уменьшает количество “пустых” статей. Но так и читателей растерять можно, но если цель - саморазвитие, то гда всё правильно делаешь
[Ответить]
ArtShok:
июля 15, 2010 в 20:32
Скажу по секрету, что за время отсутствия новых статей количество читателей само увеличилось почти в 2 раза. В плане продвижения и рекламы сайта ничего не делалось, поэтому делаю вывод, что все имеющиеся читатели ценят имеющийся материал. Что не может не радовать меня как автора)
[Ответить]
22 сентября 2010 в 16:57
Пора народ расколыхать на обновления. Пусть при 6IE выскакивает сообщение, которое поможет обновить их браузер и все. Инет консерваторов не любит))
[Ответить]
31 октября 2010 в 19:56
В закладки кинул
А скажите, можно ли ждать продолжения темы “хаков”?
[Ответить]
ArtShok:
ноября 3, 2010 в 20:17
Неужели вам этих вариантов не хватает?)
Может и будет, есть еще в принципе пару хаков под оперу, но это уже совсем редкий случай
[Ответить]
3 ноября 2010 в 20:26
Ну хочется все знать =)
[Ответить]
9 декабря 2010 в 12:29
Решил проверить свой сайт в ie6 и удивился, ведь там тоже оказался бок!!! Кинул свои программистам ссылку на Ваш блог, пусть учатся:))
[Ответить]
9 декабря 2010 в 17:00
А я просто забил йух на эксплорер и не парюсь
[Ответить]
18 декабря 2010 в 20:12
Спасибо за полезную информацию. Давно искал такие Хаки. Но до последнего момента я перестал пользоваться IE. Но как веб разработчик должен предусмотреть все что касется этого браузера
[Ответить]
1 февраля 2011 в 20:18
IE это самый плохой браузер. Но как по мне! Я пользуюсь “Хрумаком” и меня все устраивает=)
[Ответить]
25 марта 2011 в 4:13
Большое спасибо за список. Намучался со скругленными углами и тенями, при том, что по статистике “осликом” пользуются только 26% пользователей.
[Ответить]
26 апреля 2011 в 20:14
Как в шутке: IE cуществует только для того чтоб скачать нормальный браузер)
Раньше Оперой пользовалась,теперь хрумом, и довольна)
[Ответить]
11 июля 2011 в 11:39
Ненавижу ИшакЭксплоерер.
За хаки - огромное мерси, в работе пойдет как тещино золото)))
На счет условных комментариев - ничего нового для себя не увидел.
[Ответить]