CSS хаки и полезности

Способы подключения разных стилей для разных разрешений экрана, тень, скругления, масштабирование фона с помощью css3.

Border-radius:

.block
{
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
-khtml-border-radius: 10px; /* KHTML */
border-radius: 10px; /* CSS3 */
}

Box-shadow:

.block
{
-moz-box-shadow: 5px 5px 20px rgba(0,0,0,0.2); /* Для Firefox */
-webkit-box-shadow: 5px 5px 20px rgba(0,0,0,0.2); /* Для Safari и Chrome */
-khtml-box-shadow: 5px 5px 20px rgba(0,0,0,0.2); /* KHTML */
box-shadow: 5px 5px 20px rgba(0,0,0,0.2); /* CSS3 */
}

Box-shadow для ИЕ:

<!--[if IE]>
<style type="text/css">
.block {
filter:
progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=45, Strength=2)
progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=2)
progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=225, Strength=2)
progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=315, Strength=2);
position: relative;
zoom: 1;
}
</style>
<![endif]-->

CSS3: Как растянуть фон на всю ширину окна

-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */

Этот вариант масштабирует по ширине, что не совсем годится при широком фоновом изображении для мобильных устройств.

В такой ситуации можно использовать значение cover
Cover масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

background-size: cover; /* масштабируем с сохранением пропорций */

Подключение разных таблиц стилей под разные разрешения экрана:

<link rel="stylesheet" media="(min-width:1980px)" href="style1980.css">
<link rel="stylesheet" media="(max-width:1979px)" href="style.css">

Запрет выделения текста средствами css.
Работает в Firefox, Chrome/Safari, IE10+

.element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

Источник