Меню ↓

От себя

На этой странице я собираю наиболее интересные хаки и приемы, в первую очередб для себя.
Типа сборника, который всегда под рукой.

Хитрости в CSS

CSS3 Solutions for Internet Explorer


Opacity / Transparency:

#myElement {
opacity: .4; /* other browsers */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* this works in IE6, IE7, and IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in IE8 only */
}

 

Border-radius:

.box-radius {
border-radius: 15px;
behavior: url(border-radius.htc);
}

Скачать файл border-radius.htc (Google Code)


Box Shadow:

.box-shadow {
-moz-box-shadow: 2px 2px 3px #969696; /* for Firefox 3.5+ */
-webkit-box-shadow: 2px 2px 3px #969696; /* for Safari and Chrome */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
}

 

Gradients:

#gradient {
background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}

 

Multiple Backgrounds:

#multi-bg {
background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;
background: transparent url(images/bg-image-1.gif) top left repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* IE8 only */
}

 

Element Rotation:

#rotate {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

 

SUB и SUP

Часто теги <SUP> или <SUB> "ломают" межстрочный интервал? Есть очень простое решение, это магия:

/*Фикс для тега sup*/
sup {vertical-align: baseline; position: relative; top: -0.4em;}
/*Фикс для тега sub*/
sub {vertical-align: baseline; position: relative; bottom: -0.4em;}

Добавляю во все свои работы и даже не думаю больше об этом недоразумении :)

:before и :after

IE5-6 не поддерживается в показе примеров!
Что за зверь такой этот странный "Бефор" и "Афтэ"? Но зачастую это весьма удобное свойство CSS 2, а именно:

Пример для тега <P>. При применении данного стиля в начале <P class="test"> будет картинка (sub.gif), а в конце текст (курсивный текст...):

p.test:before {
padding-right: 5px;
content: url(sub.gif);
}
p.test:after {
font-style: italic;
color: blue;
content: " курсивный текст...";
}

Спецификация CSS2

Спецификацию CSS2 можно скачать в следующих форматах:

ZIP : http://loc.stack.ru/projects/CSS2/css2ru.zip
PDF: http://www.w3.org/TR/REC-CSS2/css2.pdf
 

Иконки линков в CSS

IE5-6 не поддерживается в показе примеров!
Как сделать в CSS распознование ссылок по форматам? Например для *.doc раньше приходилось вставлять иконку.. Теперь все просто :) достаточно лишь указать в CSS конструкцию вида (a[href$='.doc']) и присвоить иконку 
например:

a[href$='.doc'], a[href$='.rtf'] {
padding: 5px 20px 5px 0;
background: transparent url(icons/icon_doc.gif) no-repeat center right;
}

Скачать иконки и CSS

 

CSS-хаки для обеспечения кроссбраузерности.

 

Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства)

Всем известные Conditional comments в IE

Несмотря на известность, в них есть много редко используемого.
Например таблица стилей, которая будет видна всем браузерам, кроме IE версий 5-8.

<!--[if !IE]--><link href="styles.css" rel="stylesheet" media="all" /><!--[endif]-->


Conditional comments для 6, 7, 8й версии (8я версия тоже их поддерживает — не удивляйтесь):

<!--[if IE 6]><link href="ie6.css" rel="stylesheet" media="all" /><![endif]-->
<!--[if IE 7]><link href="ie7.css" rel="stylesheet" media="all" /><![endif]-->
<!--[if IE 8]><link href="ie8.css" rel="stylesheet" media="all" /><![endif]-->


Другие хаки для IE

* html .class{background:red}

В случае если у html-страницы есть доктайп, этот хак работает только для IE6.

В случае quirks-mode, хак работает в IE6 и IE7.

*+html .class{background:red}

или

*:first-child+html .class{background:red}

В случае, если у html-страницы есть доктайп, этот хак работает в IE7.

Грязные хаки, работающие только в IE6

.class{
_background:red
}
.class{
-background:red
}


Грязные хаки, работающие только в IE7

-,.class{
background:red;
}


Грязные хаки, работающие в IE6 и IE7

.class{
*background:red
}
.class{
//background:red;
}
.class{background:red!ie}

Хак, работающий в IE6 и IE7 по аналогии со свойством !important.

Грязный хак для IE6, IE7 & Safari

html*.class{background:red}

Нюанс — в Google Chrome 2 не работает. Хак в общем для IE css-файле, когда нужно отделить стили от 8-ки

Грязный хак для Safari 3

html:root*.class{background:red}

Также не работает в Chrome 2. О причине использования такого хака и о других хаках для сафари можно узнать здесь.

Грязный хак для FF2, FF3

@-moz-document url-prefix(){
.class{background:red}}
}


Грязный хак для FF2, FF3 и IE7

x:-moz-any-link,.class{background:red}


Грязный хак для FF3 и IE7

x:-moz-any-link,x:default,.class{background:red}


Грязный хак для Opera 9.5 и IE7

noindex:-o-prefocus,.class{background:red}

Для того, чтобы превратить его в хак только для оперы, воспользуйтесь любым обрамляющим хаком, который не поддерживает IE7.

Хак для FF2, FF3, Safari 3, Chrome 2, Opera 9.5

html:root .class{background:red}


Хаки для Safari 3, Chrome 2, Opera 9.5

body:first-of-type .class{background:red}

@media all and (min-width:0){
.class{background:red}
}


Хак для FF2, FF3, Safari 3 и Chrome 2

html:not([lang*=""]):not(:only-child) .class{background:red}

Этот хак может быть использован к примеру, если вы хотите для Safari и FF сделать скругленные уголки при помощи CSS, а для остальных браузеров хотите, чтобы было картинками.

Отделение стилей от IE6

<!--[if !IE 6]--><link href="styles.css" rel="stylesheet" media="all" /><!--[endif]-->
html>body .class{background:red}
head+body .class{background:red}
html:first-child .class{background:red}


Отделение стилей от IE6 и IE7

html>/**/body .class{background:red}


Отделение стилей от IE6-8

*|html .class{background:red}
html:not([lang*=""]) .class{background:red}


Об отделении стилей для IE

Сама Microsoft рекомендует использовать conditional comments (официальный блог). Я в своей работе использую conditional comments для всех IE:

<!--[if IE]><link href="ie.css" rel="stylesheet" media="all" /><[endif]-->

А затем дополнительно отделяю хаками * html и *+html стили для IE6 и IE7 соответственно. Оставшиеся стили получаются для всех IE.

Изменение рендеринга IE8

Добавление данной строчки в заголовок web-страницы изменяет тип рендеринга в зависимости от значения content (это не хак, но всё же вещь очень похожая по свойствам на хак):

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Основные значения content следующие:

* «IE=7»

— включает режим Strict в котором рендерятся все страницы;

* «IE=EmulateIE7»

— включает режим совместимости с IE7, в котором в зависимости от DOCTYPE будет применяться либо стандартный для IE7 режим рендеринга (Strict), либо quirks-режим (Quirks);

* «IE=EmulateIE8»

— страница форсируется в режим «IE8 Standards» вне зависимости от того, включен ли режим совместимости «Compatibility View» в браузере пользователя, а quirks-страницы отображаются в Quirks-режиме.

* «IE=8»

— включается режим максимального соответствия стандартам «IE8 Standards».

В случае нежелания переписывать старые проекты под IE8 — вы можете воспользоваться

IE=EmulateIE7



Во всех перечисленных выше примерах .class — пример класса (можно указать вместо него id, тег и т.д.), а background:red — пример свойства и его значения.