Иоффе Д.А
Web - программирование

Самиздат: [Регистрация] [Найти] [Рейтинги] [Обсуждения] [Новинки] [Обзоры] [Помощь|Техвопросы]
Links
Кожевенное мастерство: сумки, ремни своими руками
 Ваша оценка:
  • Аннотация:
    Персональные CSS-хаки для Opera, FireFox, Internet Explorer Я не сторонник условных комментариев в CSS (можно ругать меня за это), взамен предпочитаю использовать различные CSS-хаки, дабы при верстке решить проблему кроссбраузерности по ходу написания кода, без лишний "телодвижений". Да, это неправильно с точки зрения стандартов и некрасиво, но таким способом для меня гораздо проще верстать.

 Персональные CSS-хаки для Opera, FireFox, Internet Explorer
 Я не сторонник условных комментариев в CSS (можно ругать меня за это), взамен предпочитаю использовать различные CSS-хаки, дабы при верстке решить проблему кроссбраузерности по ходу написания кода, без лишний "телодвижений". Да, это неправильно с точки зрения стандартов и некрасиво, но таким способом для меня гораздо проще верстать.
 
 CSS-хаки для браузера Opera:
 Все версии оперы...
 @media all and (min-width: 0px) {
 #element { color: red; }
 }
 Opera 6
 @media all and (min-width: 1px) { {} #element { color: red; } }
 Opera 7, 8
 @media all and (min-width: 1px) { #element { color: red; } }
 Opera 9
 @media all and (width) { #element { color: red; } }
 Opera 9
 @media all and (min-width:0px) {
 head~body #element { color: red; }
 }
 
 
 html:first-child .style {
 background: #FF0;
 }
 
 /* код валидный */
 
 CSS-хаки для браузера FireFox:
 html:root .style {
 background: #FA0;
 }
 
 /* хак понимает Safari */
 
 .style, x:-moz-any-link {
 background: #FA0;
 }
 Gecko
 html:not([lang*=""]) #element { color: red; }
 Mozilla Firefox
 html:not([lang]) #element { color: red; }
 Firefox / Firebird / Phoenix, Netscape 6+
 html:not[lang*=""] #element { color: red; }
 Gecko 1.8+ - Firefox 1.5, Camino, Seamonkey, Galeon, Epiphany и т.д.
 html:not([lang*=""]):not(:only-child) #element { color: red; }
 
 /* Эти правила понимает также и Safari */
 
 CSS-хаки для браузера Internet Explorer 6.0 и ниже:
 Для фильтрации CSS-стилей по версия IE используются так называемые Conditional Comments.
 пример фильтрации CSS-свойств по версиям IE:
 #hack {
 color: green; /* IE 5.01 */
 color/**/:blue; /* IE 5.5 */
 c\olor: red; /* IE 6 не работает перед буквами a, b, c, d, e, f */
 }
 IE min-width & max-width
 element {
 min-width: 780px;
 max-width: 1260px;
 width: expression(document.body.clientWidth < 780? "780px" : document.body.clientWidth > 1260? "1260px" : "auto");
 }
 PNG & IE
 Для IE6 подключается htc-файл iepngfix.htc, для правильной работы фоновых изображений формата PNG для всех элментов, в файле cssf-ie6.css.
 
 * { behavior: url("css/iepngfix.htc"); }
 
 Кто считает каждый байт, есть пример использования фильтра для IE:
 
 element {
 background: none;
 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/png-image.png', sizingMethod='scale');
 }
 
 .style {
 _background: #03F;
 }
 
 /* код валидный */
 
 Несмотря на то, что CSS-валидатор принимает хак с подчеркиванием за ошибку, спецификация CSS 2.1 позволяет использовать данную конструкцию.
 
 * html .style {
 background: #03F;
 }
 
 /* код валидный */
 
 CSS-хаки для браузера Internet Explorer 7.0:
 *:first-child+html .style {
 background: #F00;
 }
 
 /* код валидный */
 
 *+html .style {
 background: #F00;
 }
 
 /* код валидный */
 
 html>body .style {
 *background: #F00;
 }
 
 Safari
 Safari 3
 body:first-of-type #element { color: red; }
 Код для Safari/Webkit/KHTML
 body:last-child:not(:root:root) ... { ... }
 
 /*(в том числе Google Chrome)*/
 
 Konqueror
 html:not(:nth-child(1)) #element { color: red; }
 
 Код для WebKit */ @media all and (min-width:0px) { body:last-child ... { ... } }
 Ваша оценка:
Связаться с программистом сайта.

Новые книги авторов СИ, вышедшие из печати:
О.Болдырева "Крадуш. Чужие души" М.Николаев "Вторжение на Землю"

Как попасть в этoт список

Кожевенное мастерство | Сайт "Художники" | Доска об'явлений "Книги"