Поддержка браузера Одной из основных особенностей инструмента CSS является то, что он обеспечивает идеальную поддержку браузеров класса А. Рейтинг поддержки браузеров — это исключительно рейтинг Yahoo!, и вы можете увидеть полное описание на его веб-сайте, которое в основном описывает, как CSS хорошо себя ведет в браузерах, представленных сегодня на рынке. В этой онлайн-таблице браузеры разделены на три уровня поддержки браузеров (A, C и X). Уровень А – это высший уровень поддержки. Используя возможности современных веб-стандартов, библиотека YUI обнаруживает, что интерфейс класса А обеспечивает расширенную функциональность и визуальную точность. Категории поддержки и связанные файлы дают вам представление о том, где поддерживается CSS, но они должны быть доступны в каждом браузере (с возможными более ранними версиями). Многоразовый CSS Библиотека YUI включает три области или функции CSS, охватывающие форматирование, введение шрифтов и макет на основе сетки (столбец и строка). Эти термины используются на веб-сайте для описания этих трех элементов: Сетки страниц: позволяет встраивать сетки от одного до четырех столбцов в пределах емкости используемого вами шаблона. Сетки страниц: buildgridsgrids.css Макет страницы в виде сетки Макет на основе сетки является движущей силой практически любого дизайна сайта или макета страницы. Раньше это часто делалось с помощью таблиц HTML, но CSS обеспечивает огромную мощь и гибкость при макетировании страниц. Page Grid предоставляет код для создания страниц со столбцами и строками в соответствии с вашими требованиями. На самом базовом уровне сетки страниц он предоставляет семь шаблонов веб-страниц, шесть из которых определяют подробные макеты основного содержимого/панелей инструментов; седьмой шаблон определяет макет без панелей инструментов, а основной контент занимает всю ширину страницы. Имена этих шаблонов следующие: yui-t1: содержит панель инструментов шириной 160 пикселей слева и основную область шириной 570 пикселей. Список А <html><head> Макет отдан на всю страницу — основному тегу div присвоен класс yui-t2. Это показывает, что используется второй шаблон.
Шрифты: обеспечивает стандартизацию и контроль кросс-браузерной типографики. В целом, он обеспечивает единообразные шрифты и высоту строк, полностью поддерживая пользовательскую настройку шрифтов (внутри браузера).
Сброс: обеспечивает кросс-браузерную стандартизацию назначений по умолчанию элементам HTML. Он также удаляет распространенные выражения по умолчанию в браузерах, такие как использование жирного шрифта для выделенных элементов, чтобы гарантировать, что все определения шрифтов являются преднамеренными, а элементы всегда используются в соответствии с их семантическим значением, а не обычным визуальным выражением.
После установки каждый элемент загрузки библиотеки YUI доступен в следующих каталогах/файлах на веб-сервере:
Шрифты: buildfontsfonts.css
Сброс: сборка eset eset.css
Вы можете установить эти базовые каталоги на свой собственный веб-сервер или разместить их на своем сайте, чтобы при необходимости можно было ссылаться на них. Важной особенностью CSS (помимо бесплатности) является то, что перед выпуском он тщательно тестируется и отлаживается. Давайте подробнее рассмотрим инструменты CSS в действии.
yui-t2: содержит панель инструментов шириной 180 пикселей слева и основную область шириной 550 пикселей.
yui-t3: содержит панель инструментов шириной 300 пикселей слева и основную область шириной 430 пикселей.
yui-t4: содержит панель инструментов шириной 180 пикселей справа и основную область шириной 550 пикселей.
yui-t5: содержит панель инструментов шириной 240 пикселей справа и основную область шириной 490 пикселей.
yui-t6: содержит панель инструментов шириной 300 пикселей справа и основную область шириной 430 пикселей.
yui-t7: содержит основную область шириной 750 пикселей и не содержит панелей инструментов.
Вы можете комбинировать (или редактировать, если у вас хватит смелости) эти шаблоны в соответствии с вашими целями. В листинге A для макета страницы используется первый макет (примечание: инструмент CSS устанавливается в каталог веб-сервера по умолчанию).
<title>Пример 1 инструментов Yahoo CSS</title>
<link rel="stylesheet" type="text/css" href="build/grids/grids.css">
</голова>
<тело>
<div id="doc" class="yui-t2">
<div id="hd">Заголовок страницы</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">Основная область</div>
</div><div class="yui-b">Левый столбец</div>
</div>
<div id="ft">Нижний колонтитул страницы</div>
</div></body></html>
Несколько примечаний к HTML-странице:
Страница разделена на области заголовка, тела и нижнего колонтитула. Заголовку присваивается идентификатор hd, телу — bd, а нижнему колонтитулу — ft.
Основная часть страницы разделена на левую область (если шаблон поддерживает это) и основную область. Обоим присвоен класс yui-b, но к основной области добавляется атрибут идентификатора yui-main в теге div.