Персональные CSS-хаки для Internet Explorer, Opera, FireFox, Safari, Google Chrome
Я не сторонник условных комментариев в CSS (можно ругать меня за это), взамен предпочитаю использовать различные CSS-хаки, дабы при верстке решить проблему кроссбраузерности по ходу написания кода, без лишний “телодвижений”. Да, это неправильно с точки зрения стандартов и некрасиво, но таким способом для меня гораздо проще верстать.
По мере посещения различных зарубежный интернет-ресурсов по веб-разработке, обнаруживаю для себя все новые и новые CSS-хаки, которые можно применить персонально для одного из популярных сегодня браузеров: Opera, FireFox, Internet Explorer, Safari, Google Chrome.
По мере обнаружения новых хаков, данный список будет дополняться.
Указанные ниже хаки актуальны на 10 октября 2009 года.
CSS-хаки для браузера Opera
1 2 3 4 | @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .style {background: #F00;} } |
1 2 3 | *|html[xmlns*=""] .style { background: #F00; } |
1 2 3 4 5 | html:first-child .style { background: #F00; } /* код валидный */ /* только для Opera < 9.5 */ |
CSS-хаки для браузера FireFox
1 2 3 | @-moz-document url-prefix() { .style {background: #F00;} } |
CSS-хаки для браузера Internet Explorer 6
1 2 3 4 | .style { _background: #F00; } /* код валидный */ |
Несмотря на то, что CSS-валидатор принимает хак с подчеркиванием за ошибку, спецификация CSS 2.1 позволяет использовать данную конструкцию.
1 2 3 4 | * html .style { background: #F00; } /* код валидный */ |
CSS-хаки для браузера Internet Explorer 7
1 2 3 4 | *+html .style { background: #F00; } /* код валидный */ |
1 2 3 4 | *:first-child+html .style { background: #F00; } /* код валидный */ |
1 2 3 | html>body .style { *background: #F00; } |
CSS-хаки для браузера Internet Explorer 8
1 2 3 | .style { background: #F00\0/; } |
Этот хак следует писать после стилей для остальных браузеров.
CSS-хаки для браузера Safari
1 2 3 4 | body:last-child:not(:root:root) .style { background: #F00; } /* для Safari < 4.0 */ |
1 2 3 4 | html[xmlns*=""] body:last-child .style { background: #F00; } /* для Safari < 4.0 */ |
CSS-хаки для браузера Google Chrome
Пока не найдены.
Люблю такие подборки, тенкс! :)
Пожалуйста, sonika ;)
Блин, о чём вы говорите? Зачем извиняетесь?
Я понимаю, когда предлагают уродовать код собственно документа ради того, чтобы просто заработало. Но уродовать документ ради того, чтобы CSS проходил валидацию… Таким неадекватам нужно советовать верстать в таблицах.
Полезные данные. Кстати, код
.style, x:-moz-any-link {
background: #FA0;
}
Safari тоже понимает. А нельзя ли хакнуть Firefox, чтобы это не затронуло Safari, или может под Safari есть отдельные хаки?
Николай, в данном случае распознавание зависит от версии Сафари. У меня стоит Safari Win/3.0.2(522.13.1) и она не понимает этот код.
Все хаки для FF, которые известны мне, находятся в этой статье. Для Сафари тоже есть свои, нужно искать.
В CSS-хаках, как Вы их называете, нет ничего плохого. Вообще то они называются трюками.
Трюком я называю использование CSS не так, как это описывается в спецификациях. Трюки используются для включения или скрытия CSS от определенных браузеров. Зачастую трюки применяются для обхождения дефектов Internet Explorer.
Трюк с обратной косой чертой…
Если мы напишем комментарий с обратной косой чертой перед закрывающей звездочкой:
Код:
Internet Explorer для Mac посчитает, что комментарий не закрыт, и воспримет весь последующий код как комментарий, до тех пор пока не встретит обычное закрытие комментария, состоящее из звездочки и косой черты.
Например:
Код:
2
3
4
5
* html div#menunav ul {
border-top: 2px solid #800000;
}
/* конец трюка*/
Здесь IE/Mac игнорирует строку с селектором * html. Таким образом, мы можем комбинировать трюки со звездочкой и обратной косой чертой, чтобы создать правило только для Internet Explorer для Windows.
спасибо!
Спасибо, пригодилось очень.
Работы этого хака зависит еще от объявленного типа документа, т.е. не всегда работает.
sameleh, на Strict и Transitional, я думаю, должно работать, а это самые часто используемые типы документов при дивовой верстке.
.style, x:-moz-any-link {
background: #FA0;
}
IE7 это тоже понимает. Но можно тут же написать
// background: что было до этого
Да, действительно понимает. Спасибо, что сообщили. Не знаю, почему я это упустил.
Хаки это конечно хорошо, но злоупотреблять ими не стоит.
Огромное спаибо за хак для Opera, очень долго искал =)
Всё время думаю, а зачем людям под оперу хаки писать, у меня как правило FF Opera и Safari показывают одно и тоже, для IE7 пару лишних строчек ( в основном чекбоксы подправляю, и ещё какието мелочи) и куча под IE6. Мне кажется, что если придерживаться стандартам, то и хаки для оперы не нужны будут.
Jman, согласен с вами. Я сам использовал хак для Оперы несколько раз всего, по-моему для кнопки сабмита. Текст в ней, почему-то, во всех браузерах по-разному выровнен по вертикали.
Такое было в старых версиях оперы… у меня сабмит опера смещала так как ей хотелось, IE6 и IE7 тоже по своему,только фаирфокс радовал… но решал просто — position:relative; и подгонял так, чтобы смотрелось во всех более менее нормально. С текстом в кнопках вроде проблем у меня не было. Вообще новые версии браузеров радуют поддержкой стандартов, сейчас стало верстать гораздо легче, как правило уже достаточно 3 браузеров, из них два от “любимой корпорации”.
PS: I have a dream! Чтобы по всему миру ИЕ6 взял как-нибуть и молча обновился до 7. Может к Крису Касперски обратится, чтоб он вирус написал, который будет Ие6 обновлять.
Меня в этом плане не радует FireFox. У него почему-то всегда текст в кнопке ниже на пару пикселей, чем в Опере и ИЕ.
Тоже об этом мечтаю :)
html:root .style {
background: #FA0;
}
понимает также Опера 9.52, а не толко FF и safari
slider, на момент написания статьи этой версии Оперы еще не было. В общем, придется убирать этот хак, т.к. он уже совсем не персональный.
К сожалению еще один хак придет перенести в статус не персональные
@media all and (min-width: 0) {
.style { background: #FF0; }
}
его теперь воспринимает и Google Chrome :(
Ух ты.. Вот это круто. В одном блоге и столько. Спасибо! Буду пользоваться..
Благодарствую за хаки для IE7, а то вчера мучился с одним блоком, во всех браузерах нормально отображается, а в ИЕ на 2px больше высота, чем нужно.
респект за хаки для Opera и Safari. Очень помогли мне с версткой одного непростого макета
Урааааааааааааааааааааа….. Вы мой спаситель =))))))))))) Спасибо большое! Нужная весЧ!!!!!!!!!
Safari и Хром - это все движок Веб кит, на этом движке еще куча браузеров
Недогнал помогите.
Есть файл со стилями:
#baner_right {
position: absolute;
top: 0px;
right: 0px;
width: 189px;
height: 256px;
border: 0;
}
#parent {
position: relative;
}
Есть прозрачная картинка:
и второй id=”parent” я присваиваю таблице в Opera и IE все ок а в мозиле не привязывается к таблице которой я присвоил второй id.
Добовление:
Есть прозрачная картинка:
Текст картинки: (
)
Информации явно недостаточно.
Что значит, второй id? id, это не class, чтоб его по несколько раз к разным тегам присваивать. Идентификатор, должен присутствовать на странице только один раз.
id уникальная консрукция. Он в коде может быть только один.
Господа, разве вы не понимаете, что все хаки, основанные на селекторах CSS3 - дело крайне ненадежное.
И для хрома уже найдены там же, откуда ты эти взял ))
СПАСИБО! Классно! Мучал IE 7 с CSS помогло!
Спасибо большое, очень помогли. Как ни странно, но Opera и FF у меня отобразили xHTML по-разному, в первый раз такое. поправил, спасибо :)
Вот здесь я специально собрал провереннную отличную подборку css хаков. Надеюсь вам поможет: http://studioad.ru/blog/css_haki_css_hacks_css_filters/2009-09-30-92
Спасибо. Хорошая работа.
Использования хаков черевато. Они будут работать до тех пор пока разработчики браузера для которго работает хак не залатают дыру. :)
И вообще считается, что это плохой тон :) хотя я их иногда использую.
Dimox, для хрома тоже появились хаки, добавь в статью.
Персональный хак для хрома я пока не нашел.
Димокс, каждый раз когда нужны мне хакки, всегда ползу в гугл и ищу там твой блог. Все лень записать себе твои находки ! ) И сегодня пришел за Оперой… иногда выбрыкивается зараза )
Рад, что мой блог тебе полезен.
@media all and (min-width: 1px) { html:first-child .style { .style { background: #FF0; } }
- решение для Opera 8
поставил давиче лисицу 3.6 и был неприятно удивлен,
вот этот любимый хак теперь не работает в ней:
2
3
4
5
6
.selector {
бла бла бла;
}
}
замены так и не нашел, чтобы и в 3.6 работало, может кто-нибудь уже что-нибудь нарыл для новой лисицы?
У меня он работает, как и прежде.
Мир Вам.
Верстаю на XHTML transitional и strict. Для большинства бесплатных браузеров хаки не использую, так как они валидную верстку имеют за родную и не капризничают.
Был, правда, случай, когда Submit маленькой высоты был и текст на дне кнопки. Вышел с положения при помощи ссылки и обработчика document.form.submit ();
А вот с Internet Explorer 6.0 & Co © Microsoft всегда всело. Особенно:
1. С PNG 24 и альфа каналом (прозрачностью).
2. С :HOVER для тегов, отличных от А.
Раньше исправлял при помощи хаков с JavaScript. Но отказался, так как могут быть конфузы со слоями (выпадающее меню прячеться под “обработаной” PNG с прозрачностью. Спасибо за *html для IE 6. Для надежности, пользователям этого браузера я предложу низкокачественный гиф ).
В ответ, поделюсь собственными наработками, может кому-то будет кстати:
1. Для форм высоту INPUT полей лутчше задавать размером шрифта и падингами. Не в коем случае не выставлять ее для SELECTов. В ИЕ 7 и ИЕ8 может быть больно.
2. В ИЕ 6 если дивы с флоатами в прытык по ширине, но для их не выставленны падинги - будут съезжать.
3. Что бы не колапсировали и не делали дефейса дивы и др. бочные елементы с жостко заданой высотой и шириной пользуемся overflow: hidden;
4. outline: none; (css) для FF, что бы не было рамки вокруг ссилки при клике.
5. На последок: ждем смерти ИЕ6 (ничего не делаем для его совместимости) и соглашаемся, что все таки кое-что в майкрософт MUST DIE.
Забыл добавить: Спасибо за хаки :)
В опере размер шрифтов меньше 9px вообще реально уменьшить. из-за этого все едет, а так хаки для нее рабочие, все остальное меняется. Спасибо.
Отличная статья. Все хаки на изусть не помню. Набираю в гугле запрос “css хаки” и попадаю именно на эту страницу. :)