В колонке на прошлой неделе я обсуждал сеть разработчиков Yahoo!, уделяя особое внимание функциям JavaScript (особенно календарю), доступным в библиотеке пользовательского интерфейса (YUI). Я хотел потратить немного больше времени на освещение еще одной области библиотеки YUI, предоставляющей инструменты CSS. Эти инструменты позволяют легко комбинировать дизайн на основе CSS с веб-приложениями.
Поддержка браузера
Одной из основных особенностей инструмента CSS является то, что он обеспечивает идеальную поддержку браузеров класса А. Рейтинг поддержки браузеров — это исключительно рейтинг Yahoo!, и вы можете увидеть полное описание на его веб-сайте, которое в основном описывает, как CSS хорошо себя ведет в браузерах, представленных сегодня на рынке.
В этой онлайн-таблице браузеры разделены на три уровня поддержки браузеров (A, C и X). Уровень А — высший уровень поддержки. Используя возможности современных веб-стандартов, библиотека YUI открывает возможности класса А, обеспечивающие расширенную функциональность и визуальное качество. Категории поддержки и связанные файлы дают вам представление о том, где поддерживается CSS, но они должны быть доступны в каждом браузере (с возможными более ранними версиями).
Многоразовый CSS
Библиотека YUI включает три области или функции CSS, охватывающие форматирование, введение шрифтов и макет на основе сетки (столбец и строка). Эти термины используются на веб-сайте для описания этих трех элементов:
Сетки страниц: позволяет встроить от одной до четырех сеток столбцов в пределах емкости используемого вами шаблона.
Шрифты: обеспечивает стандартизацию и контроль кросс-браузерной типографики. В целом он обеспечивает единообразные шрифты и высоту строк, полностью поддерживая пользовательскую настройку шрифтов (внутри браузера).
Сброс: обеспечивает кросс-браузерную стандартизацию назначений по умолчанию элементам HTML. Он также удаляет распространенные выражения по умолчанию в браузерах, такие как использование жирного шрифта для выделенных элементов, чтобы гарантировать, что все определения шрифтов являются преднамеренными, а элементы всегда используются в соответствии с их семантическим значением, а не обычным визуальным выражением.
После установки каждый элемент загрузки библиотеки YUI доступен в следующих каталогах/файлах на веб-сервере:
Сетки страниц : buildgridsgrids.css
Шрифты: buildfontsfonts.css
Сброс: сборка eset eset.css
Вы можете установить эти базовые каталоги на свой собственный веб-сервер или разместить их на своем сайте, чтобы при необходимости можно было ссылаться на них. Важной особенностью CSS (помимо того, что он бесплатен) является то, что он тщательно тестируется и отлаживается перед выпуском. Давайте подробнее рассмотрим инструменты CSS в действии.
Макет страницы в виде сетки
Макет на основе сетки является движущей силой практически любого дизайна сайта или макета страницы. Раньше это часто делалось с помощью таблиц HTML, но CSS обеспечивает огромную мощь и гибкость при макетировании страниц. Page Grid предоставляет код для создания страниц со столбцами и строками в соответствии с вашими требованиями.
На самом базовом уровне сетки страниц он предоставляет семь шаблонов веб-страниц, шесть из которых определяют подробные макеты основного содержимого/панелей инструментов; седьмой шаблон определяет макет без панелей инструментов, а основной контент занимает всю ширину страницы. Имена этих шаблонов следующие:
yui-t1: содержит панель инструментов шириной 160 пикселей слева и основную область шириной 570 пикселей.
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 устанавливается в каталог веб-сервера по умолчанию).
Список А
<html><head>
<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-странице:
Макет отдан на всю страницу — основному тегу div присвоен класс yui-t2. Это показывает, что используется второй шаблон.
Страница разделена на области заголовка, тела и нижнего колонтитула. Заголовку присваивается идентификатор hd, телу — bd, а нижнему колонтитулу — ft.
Основная часть страницы разделена на левую область (если шаблон поддерживает это) и основную область. Обоим присвоен класс yui-b, но к основной области добавляется атрибут идентификатора yui-main в теге div.