Page 162 - Сила CSS3 Освой новейший стандарт
P. 162
162 • Глава 4. Стилизация изображений и ссылок в зависимости от их типа
Перейдите к открывающемуся тегу html на нашей странице и замените его следу-
ющим кодом HTML:
<!--[if lt IE 7 ]><html lang="en" class="ie6"><![endif]-->
<!--[if IE 7 ]><html lang="en" class="ie7"><![endif]-->
<!--[if IE 8 ]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"><![endif]-->
<!--[if gt IE 9]><html lang="en"><![endif]-->
<!--[if !IE]>--><html lang="en"><!--<![endif]-->
Теперь можно добавить правило только для IE 6:
.ie6 ul a {
display: inline-block;
white-space: nowrap;
}
Теперь в IE 6 страница отображается так же, как и во всех остальных браузерах, —
при условии, что использование JavaScript включено. Если на компьютере пользо-
вателя возможности JavaScript отключены, он не увидит значки рядом со ссылками.
Это нормально — с помощью значков мы всего лишь украшаем страницу, это не-
обязательный элемент содержимого. Однако даже когда JavaScript не используется,
IE 6 все равно считывает правило ul a, которое добавляет пустое поле к каждой
ссылке и увеличивает пространство между ними. Чтобы устранить этот дефект,
добавьте селектор атрибута [href] к обоим правилам, ul a и .ie6 ul a:
ul a[href] {
display: block;
min-height: 15px;
padding-left: 20px;
background-repeat: no-repeat;
background-position: 0 3px;
}
.ie6 ul a[href] {
display: inline-block;
white-space: nowrap;
}
Эти правила выбирают все элементы a, находящиеся внутри элементов ul и имеющие
атрибуты href, — а поскольку атрибут href есть у каждого элемента a, эти правила
выбирают те же ссылки, которые они выбирали раньше, до того как мы добавили
селектор атрибутов. Теперь, если JavaScript не используется, браузер IE 6, не распоз-
нающий селекторы атрибутов, попросту игнорирует оба правила — таким образом,
на странице не появляются ненужные поля и остальные элементы стилизации.
Использование библиотек JavaScript
Альтернатива сценарию IE7, который мы только что применили, — использовать
библиотеку или каркас JavaScript со встроенными селекторами атрибутов. Вы до-
бавляете эти селекторы в собственный сценарий и можете реализовать любой же-
лаемый эффект. Недостаток такого подхода заключается в невозможности учесть
www.trk.kg
