Расширенный сборник CSS-хаков

[kostian02]

Не всеми из этих хаков приходилось пользоваться, а из конишнл комеммент, использую на последних проектах только <!--[if lt IE 8]>Контент<![endif]-->, а дальше уже css хаками выбираю, удобно просто все стили для IE в одном месте. Для 8-ки писать хаков пока не приходилось.

[aps]

Любопытно, что производители альтернативных броузеров (особенно Opera) очень любят кидать банановыми шкурками в IE по поводу несоблюдения стандартов, при этом сами не будучи безгрешными, до сих пор не смогли повторить такое изящное и абсолютно валидное решение как conditional comments.

[sashabe]

Потому что сделать так — значит официально признать, что твой браузер не соблюдает стандарты.

[aps]

Да. Проще в суд подать на MS, чем собственные ляпы признать.

[mester]

<link type="opera/css" ...> не работает в Opera 9.5
В 9.2 работает.

А подобные хаки опера исправляет относительно быстро

[djecka]

большинство хаков знал и юзал...) понравились грязные хаки)))) некоторые увидел впервые! :) автору респект

[TecHMeaT]

Эх, не люблю я хаки…
Надеюсь придет время, когда я не буду ими пользоваться. Спасибо за полезную подборку. В закладки.

[mester]

Учитывая то, насколько хорошо (по сравнению с ie6 и ie7) написан ie8, то до этого времени действительно недалеко

[mester]

[mester]

[TecHMeaT]

Я каждый понедельник распечатываю этот график и вешаю на стенку, честно )))
ИЕ8 хорош, спору нет, но… всё же он осел.
В любом случае осталось дождаться кончины ИЕ6, ИЕ7 должен по идее обновится до новой версии (на сколько я знаю ИЕ8 идет как горячее обновление), и тогда будет мне счастье!

[Serzhenko]

IE6 тоже до 8 обновляется сам.

[TecHMeaT]

По иронии судьбы у студии, в которой я работаю, обычно заказчики сидят на древнем оборудовании с древним ПО (не потому что денег нет, а потому что бюрократия процветает), и автообновление у них не предусмотрено, и админы у них жестокие — раз работает, значит пусть работает, неважно сколько этому лет. Уверен, что таких организаций много, и благодаря им вышепоказанный график не будет иметь лавинообразной линии ИЕ6.

[Deaddy]

Прекрасно понимаю этих админов. Сам такой же :)))
Кое-где до сих пор стоит Win2K + IE5.0. В инет они, правда, и не ходят совсем, а IE для интранет-справочников всяких используется.
Автообновление, само собой, работает, но обновления IE и прочих MediaPlayer-ов :) я просто не аппрувлю в WSUS. ИМХО, незачем утяжелять систему на слабых машинах.

[dfilatov]

Доля ie6, конечно упала, но вот что-то мне подсказывает что последние 10-15% дадутся очень тяжело и еще долго будут вынуждать пользоваться и костылями и хаками.

[uses]

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

[uses]

спасибо

[mester]

Точнее http://www.liveinternet.ru/stat/ru/browsers.html?period=month

[Sannis]

Скажите, из каких соображений решается, считать ли хак «грязным»?

[mester]

В принципе да.
Грязный хак всегда не валиден и не использует css3-свойства, а основан обычно на багах парсинга css-кода браузером.

[ecl]

добавьте к star-хакам, сработает только в ie6
.class{
-background:red;
}

[mobilz]

было бы сказкой, если бы все браузеры понимали бы Conditional comments

[RomanL]

было бы сказкой если бы не было необходимости применять Conditional comments!

[mester]

* html и *+html валидные

[TecHMeaT]

Личное мое мнение — писать многобуквенные конструкции только для того, чтобы валидатор позеленел от счастья нужно только для очень привередливого клиента, который будет настолько же счастлив при виде зеленого цвета.
По сути все эти комментарии и прочие способы сделать документ валидным — просто обман валидатора, от которого мы эти хаки прячем. Документ не становится валиднее от этого.
Когда я верстаю для себя или адекватных заказчиков, то пользуюсь простыми хаками, что упрощает мне жизнь.

[egorinsk]

Пользуюсь в основном 2 хаками, -property и *property, хотя один раз надо было хак написать только под Оперу, вот тогда пришлось извращаться :)

[piumosso]

В статье был обойдён хак
#id {
//width:for-ie6,7
}

[ibnteo]

И самый удобный из вышеперечисленных (имхо конечно).

[Nullius]

piumosso, только по-моему этот хак выглядит как:
// для ие7 и ниже
\\ для ие6 и ниже

и как-то еще можно было писать только для ие5, но я забыл за ненадобностью

[ibnteo]

И не надо для IE5, тут бы IE6 похоронить, надеюсь не больше двух лет он протянет.

[piumosso]

и что, реально работает только для IE8?

[Wave]

У меня однажды не выпадало в восьмом ишаке меню, генерируемое программно (на ASP.NET, а потому жуткими таблицами и js). Во всех остальных ишаках и в браузерах выпадало. Долго бился, после чего плюнул и сделал
/>
Работает.

[Wave]

Проглотил коммент.
Сделал
meta http-equiv=«X-UA-Compatible» content=«IE=EmulateIE7» /

[mester]

Протестировал — работает только в IE7, в IE8 (в режиме IE=8) не работает

[Theo_from_Sed]

Вот из моей подборки, хаки для IE. Восьмой тогда не вышел ещё. Пользовался ими давно, не гарантирую что 100% будет работать именно так. Проверяйте при необходимости.

/* 5 5.5 7 */
#visual-portal-wrapper {
border /**/: 1px solid red;
}

/* 5, 7 */
* > #visual-portal-wrapper {
border: 1px solid blue;
}

/* 5, 5.5, 6 */
* html #visual-portal-wrapper {
border: 1px solid red;
}

/* 5.5 6 7 */
#visual-portal-wrapper {
border/* */: 1px solid red;
}

/* 6, 7 */
#visual-portal-wrapper {
b\order: 1px solid blue;
}

/* 5 */
* html > #visual-portal-wrapper {
border: 1px solid red;
}

/* 6 */
* html #visual-portal-wrapper {
b\order: 1px solid red;
}

[dfuse]

Это же как надо было делать движок, чтобы в одних версиях одно и то же работало, в других — нет, а в третьих — как-то еще. Ужас. Всегда поражался политике этому.

[dfuse]

Бррр… политике надо вычеркнуть ) пассаж про политику MS я решил не писать, но стер не весь )))

[bolk]

«Нюанс». Пишется именно так.

[bolk]

я как-то нашёл
-, class {}
работает в IE7, IE8

[ipod]

Жестоко. В последнее время присваиваю body класс с именем движка, броузера и его версии, а также ОС.
Например, для Firefox 3 «gecko firefox3 win», и уже можно специфицировать стили под конкретной движок/браузер/ОС.

[Kirk]

Идея очень понравилась. Да такой способ по-моему лучше всяких хаков будет.

[Wave]

Спасибо за идею. Неплохо коррелирует с css-framework'ами типа 960.gs

[EzS]

Интересно, а на нашей памяти будет момент, когда мы сможем обходиться без «них»?
P.S. Спасибо за статью.

[kachkaev]

Минус грязных хаков в их непрозрачности.
Представьте себя человеком, которого попросили «кое-что поправить» в существующем сайте. Вам приходится затронуть стили, и тут вы видите вот такое: html/**/body .class x:-moz-any-link,.class x:-moz-any-link,x:default,.class html:not([lang*=""]):not(:only-child), распиханное по всем углам файлов стилей. А ведь нервные клетки не восстанавливаются!

В своих работах я стараюсь ограничиваться условными комментариями для IE, а для браузеров, основанных на webkit, использую:
<link type="text/css" media="screen and (-webkit-min-device-pixel-ratio:0)" href="/css/fix_safari.css"/>

Все файлы с фиксами называю соответственно fix_ie.css, fix_ie6.css, fix_safari.css и т.д.

Пока что этого всегда хватало.

[ibnteo]

Ради одного/двух хаков необязательно выносить код в другой файл. Если же хаков набирается много, стоит подумать, а привильно ли верстаешь.

[kachkaev]

Значит на Хабре тоже неправильно верстают:)
Количество хаков зачастую зависит не от «правильности» вёрстки, а от сложности макета и от того, как бережно верстальщик относится к различным мелочам.

[ibnteo]

На хабре разве сложный макет и он позиционируется как идеально свёрстанный?
Хаки применяют тогда, когда не знают как сверстать то же без хаков, и если их много, то стоит поискать другие методы вёрстки. При использовании большого количества хаков, в будущем на новых браузерах сайт может «поплыть». В идеале нужно вообще от них отказаться.

[Zibx]

Обёртка в тейбл с высотой в 100% спасёт отца русской демократии.

[dfuse]

Это уже миллион раз повторялось. Есть низкоуровневые элементы (формы например) и попиксельно точная верстка. Ясное дело, что пихать их без разбора в каждый проект — великое зло. Особняком стоят хаки для IE — тут уж ничего не поделать, раз его при рождении нужным вещам не обучили — будем обучать в процессе. Хаками. AlphaImageLoader — своего рода тоже хак, т.к. работает только в IE. И в спецификации не прописан.

[piumosso]

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

[dfuse]

Я гляжу, что для FF2 таки ничего индивидуального так и нет…

[mester]

А в какой ситуации такой хак нужен?

x:-moz-any-link,html:root .class{background:red; /* красный фон для FF2 */}
x:-moz-any-link,x:default,html:root .class{background:green; /* будет зеленый фон для FF3 */}


[dfuse]

Это мне известно. Интересен именно хак для FF2 и не для FF3. Пример — я не хочу обнулять для FF3 селекторы для полей SELECT — они рендерятся по-разному. Ну это так, для души скорее.

[mester]

Он для старых версий браузеров

[mester]

Из актуального только IE6 и IE7

[Troppus]

Мне кажется, умелое применение CSS вместе с правильной разметкой документа упраздняет любые хаки.

[dfuse]

Это не совсем относится к хакам, но все же… В нормальных браузерах существует возможность переключить через CSS режим box-model'а на нужное значение:
• box-sizing — опера
• -webkit-box-sizing — само собой Safari
• moz-box-sizing — угадайте ;)
• -ms-box-sizing — даже MS анонсировали такое свойство для IE8, по аналогии с -ms-filter, который будет как замена обычному невалидному filter

Так вот. Нет ли какого-либо хака, чтобы заставить IE6,7 при включенном режиме стандартов переключиться на режим border-box? Предвидя возможные ответы, что border-box нестандартен, скажу, что стандартная модель многим кажется не очень удобной (автор quirksmode, например). Поэтому было бы замечательно получить способ кроссбраузерно верстать в более логичной модели. Дело в том, что все подобные хаки, которые я видел, приводили к полному падению обратно в Quirks со всеми вытекающими последствиями.

PS. За стандартную модель взята именно padding-box, видимо, чтобы корректно считать картинки, у которых итоговая ширина всегда будет состоять именно из ширины и прибавленного border'а.

[dfuse]

Само собой, что можно и в Quirks провалиться, но вот, к примеру, отличный скрипт аналог lightbox под названием Shadowbox (http://shadowbox-js.com) работает отменно во всех браузерах и без доктайпа, а в IE требует его наличия, иначе начинаются ошибки JS (я сам не вполне понимаю, как это связано, но реально во всех IE с 6 по 8).

[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(" "));

}();

в css просто пишите, к примеру:
.ie7 #root {color: #FFF;}

и т. д.

[mester]

Использование navigator.userAgent можно обмануть (к примеру в сафари в меню Разработать — Пользовательский агент);
и + это Javascript, а значит пользователь увидит разницу в странице до загрузки скрипта и после.

[NikitaOFF]

Ну пользователь и css отключить может))))

[mva]

прошу прощения за некропост, но никто не хочет апгрейднут топик под современные реалии в виде Хрома15 (хотя, учитывая скорость его релизов — пока статья выйдет — уже под 18 можно будет писать), фф7 (аналогичная ситуация), оперу12 (которая тоже скоро может выйти) и ie9 (ну, может к тому момету и 10 выйдет)? :)

[mester]

Проблема в том, что там уже нет хаков — все возможности для этого закрывают.
В IE 10 закроют conditional comments

Подход уже меняется — есть например задача построить структуру из 2 колонок — на первой float:left с шириной, на второй overflow:hidden и margin-left равный ширине первой. Если сделать это в опере по диву на каждую колонку — вёрстка развалится. Теперь вместо хаков ищется решение, которое решит проблему и будет работать во всех браузерах.

Из актуальный проблем я бы сказал такие:
display:inline-block между блоками с пробелами в хроме дают однопиксельный отступ
td+td в хроме дают шокирующие результаты в рамках одной таблицы
баги в опере без логики появления