Евгений Резниченко - Спецификация CSS2

• Название: Спецификация CSS2
• Автор: Евгений Резниченко
• Жанр: Прочая околокомпьтерная литература

Курс построен по спецификации, которая определяет язык каскадных таблиц стилей CSS2.

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

---

Внутри таблицы bsln, ideographic centered baseline может использоваться для растяжений преобладающих идеографических символов, а ideographic low baseline больше подходит для идеографических символов при прогоне преобладающих символов Latin, Greek или Cyrillic.

Дополнение. Приложение D. Грамматика CSS2

Это приложение является нормативным. Грамматика определяет синтаксис CSS2. В некотором смысле она является наднабором CSS2, так как в этой спецификации вводятся дополнительные семантические ограничения, не указанные в грамматике. Соответствующие пользовательские агенты (ПА) также обязаны придерживаться правил вперёд-совместимого разбора, нотации свойств и значений и нотации модуля. В дополнение к этому, язык документа может вводить ограничения, например, HTML вводит ограничения на возможные значения атрибута "class".

Это грамматика LL(1) (но учтите, что большинство ПА не должны использовать её напрямую, поскольку она отражает не соглашения по разбору, а только синтаксис CSS2. Формат продуктов оптимизирован для удобства, и используются некоторые сокращения Yacc (см. [YACC]):

[x]. *: 0 или более

[x]. +: 1 или более

[x]. ?: 0 или 1

[x]. |: разделитель альтернатив

[x]. [ ]: группировка

Продуктами являются:

stylesheet : [ CHARSET_SYM S* STRING S* ';' ]? [S|CDO|CDC]* [ import [S|CDO|CDC]* ]* [ [ ruleset | media | page | font_face ] [S|CDO|CDC]* ]* ; import : IMPORT_SYM S* [STRING|URI] S* [ medium [ ',' S* medium]* ]? ';' S* ; media : MEDIA_SYM S* medium [ ',' S* medium ]* '{' S* ruleset* '}' S* ; medium : IDENT S* ; page : PAGE_SYM S* IDENT? pseudo_page? S* '{' S* declaration [ ';' S* declaration ]* '}' S* ; pseudo_page : ':' IDENT ; font_face : FONT_FACE_SYM S* '{' S* declaration [ ';' S* declaration ]* '}' S* ; operator : '/' S* | ',' S* | /* empty */ ; combinator : '+' S* | '>' S* | /* empty */ ; unary_operator : '-' | '+' ; property : IDENT S* ; ruleset : selector [ ',' S* selector ]* '{' S* declaration [ ';' S* declaration ]* '}' S* ; selector : simple_selector [ combinator simple_selector ]* ; simple_selector : element_name? [ HASH | class | attrib | pseudo ]* S* ; class : '.' IDENT ; element_name : IDENT | '*' ; attrib : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S* [ IDENT | STRING ] S* ]? ']' ; pseudo : ':' [ IDENT | FUNCTION S* IDENT S* ')' ] ; declaration : property ':' S* expr prio? | /* empty */ ; prio : IMPORTANT_SYM S* ; expr : term [ operator term ]* ; term : unary_operator? [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* | TIME S* | FREQ S* | function ] | STRING S* | IDENT S* | URI S* | RGB S* | UNICODERANGE S* | hexcolor ; function : FUNCTION S* expr ')' S* /* * Имеется ограничение: цвет обязан иметь * 3 или 6 16-ричных цифр (т.е., [0-9a-fA-F]) после "#", * например, "#000" это OK, но "#abcd" - нет. */ hexcolor : HASH S* ;

Это сканер, написанный в нотации Flex (см. [FLEX]). Сканер является нечувствительным к регистру.

Два "\377" представляют наибольшее число символа, которое может быть обработано текущей версией Flex (десятеричное 255). Они должны читаться как "\4177777" (десятеричное 1114111), которое является наивысшей возможной кодовой точкой в Unicode/ISO-10646.

%option case-insensitive h [0-9a-f] nonascii [\200-\377] unicode \\{h}{1,6}[ \t\r\n\f]? escape {unicode}|\\[ -~\200-\377] nmstart [a-z]|{nonascii}|{escape} nmchar [a-z0-9-]|{nonascii}|{escape} string1 \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\" string2 \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\' ident {nmstart}{nmchar}* name {nmchar}+ num [0-9]+|[0-9]*"."[0-9]+ string {string1}|{string2} url ([!#$%&*-~]|{nonascii}|{escape})* w [ \t\r\n\f]* nl \n|\r\n|\r|\f range \?{1,6}|{h}(\?{0,5}|{h}(\?{0,4}|{h}(\?{0,3}|{h}(\?{0,2}|{h}(\??|{h}))))) %% [ \t\r\n\f]+ {return S;} \/\*[^*]*\*+([^/][^*]*\*+)*\/ /* ignore comments */ "<!--" {return CDO;} "-->" {return CDC;} "~=" {return INCLUDES;} "|=" {return DASHMATCH;} {string} {return STRING;} {ident} {return IDENT;} "#"{name} {return HASH;} "@import" {return IMPORT_SYM;} "@page" {return PAGE_SYM;} "@media" {return MEDIA_SYM;} "@font-face" {return FONT_FACE_SYM;} "@charset" {return CHARSET_SYM;} "@"{ident} {return ATKEYWORD;} "!{w}important" {return IMPORTANT_SYM;} {num}em {return EMS;} {num}ex {return EXS;} {num}px {return LENGTH;} {num}cm {return LENGTH;} {num}mm {return LENGTH;} {num}in {return LENGTH;} {num}pt {return LENGTH;} {num}pc {return LENGTH;} {num}deg {return ANGLE;} {num}rad {return ANGLE;} {num}grad {return ANGLE;} {num}ms {return TIME;} {num}s {return TIME;} {num}Hz {return FREQ;} {num}kHz {return FREQ;} {num}{ident} {return DIMEN;} {num}% {return PERCENTAGE;} {num} {return NUMBER;} "url("{w}{string}{w}")" {return URI;} "url("{w}{url}{w}")" {return URI;} {ident}"(" {return FUNCTION;} U\+{range} {return UNICODERANGE;} U\+{h}{1,6}-{h}{1,6} {return UNICODERANGE;} . {return *yytext;}

Имеются некоторые различия между вышеприведённым синтаксисом и синтаксисом, специфицированным в рекомендациях CSS1 ([CSS1]). Большинство этих отличий - из-за новых понятий в CSS2, которые отсутствовали в CSS1. Другие - из-за того, что грамматика была переписана, чтобы сделать её более читабельной. Однако есть и некоторые несовместимые изменения, которые вызвали бы ошибку в CSS1. Они разъяснены ниже.

[x]. Таблицы стилей CSS1 могут быть кодированы только 1-байт-на-символ, как ASCII и ISO-8859-1. CSS2 не имеет таких ограничений. На практике было мало трудностей с экстраполированием сканераа CSS1, и некоторые ПА принимали 2-байтное кодирование.

[x]. CSS1 допускал только четыре 16-ричных числа после обратного слэша (\) для ссылок на символы Unicode, CSS2 допускает шесть. Кроме того, CSS2 допускает символы пробела в качестве разграничителей escape-последовательностей. Например, в соответствии с CSS1, строка "\abcdef" имеет 3 буквы (\abcd, e и f), а в соответствии с CSS2 - только одну (\abcdef).

[x]. Символ табуляции (ASCII 9) в строках не допускается. Однако, поскольку строки в CSS1 использовались только для имён шрифтов и для URL, единственное, что может привести к несовместимости между CSS1 и CSS2, это если таблица стилей содержит семейство шрифтов, имеющее символ табуляции в своём имени.

[x]. Также символы новой строки (escape-последовательность с обратным слэшем) не допускались в строках CSS1.

[x]. CSS2 разбирает число со следующим непосредственно за ним идентификатором как обозначение DIMEN (т.е. как неизвестный модуль). CSS1 разбирал его как число и как идентификатор. Это означает, что в CSS1 объявление 'font: 10pt/1.2serif' было корректным, а в 'font: 10pt/12pt serif'; в CSS2 требуется пробел перед "serif". (Некоторые ПА принимали первый пример, но не принимали второй.)

[x]. В CSS1 имя класса могло начинаться цифрой (".55ft"), если только оно не было размером (".55in"). В CSS2 такие классы разбираются как неизвестные размеры (чтобы позволить в будущем дополнение новых модулей). Чтобы сделать ".55ft" действующим классом, CSS2 требует, чтобы первая цифра была escape (".\55ft")

Дополнение. Приложение F. Индекс свойств

НазваниеЗначенияНачальное значениеПрименяется: (По умолчанию: ко всем)НаследуетсяПроцентное (По умолчанию: N/A)Группа носителей'azimuth' <angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit centerдазвуковой'background'[ 'background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'] | inherit XX визуальный нет допускается в 'background-position' визуальный 'background-attachment' scroll | fixed | inherit scroll нет визуальный'background-image' <uri> | none | inherit noneнетвизуальный'background-position' [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit0% 0%к элементам уровня блока и к замещаемым элементамнет относительно размеров самого боксавизуальный'background-repeat' repeat | repeat-x | repeat-y | no-repeat | inherit repeatнетвизуальный'border'[ 'border-width' || 'border-style' || <color> ] | inheritсм. индивидуальные свойстванетвизуальный'border-collapse'collapse | separate | inheritcollapseк элементам 'table' и 'inline-table'давизуальный'border-color'<color>{1,4} | transparent | inheritсм. индивидуальные свойства нет визуальный 'border-spacing' <length> <length>? | inherit 0 к элементам 'table' и 'inline-table' да визуальный 'border-style' <border-style>{1,4} | inherit см. индивидуальные свойства нет визуальный 'border-top' 'border-right' 'border-bottom' 'border-left' [ 'border-top-width' || 'border-style' || <color> ] | inherit см. индивидуальные свойства нет визуальный 'border-top-color' 'border-right-color' 'border-bottom-color' 'border-left-color' <color> | inherit значение свойства 'color' нет визуальный 'border-top-style' 'border-right-style' 'border-bottom-style' 'border-left-style' <border-style> | inherit none нет визуальный 'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width' <border-width> | inherit medium нет визуальный 'border-width' <border-width>{1,4} | inherit см. индивидуальные свойства нет визуальный 'bottom' <length> | <percentage> | auto | inherit auto к позиционированным элементам нет относительно высоты содержащего блока визуальный 'caption-side' top | bottom | left | right | inherit top к элементам 'table-caption' да визуальный 'clear' none | left | right | both | inherit none к элементам уровня блока нет визуальный 'clip' <shape> | auto | inherit auto к элементам уровня блока и к замещаемым элементам нет визуальный 'color' <color> | inherit зависит от ПА да визуальный 'content' [ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit пустая строка к псевдоэлементам :before и :after нет визуальный 'counter-increment' [ <identifier> <integer>? ]+ | none | inherit none нет визуальный 'counter-reset' [ <identifier> <integer>? ]+ | none | inherit none нет визуальный 'cue' [ 'cue-before' || 'cue-after' ] | inherit XX нет звуковой 'cue-after' <uri> | none | inherit none нет звуковой 'cue-before' <uri> | none | inherit none нет звуковой 'cursor' [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit auto да визуальный, интерактивный 'direction' ltr | rtl | inherit ltr ко всем элементам, но см. др. информацию да визуальный 'display' inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit inline нет все 'elevation' <angle> | below | level | above | higher | lower | inherit level да звуковой 'empty-cells' show | hide | inherit show к элементам 'table-cell' да визуальный 'float' left | right | none | inherit none ко всем непозиционированным элементам и генерируемому содержимому нет визуальный 'font' [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit см. индивидуальные свойства да допускается в 'font-size' и 'line-height' визуальный 'font-family' [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit зависит от ПА (пользовательского агента) да визуальный 'font-size' <absolute-size> | <relative-size> | <length> | <percentage> | inherit medium да, вычисляемое значение наследуется относительно размера шрифта родительского элемента визуальный 'font-size-adjust' <number> | none | inherit none да визуальный 'font-stretch' normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit normal да визуальный 'font-style' normal | italic | oblique | inherit normal да визуальный 'font-variant' normal | small-caps | inherit normal да визуальный 'font-weight' normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit normal да визуальный 'height' <length> | <percentage> | auto | inherit auto ко всем элементам, кроме незамещаемых инлайн-элементов, столбцов таблиц и групп столбцов нет см. дополнительную информацию визуальный 'left' <length> | <percentage> | auto | inherit auto к позиционированным элементам нет относительно ширины содержащего блока визуальный 'letter-spacing' normal | <length> | inherit normal да визуальный 'line-height' normal | <number> | <length> | <percentage> | inherit normal да относительно размера шрифта этого элемента визуальный 'list-style' [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit XX к элементам с 'display: list-item' да визуальный 'list-style' <uri> | none | inherit none к элементам с 'display: list-item' да визуальный 'list-style-position' inside | outside | inherit outside к элементам с 'display: list-item' да визуальный 'list-style-type' disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit disc к элементам с 'display: list-item' да визуальный 'margin' <margin-width>{1,4} | inherit XX нет относительно ширины содержащего блока визуальный'margin-top' 'margin-right' 'margin-bottom' 'margin-left' <margin-width> | inherit 0 нет относительно ширины содержащего блока визуальный 'marker-offset' <length> | auto | inherit auto к элементам с 'display: marker' нетвизуальный 'marks' [ crop || cross ] | none | inherit none к контексту страницы N/A визуальный, страничный 'max-height' <length> | <percentage> | none | inherit none ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицы нет относительно высоты содержащего блокавизуальный 'max-width' <length> | <percentage> | none | inherit none ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицынетотносительно ширины содержащего блокавизуальный 'min-height' <length> | <percentage> | inherit 0 ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицы нетотносительно высоты содержащего блокавизуальный 'min-width'<length> | <percentage> | inherit зависит от ПАко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицынетотносительно ширины содержащего блокавизуальный 'orphans' <integer> | inherit 2 к элементам уровня блокадавизуальный, страничный 'outline' [ 'outline-color' || 'outline-style' || 'outline-width' ] | inheritсм. индивидуальные свойстванет визуальный, интерактивный'outline-color' <color> | invert | inherit invert нетвизуальный, интерактивный'outline-style' <border-style> | inherit none нет визуальный, интерактивный'outline-width' <border-width> | inherit mediumнет визуальный, интерактивный'overflow' visible | hidden | scroll | auto | inherit visibleк элементам уровня блока и к замещаемымнетвизуальный'padding' <padding-width>{1,4} | inherit XXнетотносительно ширины содержащего блокавизуальный 'padding-top' 'padding-right' 'padding-bottom' 'padding-left' <padding-width> | inherit 0нетотносительно ширины содержащего блокавизуальный 'page' <identifier> | auto autoк элементам уровня блокадавизуальный, страничный'page-break-after' auto | always | avoid | left | right | inherit autoк элементам уровня блоканетвизуальный, страничный 'page-break-before' auto | always | avoid | left | right | inherit autoк элементам уровня блоканетвизуальный, страничный 'page-break-inside' avoid | auto | inherit autoк элементам уровня блокадавизуальный, страничный 'pause' [ [<time> | <percentage>]{1,2} ] | inherit зависит от ПАнетсм. описание 'pause-before' и 'pause-after' звуковой 'pause-after' <time> | <percentage> | inherit зависит от ПАнетсм. дополнительную информациюзвуковой 'pause-before' <time> | <percentage> | inherit зависит от ПАнетсм. дополнительную информацию звуковой 'pitch' <frequency> | x-low | low | medium | high | x-high | inherit mediumдазвуковой'pitch-range' <number> | inherit 50дазвуковой 'play-during'<uri> mix? repeat? | auto | none | inherit auto нетзвуковой 'position' static | relative | absolute | fixed | inherit staticко всем элементам, кроме тех, которые генерируют содержимоенетвизуальный 'quotes' [<string> <string>]+ | none | inheritзависит от ПАдавизуальный'richness' <number> | inherit 50да звуковой 'right' <length> | <percentage> | auto | inherit autoк позиционированным элементам нетотносительно ширины содержащего блокавизуальный 'size' <length>{1,2} | auto | portrait | landscape | inherit autoк контексту страницыN/Aвизуальный, страничный'speak' normal | none | spell-out | inherit normalдазвуковой 'speak-header' once | always | inherit onceк элементам, имеющим информацию "шапки"дазвуковой'speak-numeral' digits | continuous | inherit continuousдазвуковой 'speak-punctuation'code | none | inherit noneдазвуковой 'speech-rate' <number> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit mediumдазвуковой 'stress' <number> | inherit 50 дазвуковой 'table-layout' auto | fixed | inherit autoк 'table' и 'inline-table'нетзвуковой 'text-align' left | right | center | justify | <string> | inherit зависит от ПА и направления письма к элементам уровня блокадавизуальный 'text-decoration'none | [ underline || overline || line-through || blink ] | inherit noneнет (см. дополнительную информацию)визуальный'text-indent'<length> | <percentage> | inherit 0к элементам уровня блокадаотносительно ширины содержащего блока визуальный 'text-shadow' none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit noneнет (см. дополнительную информацию) визуальный 'text-transform'capitalize | uppercase | lowercase | none | inherit noneдавизуальный 'top' <length> | <percentage> | auto | inherit autoк позиционированным элементамнетотносительно высоты содержащего блокавизуальный 'vertical-align'baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit baselineк элементам инлайн уровня и к 'table-cell' нетотносительно 'line-height' самого элементавизуальный 'visibility' visible | hidden | collapse | inherit inherit нетвизуальный'voice-family' [[<specific-voice> | <generic-voice> ],]* [<specific-voice> | <generic-voice> ] | inherit зависит от ПАдазвуковой'volume' <number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud | inherit medium даотносительно унаследованного значения звуковой 'white-space' normal | pre | nowrap | inherit normal к элементам уровня блока давизуальный 'width' <length> | <percentage> | auto | inherit auto ко всем элементам, кроме незамещаемых инлайн-элементов, столбцов таблиц и групп столбцов нетотносительно ширины содержащего блокавизуальный'word-spacing'normal | <length> | inherit normal давизуальный'z-index' auto | <integer> | inherit autoк позиционированным элементам нетвизуальный