css hack`s :: поговорим о хаках

[klierik]

Приветвую, ув. посетители форума и администрация.

первым делом я заюзал поиск для поиска топа с подобныс сабжом,

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

Использование хаков, как я понял прочитав некоторое кол-во статеек/блогов

нерекомендовано использовать в силу того что неизвестно что они могут принести в будущем.

Ведь, собственно css hack - это ошибки в программе, которые допустили разработчики при разработке браузера,

что в свою очередь не факт что они остануться при выходе следующего патча, что в свою очередь приведет к неработоспособности хака, или вообще его использование в абсолютно иных целях, нежели кодил разработчик.

Хотя с другой стороны для написание хорошей кроссбраузерной верстки довольно сложно

и за частую и невозможно. Ведь написав код добиться его идеальной отображаемости на страницах

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

css хаки да бы подогнать код.

Многие разработчики с мировым именем утверждают что использование хаков - зло, и что

вполне возможно написать код согласно стандартам без использования онных. От части я вполне с ними согласен,

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

Я не буду оспаривать мнение знаменитых кодеров, но в свою очередь поделюсь своим мнением по данному вопросу.

Мне кажется что использование css hack`ов вполне допустимо для браузеров предыдущих версий, к примеру для IE6-, Opera 8-, FF 1.5-, и т.д. Их использование тут совершенно целесообразно, так как используя хаки для соответствующих версий можно добиться красивого, а главного кроссбраузерного отображение контента.

На ряду в сравнении с остальными браузерами, IE, на удивление имеет преимущество, а именно он поддерживает expression, хотя, использование также не рекомендуемое в CSS.

Разрабатывая код и сравнивая его в последних версиях браузеров, IE7, FF2, Opera 9, Safari for windows

уже можно лицезреть кардинальные доработки на схожеть рендеринга страницы, но все же есть некоторые "разногласия"

между браузерами, к примеру в отступах, размерах объектов форм, или позиционировании одного объекта относительно другого.

Использование хаков для "подгона" объекта бывает необходимо для изменение его местонахождение всего на пару пикселов.

В общем не буду сильно углубляться в сабж а вынесу пока его на рассмотрение аудитории.

зы: в одной из ранее создаваемой мною теме была задета тема про хаки, но они так и не были выложены.

Думаю будет интересно тем, кто с ними не сталкивался или впервые про них услышал.

html:first-child .class { /* for opera. проверенно в 9й (в 9,5 альфа неработает) */
 /**/
}
.class, x:-moz-any-link { /* for firefox. проверенно в 2й */
 /**/
}
body:first-of-type .class { /* for safari. проверенно на бете под windows */
 /**/
}
.class { /* for ie6 */
 _property:value;
}
*:first-child+html .class { /* for ie7 */
 /**/
}

на днях наткнулся на карту хаков под множество систем и соответствующие браузеры (а так же версии браузеров)

но к сожелению не смог найти у себя в хистори

[rash]

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

Hачну:

http://thomas.tanreisoftware.com/?p=11

http://centricle.com/ref/css/filters/

Теперь немного пространных рассуждений:

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

С другой стороны в крайнем случае использовать "хаки" я считаю вполне допустимым.

[kiD]

раньше хаки пользовал только под ИЕ

остальное приводилось в норму стандартными методами.

[Dimitry Wolotko]

Топик прикреплю - ибо полезный.

[strix]

и я брошу ссылочку: http://www.webdevout.net/css-hacks

P.S. hack имеет много значений, не все они негативные

верх совершенства; тонкая ювелирная работа

Граммотное использование хаков можно сравнить с тонкой ювелирной работой - она уместна не везде и не стоит увешиваться побрякушками... Но парочка алмазов - только украсит вашу работу

[a.e.koshelev]

Внесу и свою лепту:

я лично использую такие CSS хаки

1. html:first-child div{} /* только для оперы */
2. body:not([dummy]) div{} /* firefox */
3.* html div{} /* для IE 6 */
4. *:first-child+html div{} /* для IE 7 */

Но для IE предпочтительнее использовать т.н. "Условные комментарии" (кто не знает что это такое - тем сюда http://msdn2.microsoft.com/en-us/library/ms537512.aspx)

в принципе этого хватает для верстки любого проекта.

на днях наткнулся на карту хаков под множество систем и соответствующие браузеры (а так же версии браузеров)

но к сожелению не смог найти у себя в хистори sad

не эту табличку искал? http://www.centricle.com/ref/css/filters/

[klierik]

в принципе этого хватает для верстки любого проекта.

да, полностью солидарен, при условии если есть возможность разделения на разные цсс

иногда бывают случаи, что можно использовать только 1 scc-файл, в таком случае без хаков не обойтись.

[GC0mmander]

можно использовать такой хак для ИЕ:

в таблице CSS ставим в конце кода нужного елемента !important

ИЕ не понимает, что такое !important, и игнорирует эту срочку. Зато другие браузеры хорошо понимают, и выполняют как есть.

[yopopt]

можно использовать такой хак для ИЕ:

в таблице CSS ставим в конце кода нужного елемента !important

ИЕ не понимает, что такое !important, и игнорирует эту срочку. Зато другие браузеры хорошо понимают, и выполняют как есть.

Это не совсем верно.

Вот так не работает:

#id {
 width: 100px !important;
 width: 50px;
}

А вот так вс?-таки работает:

#id {
 width: 100px !important;
}
#id {
 width: 50px;
}

[Deacon]

Надо комментарий для Firefox. То есть что-то вроде:

<!--[if IE]><link rel="stylesheet" type="text/css" media="all" href="ie.css"></link><![endif]-->

Только, чтобы только Firefox этот стиль видел.

В отличие от всех остальных браузеров Firefox делает бордеры чуть тоньше, надо бы подправить специально для него.

[klierik]

В отличие от всех остальных браузеров Firefox делает бордеры чуть тоньше, надо бы подправить специально для него.

если ширина 1пк то она везде 1 пк...

2пк = 2пк...

не может быть везде ширина 1пк и в FF .5пк

Вы скорее всего ошиблись.

[Deacon]

Не, у меня в em, то есть в том-то идело, что процентные данные браузеры округляют по-разному. Нужен хак, по-другому выглядит только в Firefox.

Edited September 18, 2008 by Deacon

[ZoNT]

Не, у меня в em, то есть в том-то идело, что процентные данные браузеры округляют по-разному. Нужен хак, по-другому выглядит только в Firefox.

ФФ не округляет проценты...

[klierik]

Не, у меня в em, то есть в том-то идело, что процентные данные браузеры округляют по-разному. Нужен хак, по-другому выглядит только в Firefox.

ем - это не совсем проценты.

и все браузеры понимают ем до тысячной.

[Deacon]

Ребята, у меня такая ситуация, что именно для Firefox надо, немного по-иному задать значения аргументов бодеров.

Подскажите только, как описать в html стиль, чтобы его видел только Firefox.

[Ялекс]

Хаки — это плохой тон[точка]

Все можно делать без них.

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

Наверное стоит пользоваться только <!--[if IE]>

Edited September 19, 2008 by Ялекс

[ZoNT]

Если отказаться от ИЕ6, то хаки не нужны вообще.

[Vlad]

Ссылка из сообщения №2 перестала работать.

thomas.tanreisoftware.com/?p=11

[Deacon]

Хаки — это плохой тон[точка]

Все можно делать без них.

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

Наверное стоит пользоваться только <!--[if IE]>

Объясняю ещё раз: IE 6, IE 7, Opera, Safari везде нижнее подчёркивание в 1.0em смотрится одинаково. В Firefox 3 линия толще. Когда ставлю 0.9em, то линия в Firefox становится как надо.

Кароче мне надо именно в одном месте для всех браузеров, чтобы бордер делал с толщиной 1.0em, а для Firefox 0.9em.

Я спрашиваю не про хак, а про то как добавить стилевой файл исключительно для Firefox, а это уже по определению не хак, а фича.

Жду инфы по делу.

[Victor Ananiev]

жабаскрипт, проверять в имени браузера слово Gecko если есть значит мазилла.

[Vlad]

У Firefox есть набор только им поддерживаемых стилевых атрибутов. Посмотри, может и найдешь что подходящее.

http://developer.mozilla.org/En/CSS_Refere...illa_Extensions

[Deacon]

Отец, я тя ценю и реально уважаю!

Говорят опыт от Отца к отцу передаётся.

Edited September 20, 2008 by Deacon

[Vlad]

Кстати, весьма неудачная мысль задавать всякие границы и линии в em, лучше в пикселах, точно во всех браузерах будет одинаково.

[klierik]

Кстати да... были замечены некоторые странности при использование em для ширины линии границы. В таких моментах лучше использовать px

[Deacon]

Вот-вот, видите есть разница всё же.

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