CSS хаки

Для создания универсальной верстки, одинаково отображающейся во всех браузерах, порой приходится играть в грязные игры с программным кодом. Одной из этих игр является использование так называемых css хаков (или фильтров). Css хак — это стилевое правило, которое работает в одном браузере и не работает в другом, чем позволяет создавать разное отображение вашей информации в разных браузерах, или наоборот сглаживать погрешности отображения в разных браузерах. Зачем вам это — ваше дело, другое дело, как это сделать?

Некоторые хаки всем известны и часто применяются, но вот в недавней борьбе с одним сайтом, пришлось покопаться по инету и я нашел интересную статью (http://studioad.ru/blog/2009-09-30-92).

В итоге у нас: 13 способов идентификации различных версий и групп браузеров Internet Explorer, два способа написать стиль только для Opera (9 и 10 версии), один способ написать css только для Google Chrome, способ написать стиль только для последней версии Safari, и способ написать стиль только для Mozilla FireFox и ещё несколько способов получить различные группы выше перечисленных браузеров.


В качестве бонуса внизу таблицы содержится графа, которая определит ваш браузер основываясь только на css свойствах . Вот её исходный код:

.bd1,.bd2,.bd3,.bd4,.bd5,.bd6,.bd7,.bd0 {display:none;text-align:center;font-weight:bold;}
@media screen and (-webkit-min-device-pixel-ratio:0){.bd0 {display:block}.bd0:not(:root:root){display:none}} /*хромой*/
.bd2:not(:root:root) {display:block} /* сафари */
*|html[xmlns*=""] .bd1 {display:block} /* опера */
@-moz-document url-prefix(){.bd3 {display:block}} /* лиса */
html[xmlns*=""] .bd4 {display:block\9;]display:default} /* IE8 */
*+html .bd5 {display:block} /* IE7 */
* html .bd6 {display:block;\\display:default} /* IE6 */
.bd7 {\\display:block}

<div class="bd0 div">Ваш браузер - Google Chrome</div>
<div class="bd1 div">Ваш браузер - Opera</div>
<div class="bd2 div">Ваш браузер - Safari</div>
<div class="bd3 div">Ваш браузер - FireFox</div>
<div class="bd4 div">Ваш браузер - IE8</div>
<div class="bd5 div">Ваш браузер - IE7</div>
<div class="bd6 div">Ваш браузер - IE6</div>
<div class="bd7 div">Ваш браузер - IE5.5</div>


			
			

				18 октября, 2010 в
				Design, Development				| теги: CSS, hacks, HTML