Ет-правила CSS

Прим. перекладача: англійською мовою знак “@” вимовляють як “Ет”. Ет-правила CSS починаються зі знака “@” і тому так називаються

Ет-правила містять всередині себе набір CSS-правил і застосовують їх до чогось конкретного.

Імпортування

Ет-правило import приєднує іншу таблицю стилів. Припустимо, ви хочете додати стилі з іншої таблиці стилів до вже існуючої. У цьому випадку, ви швидше за все зробите так:

1 @import url(addonstyles.css);

Ця конструкція часто використовується в місці, де елемент link посилається на CSS файл HTML-сторінки, маючи при цьому внутрішню таблицю стилів, яка виглядає приблизно так:

1 <style type="text/css" media="all">@import url(monkey.css);</style>

Перевага цього підходу полягає в тому, що старі браузери, такі як Netscape, не здогадуються про ет-правила і, відповідно, не будуть посилатися на таблицю стилів. У результаті, якщо у вас є документ з хорошою розміткою тексту, він збереже працюючий простий HTML, хоча і не стилізований.

Медіа-типи

Ет-правило media застосує вміст до певного типу медіа, наприклад, до друку:

1 @media print 
2     body
3         font-size: 10pt;
4         font-family: times new roman, times, serif;
5     
6     #navigation
7         display: none;
8     
9  

Можливі типи медіа:

  • all – правила CSS застосовуються до всіх можливих типів медіа
  • aural – для мовних синтезаторів.
  • handheld – для портативних пристроїв.
  • print – для принтерів.
  • projection – для проекторів.
  • screen – для дисплеїв комп’ютерів.

Ви також можете використовувати такі типи медіа: braille, embossed, tty і tv.

Примітка: не дивлячись на все вищесказане, браузер IE підтримує всього декілька медіа-типів – all, screen і print.

Кодування

Ет-правило charset просто встановлює кодування зовнішньої таблиці стилів. Правило вказується у верхній частині таблиці CSS і виглядає приблизно так:

1 @charset "ISO-8859-1";

Шрифтовий комплект (font-face)

Ет-правило font-face використовується для детального опису шрифту і може використовуватися для впровадження зовнішнього шрифту в ваш CSS. Правило вимагає наявності описувача font-family, до якого шрифт може відсилати й значенням якого може бути ім’я поточного шрифту або повністю нове ім’я. Щоб впровадити шрифт, використовують описувач drc. Інші описувачі, додані до ет-правила font-face, стають умовами для шрифту, який використовується. Наприклад, якщо ви додали стиль font-weight:bold в ет-правило, описувач src властивості font-family буде застосовуватися до селектора з властивістю font-family, якщо властивістю font-weight буде bold.

Ви можете використовувати схоже ет-правило font-face:

1 @font-face
2     font-family: somerandomfontname;
3     src: url(somefont.eot);
4     font-weight: bold;
5  
6 p
7     font-family: somerandomfontname;
8     font-weight: bold;
9  

Це правило застосує шрифт somefont.eot до параграфів (за винятком випадків, коли для селектора p не встановлено font-weight: bold).

Підтримка впроваджуваних шрифтів дуже уривчаста. Браузери на основі коду Mozilla не підтримують їх і не мають найближчим часом таких планів. Тільки Internet Explorer, схоже, має певний ступінь підтримки. Щоб впроваджувати шрифти з IE, вам потрібно буде використовувати додаток Microsoft http://www.microsoft.com/typography/web/embedding/weft3/default.htm style="background:transparent;border:0px;margin:0px;padding:0px;vertical-align:baseline;color:rgb(0,102,204);" target="_blank">WEFT, який конвертує символи формату TrueType у формат OpenType (і потім ними можна скористатися тільки за певним вашим посиланням). Через обмеження (і складності) сумісності, рекомендується не використовувати шрифти, які не мають адекватної альтернативи серед системних шрифтів.

Сторінки

Ет-правило page регулює посторінкові медіа і є просунутим способом застосовувати стилі до друкованих медіа. Це правило визначає блок сторінки, який розширюється на блоковій моделі (box model, докладніше див Margins і Padding). Завдяки цьому правилу ви визначаєте розмір і подання єдиної сторінки.

Існує кілька угод, які застосовуються до ет-правила page: не повинно бути полів чи рамок; стиль створюється не для показу на екрані комп’ютера, тому не допускається використання в якості одиниць вимірювань пікселів (точок) і em.

Існує кілька певних властивостей, які можуть використовуватися. Наприклад, size може приймати значення portrait, landscape, auto або length. Властивість marks використовується для визначення мітки кадрування:

1 @page
2     size: 15cm 20cm;
3     margin: 3cm;
4     marks: cross;
5  

Псевдокласи для посторінкових медіа

Існує три псевдокласи, які використовуються спеціально в зв’язці з ет-правилом page. Виглядає їх використання наступним чином:

1 @page :pseudo-class stuff .

:first — цей псевдоклас застосовується до першої сторінки посторінкових медіа.

:left та :right застосовуються для лівих і правих сторінок відповідно. Може використовуватися для вказівки великих полів зліва при друці лівої сторінки і праворуч – при друці правої сторінки.

Є й ряд інших особливостей ет-правила page, такі як перехід на нову сторінку, найменування сторінок, але враховуючи, що це ет-правило з труднощами працює в будь-якому з браузерів, ви можливо і так витратили достатньо часу на читання цієї частини. Хоча ідея непогана.