В моих предыдущих статьях мы обсуждали прогрессивное улучшение и почему это вообще лучший выбор, чем постепенная деградация . Это первая из трех частей серии, в которой показано, как создать простую вкладку с использованием методов прогрессивного улучшения.
Слои веб-страницы
Веб-страницы построены в три слоя:
- HTML определяет содержание и структуру документа
- CSS определяет макет и стиль — он улучшает HTML
- JavaScript определяет функциональность страницы, такую как проверка формы на стороне клиента, анимация и эффекты — он может улучшить как HTML, так и CSS
HTML — единственный слой, на который вы можете положиться с уверенностью. Большинство браузеров отображают что-то — даже если вы предоставляете контент XHTML 1.1 на устройство, которое поддерживает только HTML 3.2.
Большинство браузеров предлагают CSS, но уровень поддержки варьируется. Пользователи могут отключить CSS или указать свои собственные таблицы стилей по своему предпочтению. Некоторые браузеры, такие как программы чтения с экрана или Lynx, могут полностью игнорировать ваш CSS.
Наконец, JavaScript — наименее надежный технологический слой. Большинство браузеров поддерживают JavaScript, но механизмы интерпретатора отличаются, и многие люди отключают язык по соображениям безопасности. Вероятность того, что у пользователя будет JavaScript, будет варьироваться от сайта к сайту, но, как правило, до 5% посетителей не имеют включенных сценариев.
POSH Контент
POSH — это сокращение от «Plain Old Semantic HTML». Этот термин был придуман сообществом микроформатов , но это полезная концепция для всех разработчиков, которые стремятся создать хорошо структурированный, доступный, семантический и корректный HTML:
- используйте семантические элементы и атрибуты, например,
h1ptable - при необходимости используйте семантический идентификатор и имена классов
- использовать самый простой и наименьший объем HTML
- подтвердите свой код.
В следующем примере мы создадим вкладку. Код представляет собой простой виджет только на стороне клиента, но те же концепции могут быть адаптированы на протяжении всей разработки. Почти любой элемент управления, который вы можете себе представить, будет иметь эквивалент POSH.
Создание вкладки HTML
На самом базовом уровне поле с вкладками представляет собой список ссылок на странице на связанный контент. Поэтому структура HTML может быть определена следующим образом:
<!-- tabs (links) -->
<ul class="tabs">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<!-- tab content -->
<div class="tabcontent">
<div id="tab1">
<h2>Tab 1 Content</h2>
<p>This example uses progressive enhancement techniques to create a tabbed content box.</p>
</div>
<div id="tab2">
<h2>Tab 2 Content</h2>
<p>The control will work without CSS and JavaScript if necessary. Even a text-only browser such as Lynx will work.</p>
</div>
<div id="tab3">
<h2>Tab 3 Content</h2>
<p>For the best experience, users should use IE6+, Firefox 2+, Opera 9+, Safari 3+ or Chrome 1+ and have JavaScript enabled.</p>
</div>
</div>
Эта страница должна работать практически в любом веб-браузере с поддержкой HTML 4.01 или XHTML 1.0. Старые браузеры будут продолжать отображать контент, даже если ссылки не работают должным образом.
Замечания:
Сторонники семантического HTML укажут, что код не соответствует правилам POSH, потому что он страдает от DIV-itis. Я согласен — ни один из DIV не требуется для содержания. Они были добавлены, потому что это позволит нам создать лучшее решение только для CSS и упростить наш код JavaScript.
В идеальном мире ваш HTML-код будет простым и безразличным к макету или функциональности. К сожалению, веб-разработка не идеальна, и часто приходится идти на компромиссы. Добавление одного или двух дополнительных тегов для хуков CSS или JavaScript не приведет к дестабилизации сети; просто не делайте это без необходимости.
В моем следующем посте мы добавим слой CSS, чтобы сделать его красивее и улучшить удобство использования, не оказывая негативного влияния на функциональность.
Ссылки на ресурсы:
Другие части в этой серии:
- Методы прогрессивного улучшения 1: HTML
- Методы прогрессивного улучшения 2: CSS
- Методы прогрессивного улучшения 3: JavaScript
Связанное чтение: