CSS хаки

При вёрстке веб-страницы html-кодер иногда сталкивается с ситуацией когда браузеры могут интерпретировать команды CSS по-разному. Особенно часто это относится к таким свойствам CSS как padding и margin. Например вы устанавливаете отступ одного блока от другого в 15px. В одном браузере это выглядит именно так как вы этого и ожидали, в другом же расстояние явно больше или меньше ожидаемого. Чаще всего проблема решаема и, так сказать, правильными средствами (перестроение блоков, переназначение свойств ...), но иногда бывает, что не хватает знаний или просто откровенно лень мучаться. Тут нам на помощь и придут CSS-хаки.

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

Примеры наиболее часто применяемых CSS-хаков:

для браузера Opera:

@media all and (min-width: 0) { .block { background: #ccc; }} /* код валидный */
html:first-child .block { background: #ccc; } /* код валидный */

для браузера FireFox:

html:root .block { background: #ccc; } /* код валидный */
.block, x:-moz-any-link { background: #ccc; } /* хак понимает Safari, код валидный */

для браузера Internet Explorer v6.0 и ниже:

.block { _background: #ccc; } /* Несмотря на то, что CSS-валидатор принимает хак с подчеркиванием за ошибку, спецификация CSS 2.1 позволяет использовать данную конструкцию */
* html .block { background: #ccc; } /* код валидный */

для браузера Internet Explorer v7.0:

*:first-child+html .block { background: #ccc; } /* код валидный */
*+html .block { background: #ccc; } /* код валидный */

для IE7 и современных браузеров:

html>body .block { background: #ccc; }

для современных браузеров (но не IE7):

html>/**/body .block { background: #ccc; }

для браузера Safari:

html[xmlns*=""] body:last-child .block { background: #ccc; }