Нам всем давно известна простая истина — чем выше уровень программиста, тем чище код. И это не просто прихоти унылых догматиков или треп теорикрафтеров, ведь все гениальное — просто, и чем чище ваш HTML/CSS код, тем проще настраивать проект, искать и исправлять ошибки, вносить изменения и дорабатывать ресурс.
Сегодня мы поговорим об одном из способов уменьшения количества дополнительных элементов, а следственно и классов при верстке.
Чего мы хотим
Давайте представим, что сегодня нам нужно "отверстать" структурный сегмент странички следующего вида:
Ярые поклонники div-ной верстки часто обвиняют автора в странной (а иногда и не совсем здоровой) любви к спискам. Но на самом деле списки имеют несколько преимуществ:
- Можно настроить отображение элемента ul — экономим на одном div-е (обертке).
- Можно задать общие свойства для элементов li, тем самым уменьшить количество строк CSS кода.
- И самое интересное! Задать индивидуальные стили для каждого li !
Исходя из выше сказанного, пример построим на основе списка, причем используем html код в минималистическом стиле:
<ul id="phones"> <li>Телефон1</li> <li> Телефон2</li> <li> Телефон3</li> <li> Корзина</li> </ul>
Алгоритм решения задачи
При решении практических задач, часто бывает необходимо задать индивидуальное оформление — фоновые картинки, цвет текста и тд.
Первое что приходит на ум — присвоить классы (id-шники) элементам списка и поехали… Но просмотрев постановку задачи (Чего мы хотим) приходим к выводу, что такой вариант отпадает.
И тут кстати было бы вспомнить о сестринских селекторах и селекторах «детей».
Путь первый: сестринские элементы
Селектор сетринских элементов предоставит возможность обращаться к каждому конкретному элементу списка. Проверим это на практике.
Создадим документ со следующим содержимым.
HTML:
<!DOCTYPE html> <html> <head> <title>Vaden-pro tricks</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="all" type="text/css" href="./style.css"> </head> <body> <ul id="phones"> <li>(050) 000-00-60</li> <li>(098) 000-00-18</li> <li>(093) 000-00-24</li> <li><a href="#">Корзина</a></li> </ul> </body> </html>
Упрощение html кода непременно приводит к увеличению объема CSS, но в нашем случае это не критично.
Создадим каскадную таблицу стилей style.css и разместим в корневой папке нашего маленького проекта.
CSS:
#phones { display: block; /*Задаем блочное отображение*/ width: 1057px;/*Фиксируем ширину списка*/ margin: 81px auto; /*Центрируем*/ font-size: 99px; /*Задаем размер шрифта*/ list-style: none; /*Убираем марки списка*/ background: #666666; color: white; padding: 49px; -moz-border-radius: 21px; /*Фаска для Мозюки*/ border-radius: 21px;/*Фаска*/ } #phones li { background: url('./operators.png') no-repeat; line-height: 155px; padding-left: 301px; margin-bottom: 39px; color: dodgerblue; } #phones li+li { background: url('./operators.png') 0px -175px no-repeat; color: red; } #phones li+li+li { background: url('./operators.png') 0px -357px no-repeat; color: fuchsia; } #phones li+li+li+li { background: url('./operators.png') 0px -545px no-repeat;} #phones a { border-bottom: 6px dotted black; text-decoration: none; color: gold; } #phones a:hover { border-bottom: none; }
Результатом нашего примера будет такой структурный блок:
Важно!!!
- Универсальность. Такой способ оформления может быть применен к элементам «div», «p» и т.д.
- Кросс-браузерность. Рассмотренный пример показал отменную работоспособность в браузерах, начиная с: IE6, Fx3.5, Op9.5, Sf3.1.
Для обеспечения адекватного отображения в IE6, как Вы уже могли привыкнуть, придется попотеть — создать еще одну каскадную таблицу стилей со следующим содержимым:
ul { z-index: expression( runtimeStyle.zIndex = 1, function(node) { var list = node.childNodes, i = list.length; while(i--) { if(list[i].nodeType == 1) { list[i].className = 'elem-' + i; } } }(this)); ) } .elem-0 { /*Стили для первого элемента списка*/ } .elem-1 { /*Стили для второго элемента списка*/ } .elem-2 { /*Стили для третьего элемента списка*/ } .elem-3 { /*Стили для четвертого элемента списка*/ }
и подключить к страничке условным комментированием.
- Удобность или ложечка дегтя. Метод становится не очень удобным при увеличении количества элементов списка.
Путь второй: «о детях»
Теоретически, поставленную задачу мы уже решили. Но что если нас смущают длинные «новогодние» хороводы вида «li+li+li+li»? Только представьте, какой dance-пол нас ожидает, если количество элементов списка переваливает за 10?
Оптимизировать наш CSS код поможет псевдо-селектор nth-child.
CSS:
#phones { display: block; width: 1057px; margin: 80px auto; font-size: 100px; list-style: none; background: #666666; color: white; padding: 50px; -moz-border-radius: 21px; /*Фаска для Мозюки*/ border-radius: 21px;/*Фаска*/ } #phones li { /*Стили первого элемента*/ } #phones li:nth-child(2) { /*Стили второго элемента*/ } #phones li:nth-child(3) { /*Стили третьего элемента*/ } #phones li:nth-child(4) { /*Стили четвертого элемента*/ } #phones a { border-bottom: 6px dotted black; text-decoration: none; color: gold; } #phones a:hover { border-bottom: none; }
Важно!!!
- Чистота кода. Применение псевдо-селекторов позволяет редуцировать объем кода, что особенно удобно в случае использования списков со значительным количеством элементов.
- Кросс-браузерность. Наши старания с nth-child будут бесполезными, если клиент пользуется браузерами, включительно до: IE8, Op9.5, Fx3.5. Если раритетные браузеры не попадают в сектор вашей целевой аудитории — не обращайте внимания на данный пункт.
