UA, що підтримує СSS, опрацьовує документи у відповідності зі стандартом CSS1 в такій послідовності:
- Робиться спроба вибрати все, що зазначено в таблиці стилів і розібрати у відповідності зі специфікацією;
- Розсортувати визначення у відповідності з каскадуванням установок;
- Реалізувати функції CSS1 в межах обмежень, накладених пристроями виведення (див. пояснення нижче). UA, виробляє висновок таблиці стилів CSS, якщо вона відповідає стандарту CSS;
- Виводиться відповідна CSS таблиця стилів.
UA, який використовує CSS1 для показу і виведення документів, відпрацьовує таблицю стилів CSS1 у відповідності зі специфікацією, якщо в наявності є обидві установки узгодження.
UA не відпрацьовує всі функції CSS1: він може лише узгодити результати відпрацювання з CSS1, реалізуючи функціональне ядро (Сore functionality) останнього. У функціональне ядро входить вся специфікація CSS за винятком частин, вилучених явним чином. У тексті, позначеному як «ядро CSS1» указується функції, що знаходяться за межами ядра. Установки властивостей, виключені з функціонального ядра, називаються «розширені властивості CSS1».
Даний розділ визначає тільки узгодження CSS1. У майбутньому з’являться інші рівні CSS, які можуть зажадати UA для реалізації різних установок властивостей в порядку узгодження.
Приклади обмежень, які накладаються засобом виведення, такі: обмеження ресурсів (шрифти, колір) і обмеження дозволу (внаслідок чого кордони можуть бути неточними). У цих випадках UA повинен апроксимувати значення таблиці стилів. Крім того, різні особливості користувальницьких інтерфейсів можуть накладати свої обмеження: наприклад, браузер VR може масштабувати документ, грунтуючись на поточній «відстані» від користувача.
UA має передбачати додаткові установки, які призначені для користувача, для відображення інформації. Наприклад, UA має забезпечувати додаткові налаштування для користувача з погіршеним зором або давати можливість відключати мерехтливий текст.
Зверніть увагу, що CSS1 не визначає всіх аспектів форматування. Наприклад, UA вправі довільно вибирати алгоритм визначення міжсимвольної відстані.
Дана специфікація рекомендує (але не наказує), щоб UA:
- допускав визначення таблиці стилів користувача читачем;
- допускав можливість включення і виключення індивідуальної таблиці стилів.
Обидва правила узгодження описують лише функціональний інтерфейс, але не інтерфейс для користувача.
Послідовно-сумісний синтаксичний аналіз
Дана специфікація визначає CSS першого рівня. У перспективі очікується поява більш високих рівнів CSS з додатковими властивостями. Щоб забезпечити сумісність UA, підтримують тільки CSS1, з більш пізніми версіями мови, в даному розділі описуються процедури дій UA у разі виявлення невідповідності вимогам CSS першого рівня.
- установка невідомої властивості ігнорується. Наприклад, таблицю стилів
H1 { color: red; rotation: 70deg }UA буде обробляти, як якщо б вона мала вигляд
H1 { color: red; } - недопустимі значення, або значення з неприпустимими частинами, обробляються, як якщо б визначення не було:
IMG {float: left} /* вірно для CSS1 */ IMG {float: left top} /* "top" неприпустиме значення для 'float' */ IMG {background: "red"} /* У CSS1 ключові слова не беруться в лапки */ IMG {border-width: 3} /* повинна бути вказана розмірність числа, */ /* яке виражає значення довжини */У наведеному вище прикладі аналізатор CSS1 повинен прийняти до виконання перший рядок й ігнорувати наступні, в результаті чого таблиця стилів прийме вигляд:
IMG { float: left } IMG { } IMG { } IMG { }UA, сумісний з майбутньою специфікацією CSS, може відпрацювати будь-який із інших рядків належним чином.
- неправильна приставка до зарезервованого слова ігнорується разом з усім наступним, аж до першої наступної точки з комою (;) або парних фігурних дужок ({}) включно. Наприклад, нехай ми маємо таблицю стилів:
@three-dee { @background-lighting { azimuth: 30deg; elevation: 190deg; } H1 { color: red } } H1 {color: blue}де ‘@three-dee’ – неприпустимий вираз для CSS1. Отже, весь рядок з «собачкою»(аж до третіх правих фігурних дужок включно) ігнорується.
UA з підтримкою CSS1 пропускає вилучений вираз, фактично скорочуючи таблицю стилів до:
H1 {color: blue}
Більш детально:
Таблиця стилів CSS, для будь-якої версії CSS, складається з переліку директив (statements). Є два види директив: предустановки і установки. Біля директив допускаються проміжки (прогалини, табуляція, нові рядки).
Таблиця стилів CSS часто вставляється в документи HTML, і для приховування таблиці стилів від більш ранніх UA, бажано вставляти її всередині коментарів HTML. Знаки коментарів HTML «» можуть бути розташовані перед, після і охоплюючи затвердження. Вони можуть відокремлюватися інтервалами.
Передустановки починаються із зарезервованих слів з приставкою у вигляді знака «собачки» ‘@‘ (наприклад: ‘@import‘, ‘@page‘) та ідентифікатора. Ідентифікатор може складатися з літер, цифр, рисок і спецсимволів (визначення нижче).
Програмування складається з усього, що знаходиться до наступної точки з комою (;) включно. UA для CSS, зустрічаючи передустановку, що починається зі слова з приставкою, відмінною від ‘@import‘, ігнорують всю попередню і продовжують відпрацювання після її закінчення. Також ігнорується будь-яка попередня установка, що починається з ‘@import‘, якщо вона не розташовується вгорі таблиці стилів, скажімо, після якого-небудь правила (навіть ігнорованого). Розглянемо приклад.
Нехай аналізатор CSS1 обробляє наступну таблицю стилів:
@import "subs.css";
H1 { color: blue }
@import "list.css";
Друга передустановка ‘@import‘ для CSS неприпустима. Аналізатор CSS1 пропускає всю попередню, перетворюючи таблицю стилів до наступного вигляду:
@import "subs.css";
H1 {color: blue}
Блок починається з лівих фігурних дужок ({) і закінчується правими (}). Між ними можуть бути різні знаки, включаючи круглі (()), квадратні ([]) і фігурні дужки, які завжди присутні в аналізованих парах і можуть бути вкладеними. Одинарні лапки (‘) і подвійні лапки ("), які також присутні в аналізованих парах, і знаки між ними сприймаються як рядок. Нижче наведено приклад блоку, зверніть увагу, що права дужка між лапками не сприймається як відкриття дужки в блоці, і що друга одинарна лапка є символом, що пропускається, а не розглядається як відкриття лапок:
{ causta: "}" + ( * '\'') }
Установка складається з селектора-рядка, за яким йде блок – визначення. Селектор-рядок складається з усього, що знаходиться аж до першої лівої фігурної дужки, виключаючи останню. Установка, що починається некоректно для CSS1, опускається.
Наприклад, обробник CSS1 зустрічає таку таблицю стилів:
H1 { color: blue }
P[align], UL { color: red; font-size: large }
P EM { font-weight: bold }
Другий рядок прикладу містить селектор-рядок, який неприпустимий для CSS1. UA для CSS1 повинен пропустити цю установку і привести таблицю стилів до наступного вигляду:
H1 { color: blue }
P EM { font-weight: bold }
Блок-визначення починається з лівої фігурної дужки ({) і закінчується виявленою правою фігурною дужкою. Між ними розташовується перелік з визначень (0 або більше), розділених крапками з комою(;).
Визначення складається з властивості, двокрапки й значення, кожне з яких може відокремлюватися пробілами. Як зазначалося раніше, властивість є ідентифікатором. У значенні можуть бути використані різні символи, проте в аналізованих парах повинні бути присутніми круглі дужки (()), квадратні дужки ([]), фігурні дужки ({}), одинарні лапки (‘) і подвійні лапки ("). Круглі, квадратні і фігурні лапки можуть бути вкладеними. Усередині лапок символи сприймаються як рядки.
Щоб гарантувати можливість у майбутньому вводити нові властивості і нові значення для існуючих властивостей, UA повинно опускати визначення з некоректною назвою властивості або некоректним значенням властивості. Кожна з властивостей CSS1 має власні синтаксичні та семантичні обмеження значень, які вона може приймати.
Наприклад, припустимо, що обробник CSS1 зустрів таку таблицю стилів:
H1 { color: red; font-style: 12pt }
P { color: blue; font-vendor: any;
font-variant: small-caps }
EM EM { font-style: normal }
Друге визначення в першій лінії має неприпустиме значення ’12pt’. Друге визначення у другій лінії містить невизначену властивість ‘font-vendor’. Оброблювач CSS1 пропустить ці визначення, скорочуючи таблицю стилів до:
H1 { color: red; }
P { color: blue; font-variant: small-caps }
EM EM { font-style: normal }
Коментарі можуть бути вставлені скрізь, де допускається простановка пробілів. CSS1 визначає допустимі місця вставки пробілів (напр. всередині значень), і там же можуть бути вставлені коментарі.
Завжди дотримуються наступні правила:
- Всі таблиці стилів CSS незалежні від регістра, виключаючи частини, що не знаходяться під контролем CSS. Наприклад, в CSS1 назви родини шрифту і URL можуть залежати від зовнішніх обставин. Також залежні від зовнішніх обставин атрибути для CLASS і ID знаходяться під контролем HTML.
- Для CSS1 селектори (імена, класи та ID елемента) можуть включати тільки символи A-Z, 0-9 та символи Unicode 161-255, плюс риску (-), вони не можуть починатися з рисочки або цифри, вони можуть також включати недруковані і символи Unicode у вигляді цифрового коду.
- Зворотній слеш, після якого йдуть не більше чотирьох шістнадцяткових цифр (0..9A..F), являє собою символ Unicode із зазначеним числом.
- Будь-який символ, за винятком шістнадцяткової цифри, може бути пропущений для ігнорування його спеціального значення, шляхом встановлення перед ним зворотнього слеша. Наприклад: «\»»- рядок, що складається з однієї подвійної лапки.
- Два попередніх пункти визначають переходи по зворотньому слешу. Такі переходи завжди вважаються частиною ідентифікатора, за винятком випадків, коли вони знаходяться всередині рядка (тобто «\7B» – це не пунктуація, навіть якщо присутня «{», а «\32» допускається на початку імені класу, навіть якщо «2» – ні).
Примітка: атрибут HTML CLASS допускає більше символів у назві класу, ніж встановлено для вищеназваних селекторів. У CSS1 ці символи будуть пропущені або транслітеровані в числа Unicode: «B&W?» може бути написано у вигляді «B\&W\?», або «B\26W\3F», «??????» (Greek: «kouros») може бути написано як «\3BA\3BF\3C5\3C1\3BF\3C2». Очікується, що в наступних версіях CSS безпосередньо можна буде вводити більше символів.
***
Це переклад статті.