Полезные CSS хаки

12.02.08 css

Box Model Hack

padding: 4em; border: 1em solid red; width: 30em; width/**/:/**/ 20em;

Условные комментарии (Conditional Comments)

Думаю всем знакомы, на всякий для заметки.

Для всех версий IE

<!--[if IE]>    Some Css Code<![endif]-->

Для 7-й версии

<!--[if IE 7]>    Some Css Code<![endif]-->

Для 5.01, 5.5 и 6.0

<!--[if lte IE 6]>    Some Css Code<![endif]-->

Условия:

• IE (Все версии IE)
• lt IE version (Ниже указанной версии)
• lte IE version(ниже и равно указанной версии)
• IE version (только для этой версии)
• gte IE version (выше или равной указанной версии)
• gt IE version (выше указанной версии)

Min-width и Max-width

Минимальная ширина

 #wrapper{min-width: 750px;width:expression(document.body.clientWidth < 750? "750px": "auto" );} 

Минимальная и максимальная одновременно

#wrapper{min-width: 750px;max-width: 1220px;width:expression(document.body.clientWidth < 750? "750px" : document.body.clientWidth > 1220? "1220px" : "auto");}

Минимальная высота от Dustin Diaz

#id{ min-height: 100px; height:auto !important; height:100px; } 

Фильтрация CSS по браузеру

• IE 6 и ниже

  * html {}

• IE 7 и ниже

  *:first-child+html {} * html {}

• Только IE 7

  *:first-child+html {}

• Только IE 7 и все современные браузеры

   html>body {}

• Все современные браузеры, кроме IE 7

   html>/**/body {}

• Opera 9 и ниже

  html:first-child {} 

• MacIE

  /*\*//*/selector{property:value;}/**/

• Mozilla FireFox

  .class, noindex:-moz-any-link { }

  
  или
  

  
  @-moz-document url-prefix()
  {
          body {  }
  }
  

• ie6 win only

  
  /*\*/
  * html {}
  /**/

• IE only

  .class, v\:* { color: red }

Для FF и IE only решения найдены у Евгения Степанищева, за что огромное спасибо!

Псевдокласс :hover для любых элементов

Решается добавлением .htc, либо этого либо этого.

Прозрачность PNG

Помогает этот скрипт.

Вертикальное выравнивание в блоке

http://stylizedweb.com/2008/02/01/vertical-align-div/

Autoclear

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Reset CSS

http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/

Scrolling Render IE

html {
background : url(null) fixed no-repeat;
}

PRE Tag

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Элемент abbr

html\:abbr, abbr {
  cursor: help;
  font-style: italic;
}

Удаление отступов в button для IE

button {
  overflow:visible;
}

Комментарии

1. Жаль, что не представлено раздела по вертикальному выравниванию. Недавно нашел статью в сети – там все очень детально и широко, но СЛИШКОМ широко! http://www.student.oulu.fi/~laurirai/www/css/middle/

   
   — Алексей    Mar 9, 12:24 PM    #

2. По вертикальному выравниванию можно почитать здесь, пример с пустым спаном 100% рабочий.

   
   — higher    Mar 9, 03:34 PM    #

3. Спасибо за краткую инструкцию и ссылки по прозрачному PNG. Добавь please к статье ссылку http://www.satzansatz.de/cssd/tmp/alphatransparency.html
   Оказалась полезной когда “вдруг” перестали ссылки в меню работать.

   
   — Николай    Mar 15, 12:43 PM    #

4. Спасибо, помогли разобраться. Долго не мог решить проблему выравнивания.

   
   — Влад    Mar 16, 06:08 PM    #

5. большое спасибо за информацию по firefox!

   
   — freelancer    Apr 29, 11:42 AM    #

Имя		Помнить
E-mail
http://
Коментарий

 

 

← предыдущая следующая →