Иоффе Д.А : другие произведения.

Web - программирование

Самиздат: [Регистрация] [Найти] [Рейтинги] [Обсуждения] [Новинки] [Обзоры] [Помощь|Техвопросы]
Ссылки:
Школа кожевенного мастерства: сумки, ремни своими руками
 Ваша оценка:
  • Аннотация:
    Персональные 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т список

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