Сборник хаков

[dfuse]

Для меня интереснее всего было получить хаки, которые работают отдельно в Opera 9.2, Opera 9.5 и Safari. По ссылке есть приписочка «все эти хаки понимает и Safari» — я это обошел.

[agatische]

В разработке новая страничка с хаками, уже без этого недостатка.

По статистике, страничка про хаки популярнее самого фреймворка :)

[dfuse]

С нетерпением жду времени, когда хаки будут не нужны. Вобщем-то они и сейчас не нужны ни для чего, кроме горячо любимого IE…

Однако недавно я таки нашел применение всему вышеизложенному. Я попытался привести в одинаковый вид всего-навсего формы… чтоб radio и checkbox стояли одинаково, чтобы отступы в textarea и input[type=text] были везде одинаковые. Особенно я помучался с отступами в select, это просто песня, как там все необычно.

Вы удивитесь, но получилось довольно много кода… хотя весь этот эксперимент по сути просто от нечего делать…

[AmirL]

А вы начните делать сначала под ИЕ и потом уже проверить под другие бразуеры. Придется делать хаки под них. Так что это с какой стороны посмотреть.

[dfuse]

Смотреть надо с правильной стороны… У IE плохо со стандартами, да и quirks-mode там тоже крив местами. Просто я неоднократно сталкивался с ситуацией, когда все браузеры показывают все как надо, а IE — нет :)

Да и поддержка CSS в IE6 тоже ужасная была. min-max-width, прозрачность, отсутствие E>F — за это я его и не люблю )))

[AmirL]

С правильной стороны — это со стороны пользователя. Чем больше пользуются — то в данный и момент правильно (актульно).
У меня например неприятный баг с файрфоксом был. Во всех браузерах ролики ютубовские нормально вставляются — а в огнелисе разьезжается верстка (с новой строки слева ставит ролик — игнорируя верстку).

[dfuse]

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

Да там есть глупости вроде content-box, который я и еще многие разработчики считают не-интуитивным (http://www.quirksmode.org/css/box.html — под заголовком «The best?» например), но и W3C выпустили свойство box-model, которое в купе с -moz-, -webkit- и -ms- аналогами решает проблему.

Не будем холиварить, я останусь при своём :)

[ambientos]

Спецификации не пробовали почитать, например по CSS 2? Когда ты знаешь, как себя элементы будут вести по стандартам, таких проблем не должно возникать. А все последние версии FF, Opera, Safari, GChrome и даже IE последних версий более-менее показывают все по стандартам. Даже IE 6 весьма предсказуемо себя ведет, если ничего редкого не используешь, хотя свои баги есть конечно.

[ambientos]

Сначала подумали бы, прежде чем писать такое.

[AmirL]

Ух как заминусовали. Видимо слово «стандарты» действует.
Кстати — а ослик разве со стандартами не согласился? почему он их не поддерживает?

[alex_blank]

>> А вы начните делать сначала под ИЕ и потом уже проверить под другие бразуеры. Придется делать хаки под них.

бугага

понимаете, IE — он один такой, уникальный в своём мировоззрении, а нормальных браузеров — много

поэтому и хакают IE, а не борются с ветряными мельницами (Firefox 3, Opera 9.5+, WebKit)

[alex_blank]

вот давайте не будем ностальгировать

сегодня — не вчера

[dfuse]

вово ) мозилла и опера хотябы обновляются регулярно и постоянно… а IE в этом смысле жутко буксует.

[YuriChetverikov]

бред бред бред бред бред

опера в год выпуска ие6 была вполне приличным продуктом. насколько я помню, как раз тогда она была с баннерами.
нетшкаф был всегда говном. единственное время, когда он был не говном — это время вин95. тогда еще ИЕ 4 нужно было устанавливать отдельно, как щас помню.

[dfuse]

Первая опера вообще «не поддерживала интернет» :) Со слов сотрудника она была предназначена чтобы html'ки локально смотреть.

[YuriChetverikov]

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

[YuriChetverikov]

> Я никогда не питал иллюзий по поводу объективности любителей оперы.
эм. ну вообще то я отношу себя к операненавистникам :)

[neJa]

формы можно сделать одинаково и без хаков, но код будет мрачный

[dfuse]

Внешний вид — нет, а положение регулируется (еще бы). А у select в Opera и FF регулируется даже отступ.

[dfuse]

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

[CurlyBrace]

Думаю статью заметят, добавят вам кармы и тогда вы сможете перенести ее. Я свою лепту внес )

Кстати если по мне — статья слабовата. Я бы делал ее более объемной, с пояснениями, с объяснениями того что часть хаков на самом деле ими не являются, а являются частью стандарта CSS3 и чем это черевато… и так далее.

[dfuse]

Ок, доработаю…

[dfuse]

Интересно, почему только Mozilla додумались до @-moz-document… Как было бы прекрасно получить симбиоз conditional comments и этой конструкции…

Например @-o-document version(9.2) { ла-ла-ла}

Потому как таскать ворох файлов для каждого браузера по-отдельности — это же умереть можно если что-то подправить надо будет по верстке, лучше всеже все в одном держать. По крайней мере я предпочитаю все, относящееся к какому-то элементу держать в одном файле, а потом весь css отдавать PHP скриптом, предварительно его упаковав GZIP'ом.

[denton]

Еще неплохой список хаков, пользуюсь им.

[denton]

Староват он правда…

[dfuse]

Это великая вещь. Одно из самых полных собраний… Но действительно староват…

[Isis]

Лучше обойтись без них…

[dfuse]

Я скорее из любопытства это затеял. А вообще я выше написал, где я нашел применение )))

[SamDark]

Кстати, я не так давно нашёл, что можно вот такое отчудить:
http://rmcreative.ru/blog/post/podkljuchenie-stilja-tolko-dlja-safari

т. е. можно таким образом подключать отдельными файлами большинство приведённых хаков.

[dfuse]

Я как раз старался уйти от создания отдельных файлов. Иначе проще ловить USER-AGENT в PHP и им собирать финальный файл — очень неплохая мысль кстати говоря. И GZIP'om сжать можно после агрегации.

[SamDark]

USER-AGENT — штука очень ненадёжная.

[dfuse]

Типа хаки надежнее ;) на самом деле если кто-то себе его меняет — его личные проблемы. Просто еще раз доказывает необходимость пользоваться хаками поменьше.

[SamDark]

Не, не личные, к сожалению… В том же IE всякие тулбары могут менять USER-AGENT как хотят, что и делает, например, тулбар mail.ru.

[dfuse]

Не пользуюсь :) спасибо за инфу, не знал об этом. Но наверняка можно как-то вычислить IE'шников.

[ambientos]

Верстальщики используют то, чего не используют программисты — хаки.
Думаю после прочтения статьи у желающих научиться верстать желание пропадет)

[dfuse]

Я тут чуть выше написал, как бы поступали программисты ;)

[pepelsbey]

Я бы на месте автора более отчётливо указал на то, к какой порочной практике ведут эти страшные вещи. Хоть большими красными буквами.

Такие статьи конечно нужно писать раз в полгода (всё течёт, всё меняется) и только в научно-исследовательских целях. Иначе кто-то может взять за правило править все однопиксельные нестыковки при помощи этого ужаса.

ps: и грамотность — намеряные (намерение), извратсва

[dfuse]

Написал ))) обычными темно-красными

P.S. Грамотность поправил. Спасибо.

[vithar]

От хаков волосы на руках растут!

[pepelsbey]

Скорее на заднице дыбом встают ) пардон муа

[jcd]

Стараюсь использовать как можно меньше хаков, даже если это обходится в ущерб семантике. Но знать надо — рано или поздно каждому верстальщику придется столкнуться с чужой версткой, где их такой набор использован, что волосы дыбом встанут =)

[danger4k]

IE8 глючный безумно… падает раз в час обязательно, но в плане CSS ниразу ниодного косяка на известных мне сайтах не заметил. Всё так как и должно быть, а учитывая что хаки он не обрабатывает можно сделать вывод что и правда всё стало правильнее.

[dfuse]

Он еще beta, пусть и вторая. Так что вылеты и зависания пока что простительны. В финале надеюсь такого не будет )))

[YuriChetverikov]

дай Бог! :)

[dfuse]

Хром тоже сыроват… это сугубо имхо, но у них хоть со стандартами все понятно — webkit и в африке webkit…

[YuriChetverikov]

согласен. последний сайт, который верстал на совесть (под сафари, ие5-6-7, фф2-3, хром) выглядел отлично везде, а вот в хроме чтото начало ехать. и самое интересное, так и не нашел куда копать..:(

[zeitgeist]

Работаю верстальщиком. Хаки использую в 3х случаях
1) выравнивание текста по вертикале в элементах формы select ( FF, IE6/7, подстраиваю под оперу)
2) Для ИЕ7/6: выравнивание для картинок { vertical-align: top; } — чтобы не делали лишних отступов.
2) ИЕ6: точнее для поддержки прозрачности png, и для задания min/max — ширины/высоты.

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

За статью спасибо, хотя реально не знаю кому и зачем под Оперу/ФФ нужны хаки.

[dfuse]

По первому пункту я наоборот под IE шные неизменяемые select'ы подстраиваю Opera и Firefox. Safari в плане windowed elements так же суров как и осёл… ничего настроить не дает.

[ISpy]

О ужас, сколько всяких извращений оказывается придумано :)
Хорошо что я обхожусь отдельным стилем для IE6 (через условные комментарии) и все.

Но для расширения кругозора — очень полезно, спасибо! Не знал что и для опер, сафари можно специальные хаки юзать, интересно.

[bolk]

Я недавно нашёл хороший хак для Opera 9.50:

noindex:-o-prefocus, .foropera { … }

[dfuse]

Насколько я вычитал из их таблицы стилей — они отменяют некоторые правила через другие (т. е. важен порядок хаков) — для той же Opera или Safari. Мне такое положение дел не понравилось, и у меня это только в хаках для FF и то только потому, что я не нашел вменяемого способа сделать хак только для FF2 и ниже. Ну, кроме того, который с регистром ID.

Кстати если кто-то знает — я буду благодарен, для коллекции пригодится ) Зачем надо — FF2 и FF3 по-разному рендерят checkbox, radio и select элементы.

[astim]

Прошел по этой ссылке, браузей определился как Safari 3, хотя я использую Chrome )

[dfuse]

Если Вы используете Chrome, то следует знать, что он такой же webkit-based браузер, как и Safari, соответственно большинство хаков от Safari в нем тоже будут видны, т. к. движок почти одинаковый. В инете уже ходят хаки сугубо под Chrome, но т. к. он еще Beta, я не стал их рассматривать.

[astim]

Безусловно, я знаю, что Chrome работает на WebKit и что же из этого следует? Что все браузеры на WebKit должны называться Safari? По моему, это не правильно. Более логично, на мой взгляд, было бы отображать версию WebKit, как это сделано для Gecko (все знают, что это «layout engine» Firefox).

А за статью спасибо, добавил в закладки.

[dfuse]

Может и следовало бы, но версия же отображается не JS'ом или еще чем-то, а просто показом того или иного DIV'a с помощью хака, поэтому надо было бы писать спец-хак для Chrome, а сейчас это, мягко говоря, невовремя ) все еще 10 раз может поменяться и хак помрет.

[astim]

А, тогда приношу свои извинения — изначально не разобрался в механизме определения браузера.

[neJa]

Если Вы используете хаки для Opera или Safari — смените род деятельности…
Абсолютно нормально можно резать используя только * html и *+html, все остальное, ИМХО, вообще ненужно.

[chestah]

ага, вы видно не в курсе, например что сафари текст рендерит шире, да и опера частенько глючит
такие категоричные заявления — это от отсутсвия хорошей практики мне кажется )

[dfuse]

Есть мнение, что категоричные заявления вообще не есть хорошо в нашем нелегком деле… Подобные извра-хаки нужны только для редактирования чего-то низкоуровневого (формы, рендер шрифта, для фанатов попиксельного соответствия вобщем). Я их для верстки, как таковой, не применяю. И никому не рекомендую. Хаков для IE6 это не касается — те надо принять как данность и смириться с тем, что мы делаем то, что не сделал Microsoft в свое время.

[egorinsk]

Добрый вечер! От вашего кода мой ИЕ6 завис со 100% загрузкой процессора. Это по вашему хороший хак? Как вы можете это объяснить?
Я конечно понимаю, что ИЕ мягко говоря не лучший из браузеров, но он так быстро запускался, и так мало памяти просил((

[bolk]

Поставьте себе IE7, запускается так же, памяти просит меньше.

[dfuse]

Очень странно, я когда тестировал — ничего не зависало. Возможно ему не понравился expression — они действительно жрут кучу ресурсов, поэтому применять их можно только с осторожностью.

[andrew_b]

Недавно, для меня было неприятной неожиданностью то, что Google Chrome, оказывается, чувствителен к хакам Safari. Но вот некоторые вещи всё-таки отображаются в Safari и Chrome по-разному.

[dfuse]

Конечно, у него же движок WebKit… Просто они что-то сделали немного по-своему, это же Google )))

[andrew_b]

Да, об этом я сразу и подумал, но вот как на зло позиционирование по вертикали в небольшом блоке, высотой в 20px на 1px и различается.

[dfuse]

Вы тоже любите пиксели ;)

[andrew_b]

Ну, без них никуда

[chestah]

вот еще хорошая подборочка хаков

[dfuse]

См выше. К сожалению большинство уже устарели…

[ZUGA]

Изыде!
Не дай вам боже реально пользоватся этим. Тфу-тфу-тфу.

[dfuse]

Слава богу не пользую ) кроме IEшных.

[NikitaOFF]

Я думаю что самый нормальный хак, его тут уже писали

var cssFix = function(){

var u = navigator.userAgent.toLowerCase(),

addClass = function(el,val){

if(!el.className) {

el.className = val;

} else {

var newCl = el.className;

newCl+=(" "+val);

el.className = newCl;

}

},

is = function(t){return (u.indexOf(t)!=-1)};

addClass(document.getElementsByTagName('html')[0],[

(!(/opera|webtv/i.test(u))&&/msie (\d)/.test(u))?('ie ie'+RegExp.$1)

:is('firefox/2')?'gecko ff2'

:is('firefox/3')?'gecko ff3'

:is('gecko/')?'gecko'

:is('opera/9')?'opera opera9':/opera (\d)/.test(u)?'opera opera'+RegExp.$1

:is('konqueror')?'konqueror'

:is('applewebkit/')?'webkit safari'

:is('mozilla/')?'gecko':'',

(is('x11')||is('linux'))?' linux'

:is('mac')?' mac'

:is('win')?' win':''

].join(" "));

}();

[dfuse]

Да, красиво. Только есть один момент. Как уже писали выше, user-agent'у не всегда можно доверять, и все же решение на JS это не так красиво, как чистый CSS. Последний аргумент только для фанатов «чистых решений» ;)

Но в целом — гениально и просто.

[NikitaOFF]

ну по поводу красивости я бы поспорил, чище чем .ie #id {....} придумать тяжело;)
habrahabr.ru/blogs/webdev/28759/ — подробное описание

[dfuse]

я бы еще версию виндов ловил — vista или xp, потому как в висте, например, в полях input[type=text] текст внутри поля на пиксель выше, чем в XP ;)

P.S. да, я люблю пиксели ;)

[dfuse]

Нашел наконец :) www.quirksmode.org/blog/archives/2006/07/browser_detect.html — хорошая, пусть и немного старая, статейка на тему определения браузера. В кратце — ничему нельзя доверять. Даже navigator.vendor нельзя доверять, тем более userAgent.

[dfuse]

Ну оперу то как раз можно отловить по window.opera… А вот с IE все печально…

[ElaSTiC]

Редко пользую такие хаки.
IF IE — мой выбор. Остальные браузеры достаточно умны, чтобы воспринять мои методы верстки :)
ИЕ — конечно, не вопрос, но для него можно сделать отдельный си-эс-эс через «if ie».

[burzilov]

Кому-нибудь известен хак, однозначно идентифицирующий ИЕ 5.5?

[dfuse]

@media tty {
i{content:"\";/*" "*/}}@m; @import 'styles.css'; /*";}
}/* */

=) только не надо этим ппцом пользоваться…

[burzilov]

А вот ещё момент:
на страничке в меню использую шрифт Tahoma 16px (с дополнением sans-serif в font-family). Во всех win-браузерах всё нормально, а убунтовский Konqueror (да и не только он наверняка) подставляет Sans Serif, у которого по умолчанию почему-то расстояние между символами на 1 px больше. Думал «хакнуть» его, добавить letter-spacing: -1px, но хак применился к Хрому и Сафари… Пытался на глазок найти другой «убунтовский» шрифт, наиболее похожий на Тахому, чтобы подставить его в font-family, не получилось…
Кто-нибудь сталкивался с такой проблемой?

[bo883]

Давно верстаю, и использовать хаки приходится часто но в основном это всеми любимый IE. Хочу не согласится с выше написанным, что использование в альтернативных браузерах хаков — не профессионально.
бывают моменты когда хаки приходится писать сразу для всех браузеров сразу (пару раз было такое) или вот сегодня пришлось писать хаки при верстке для IE6, IE7, Safari, вы удивитесь но и отдельно для FF3. Использование хаков я считаю не грех, а вот верстать криво и с изобилием свойств в тегах не используя ccs вот это…
И насчет Chroma- офигенный браузер, не знаю чем он кому то не угодил, по функциональности он конечно не догоняет ff но он даже не достиг версии 1.0, с версткой не было не каких проблем

[dfuse]

И не должно быть проблем — Хром же на движке webkit, так что отображает почти как Safari. Различия микроскопические (например — отсутствие anti-aliasing'а для скругленных углов при использовании -webkit-border-radius)