Статьи

Методы прогрессивного улучшения 2: CSS

Январь 17, 2019

веб-слои В моей предыдущей статье мы создали элемент управления вкладками, используя Plain Old Semantic HTML (POSH). Это работало во всех браузерах, но не получало никаких дизайнерских наград. Это вторая из трех частей серии, в которой показано, как создать простое поле с вкладками с использованием методов прогрессивного улучшения.

Сочный слой

CSS — это слой веб-страницы, который добавляет макет, стилизацию и фоновую графику на вашу страницу. Хотя свойства CSS хорошо документированы и (в основном) логичны, у устройств будут свои представления о рендеринге. Браузеры, которые вызывают наибольшее горе, — это IE6 и, в меньшей степени, IE7 — оба старые по сравнению с конкурентами, но значительная часть людей продолжает их использовать . Можно преодолеть большинство проблем , но, пожалуйста, помните:

Пиксельное совершенство — это миф!

Если вам нужен точно спроектированный макет, вы должны забыть о сети — вместо этого распространяйте свой шедевр на бумаге или в формате PDF! ИТ-системы сильно различаются: люди используют разные операционные системы, размеры экрана, настройки DPI, шрифты, глубину цвета и браузеры. CSS может только предложить макет — браузер должен интерпретировать ваш код, и он не всегда может делать то, что вы ожидаете. Пользователи редко замечают, что виджет находится в нескольких пикселях от положения, но они будут жаловаться, если функциональность нарушена.

Ненавязчивый CSS

Наш HTML элемент управления вкладками был закодирован для работы в любом браузере. Мы будем использовать CSS для стилизации и улучшения макета, чтобы он выглядел как поле с вкладками, но мы должны быть осторожны, чтобы не повредить нашим усилиям по обеспечению доступности.

Всегда будьте осторожны при реализации любого CSS, который зависит от сценариев. Например, неактивное содержимое в нашей вкладке может быть скрыто с помощью display: none;body свойство. Однако этот контент никогда не появится, если JavaScript отключен. В общем:

  1. Держите свой CSS простым.
  2. Убедитесь, что ваш CSS работает без JavaScript.
  3. Если в вашем JavaScript реализованы изменения стиля, используйте этот сценарий для добавления класса в соответствующие узлы DOM после загрузки страницы. Следовательно, JavaScript-зависимый CSS активируется только в том случае, если скрипт выполняется успешно.

    Например, ваш скрипт может добавить класс «jsenabled» к тегу
    p { ... styles applied always ... }
    body.jsenabled p { ... styles applied when JS executes ... }
     

     
/* tab control CSS: the tabs */
.tabs
{
	position: relative;
	bottom: -1px;
	height: 20px;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.tabs li
{
	display: inline;
	float: left;
	padding: 0;
	margin: 0 0 0 10px;
}

.tabs a
{
	display: block;
	width: 5em;
	height: 18px;
	line-height: 18px;
	text-align: center;
	text-decoration: none;
	color: #555;
	background-color: #ccc;
	border: 1px solid #999;
	outline: 0 none;
}

.tabs a.active, .tabs a:hover, .tabs a:focus, .tabs a:active
{
	color: #222;
	background-color: #fff;
	border-bottom-color: #fff;
}

Обратите внимание, что можно отключить CSS и включить JavaScript. Это менее вероятно, но мы не должны делать предположения о наших пользователях!

Стилизация вкладок

Стили вкладок можно стилизовать с помощью следующего CSS: 

 a

Код перемещает элементы списка влево с полем в 10 пикселей. Селекторы ссылок определяют цвета и границы вкладок. Тег ul

.tabs a.active В этом случае стили будут применяться, когда JavaScript назначит класс «активный» для вкладки.

Область содержимого вкладки оформляется с использованием следующего CSS: 

 
.tabcontent
{
	width: 26em;
	height: 10em;
	margin: 0 0 2em 0;
	border: 1px solid #999;
	overflow: auto;
}

.tabcontent div
{
	height: 10em;
	margin: 0 10px;
}

.tabcontent div h2
{
	padding-top: 10px;
	margin-top: 0;
}

Внешний divoverflow Наши блоки контента (внутренние элементы div

Результатом является поле с вкладками с прокруткой внутренней области. Пользователь может получить доступ к содержимому с помощью полос прокрутки или щелкнув вкладки, чтобы перейти к нужному месту.

Скриншот HTML и CSS

CSS облегчил просмотр контента, и он остается функциональным без JavaScript. Однако он не идеален: активная вкладка не подсвечена, а полосы прокрутки немного неуклюжи для удобного веб-приложения.

В следующем посте мы создадим повторно используемый модуль JavaScript, который добавляет последние улучшения .

Ссылки на ресурсы:

Другие части в этой серии:

Связанное чтение:

33
Share: