Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Оформляем теги без дополнительных классов

Раздел: 

Нам всем давно известна простая истина — чем выше уровень программиста, тем чище код. И это не просто прихоти унылых догматиков или треп теорикрафтеров, ведь все гениальное — просто, и чем чище ваш 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;
  }

Результатом нашего примера будет такой структурный блок:

Пример2

Важно!!!

  1. Универсальность. Такой способ оформления может быть применен к элементам «div», «p» и т.д.
  2. Кросс-браузерность. Рассмотренный пример показал отменную работоспособность в браузерах, начиная с: 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 {
    /*Стили для четвертого элемента списка*/
    }

    и подключить к страничке условным комментированием.

  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;
  }

Важно!!!

  1. Чистота кода. Применение псевдо-селекторов позволяет редуцировать объем кода, что особенно удобно в случае использования списков со значительным количеством элементов.
  2. Кросс-браузерность. Наши старания с nth-child будут бесполезными, если клиент пользуется браузерами, включительно до: IE8, Op9.5, Fx3.5. Если раритетные браузеры не попадают в сектор вашей целевой аудитории — не обращайте внимания на данный пункт.