@charset

Это правило указывает на то, какую кодировку использует ваш файл стилей. Правило необходимо объявлять в самом начале файла, на первой строке без каких-либо других символов перед ним, указываемая кодировка дожна быть в соответствующем формате. Например, вот так будет выглядеть код для кодировки UTF-8:

@charset "UTF-8"

@import

С помощью этого правила можно включать один CSS файл в другой. Это правило нужно опять же указывать в самом верху страницы. Используя различный синтаксис, можно скрыть подключаемый файл о какой-то версии браузера. Например, если указать тип медиа в правиле, то ИЕ6 и ниже не подключат указанный файл:

@import (/not-for-ie.css) screen;

Так же советую прочитать статью о скорости загрузки стилей при использовании @import — «Не используйте @import». 

Раз уж заговорили о медиатипах, то давайте рассмотрим, какие в принципе бывают:

• all — для всех, используется по умолчанию;
• aural — речевые синтезаторы и программы для звукового воспроизведения текста;
• braille — устройства, основанные на системе Брайля, которые предназначены для слепых людей;
• handheld — карманные компьютеры, мобильные телефоны и аналогичные устройства;
• print — устройства печати;
• projection — проекторы;
• screen — экран монитора;
• tv — телевизоры.

@media

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

@media print {
    #sidebar {
        display: none;
    }
}

К счастью, все современные браузеры корректно обрабатывают это правило. Но существуют хаки CSS с использованием этого правила.

@font-face

Данное правило позволяет вам подключать и применять на своем сайте отличные от стандартных шрифты. Замечательно то, что на данный момент браузеры IE 6-8, Firefox 3.5+ (Mac и PC), Safari (Mac и PC), Chrome 4+ и Opera 10+ поддерживают это правило полностью. Незамечательно то, что IE имеет некоторые ограничения на подключаемые шрифты.

Кроссбраузерное использование правила выглядит следующим образом:

@font-face {
     font-family: "Название_вашего_шрифта";
     src: url(путь_до_файла/файл_шрифта.eot); /* специально для IE */
     src: local("Действительное_название_шрифта"), url(путь_до_файла/файл_шрифта.ttf ) format("truetype"); /* для всех остальных */
}

/* Использование шрифта */
.yourFontName {
     font-family: "Название_вашего_шрифта", verdana, helvetica, sans-serif;
}  

На этом все. Надеюсь, что статья окажется для вас полезной.

Какие из этих правил вы используете? О каких не знали?