@-правила в CSS
Привет,
Сегодня у нас небольшая заметка (основанная на статье «Demystifying CSS At-Rules»), в которой речь пойдет о применении в CSS правил, содержащих в себе символ «@».
В статье будут рассмотрены правила @import, @media, @charset и популярный сейчас @font-face, который позволяет использовать собственные шрифты на страницах сайта (про сторонние шрифты у нас уже была статья «Как использовать любой шрифт на сайте»).
@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;
}
На этом все. Надеюсь, что статья окажется для вас полезной.
Какие из этих правил вы используете? О каких не знали?
Понравилась статья?
Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.
Комментарии — 12
RSS1. http://lovtsevich.com/2009/10/26/font-face-ili-nazad-v-budushhee/
подробное описание подключение шрифтов через CSS
2. http://www.fontsquirrel.com/fontface/generator
гернератор шрифтов, конвертирует туда-сюда и все отдает в архиве + создает CSS, что заметно упрощает работу над подключением шрифтов и поддержки кроссбраузерности :)
P.S. Люди не надо извращением заниматься с @font-face, потому что эти новые фишки CSS еще не скоро будут работать стабильно. А скорее может быть и вообще не будут работать правильно.
очень содержательный камент.