© 1999—2000 W3C (MIT, INRIA, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply.
Здесь объясняются приемы создания доступных каскадных таблиц стилей (CSS), определенных рекомендациями W3C «CSS Level 1» [CSS1] и «CSS Level 2» [CSS2]. Этот документ создан для того, чтобы помочь авторам веб-контента, которые хотят достичь соответствия правилам «Руководства по созданию доступного веб-контента» («Web Content Accessibility Guidelines 1.0») [WCAG10], однако перечисленные здесь приемы не гарантируют полной доступности контента и не могут считаться единственным направлением в обеспечении доступности.
Текст входит в серию публикаций по приемам создания доступного веб-контента, информацию о других документах в серии вы найдете в [WCAG10-TECHS].
Примечание. Здесь содержится ряд примеров, которые показывают доступные решения в CSS, но и также плохие примеры, показывающие, что разработчики контента делать не должны. Плохие примеры особо выделены и читатели должны относиться к ним с осторожностью.
Данная версия от 6 ноября 2000 г. была издана для исправления некоторых устаревших ссылок. Она является публикацией в серии заметок, разработанных и одобренных рабочей группой WCAG, но она не выносилась на рассмотрение и утверждение другими членами W3C. Набор документов заменяет один прежний текст Techniques for Web Content Accessibility Guidelines 1.0, темы прежней публикации были распределены по документам о конкретных технологиях.
Хотя рекомендация WCAG 1.0 [WCAG10] является стабильным документом, этот набор взаимодополняющих текстов предполагается редактировать по мере изменения технологий и появления более эффективных приемов по созданию доступного веб-контента.
Доступны история изменений в серии публикаций и список открытых и решенных задач. Просим читателей оставлять комментарии по поводу документа и предлагать решения открытых задач. Пожалуйста, направляйте подробные комментарии по поводу этого документа на адрес рабочей группы w3c-wai-gl@w3.org; архив комментариев находится в открытом доступе.
Только английская версия этой спецификации является нормативной, но могут быть доступны переводы документа.
Список известных ошибок в тексте оригинала доступен по ссылке http://www.w3.org/WAI/GL/WAI-WEBCONTENT-ERRATA. Замечания по английскому тексту направляйте по адресу wai-wcag-editor@w3.org.
Web Accessibility Initiative (WAI) консорциума WWW (W3C) создает различные ресурсы о доступности веб-контента. Это руководство создано в рамках WAI Technical Activity. Цели рабочей группы WCAG объяснены в ее уставе.
Список текущих рекомендаций W3C и других технических документов вы можете найти по адресу http://www.w3.org/TR/.
Проверочные пункты в этом разделе: 14.3 Создайте для страниц общий стиль представления [III приоритет].
Проверочный пункт в этом разделе: 11.2. Избегайте устаревших приемов в технологиях W3C [II приоритет].
В целях обеспечения пользовательского контроля над стилями, CSS2 меняет семантику оператора !important, определенного в CSS1. В CSS1 авторы всегда имеют последнее слово в отношении стилей. В CSS2, если таблица стилей пользователя содержит !important, она имеет приоритет над любым применимым правилом в таблице стилей автора. Это важная возможность для пользователей, которые требуют или должны избегать конкретные сочетания цветов или контрастов, пользователей, которым необходимы большие размеры шрифтов, и т. д. Например, следующее правило задает большой размер шрифта для текста параграфа и отменяет правило автора равного веса:
Пример.
P { font-size: 24pt ! important }
Значение CSS2 inherit, которое может принимать любое свойство, позволяет сократить использование правил !important, касающихся всего или почти всего документа. Например, следующий стиль делает фон каждого объекта белым, а цвет текста — черным:
Пример.
/* Установить черный текст
и белый фон для тела документа. */
BODY {
color: black ! important ;
background: white ! important
}
/* Наследовать значения color и background
всеми другими элементами, усилив правило
при помощи !important. Обратите внимание,
это можно по-прежнему переопределить более
конкретными пользовательскими стилями */
* {
color: inherit ! important ;
background: inherit ! important
}
CSS2 также включает следующие возможности пользовательского контроля:
color, background-color, border-color и outline-color) и шрифты (для font) означают, применяют к веб-документу настройки системы пользователя.outline) позволяют пользователям (например, с плохим зрением) создавать вокруг контента рамки, которые не влияют на верстку, но подсвечивают информацию.Например, для рисования жирной черной линии вокруг элемента, на который наведен фокус и красной вокруг активного элемента, можно использовать следующие правила:
Пример.
:focus { outline: thick solid black }
:active { outline: thick solid red }
Проверочные пункты в этом разделе: 3.4. Используйте относительные единицы измерения вместо абсолютных в значениях атрибутов языка разметки и свойств таблицы стилей [II приоритет].
Приемы:
em.3em от верхней границы содержащего его элемента. Это фиксированное расстояние, но оно зависит от текущего размера шрифта, так что размер шрифта успешно меняется.Пример.
Используйте em для установки размеров шрифта, например:
H1 { font-size: 2em }
вместо
H1 { font-size: 12pt }
Конец примера.
Пример.
Используйте относительные единицы измерения и процентные отношения.
BODY { margin-left: 15%; margin-right: 10%}
Конец примера.
Пример.
Используйте абсолютные единицы измерения, только если известны физические характеристики выходных объектов.
.businesscard { font-size: 8pt }
Конец примера.
Проверочные пункты в этом разделе:
Приемы:
background-image, list-style или content).CSS2 включает несколько средств, позволяющих создавать контент:
:before и :after, свойство content в сочетании позволяют авторам вставлять маркеры (например, счетчики и постоянные строки вроде «Конец примера» в примерах ниже) до или после содержимого элемента.cue, cue-before и cue-after позволяют пользователям воспроизводить звуки до и после содержимого элемента.LI); CSS2 добавляет дополнительные стили к тем, что определены в CSS1, см. свойства list-style-type и content.Сгенерированный контент может служить отметками, помогающими пользователям осуществлять навигацию по документу и не терять свое положение, если недоступны визуальные ключи к содержимому вроде пропорциональных линеек прокрутки, кадрам с оглавлением, и так далее.
Например, следующая пользовательская таблица стилей будет генерировать слова «Конец примера» после каждого примера, выделенного в документе специальным значением класса:
Пример.
DIV.example:after {
content: Конец примера
}
Также пользователи могут, например, нумеровать параграфы, так чтобы можно было найти свое положение при чтении документа:
Пример.
P:before {
content: counter(paragraph) ". " ;
counter-increment: paragraph
}
Проверочные пункты в этом разделе: 11.2. Избегайте устаревших возможностей технологий W3C [II приоритет].
Приемы:
font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, и font-weight.font, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant и font-weight.FONT, BASEFONT, face и size.BIG и SMALL, которые не считаются нежелательными.Пример.
Указывайте общий шрифт в качестве запасного варианта:
BODY { font-family: "Gill Sans", sans-serif }
Конец примера.
Пример.
<STYLE type="text/css">
P.important { font-weight: bold }
P.less-important { font-weight: lighter; font-size: smaller }
H2.subsection { font-family: Helvetica, sans-serif }
</STYLE>
Конец примера.
Проверочные пункты в этом разделе: 7.2. Пока пользовательские агенты позволяют пользователям контролировать мигание, не используйте мигающий контент (такой, который меняет оформление с постоянной частотой, например, показывает и скрывает элементы) [II приоритет].
Для применения к тексту стилей используйте следующие свойства CSS2:
text-transform (верхний, нижний и написание с большой буквы).text-shadow.text-decoration.Примечание. Если используется мигающий контент (например, заголовок, появляющийся и пропадающий через одинаковые промежутки времени), предоставьте способ остановки мигания. В CSS мигание задается с text-decoration: blink и может отменяться при помощи переопределения правил в пользовательских таблицах стилей. Не используйте элементы BLINK и MARQUEE — они не входят ни в одну спецификацию HTML от W3C (то есть, не являются стандартными).
Проверочные пункты в этом разделе: 3.3. Используйте таблицы стилей для контролирования верстки и представления [II приоритет].
Разработчики контента должны использовать таблицы стилей для оформления текста, а не представлять текст изображениями. Использование текста вместо изображений делает информацию доступной для большего числа пользователей (с синтезаторами речи, дисплеями Брайля, графическими дисплеями, и так далее). Использование CSS также позволит пользователям с большей легкостью менять стили авторов, цвета и размеры шрифта.
Если для создания текстовых эффектов необходимо использовать растровые изображения (особый шрифт, преобразование, тени и т. д.), растр должен быть доступным (см. разделы текстовые заменители и альтернативные страницы).
Пример.
В этом примере вставленное изображение показывает большие красные буквы «пример», и сделано доступным при помощи атрибута alt.
<P>Вот <IMG src="BigRedExample.gif" alt="пример"> того, что мы имеем в виду. </P>
Конец примера.
Проверочные пункты в этом разделе: 3.3. Используйте таблицы стилей для контролирования верстки и представления [II приоритет].
Следующие свойства CSS2 можно использовать для контроля форматирования и позиции текста:
text-indent. Не используйте BLOCKQUOTE или любой другой структурный элемент для создания текстового отступа.letter-spacing, word-spacing. Например, вместо того, чтобы писать «П Р И В Е Т» (что пользователи, в основном, воспримут как слово «привет», но услышат как отдельные буквы), авторам следует создать тот же визуальный эффект при помощи свойства letter-spacing, примененного к тексту «ПРИВЕТ». Текст без пробелов будет более эффективно преобразован в речь.white-space влияет на обработку пробелов в содержимом элемента.direction, unicode-bidi.:first-letter и :first-line позволяют ссылаться на первую букву и первую строку абзаца.Следующий пример показывает, как использовать таблицы стилей для создания эффекта буквицы:
Пример.
<HEAD>
<TITLE>Drop caps</TITLE>
<STYLE type="text/css">
.dropcap { font-size : 120%; font-family : Helvetica }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="dropcap">Ж</SPAN>или-были…
</BODY>
Примечание. На момент написания документа псевдоэлемент CSS :first-letter не поддерживается широко.
Проверочные пункты в этом разделе:
Приемы:
Пример.
Используйте числовые значения, а не названия цветов:
H1 {color: #808000}
H1 {color: rgb(50%,50%,0%)}
Конец примера.
Плохой пример.
H1 {color: red}
Конец примера.
Используйте следующие свойства CSS для задания цветов:
color для цвета текста,background-color для цвета фона,border-color, outline-color для цветов рамок;:link, :visited, :active.Убедитесь, что цвета фона и переднего плана хорошо контрастируют. Если указываете цвет переднего плана, всегда указывайте также и цвет фона (и наоборот).
Проверочные пункты в этом разделе:
Убедитесь, что информация представляется не только цветом. Например, если вы зарашиваете пользовательский ввод, не пишите «Пожалуйста, выберите элементы, помеченные зеленым». Помимо этого, сделайте информацию доступной через другие стилевые эффекты (например, шрифтов) и через контекст (например, развернутые текстовые ссылки).
Например, в этом документе примеры оформлены по умолчанию (таблицами стилей) следующим образом:
display: none. Для пользовательских агентов, которые не поддерживают таблицы стилей, или где таблицы стилей отключены, этот текст поможет установить конец примера для читателей, которые не могут видеть рамку вокруг примера.Быстрый тест. Для проверки, работает ли документ без цветов, просмотрите его на монохромном мониторе или браузере с отключенными цветами. Также попробуйте включить цветовую схему с черным, белым и четырьмя безопасными серыми цветами и проверьте, что страница остается доступной.
Для проверки того, что цветовой контраст достаточен для восприятия людьми с ослабленным восприятием цвета и обладателями мониторов с малой разрешающей способностью, для печати на черно-белом принтере (где фон и цвета представляются оттенками серого). Также попробуйте печатать и снова копировать документ в два-три приема для проверки того, как ухудшается качество. Это покажет вам, где нужно добавить дополнительные акценты (например, гиперссылки на веб-страницах принято подчеркивать), или где акценты слишком слабы и неразличимы.
Для дальнейшей информации о цветах и контрастах обратитесь к [LIGHTHOUSE].
Проверочные пункты в этом разделе:
Разработчикам контента рекомендуется использовать UL для неупорядоченных списков и OL для упорядоченных (то есть использовать присущую разметку) совместно с CSS для предоставления контекстных связей.
Следующая таблица стилей CSS2 показывает, как использовать составную нумерацию вложенных списков, созданных с UL или OL. Элементы нумеруются с «1», «1.1», «1.1.1», и так далее.
Пример.
<STYLE type="text/css">
UL, OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }
</STYLE>
Конец примера.
Пока пользовательскими агентами не будет широко поддерживаться CSS2, либо программы не будут позволять пользователям влиять на отображение списков другими методами, авторам следует предоставить контекстную связь во вложенных списках. Приведенный ниже механизм CSS1 показывает, как спрятать конец списка, если таблицы стилей включены, и сделать видимым, если стили не применены, когда пользовательские таблицы стилей изменяют механизм сокрытия, либо когда CSS не поддерживаются.
Пример.
<STYLE type="text/css">
.endoflist { display: none }
</STYLE>
<UL>
<LI>Бумага:
<UL>
<LI>Конверты
<LI>Бумага для заметок
<LI>Бланки
<LI>Плакаты
<span class="endoflist">(Конец списка бумаги)</span>
</UL>
<LI>Пишущие принадлежности:
<UL>
<LI>Синие ручки
<LI>Маркеры
<span class="endoflist">(Конец списка пишущих принадлежностей)</span>
</UL>
<LI>Приспособления для скрепления бумаги:
<UL>
<LI>Скрепки
<LI>Скобы
<LI>Завязки
<span class="endoflist">(Конец списка приспособлений
для скрепления бумаги)</span>
</UL>
<span class="endoflist">(Конец списка офисных принадлежностей)</span>
</UL>
Конец примера.
Примечание. Этот пример не поможет в случае вложения списков в элементы списков. Приложив немного больше усилий, автор может добавить схожую разметку в конец каждого элемента списка.
Проверочные пункты в этом разделе:
Верстку, позиционирование, разбиение на слои и выравнивание следует делать при помощи таблиц стилей (в частности, с использованием плавающих блоков и абсолютного позиционирования CSS):
text-indent, text-align, word-spacing, font-stretch позволяют контролировать отступы без добавления их в разметку. Используйте text-align: center вместо устаревшего элемента CENTER.margin, margin-top, margin-right, margin-bottom, margin-left могут создавать пробелы по четыре стороны от содержимого элемента без использования неразрывных пробелов ( ).float, position, top, right, bottom, left могут управлять визуальным расположением практически каждого элемента независимо от того, где он указан в документе. Авторам следует создавать документы, которые передают смысл и без таблиц стилей (то есть, содержимое должно следовать в логическом порядке), и потом уже применять стили для достижения визуальных эффектов. Свойства позиционирования могут быть использованы для создания примечаний на полях (которые можно автоматически нумеровать), боковых панелей, эффектов кадров, простых заголовков и колонтитулов, и т. д.empty-cells позволяет рисовать рамки вокруг пустых ячеек таблиц; пустые ячейки не должны заполняться пробелами лишь для создания визуальных эффектов.Предоставьте текстовые заменители для всех изображений, включая невидимые и прозрачные.
Если разработчики контента не могут использовать таблицы стилей и вынужденны использовать невидимые или прозрачные изображения (например, с IMG) в верстке, они должны указать для них alt="".
Плохой пример.
Авторы не должны использовать пробелы в значениях alt для создания отступов между словами на случай, если изображения не загружены:
В моем стихотворении здесь <IMG src="10pttab.gif" alt=" "> нужно поставить большой отступ
В следующем примере изображение используется для задания определенной позиции другой графики:
<IMG src="spacer.gif" alt="spacer"> <IMG src="colorfulwheel.gif" alt="Колесо фортуны">
Конец примера.
Проверочные пункты в этом разделе: 6.1. организуйте документы таким образом, чтобы их можно было читать без таблиц стилей [I приоритет].
Линейки и рамки могут служить разделителями для видящих пользователей, но разделяющая роль не может сохраняться вне визуального контекста.
Используйте эти свойства CSS для определения стилей рамок:
border, border-width, border-style, border-color.border-spacing и border-collapse для таблиц.outline, outline-color, outline-style, и outline-width для динамических обводок.Для создания линеек и рамок авторы должны использовать таблицы стилей.
Пример.
В этом примере элемент H1 будет иметь красную верхнюю границу толщиной 2 пикселя, отделенную от контента на 1em:
<HEAD>
<TITLE>Redline with style sheets</TITLE>
<STYLE type="text/css">
H1 { padding-top: 1em; border-top: 2px red }
</STYLE>
</HEAD>
<BODY>
<H1>Глава 8. Слуховые и тактильные устройства</H1>
</BODY>
Конец примера.
Если линейка (т.
е. элемент HR) используется для обозначения структуры, убедитесь, что структура также выделяется невизуальным средствами (например, в разметке).
Пример.
В этом примере элемент DIV используется для создания панели навигации, включающей горизонтальный разделитель.
<DIV class="navigation-bar"> <HR> <A rel="Next" href="next.html">[Следующая страница]</A> <A rel="Previous" href="previous.html">[Предыдущая страница]</A> <A rel="First" href="first.html">[Первая страница]</A> </DIV>
Конец примера.
Проверочные пункты в этом разделе: 6.1 организуйте документы таким образом, чтобы их можно было читать без таблиц стилей [I приоритет].
Используя свойства позиционирования CSS2, контент можно отобразить в любом месте пользовательского экрана. Порядок появления элементов на экране может отличаться от их порядка следования в исходном документе. Следующий пример показывает некоторые принципы:
TABLE для создания такого же эффекта использовать нельзя.Обратите внимание, для каждого позиционируемого объекта определен класс. В этих примерах вместо class можно использовать id. class использован потому, что в реальном случае объекты повторяются и не уникальны.
Плохой пример.
<head><style type="text/css">
.menu1 { position: absolute; top: 3em; left: 0em;
margin: 0px; font-family: sans-serif;
font-size: 120%; color: red; background-color: white }
.menu2 { position: absolute; top: 3em; left: 10em;
margin: 0px; font-family: sans-serif;
font-size: 120%; color: red; background-color: white }
.item1 { position: absolute; top: 7em; left: 0em; margin: 0px }
.item2 { position: absolute; top: 8em; left: 0em; margin: 0px }
.item3 { position: absolute; top: 9em; left: 0em; margin: 0px }
.item4 { position: absolute; top: 7em; left: 14em; margin: 0px }
.item5 { position: absolute; top: 8em; left: 14em; margin: 0px }
#box { position: absolute; top: 5em; left: 5em }
</style></head>
<body>
<div class="box">
<span class="menu1">Продукты</span>
<span class="menu2">Адреса</span>
<span class="item1">Телефоны</span>
<span class="item2">Компьютеры</span>
<span class="item3">Переносные MP3-плееры</span>
<span class="item5">Висконсин</span>
<span class="item4">Айдахо</span>
</div>
</body>
Конец примера.
Когда применятся таблицы стилей, текст размещается в двух колонках. Элементы класса menu1 (Продукты) и menu2 (Адреса) становятся заголовками колонок. «Телефоны, Компьютеры, Переносные MP3-плееры» перечисляются в колонке продуктов, в «адресах» будет написано «Висконсин» и «Айдахо».
Когда таблицы стилей не применены, весь текст появляется в одной строке слов «Продукты Адреса Телефоны Компьютеры Переносные MP3-плееры Висконсин Айдахо». Они появляются в порядке, в котором записаны в исходном документе, а значит то, что появляется в качестве заголовков колонок, если таблицы стилей применены, будет первыми фразами, так как они определены в исходной разметке первыми.
Следующий пример показывает, как то же самое визуальное представление можно создать в браузере, поддерживающем таблицы стилей, а также создать более осмысленное представление, если стили не применены. К содержимому можно применить структурную разметку (списки определений). Обратите внимание, что нулевые отступы указаны явно, так как в браузерах HTML списки определений отображаются с отступом.
Пример.
<head><style type="text/css">
.menu1 { position: absolute; top: 3em; left: 0em;
margin: 0px; font-family: sans-serif;
font-size: 120%; color: red; background-color: white }
.menu2 { position: absolute; top: 3em; left: 10em;
margin: 0px; font-family: sans-serif;
font-size: 120%; color: red; background-color: white }
.item1 { position: absolute; top: 7em; left: 0em; margin: 0px }
.item2 { position: absolute; top: 8em; left: 0em; margin: 0px }
.item3 { position: absolute; top: 9em; left: 0em; margin: 0px }
.item4 { position: absolute; top: 7em; left: 14em; margin: 0px }
.item5 { position: absolute; top: 8em; left: 14em; margin: 0px }
#box { position: absolute; top: 5em; left: 5em }
</style></head>
<body>
<div class="box">
<dl>
<dt class="menu1">Продукты</dt>
<dd class="item1">Телефоны</dd>
<dd class="item2">Компьютеры</dd>
<dd class="item3">Переносные MP3-плееры</dd>
<dt class="menu2">Адреса</dt>
<dd class="item4">Айдахо</span>
<dd class="item5">Висконсин</span>
</dt>
</dl>
</div>
</body>
Конец примера.
Когда таблицы стилей применены, это выглядит как прежде. Однако если стили не обработаны, текст появляется не в строке слов, а списке определений. То, что было заголовками колонок, появится в виде определяемых терминов.
Проверочные пункты в этом разделе: 7.3. Пока пользовательские агенты не позволяют пользователям останавливать движущийся контент, избегайте в страницах движения [II приоритет]:
Проверочные пункты в этом разделе: 11.3. Предоставьте такую информацию, чтобы пользователи могли получать документы в соответствии со своими настройками (такими как язык, тип содержимого и т. д.) [III приоритет].
Звуковые свойства CSS2 предоставляют информацию для незрячих пользователей и пользователей голосовых браузеров примерно так же, как шрифты предоставляют визуальную информацию. Следующий пример показывает, как различные параметры звука (включая voice-family, что подобно аудио-шрифту) могут показать пользователю, что произнесенный текст относится к заголовку:
Пример.
H1 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("ping.au")
}
Следующие звуковые свойства входят в CSS2:
volume определяет громкость произносимого текста.speak определяет, будут ли произнесены слова и как они будут произнесены.pause, pause-before и pause-after задает паузы до и после произнесения содержимого. Это позволяет разделять содержимое для лучшего восприятия.cue, cue-before и cue-after определяет звук, воспроизводимый до и после контента, который может служить для ориентирования пользователя (во многом как визуальное изображение).play-during определяет фоновые звуки при воспроизведении элемента (во многом это напоминает фоновые изображения).azimuth и elevation задают характеристики звука, по которым пользователи, например, могли бы различать голоса.speech-rate, voice-family, pitch, pitch-range, stress и richness определяют качество произносимого текста. Подстроив эти параметры, можно четко определить манеру звукового представления.speak-punctuation и speak-numeral задают, как будут произноситься числа и знаки пунктуации, что влияет на качество восприятия звукового представления.Кроме того, свойство speak-header определяет, как произносится информация в заголовке таблицы до содержимого ячейки.
Проверочные пункты в этом разделе: 11.3. Предоставьте такую информацию, чтобы пользователи могли получать документы в соответствии со с своими настройками (такими как язык, тип содержимого и т. д.) [III приоритет].
CSS2 предоставляет доступ к альтернативным представлениям контента, указанным в значениях атрибутов, при совместном использовании следующих элементов:
attr() и свойство content:before и :afterВ следующем примере значение атрибута alt элемента IMG обрабатывается после изображения (визуально, в звуке и т. д.):
Пример.
IMG:after {
content: attr(alt)
}
Обратите внимание, что значение атрибута отображается даже если не показано само изображение (например, пользователь отключил изображения в настройках браузера).
Проверочные пункты в этом разделе: 11.3. Предоставьте такую информацию, чтобы пользователи могли получать документы в соответствии со с своими настройками (такими как язык, тип содержимого и т. д.) [III приоритет].
Типы устройств CSS2 (используемые с правилами @media) позволяют авторам и пользователям разрабатывать таблицы стилей, которые позволяют корректно обрабатывать документы на конкретных целевых устройствах. Эти таблицы стилей могут приспосабливать контент для представления на устройствах Брайля, голосовых синтезаторах, телетайпах. С правилами @media можно уменьшить скорость загрузки, позволив пользовательским агентам игнорировать неприменимые правила.
Последние версии любой спецификации W3C можно найти в перечне технических отчетов W3C по адресу http://www.w3.org/TR/.
Примечание. W3C не гарантирует стабильность ссылок на ресурсы. Ссылки приведены для удобства. Ссылки на продукты не являются продвижением продуктов.