Персональные 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 хаки” и попадаю именно на эту страницу. :)
Опубликуйте, пожалуйста, ещё вот эти хаки для Webkit-браузеров:
http://www.ridev.ru/T2
http://www.ridev.ru/Tq
Спасибо! Очень часто пользуюсь этой страничкой и хорошо, что она всегда вверху в выдаче гугла.
Они не персональные, поэтому не подходят.
Но ведь теоретически (!) не может быть различных хаков для chrome и safari, они же на одном движке. Один браузер по-сути. Может в следующих версиях ситуация изменится, конечно…
Спасибо за huck для Opera…
*+color:#fff;
-этот хак видит только ИЕ7
привет всем!
понимаю, что немного не в той весовой категории с вами….
так как я не программер, но делаю сайты для себя и своего бизнеса!
есть проблема с css в опере!
вот ссылка - http://www.komarovskiy.kiev.ua - на главной странице в опере не работает функция флоат.
в других броузерах все ок! а в опере фигня выходит!
да и хотел спросить - что такое эти хаки?
куда их нужно вставлять!
я так понимаю, что если вставлю хак для оперы в код, то все будет ок???
спасибо, жду ответ!
Не работает потому, что у p.text указана ширина (width : 670px;). Ширина текста же больше, чем место справа от изображения, поэтому текст и переносится вниз.
Хаки - это стили, который понимает только какой-то конкретный браузер. Вставляются туда же, куда и все остальные стили.
Да, если код будет правильным.
2
3
4
_background: #F00;
}
/* код валидный */
Похоже, все-таки невалидный. Не существует свойства
.
А информацию по этому поводу в статье я для кого написал?
Прошу прощения, читал статью по диагонали и не заметил. Всё правильно написано.
Спасибо за ответ!!
Я все подправил….
недавно уроки по СSS скачал, посмотрел, чуток нового подузнал….
и исправил свои ошибки…. )
теперь все пашет и в опере тоже… )))
ну, и ширину, конечно же убрал…
там с педдингами у меня возникли вопросы… но то такое…
просто если задать картинке и тексту педдинги, то текст вылазит за свой контейнер и приобретает минусовое значение. решил этот вопрос тем, что задал ширину блока текста 97% , а не 100!
думаю, что опять где-то напортачил… хотя хз..
Читать коменты не хотса, может уже писали, но для IE6 оч полезный хак:
2
-width:100px (персонально для IE6)
это очень помогает, когда делаешь страничку с кучей инпутов, селектов и т.д. а как известно IE6 работает по своим законам, для расчета top,bottom,width,height, когда начинаеш использовать margin. Как можно реже используем margin…
Привет, друзья!
у меня снова есть небольшая проблемка! (((
надеюсь, вы как всегда мне поможете!
сейчас делаю себе сайтик, и все у меня хорошо, вот только в шестом эксплорере постоянно какие-то чудеса появляются!
я уже сиэсэс файл переделывал раз 200!
уже просто мозги едут!
поэтому решил спросить совета.
Итак, проблема вот в чем - у меня сайт с контентом и двумя боковыми меню, делаю я его на дивах.
проблема возникает в шестом эксплорере - третья колонка тупо не влазит на страницу посредством флоат лефт, и висит снизу, что убивает сайт!
это штука проявляется только в шестом эксплорере!
я уже думаю даже не заморачиваться над этим!
в мозиле, опере и сафари все работает на ура!
также в шестом эксплорере (при чем на одном компе, на другом все нормально) в блоках - при добавлении именно третьего блока меню появляется неполадка - основание блока отделяется пробелом, что нарушает внешний вид!
также есть проблема с прозрачностью пнг картинок, но над этия я уже даже не заморачиваюсь, так как понял, что вылечить это почти невозможно! где нет ссылок я полечил альфаканалами, где есть, не трогал, так как ссылка становится некликабельной!
если есть у кого-то время, уделите плиз внимание моему сайту - надеюсь, что проблема не в эксплорере, а в моих слабых способностях! ))
вот ссылка на сайт - http://www.booking.kiev.ua/new/probe.html
ну, файл си эс эс в коде уже найдете…
заранее спасибо, жду ответ по решению моей проблемы!
P.S. у меня в принципе есть вариант решения проблемы, но тогда код становится немного идиотским, по крайней мере в дримвьюере нарушается визуальная конструкция сайт, все блоки где попало, наезжают друг на друга и т.д. мне кажется, что так неправильно, хотя браузеры видят все нормально! даже в шестом эксплорере все хорошо кроме пнг картинок (но там была другая проблема, пока ее решал, переделал свой сайт немного, в дримвьюере стало все ок, а вот в экплорере шестом появилась кака)
если кому интересно - старый код с сиэсэс тут -
http://www.booking.kiev.ua/new/dj_dansir.html
Для Vano:
1.
Это бывает, если внутри блоков есть дочерний блок, который больше этих родительских. Откройте Firefox, установите Firebug и проверте width, padding і margin для блоков. Для совместимости с ИЕ 6 для блоков которіе под float используйте padding. (Подсказка: проверте ширину
#wrapper #middle #right .block_r .block_r_sr H3
)
2.
А эта проблемы бывает при очень маленькой всоте блока. Если высота мение 16px, стоит указывать для совместимости с ИЕ 6 параметр line-height. Он, обычно, на несколько px больше размера шрифта. Другие браузеры не берут во внимание этот параметр, а ИЕ6 жить без него не может. Значение параметра line-height достаточно указать на 1..2 px менше высоты блока. (Подсказка: если это блок
#wrapper #middle #right .block_r .block_r_niz
у него height:13px;
когда line-height: 18px;
)
Привет! )))
Хэллбой - спасибо большое! )))
разобрался - у меня в описании класса для тега ул были паддинги больше чем размер блока, поэтому не влазил третий блок. Исправил - уже все работает так как надо.
Проблема с пробеом внизу блока была, наверное, также с этим связана, так как исчезла после устранения чрезмерного пэддинга.
В целом все теперь работает хорошо…
вот ссылка - http://booking.kiev.ua/new/
Есть еще пару вопросом - может быть поможете и с этим?
Опера:
при открытии фотографий через ява скрипт флеш плеер налазит на фото и делает невозможным их переключение.
есть выход переместить фотографии, чтобы они не накладывались при открытии, но думаю, что возможно есть и другое решение.
Так же у меня вопрос - на старом буке (вероятно стоит много всякого хлама уже) маленькие картинки - конкретно 4 фото на странице перед флеш плеером у меня определяются как реклама и вместо них отображается надпись белого цвета [AD].
Что дает указание считать это рекламой??? Как сделать так, чтобы картинки нормально отображались?
У меня это из 4 компов показывает только на одном, причем читал статьи - пишут, что это фаервол оутпост делает, у меня он также установлен, может дело в нем? просто на другом компе тоже стоит оутпост (правда более свежая версия) и ничего не режется.
Есть ли правила для картинок, по которым они “рубятся”? может быть нужно сделать больше размер? (у меня 100х100 пкс)
Буду очень благодарен помощи!
заранее спасибо!
внесу свою лепту
для лисы
2
3
color:#fff;
}
для оперы
2
3
color:#fff;
}
для сафари и хрома и остальных вебкитовских браузеров
2
3
4
5
.class {
color:#fff;
}
}
enjoy ;)
Для Оперы и FF не подходят, их понимает IE7.
Иногда хорошо, что хаки есть.
А какой вы используете плагин, который сбоку слева находится?
да статья на сегодняшний день маленько устарела , единственная причина это плохо работают хаки для opera но это не беда есть новые, и вот не давно вышла opera 10.6 так вот она кардинально отличается от 9 ветки кому нужны хаки для всех даже самых последних версий opera вот есть оригинальная статья читать
Очень скептически после очередного проекта (http://legenda.megafonvolga.ru) отношусь к star-хакам (со *-чкой). Дело в том, что они понимаются и Операми, и IE 7 и считать их персональными смысла не имеет.
Когда найду пример, постараюсь это показать.
Кто-нибудь сталкивался?
Использую постоянно и еще ни разу не сталкивался с этим.
Для Chrome
2
3
color: #333333;
}
Прежде, чем писать, проверять нужно. Распознается все современными браузерами.
офигенный пост. постоянно к нему обращаюсь. пора бы уже для хрома обновить