Грамматика CSS

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

1. Грамматика

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

  • *: 0 или более
  • +: 1 или более
  • ?: 0 или 1
  • |: разделитель альтернатив
  • [ ]: группировка

 

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

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*
 ;

2. Лексический сканер

Это сканер, написанный в нотации 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;}

3. Сравнение лексического разбора в CSS2 и в CSS1

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

  • Таблицы стилей CSS1 могут быть кодированы только 1-байт-на-символ, как ASCII и ISO-8859-1. CSS2 не имеет таких ограничений. На практике было мало трудностей с экстраполированием сканера CSS1, и некоторые ПА принимали 2-байтное кодирование.
  • CSS1 допускал только четыре 16-ричных числа после обратного слэша (\) для ссылок на символы Unicode, CSS2 допускает шесть. Кроме того, CSS2 допускает символы пробела в качестве разграничителей escape-последовательностей. Например, в соответствии с CSS1, строка “\abcdef” имеет 3 буквы (\abcd, e и f), а в соответствии с CSS2 – только одну (\abcdef).
  • Символ табуляции (ASCII 9) в строках не допускается. Однако, поскольку строки в CSS1 использовались только для имён шрифтов и для URL, единственное, что может привести к несовместимости между CSS1 и CSS2, это если таблица стилей содержит семейство шрифтов, имеющее символ табуляции в своём имени.
  • Также символы новой строки (escape-последовательность с обратным слэшем) не допускались в строках CSS1.
  • CSS2 разбирает число со следующим непосредственно за ним идентификатором как обозначение DIMEN (т.е. как неизвестный модуль). CSS1 разбирал его как число и как идентификатор. Это означает, что в CSS1 объявление ‘font: 10pt/1.2serif’ было корректным, а в ‘font: 10pt/12pt serif'; в CSS2 требуется пробел перед “serif”. (Некоторые ПА принимали первый пример, но не принимали второй.)
  • В CSS1 имя класса могло начинаться цифрой (“.55ft”), если только оно не было размером (“.55in”).
    В CSS2 такие классы разбираются как неизвестные размеры (чтобы позволить в будущем дополнение новых модулей). Чтобы сделать “.55ft” действующим классом, CSS2 требует, чтобы первая цифра была escape (“.\55ft”)
Рубрика: CSS

Добавить комментарий

Вам надо войти, чтобы написать комментарий.