CSS level 1 Спецификация

Приложение B: CSS1 граматика

(това приложение е нормативно)

Минималната CSS(т.е., тази, която важи за всяка версия на CSS) граматика, която всички имплементации трябва да поддържат се дефинира в глава 7. Граматиката по-долу дефинира много по-малък език, такъв, който дефинира синтаксиса на CSS1.

До някаква степен, обаче, тя все още е superset на CSS1: съществуват допълнителни семантични ограничения, които не са описани в тази граматика. Браузър, спазващ CSS1 също така трябва да се придържа към forward-compatible parsing правилата(вижте глава 7.1), обозначенията на свойствата и стойностите(глава 5) и мерките(глава 6). Нещо повече, HTML налага ограничения, например на допустимите стойности на class атрибута.

Граматиката по-долу е LL(1)(трябва да се отбележи, че повечето от браузърите не трябва да я използват директно, тъй като тя не изразява parsing(парсинг) конвенциите, а само CSS1 синтаксиса). Форматът на продуктите е оптимизиран за човешка консумация и са използвани кратки обозначения от yacc[15]:

*  : 0 или повече
+  : 1 или повече
?  : 0 или 1
|  : разделя алтернативите
[] : използва се за групиране

Продуктите са следните:

стилов лист
 : [CDO|CDC]* [ import [CDO|CDC]* ]* [ група от правила [CDO|CDC]* ]*
 ;
import
 : IMPORT_SYM [символен низ|URL] ';'		/* например @import url(fun.css); */
 ;
числов_оператор
 : '-' | '+'
 ;
оператор
 : '/' | ',' | /* празен */
 ;
свойство
 : IDENT
 ;
група от правила
 : селектор[ '.' селектор ] *
   '{' декларация [ ';' декларация ]* '}'
 ;
селектор
 : прост_селектор+ [ псевдо_елемент  | отделен_псевдо_елемент ]?
 | отделен_псевдо_елемент
 ;
	/* "id" е ID, което е прикачено към типа на
	** вляво, както в: P#p007
	** "отделно_id" е ID, което не е прикачено,
	** както в: #p007
	** аналогично за класовете и псевдо-класовете.
	*/
прост_селектор
 : име_на_елемента id? клас? псевдо_клас?	/* например: H1.subject */
 | отделен_id клас? псевдо_клас?		/* например: #xyz33 */
 | отделен_клас псевдо_клас?			/* например: .author */
 | отделен_псевдо_клас			/* например: :link */
 ;
име_на_елемента
 : IDENT
 ;
псевдо_клас					/* както в:  A:link */
 : линк_псевдоклас_след_IDENT
 | посетен_псевдоклас_след_IDENT
 | активен_псевдоклас_след_IDENT
 ;
отделен_псевдо_клас				/* както в:  :link */
 : псевдоклас_връзка
 | посетен_псевдоклас
 | активен_псевдоклас
 ;
клас						/* както в:  P.note */
 : клас_след_IDENT
 ;
отделен_клас					/* както в:  .note */
 : клас
 ;
псевдо_елемент					/* както в:  P:first-line */
 : първата_буква_след_IDENT
 | първия_ред_след_IDENT
 ;
отделен_псевдо_елемент				/* както в:  :first-line */
 : първа_буква
 | първи_ред
 ;
	/* Съществува ограничение, според което id и отделно_id, според което
	** частта след символа "#" трябва да е валидна HTML ID стойност;
	** например, "#x77" е подходяща, докато "#77" не е.
	*/
id
 : HASH_след_IDENT
 ;
отделно_id
 : HASH
 ;
декларация
 : свойство ':' expr prio? 
 | /* празно */				/* Предотвратява синтактични грешки... */
 ;
prio
 : важна_SYM	 		/* !important */
 ;
израз
 : термин [ оператор на термина ]*
 ;
термин
 : числов_оператор?
  [ число | символен низ | процентна стойност | мярка за дължина | EMS | EXS
  | IDENT | шестнайсетичен цвят | URL адрес | RGB стойност ]
 ;
	/* Съществува ограничение, свързано с цвета, според което цвета трябва
	** има или 3, или 6 шестнадесетични цифри (т.е., [0-9 a-f A-F])
	** след символа "#"; например, "#000" е подходящо, докато "#abcd" не е.
	*/
шестнадесетичен цвят
 : HASH | HASH_след_IDENT
 ;

Това, което следва е т.н. tokenizer, написан чрез flex[16] системата за обозначение. Трябва да се отбележи, че това предполага 8-битова имплементация на flex системата. Т.н. tokeniser не прави разлика между малки и големи букви(в командния ред на flex, option -i).

unicode		\[0-9a-f]{1,4}
latin1		[Ў-я]
escape(затварящи)		{unicode}|\[ -~Ў-я]
stringchar	{escape}|{latin1}|[ !#$%&(-~]
nmstrt		[a-z]|{latin1}|{escape}
nmchar		[-a-z0-9]|{latin1}|{escape}
ident		{nmstrt}{nmchar}*
name		{nmchar}+
d		[0-9]
notnm		[^-a-z0-9\]|{latin1}
w		[ \t\n]*
num		{d}+|{d}*\.{d}+
string		\"({stringchar}|\')*\"|\'({stringchar}|\")*\'

%x COMMENT
%s AFTER_IDENT

%%
"/*"				{BEGIN(COMMENT);}
<COMMENT>"*/"			{BEGIN(0);}
<COMMENT>\n			{/* ignore */}
<COMMENT>.			{/* ignore */}
@import				{BEGIN(0); return IMPORT_SYM;}
"!"{w}important			{BEGIN(0); return IMPORTANT_SYM;}
{ident}				{BEGIN(AFTER_IDENT); return IDENT;}
{string}			{BEGIN(0); return STRING;}

{num}				{BEGIN(0); return NUMBER;}
{num}"%"			{BEGIN(0); return PERCENTAGE;}
{num}pt/{notnm}			{BEGIN(0); return LENGTH;}
{num}mm/{notnm}			{BEGIN(0); return LENGTH;}
{num}cm/{notnm}			{BEGIN(0); return LENGTH;}
{num}pc/{notnm}			{BEGIN(0); return LENGTH;}
{num}in/{notnm}			{BEGIN(0); return LENGTH;}
{num}px/{notnm}			{BEGIN(0); return LENGTH;}
{num}em/{notnm}			{BEGIN(0); return EMS;}
{num}ex/{notnm}			{BEGIN(0); return EXS;}

<AFTER_IDENT>":"link		{return LINK_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"visited	{return VISITED_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"active	{return ACTIVE_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"first-line	{return FIRST_LINE_AFTER_IDENT;}
<AFTER_IDENT>":"first-letter	{return FIRST_LETTER_AFTER_IDENT;}
<AFTER_IDENT>"#"{name}		{return HASH_AFTER_IDENT;}
<AFTER_IDENT>"."{name}		{return CLASS_AFTER_IDENT;}

":"link				{BEGIN(AFTER_IDENT); return LINK_PSCLASS;}
":"visited			{BEGIN(AFTER_IDENT); return VISITED_PSCLASS;}
":"active			{BEGIN(AFTER_IDENT); return ACTIVE_PSCLASS;}
":"first-line			{BEGIN(AFTER_IDENT); return FIRST_LINE;}
":"first-letter			{BEGIN(AFTER_IDENT); return FIRST_LETTER;}
"#"{name}			{BEGIN(AFTER_IDENT); return HASH;}
"."{name}			{BEGIN(AFTER_IDENT); return CLASS;}

url\({w}{string}{w}\)					|
url\({w}([^ \n\'\")]|\\ |\\'|\\"|\\))+{w}\)		{BEGIN(0); return URL;}
rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\)	{BEGIN(0); return RGB;}

[-/+{};,#:]			{BEGIN(0); return *yytext;}
[ \t]+				{BEGIN(0); /* ignore whitespace */}
\n				{BEGIN(0); /* ignore whitespace */}
\<\!\-\-			{BEGIN(0); return CDO;}
\-\-\>				{BEGIN(0); return CDC;}
.				{fprintf(stderr, "%d: Illegal character (%d)\n",
				 lineno, *yytext);}

Приложение C: Шифроване(Encoding)

(Това приложение е информативно, а не нормативно)

HTML документите могат да съдържат всеки от около 30,000 различни символа, дефинирани от Unicode. Множество документи биха се използвали само няколко стотици. Множество шрифтове също така само няколко стотици символи. Заедно с глава 5.2, това приложение обяснява начина, по който символите в документа и символите в шрифта биват подбирани.

Енкодиране(шифроване) на символи

Съдържанието на HTML документ представлява поредица от символи и код. За да бъде изпратено "по жицата", то бива шифровано като поредица от байтове, чрез употреба на някои от възможните типове шифроване. HTML документа трябва да бъде дешифрован, за да бъдат намерени символите. Например, в Западна Европа е обичайно да се използва байта 224, за поставяне на вид френско ударение, но в Иврит, е по-често срещана употребата на 224 за т.н. Алеф. В Япония, значението на байта зависи от байтовете, които се намират преди него. При някои типове шифроване, един символ е шифрован като два(или повече) байта.

Браузърът разбира кой метод за дешифриране на байтовете да използва чрез т.н. "charset" параметър в горната част на HTML документа. Най-често срещаните типове шифроване(charset стойности) са "ASCII"(за Англия), "ISO-8859-1"(за Западна Европа), "ISO-8859-8"(за Иврит), "Shift-JIS"(За Япония).

HTML [2][4] позволява употребата на до 30,000 различни символа, а именно тези дефинирани от Unicode. Не са много документите, които ще използват толкова много символи и избора на правилен тип шифроване обикновено ще гарантира, че документа ще се нуждае от само един байт за символ. Случайни символи, които се намират извън шифрования обхват могат да бъдат въвеждани чрез символни кодове: '&#928;' винаги означава гръцката горна буква Pi, независимо от типа на шифроването, което е използвано. Нужно е да се отбележи, че това принуждава браузърите да бъдат подготвени за какъвто и да е Unicode символ, дори и ако те боравят само с няколко типа шифроване.

Шифроване на шрифтовете

Шрифтовете не съдържат символи, а картинки на такива, наречени глифове(glyph)(или шрифтови символи). Шрифтовите символи, под формата на контури и растери, съставят даден тип репрезентация на символа. Дали изрично или не, но всеки шрифт притежава, свързана с него таблица, а именно таблица с шифрования шрифт, която определя това, на кой символ е репрезентация съответния глиф или шрифтов символ. При Type 1 шрифтовете, таблицата бива наричана и енкодиращ вектор.

Всъщност, множество шрифтове съдържат по повече глифове за един и същи символ. Това, кой от тези глифове трябва да бъде използван зависи или от правилата на езика или от предпочитанията на дизайнера.

В арабския, например, всички букви притежават четири различни форми, в зависимост от това дали буквата е използвана в началото, средата, края на думата или просто е изолирана. При всички положения, това ще е един и същи символ и така съществува само един символ в HTML документа, но когато бъде разпечатан изглежда различно всеки път.

Съществуват и шрифтове, които оставят на графичния дизайнер да избере, измежду алтернативните форми, които са достъпни. За нещастие, CSS1 все още не предоставя начин, чрез който да бъдат избирани тези алтернативни форми. Понастоящем, при такива шрифтове се избира винаги формата по подразбиране.

Шрифтови групи

Един шрифт може и да не е достатъчен, за да бъдат показани всички символи в даден документ или дори единичен елемент. За да бъде решен този проблем, CSS1 позволява употребата на шрифтови групи.

Шрифтовите групи в CSS представляват списък от шрифтове с еднакъв размер и стил, които биват тествани един след друг с цел да се провери дали съдържат глиф за определен символ. Елемент, съдържащ текст на английски език и математически символи, може да се нуждае от група от два шрифта, единия от които съдържащ буквите и числата, а другия - математическите символи. Вижте глава 5.2 за подробно описание на механизма зад шрифтовите групи.

Ето и пример за шрифтова група, която е подходяща за текст, в който се очаква да се съдържат латински, японски и математически символи:

BODY { font-family: Baskerville, Mincho, Symbol, serif }

Символите, които са достъпни в шрифта Baskerville(шрифт, съдържащ единствено символи на латиница) ще бъдат взети от този шрифт, японските такива ще бъдат взети от шрифта Mincho, а математическите символи ще бъдат взети от Symbol. Каквито и да са други символи ще(дай боже) дойдат от основното шрифтово семейство на серифните шрифтове('serif'). Шрифтовото семейство 'serif' ще бъде използвано също така и, ако един или повече от останалите шрифтове не са достъпни.

Приложение D: Гама корекция

(това приложение е информативно, а не нормативно)

Вижте обучителния материал за гама в PNG спецификацията[12], ако вече не сте запознати с тази тема.

При изчисленията, браузърите, които работят на CRT монитори, могат да предположат, че CRT е идеален и да игнорират каквито и да са ефекти, на очевидна гама, предизвикани от трептенията на екрана. Това означава, че минималното количество работа, което те ще трябва да свършат на съответните платформи е следното:

PC, използващ MS-Windows
никаква
Unix, използващ X11
никаква
Mac, използващ QuickDraw
трябва да бъде приложена гама стойност 1.39[13] (ColorSync-адаптираните приложения може просто да предадат sRGB ICC профила[14] на ColorSync, за да бъде изпълнена правилната цветова корекция)
SGI, използващ X
трябва да бъде приложена гама стойност от /etc/config/system.glGammaVal (стойността по подразбиране е 1.70; приложенията, които са пуснати на Irix 6.2 или по-висока версия просто подават sRGB ICC профила на системата за работа с цветове)
NeXT, използващ NeXTStep
трябва да бъде приложена гама стойност от 2.22

"Прилагането на гама" означава, че всяка от трите стойности, R, G и B, трябва да бъде конвертирана на Rгама, G'=Gгама, B'=Bгама, преди да бъде предадена на ОС.

Това може да бъде направено по бърз начин, чрез построяване на таблица с 256 елемента при всяко извикване на браузъра, по подобен на показания долу начин:

for i := 0 to 255 do
  raw := i / 255;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end

което избягва нуждата от от употреба на абстрактна математика за всеки цветови атрибут, още по-малко за пикселите.

Приложение Е: Приложимост и възможност за разширение на CSS1

(това приложение е информативно, а не нормативно)

Целта на работата на CSS1 е да бъде създаден прост механизъм за стилови листа за HTML документите. Настоящата спецификация осъществява баланс между нужната простота за реализирането на стиловите листа за уеб и натиска от авторите, за по-голяма възможност за визуален контрол. CSS1 предлага:

  • алтернативи на кода, свързан с визуалните елементи: HTML разширенията, например "CENTER", "FONT" и "SPACER", могат лесно да бъдат заместени от CSS1 стилови листа.
  • по-добре изглеждащ код: вместо да бъдат използвани елементите "FONT", за да се постигне популярния small-caps стил е достатъчна само една декларация в стиловия лист. Сравнете визуалния код:
    <H1>H<FONT SIZE=-1>HEADLINE</FONT></H1>
    

    със следния стилов лист:

    H1 { font-style: small-caps }
    
    <H1>Headline</H1>
    
  • различни нива на интеграция: правилата на CSS1 стиловете могат да бъдат, "вкарани" от външни стилови листа, включени в елемента 'style', или сложени в атрибутите 'style'. Последната възможност предлага по-лесно преминаване от HTML разширенията.
  • нови ефекти: добавени са някои нови визуални ефекти, за да бъдат предложени на потребителите повече нови възможности. В тази категория попадат типографските псевдо-елементи и допълнителните стойности на свойството 'background'.
  • мащабност: CSS1 може да бъде полезен при различни типове оборудване, от текстови терминали, до цветови работни станции, работещи на висока разделителна способност(резолюция). Авторите могат да пишат един стилов лист и да бъдат сигурни, че съответния стилов лист ще бъде визуализиран по възможно най-добрия начин.

CSS1 не предлага:

  • контрол на отделните пиксели: CSS1 цени простотата на нивото на контрол и въпреки, че комбинацията от фонови изображения и стилизиран HTML е мощна, контрола на пикселно ниво не е възможен.
  • авторски контрол: автора не може да принуди читателя да използва определен стилов лист; може само да го предложи
  • език за оформление: CSS1 не предлага възможност за множество колони, в които да се подрежда текста, застъпващи се рамки и т.н.
  • богат език с заявки на парс дървото: CSS1 може да търси единствено предшестващи елементи в парс дървото, докато другите езици за стилови листа(например DSSSL([6])) предлагат пълен език за заявки.

Очакваме появата на разширения за CSS в няколко насоки:

  • хартия: по-добра поддръжка за принтиране(печатане) на HTML документи
  • поддръжка на невизуална медия: самата работа е по процеса на добавяне на списък от свойства и съответните им стойности, които да поддържат говор и браилови изходни устройства.
  • имена на цветовете: текущо поддържания списък от такива може да бъде разширен
  • шрифтове: очаква се по-прецизни системи за спецификация на шрифт да допълнят съществуващите CSS1 шрифтови свойства.
  • стойности, свойства: очакваме от фирмите-производителки да предлагат разширения за списъка със стойности и свойства на CSS1. Разширяването в тази насока ще бъде малко от гледна точка на спецификацията, но проблема с работата на различните браузъри е в сила.
  • език за оформление: поддръжка на двуизмерно оформление в традиционните desktop publishing пакети.
  • други DTD-та: CSS1 има някои части, които са специфични за HTML(например, специалния статут на 'class' и 'id' атрибутите), но би трябвало да бъде лесно разширен, така че да действа и според други DTD също така.

Не очакваме развитието на CSS да доведе до това той да стане:

  • програмен език

Приложение D: Промени спрямо версията от 17 Декември, 1996

(Това приложение е информативно, а не нормативно)

Този документ представлява преработена(подобрена) версия на CSS1 препоръката, която е публикувана за пръв път на 17 декември, 1996 г. и списъка по-долу описва всички промени, които са направени спрямо нея. Чрез избиране на алтернативен стилов лист "errata", всички промени биват маркирани.

Бихме искали да благодарим на Комачи Юши, Стийв Бърн, Лиъм Куйн, Кацутеру Окахаши, Сюзан Ленш и Тантек Селик, за тяхната помощ при подготовката на това ново издание.

Спелуване и типографски грешки

  • typo1 [глава 1.1] Изречението:
    В резултат на това, старите браузъри ще игнорират елемента 'style', но неговото съдържание ще бъде третирано и визуализирано като част от тялото на документа.

    бива променено на:

    В резултат на това, старите браузъри ще игнорират елемента 'style', но неговото съдържание ще бъде третирано и визуализирано като част от тялото на документа.
  • typo2 [глава 1.6] Изречението:
    Вторият селектор подбира подбира всички елементи 'h1', които имат предшественик от клас 'reddish'.

    бива променено на:

    Вторият селектор подбира всички елементи 'h1', които имат предшественик от клас 'reddish'.
  • typo3 [section 2.1] The sentence:
    E.g., a style sheet can legally specify that the 'font-size' of an 'active' link should be larger that a 'visited' link, but the UA is not required to dynamically reformat the document when the reader selects the 'visited' link.

    бел. прев.: превода на тази част от спецификацията е излишен, защото грешките са премахнати ПО ВРЕМЕ на превода.

    E.g., a style sheet can legally specify that the 'font-size' of an 'active' link should be larger than a 'visited' link, but the UA is not required to dynamically reformat the document when the reader selects the 'visited' link.
  • typo4, typo5 [section 2.3-2.4] A trailing quote mark has been added to 'vertical-align'.
  • typo6 [section 4] A missing right parenthesis has been added.
  • typo7 [section 4.1] A missing comma has been added.
  • typo8 [section 4.1.2] The text:
    "If more than one of the three is 'auto', and one of them is 'width', than the others..."

    has been changed to:

    "If more than one of the three is 'auto', and one of them is 'width', then the others..."
  • typo9 [section 5.3.6] The word "Examples" has been capitalized.
  • typo10 [section 5.4.4] An entity gone astray has been corrected (from "<length&t;" to "<length>").
  • typo11 [section 5.5] The text:
    The margin properties properties set the margin of an element.

    has been changed to:

    The margin properties set the margin of an element.
  • typo12 [section 5.5.25] Superfluous quote marks have been removed.

Грешки

  • error1 [section 2.3] A previously invalid declaration (font-style: small-caps) has been replaced by a valid one.
  • error2 [section 4] This sentence:
    CSS1 assumes a simple box-oriented formatting model where each element results in one or more rectangular boxes.

    has been replaced with:

    CSS1 assumes a simple box-oriented formatting model where each formatted element results in one or more rectangular boxes.
  • error3 [section 4.1] In this sentence:
    The top is the top of the object including any padding, border and margin; it is only defined for inline and floating elements, not for non-floating block-level elements.

    the word "object" has been replaced with "element" to use consistent terminology.

  • error4 [section 4.1.3] The alignment of the list items has been corrected.
  • error5 [section 4.1.4] There is only one P element in the example, and this sentence:
    Note that the margin of the 'P' elements enclose the floating 'IMG' element.

    has therefore been corrected to:

    Note that the margin of the 'P' element enclose the floating 'IMG' element.
  • error6, error7 [section 4.5] The window size can only influence one axis of the canvas, either the width or the height.
  • error8 [section 5.4.1] The text inside the parenthesis now refers to a CSS1 property.
  • error9 [section 5.4.1] To correspond with the following paragraph, the example has been corrected.
  • error10 [section 5.4.8] The section "The height of lines" is now correctly identified as section 4.4, not 4.7.
  • error11 [section 5.5] This sentence:
    The 'margin' property sets the border for all four sides while the other margin properties only set their respective side.

    has been corrected to:

    The 'margin' property sets the margin for all four sides while the other margin properties only set their respective side.
  • error12, error13, error14, error15, error16, error17, error18, error19, error20, error22 [section 5.5.1-5.5.10] Percentage values refer to width of the closest block-level ancestor, not the parent element (which can be inline) as previously stated.
  • error21 [section 5.5.10] Shorthand properties don't have initial values, and the previously specified '0' has therefore been corrected.
  • error23 [section 5.5.15] The last rule in the example previously contained an illegal value ('none').
  • error24 [section 5.6.6] The value specification on the 'list-style' property had been corrected, but there are no syntactic or semantic changes.
  • error25 [section 7.1] The numeric character references used to encode the Greek word "kouros" have been corrected.
  • error26 [Appendix A] These element types have been added to the list of selectors attached to the 'display: block' declaration: FORM DL.
  • error27 [Appendix B] A dead link to section 7 has been fixed.
  • error28 [Appendix D] This text:
    "Applying gamma" means that each of the three R, G and B must be converted to R'=Rgamma, G'=Ggamma, G'=Bgamma, before handing to the OS.

    has been changed to:

    "Applying gamma" means that each of the three R, G and B must be converted to R'=Rgamma, G'=Ggamma, B'=Bgamma, before handing to the OS.

Структура и Организация

  • Добавено е приложение F, което изброява всички промени, направени спрямо версията от 17 Декември, 1996.
  • Добавен е параграф в глава Статукво, чрез който се информират читателите относно това, че тази версия е подобрена.
  • Стиловият лист е променен.
  • Справочника за бъдещата HTML спецификация, поддържаща на стилови листа е променен, така че да сочи към HTML 4.0 справочника.
  • URL адресите в раздела за допълнителна информация са обновени, а несъществуващите връзки са премахнати.
  • Основния HTML код е преработен.