Различные приемы с CSS

strong>CSS(англ. Cascading Style Sheets — каскадные таблицы стилей) применяются во всех сайта на просторах интернета. Это и не удивляет, т.к. CSS является, пожалуй, фундаментом для стилизации ваших веб страниц.

В этой статье мы рассмотрим хаки и трюки для различных браузеров.

1. Удаление контуров вокруг полей ввода для браузеров WebKit

Когда элемент input получает фокус ввода (:focus), то в браузере Safari к нему добавляется голубой контур (а в Chrome - желтый).

Если вы хотите удалить данный контур, то можно использовать правило (в данном случае будет удален контур у текстового поля):

input[type="text"]:focus {
  outline: none;
}

2. Различный цвет background'а для различных браузеров

Код примера изменяет background-color для элемента div в зависимости от типа используемого пользователем браузера. Так как * указывает на IE версии 7 и ниже, то мы используем правило с _ после него, чтобы для IE6 (и более ранних версий) использовать другой цвет фона, отличный от фона для IE7:

div {
  background-color: #999; /* все браузеры */
  *background-color: #ccc; /* добавили * перед свойством - для IE7 и ниже> */
  _background-color: #000; /* добавили _ перед свойством - для IE6 и ниже */
}

3. Поддержка прозрачности во всех основных браузерах.

В примере мы рассмотрим 50% прозрачности:

div {
/* для браузеров, совместимых со стандартами */
opacity:0.5;

/* следующие строки будут проигнорированы в браузерах, совместимых со стандартами */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  /* IE8 */
filter: alpha(opacity=50); /* IE 5-7  */
}

4. Простое использование веб шрифтов с помощью API Google Font

Веб шрифты открывают дополнительные возможности оформления страниц с помощью правила CSS @font-face. Однако в настоящий момент нет унифицированной реализации @font-face в различных браузерах.

Одним из обходных путей в ситуации с @font-face является API Google Font.

Ниже приводится пример использования шрифта Cantarell для элемента <h1> с использованием API Google Font.

Для использования шрифта из API Google Font сначала нужно указать ссылку на внешнюю таблицу стилей в теге <head>:

<link href="http://fonts.googleapis.com/css?family=Cantarell" rel="stylesheet" type="text/css">

Для использования шрифта для элемента  h1 просто указываем его в свойстве font-family.

h1 {
  font-family: 'Cantarell', Arial, serif;  /* Используем набор шрифтов (на всякий случай) */
}

Использование шрифта из API Google Font

5. Хаки для различных браузеров

/* хак только для  IE8 Only */
.myClass  {
     color:red\0/; /* красный */
     padding:70px\0/; /* отступ 70px только для Internet Explorer 8 */
}

/* IE 6 Only */
* html .myClass {
	...
} 

/* All except IE6 standards */
.myClass {
	property /**/: value;
} 

/* Firefox & IE 7, и выше */
html>body .myClass {
    ...
}

/* Modern browsers only (not IE 7) */
html>/**/body .myClass {
	...
}

/* IE 7 Only */
*:first-child+html .myClass {
   ...
}

/* Firefox Only */
@-moz-document url-prefix() {
	.myClass {
		...
	}
}

/* IE7 Only */
div[class^="myClass"] .myClass2 {
	...
}

/* IE7 only */
*+html .myClass {
	...
} 

/* hack for Opera <=9 */
html:first-child .myClass {
	...
} 

/* Firefox, Opera, Konqueror, Safari */
*|html .myClass {
	...
}

/* IE8 beta 2 only (?)*/
html:first-child .myClass [attr|=a-b] {
	...
} 

/* IE5/Mac only */
/*\*//*/ .myClass { property: value; } /**/ 

/* Gecko only */
.myClass:not([attr*=""]) {
	...
} 

/* Opera < 9.5 only */
@media all and (min-width: 0px) {
	html:first-child .myClass {
		...
	}
} 

/* Safari only */
.myClass:not(:root:root) {
	...
} 

/* Safari 3.0 and Chrome only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .myClass {
             ....
    }
}

6. Загрузка CSS только для Internet Explorer:

<!--[if IE]>
	... если Internet Explorer ..
	<link href="ie-fix.css" type="text/css" rel="stylesheet">
<![endif]--> 

<!--[if IE 6.0]>
	... если IE6
<![endif]--> 

<!--[if IE 7]>
	... если IE7
<![endif]--> 

<!--[if gte IE 5]>
	... если IE5+
<![endif]--> 

<!--[if lt IE 6]>
	.. если ниже IE 6
<![endif]--> 

<!--[if lte IE 5.5]>
	... если ниже или равно IE 5.5
<![endif]--> 

<!--[if gt IE 6]>
	... если выше IE 6
<![endif]-->

7. Убрать лишний padding в button для Firefox:

button::-moz-focus-inner {
    border: 0;
    padding: 0;
}