В этом посте я постарался собрать все известные мне хаки для css. Многие могут усомниться в их надобности для нормальных современных браузеров, потому как большинство хаков всегда применялись только для IE, но этот пост скорее для любознательных :), в верстке хаки вообще лучше не использовать. Но так или иначе, раз они есть, грех о них не знать.
В отличие от многих хаков для той же Opera, которые также будут обработаны и Safari, я немного изменил код и Opera 9.2, Opera 9.5 и Safari 3 увидят каждый свой css.
Я создал css файлик, который в теле документа будет отображать или скрывать div'ы, соответствующие браузеру, таким образом можно легко отследить, все ли ок с хаком.
.browser { position: absolute; top: 0px; right: 0px; z-index: 2; padding: 10px }
.browser div { display: none }
/* Все вменяемые браузеры */
*:lang(ru) #lightMOD { display: block } /* Хитрый селектор — все современные браузеры — не IE6 или IE7 */
html>/**/body #lightMOD { display: block } /* Вживленный комментарий — все современные браузеры — не IE6 или IE7 */
/* IE */
* html #lightIE6 { display: block } /* Лояльность разбора — будет работать в IE6 и в режиме quirks в IE7 */
*+html #lightIE7 { display: block }
body div.stopper {
width: 100%;
max-width: 1100px;
min-width: 900px;
*width: expression(document.body.clientWidth > 1100? «1100px»: document.body.clientWidth < 900? «900px»: «100%»); /* оверрайд одного свойства — в данном случае это эмуляция min- и max-width */
}
/* FireFox */
@-moz-document url-prefix() {
/* для всех FireFox, вобщем-то можно и без этого уже, просто писать стиль, благодаря обрамлению, обрабатываемому только FF */
#lightFF, x:-moz-any-link { display: block }
/* главное — ошибиться в регистре, работает только для ID */
#lightFF2[id=lightff2] { display: block }
/* Firefox 3 имеет новый селектор :default. Алярм, без обрамления IE поймет эту конструкцию */
#lightFF3, x:-moz-any-link, x:default { display: block }
}
/* Opera 9.5 */
/* not после media не обрабатывается ничем, кроме Opera 9.5 — видимо так писать либо нельзя, либо не все еще ввели поддержку такого формирования, использовать с умом, не писать внутри потенциально кривых вещей, неровен час через ~полгода еще кто-то это сможет обрабатывать */
media not all and (-webkit-min-device-pixel-ratio) {
#lightO95 { display: block }
}
/* Opera 9.2 */
/* Opera эту конструкцию не поддерживает, но Opera 9.2 по неизвестным причинам все равно обрабатывает — тоже рекомендуется быть внимательным */
media all and (scan: progressive) {
#lightO92 { display: block }
}
/* Safari */
/* Первая конструкция — против Opera 9.5, которая понимает вторую, а вторая — против Opera 9.2, которая понимает первую. Верх извратства :) Вобщем-то безопасная конструкция, т.к. 9.2 уже не будет эволюционировать и явно не сможет обработать :first-of-type, а -webkit- — проприетарное свойство и обрабатывается Opera 9.2 скорее по ошибке, что следует из отсутсвия поддержки в 9.5 */
/* Safari понимает обе, поэтому хак работает */
media all and (-webkit-min-device-pixel-ratio:0) {
body:first-of-type #lightSF3 { display: block }
/* вместо :first-of-type можно еще использовать :nth-of-type(1) — он для Safari 3.1 */
}
Код я более-менее подсветил…
Хаков для IE8 пока либо нет, либо он действительно будет хорош ;) в чем, правда, лично я сомневаюсь… MS собираются вводить свойства -ms- (одно из них -ms-box-model я уже даже воочию видел). Вобщем-то путь верный — такие «грабли» самые безопасные.
Посмотреть в действии можно на http://test.dis.dj/css/ (справа висит блок с выводом, какие хаки подействовали).
Как справедливо заметили в комментариях, неплохо бы побольше описать суть проблемы. Итак, что же такое хаки и зачем они вообще, и чем чревато их использование.
Все хаки можно разделить на несколько категорий:
1. Хаки в чистом виде — использование лояльностей в обработке CSS правил парсерами браузеров (например — *width для IE)
2. Намереные дополнения CSS, которые другой браузер не поймет чисто в принципе (особенно здесь рулит Mozilla со свойствами -moz- и офигенной штукой @-moz-document, которая позволяет не боясь ничего писать правила только под Mozilla)
3. Особенности поддержки браузерами нововведений CSS3 и иже с ними. Что касается IE6 — он и часть CSS2 не понимает (дочерний селектор E>F например)
Первая группа хаков ведет к невалидному CSS и вобщем-то безопасна к применению. Кривой код обрабатывать нужды нет, поэтому вменяемые браузеры как пропускали такие вещи, так и будут. По крайней мере, раз уж сами MS не обрабатывают большинство хаков в режиме стандартов даже 7го IE, то можно не опасаться за их (хаков) будущее.
Вторая группа — пожалуй, самый безопасный вариант. Если только разработчики вдруг не надумают отказаться от своих же нововведений.
Третья группа — самый коварный и нежелательный пункт. Конструкции CSS Media Query — это официальный CSS3, который рано или поздно будут поддерживать все браузеры. Различные хитрые селекторы тоже официально рекомендованы. Поэтому может настать момент, когда хак под один браузер будет интерпретироваться другими тоже. Яркий пример — Opera и Safari. Оба имеют частичную поддержку и отличаются в мелочах, правда благодаря которым стало возможно разделить правила для них. Иногда в этот вариант полу-хаков намеренно вводятся ошибки или неточности синтаксиса (как в случае с Opera 9.5). Это, конечно, убережет, в какой-то мере, от новых версий, но все равно не очешь хороший путь.
Личное мнение автора: хаки — зло, чем их меньше — тем лучше. Использовать надо только для IE6 когда надо реализовать то, что все умеют, а он нет (прозрачность, min-max-width и т.д.).
UPD. Хак для IE8:
UPD2. Хак для IE8 в режиме стандартов:
UPD3. Хак для любого IE, включая 8й в режиме стандартов:
P.S. Спасибо плюсующим — это мой первый пост :)
В отличие от многих хаков для той же Opera, которые также будут обработаны и Safari, я немного изменил код и Opera 9.2, Opera 9.5 и Safari 3 увидят каждый свой css.
Я создал css файлик, который в теле документа будет отображать или скрывать div'ы, соответствующие браузеру, таким образом можно легко отследить, все ли ок с хаком.
.browser { position: absolute; top: 0px; right: 0px; z-index: 2; padding: 10px }
.browser div { display: none }
/* Все вменяемые браузеры */
*:lang(ru) #lightMOD { display: block } /* Хитрый селектор — все современные браузеры — не IE6 или IE7 */
html>/**/body #lightMOD { display: block } /* Вживленный комментарий — все современные браузеры — не IE6 или IE7 */
/* IE */
* html #lightIE6 { display: block } /* Лояльность разбора — будет работать в IE6 и в режиме quirks в IE7 */
*+html #lightIE7 { display: block }
body div.stopper {
width: 100%;
max-width: 1100px;
min-width: 900px;
*width: expression(document.body.clientWidth > 1100? «1100px»: document.body.clientWidth < 900? «900px»: «100%»); /* оверрайд одного свойства — в данном случае это эмуляция min- и max-width */
}
/* FireFox */
@-moz-document url-prefix() {
/* для всех FireFox, вобщем-то можно и без этого уже, просто писать стиль, благодаря обрамлению, обрабатываемому только FF */
#lightFF, x:-moz-any-link { display: block }
/* главное — ошибиться в регистре, работает только для ID */
#lightFF2[id=lightff2] { display: block }
/* Firefox 3 имеет новый селектор :default. Алярм, без обрамления IE поймет эту конструкцию */
#lightFF3, x:-moz-any-link, x:default { display: block }
}
/* Opera 9.5 */
/* not после media не обрабатывается ничем, кроме Opera 9.5 — видимо так писать либо нельзя, либо не все еще ввели поддержку такого формирования, использовать с умом, не писать внутри потенциально кривых вещей, неровен час через ~полгода еще кто-то это сможет обрабатывать */
media not all and (-webkit-min-device-pixel-ratio) {
#lightO95 { display: block }
}
/* Opera 9.2 */
/* Opera эту конструкцию не поддерживает, но Opera 9.2 по неизвестным причинам все равно обрабатывает — тоже рекомендуется быть внимательным */
media all and (scan: progressive) {
#lightO92 { display: block }
}
/* Safari */
/* Первая конструкция — против Opera 9.5, которая понимает вторую, а вторая — против Opera 9.2, которая понимает первую. Верх извратства :) Вобщем-то безопасная конструкция, т.к. 9.2 уже не будет эволюционировать и явно не сможет обработать :first-of-type, а -webkit- — проприетарное свойство и обрабатывается Opera 9.2 скорее по ошибке, что следует из отсутсвия поддержки в 9.5 */
/* Safari понимает обе, поэтому хак работает */
media all and (-webkit-min-device-pixel-ratio:0) {
body:first-of-type #lightSF3 { display: block }
/* вместо :first-of-type можно еще использовать :nth-of-type(1) — он для Safari 3.1 */
}
Код я более-менее подсветил…
Хаков для IE8 пока либо нет, либо он действительно будет хорош ;) в чем, правда, лично я сомневаюсь… MS собираются вводить свойства -ms- (одно из них -ms-box-model я уже даже воочию видел). Вобщем-то путь верный — такие «грабли» самые безопасные.
Посмотреть в действии можно на http://test.dis.dj/css/ (справа висит блок с выводом, какие хаки подействовали).
Как справедливо заметили в комментариях, неплохо бы побольше описать суть проблемы. Итак, что же такое хаки и зачем они вообще, и чем чревато их использование.
Все хаки можно разделить на несколько категорий:
1. Хаки в чистом виде — использование лояльностей в обработке CSS правил парсерами браузеров (например — *width для IE)
2. Намереные дополнения CSS, которые другой браузер не поймет чисто в принципе (особенно здесь рулит Mozilla со свойствами -moz- и офигенной штукой @-moz-document, которая позволяет не боясь ничего писать правила только под Mozilla)
3. Особенности поддержки браузерами нововведений CSS3 и иже с ними. Что касается IE6 — он и часть CSS2 не понимает (дочерний селектор E>F например)
Первая группа хаков ведет к невалидному CSS и вобщем-то безопасна к применению. Кривой код обрабатывать нужды нет, поэтому вменяемые браузеры как пропускали такие вещи, так и будут. По крайней мере, раз уж сами MS не обрабатывают большинство хаков в режиме стандартов даже 7го IE, то можно не опасаться за их (хаков) будущее.
Вторая группа — пожалуй, самый безопасный вариант. Если только разработчики вдруг не надумают отказаться от своих же нововведений.
Третья группа — самый коварный и нежелательный пункт. Конструкции CSS Media Query — это официальный CSS3, который рано или поздно будут поддерживать все браузеры. Различные хитрые селекторы тоже официально рекомендованы. Поэтому может настать момент, когда хак под один браузер будет интерпретироваться другими тоже. Яркий пример — Opera и Safari. Оба имеют частичную поддержку и отличаются в мелочах, правда благодаря которым стало возможно разделить правила для них. Иногда в этот вариант полу-хаков намеренно вводятся ошибки или неточности синтаксиса (как в случае с Opera 9.5). Это, конечно, убережет, в какой-то мере, от новых версий, но все равно не очешь хороший путь.
Личное мнение автора: хаки — зло, чем их меньше — тем лучше. Использовать надо только для IE6 когда надо реализовать то, что все умеют, а он нет (прозрачность, min-max-width и т.д.).
UPD. Хак для IE8:
/*/ #nav a {position:relative;} /**/UPD2. Хак для IE8 в режиме стандартов:
.test { color /*\**/: blue\9 }UPD3. Хак для любого IE, включая 8й в режиме стандартов:
.test { color: blue\9 }P.S. Спасибо плюсующим — это мой первый пост :)
