Комментарии 77
Не всеми из этих хаков приходилось пользоваться, а из конишнл комеммент, использую на последних проектах только <!--[if lt IE 8]>Контент<![endif]-->, а дальше уже css хаками выбираю, удобно просто все стили для IE в одном месте. Для 8-ки писать хаков пока не приходилось.
Любопытно, что производители альтернативных броузеров (особенно Opera) очень любят кидать банановыми шкурками в IE по поводу несоблюдения стандартов, при этом сами не будучи безгрешными, до сих пор не смогли повторить такое изящное и абсолютно валидное решение как conditional comments.
большинство хаков знал и юзал...) понравились грязные хаки)))) некоторые увидел впервые! :) автору респект
Эх, не люблю я хаки…
Надеюсь придет время, когда я не буду ими пользоваться. Спасибо за полезную подборку. В закладки.
Надеюсь придет время, когда я не буду ими пользоваться. Спасибо за полезную подборку. В закладки.
Учитывая то, насколько хорошо (по сравнению с ie6 и ie7) написан ie8, то до этого времени действительно недалеко
Я каждый понедельник распечатываю этот график и вешаю на стенку, честно )))
ИЕ8 хорош, спору нет, но… всё же он осел.
В любом случае осталось дождаться кончины ИЕ6, ИЕ7 должен по идее обновится до новой версии (на сколько я знаю ИЕ8 идет как горячее обновление), и тогда будет мне счастье!
ИЕ8 хорош, спору нет, но… всё же он осел.
В любом случае осталось дождаться кончины ИЕ6, ИЕ7 должен по идее обновится до новой версии (на сколько я знаю ИЕ8 идет как горячее обновление), и тогда будет мне счастье!
IE6 тоже до 8 обновляется сам.
По иронии судьбы у студии, в которой я работаю, обычно заказчики сидят на древнем оборудовании с древним ПО (не потому что денег нет, а потому что бюрократия процветает), и автообновление у них не предусмотрено, и админы у них жестокие — раз работает, значит пусть работает, неважно сколько этому лет. Уверен, что таких организаций много, и благодаря им вышепоказанный график не будет иметь лавинообразной линии ИЕ6.
Прекрасно понимаю этих админов. Сам такой же :)))
Кое-где до сих пор стоит Win2K + IE5.0. В инет они, правда, и не ходят совсем, а IE для интранет-справочников всяких используется.
Автообновление, само собой, работает, но обновления IE и прочих MediaPlayer-ов :) я просто не аппрувлю в WSUS. ИМХО, незачем утяжелять систему на слабых машинах.
Кое-где до сих пор стоит Win2K + IE5.0. В инет они, правда, и не ходят совсем, а IE для интранет-справочников всяких используется.
Автообновление, само собой, работает, но обновления IE и прочих MediaPlayer-ов :) я просто не аппрувлю в WSUS. ИМХО, незачем утяжелять систему на слабых машинах.
Доля ie6, конечно упала, но вот что-то мне подсказывает что последние 10-15% дадутся очень тяжело и еще долго будут вынуждать пользоваться и костылями и хаками.
подскажите, на каком ресурсе строится такой график?
тоже хочу каждую неделю такой график на стену вешать
тоже хочу каждую неделю такой график на стену вешать
Скажите, из каких соображений решается, считать ли хак «грязным»?
добавьте к star-хакам, сработает только в ie6
.class{
-background:red;
}
.class{
-background:red;
}
было бы сказкой, если бы все браузеры понимали бы Conditional comments
НЛО прилетело и опубликовало эту надпись здесь
* html и *+html валидныеЛичное мое мнение — писать многобуквенные конструкции только для того, чтобы валидатор позеленел от счастья нужно только для очень привередливого клиента, который будет настолько же счастлив при виде зеленого цвета.
По сути все эти комментарии и прочие способы сделать документ валидным — просто обман валидатора, от которого мы эти хаки прячем. Документ не становится валиднее от этого.
Когда я верстаю для себя или адекватных заказчиков, то пользуюсь простыми хаками, что упрощает мне жизнь.
По сути все эти комментарии и прочие способы сделать документ валидным — просто обман валидатора, от которого мы эти хаки прячем. Документ не становится валиднее от этого.
Когда я верстаю для себя или адекватных заказчиков, то пользуюсь простыми хаками, что упрощает мне жизнь.
НЛО прилетело и опубликовало эту надпись здесь
Пользуюсь в основном 2 хаками, -property и *property, хотя один раз надо было хак написать только под Оперу, вот тогда пришлось извращаться :)
В статье был обойдён хак
#id {
//width:for-ie6,7
}
#id {
//width:for-ie6,7
}
piumosso, только по-моему этот хак выглядит как:
// для ие7 и ниже
\\ для ие6 и ниже
и как-то еще можно было писать только для ие5, но я забыл за ненадобностью
// для ие7 и ниже
\\ для ие6 и ниже
и как-то еще можно было писать только для ие5, но я забыл за ненадобностью
НЛО прилетело и опубликовало эту надпись здесь
и что, реально работает только для IE8?
Протестировал — работает только в IE7, в IE8 (в режиме
IE=8) не работает
Вот из моей подборки, хаки для 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;
}
/* 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;
}
«Нюанс». Пишется именно так.
я как-то нашёл
-, class {}
работает в IE7, IE8
-, class {}
работает в IE7, IE8
Жестоко. В последнее время присваиваю body класс с именем движка, броузера и его версии, а также ОС.
Например, для Firefox 3 «gecko firefox3 win», и уже можно специфицировать стили под конкретной движок/браузер/ОС.
Например, для Firefox 3 «gecko firefox3 win», и уже можно специфицировать стили под конкретной движок/браузер/ОС.
Интересно, а на нашей памяти будет момент, когда мы сможем обходиться без «них»?
P.S. Спасибо за статью.
P.S. Спасибо за статью.
Минус грязных хаков в их непрозрачности.
Представьте себя человеком, которого попросили «кое-что поправить» в существующем сайте. Вам приходится затронуть стили, и тут вы видите вот такое:
В своих работах я стараюсь ограничиваться условными комментариями для IE, а для браузеров, основанных на webkit, использую:
Все файлы с фиксами называю соответственно
Пока что этого всегда хватало.
Представьте себя человеком, которого попросили «кое-что поправить» в существующем сайте. Вам приходится затронуть стили, и тут вы видите вот такое:
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 и т.д.Пока что этого всегда хватало.
Ради одного/двух хаков необязательно выносить код в другой файл. Если же хаков набирается много, стоит подумать, а привильно ли верстаешь.
Значит на Хабре тоже неправильно верстают:)
Количество хаков зачастую зависит не от «правильности» вёрстки, а от сложности макета и от того, как бережно верстальщик относится к различным мелочам.
Количество хаков зачастую зависит не от «правильности» вёрстки, а от сложности макета и от того, как бережно верстальщик относится к различным мелочам.
На хабре разве сложный макет и он позиционируется как идеально свёрстанный?
Хаки применяют тогда, когда не знают как сверстать то же без хаков, и если их много, то стоит поискать другие методы вёрстки. При использовании большого количества хаков, в будущем на новых браузерах сайт может «поплыть». В идеале нужно вообще от них отказаться.
Хаки применяют тогда, когда не знают как сверстать то же без хаков, и если их много, то стоит поискать другие методы вёрстки. При использовании большого количества хаков, в будущем на новых браузерах сайт может «поплыть». В идеале нужно вообще от них отказаться.
НЛО прилетело и опубликовало эту надпись здесь
Это уже миллион раз повторялось. Есть низкоуровневые элементы (формы например) и попиксельно точная верстка. Ясное дело, что пихать их без разбора в каждый проект — великое зло. Особняком стоят хаки для IE — тут уж ничего не поделать, раз его при рождении нужным вещам не обучили — будем обучать в процессе. Хаками. AlphaImageLoader — своего рода тоже хак, т.к. работает только в IE. И в спецификации не прописан.
когда предлагают что-то поправить в таком тексте, то эти хаки не вызовут непонимания у людей, разбирающихся в верстке
НЛО прилетело и опубликовало эту надпись здесь
Я гляжу, что для FF2 таки ничего индивидуального так и нет…
НЛО прилетело и опубликовало эту надпись здесь
Мне кажется, умелое применение CSS вместе с правильной разметкой документа упраздняет любые хаки.
Это не совсем относится к хакам, но все же… В нормальных браузерах существует возможность переключить через 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'а.
• 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'а.
НЛО прилетело и опубликовало эту надпись здесь
Само собой, что можно и в Quirks провалиться, но вот, к примеру, отличный скрипт аналог lightbox под названием Shadowbox (http://shadowbox-js.com) работает отменно во всех браузерах и без доктайпа, а в IE требует его наличия, иначе начинаются ошибки JS (я сам не вполне понимаю, как это связано, но реально во всех IE с 6 по 8).
Вот, отличная штука
Ява скриптик:
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;}
и т. д.
Ява скриптик:
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;}
и т. д.
прошу прощения за некропост, но никто не хочет апгрейднут топик под современные реалии в виде Хрома15 (хотя, учитывая скорость его релизов — пока статья выйдет — уже под 18 можно будет писать), фф7 (аналогичная ситуация), оперу12 (которая тоже скоро может выйти) и ie9 (ну, может к тому момету и 10 выйдет)? :)
Проблема в том, что там уже нет хаков — все возможности для этого закрывают.
В IE 10 закроют conditional comments
Подход уже меняется — есть например задача построить структуру из 2 колонок — на первой
Из актуальный проблем я бы сказал такие:
баги в опере без логики появления
В IE 10 закроют conditional comments
Подход уже меняется — есть например задача построить структуру из 2 колонок — на первой
float:left с шириной, на второй overflow:hidden и margin-left равный ширине первой. Если сделать это в опере по диву на каждую колонку — вёрстка развалится. Теперь вместо хаков ищется решение, которое решит проблему и будет работать во всех браузерах.Из актуальный проблем я бы сказал такие:
display:inline-block между блоками с пробелами в хроме дают однопиксельный отступtd+td в хроме дают шокирующие результаты в рамках одной таблицыбаги в опере без логики появления
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Расширенный сборник CSS-хаков