Стилизуем упорядоченные нумерованные списки

[buddah]

Это мой вольный перевод статьи Роберта Йохансона

Не знаю, будет ли данная тема интересна кому-то, но я недавно сталкивался с проблемой, описанной в данной статье и тогда не знал, как её решить. В "полезные приемы и решения" пока писать не могу. Поэтому..

Меня всегда раздражало то, как трудно стилизовать номера в упорядоченном списке. Нередко проект предусматривает нечто иное, чем просто обычный рисунок – другой шрифт, размер, фон, да что угодно.

Традиционный подход к решению этой проблемы – оградить номера элементов списка (li элементы) от стандартного представления их браузером, «жестко» указывая числа в текстовом контенте li. Это позволяет применять различные дизайнерские приемы к номеру до тех пор, пока вы не останетесь довольны.

Такое решение работает визуально, но это не совсем семантически правильный способ использовать списки. Когда вы просматриваете такой «поддельно пронумерованный» список с выключенным CSS , вы видите либо список с повторяющимися номерами элементов, либо список с маркерами и числами.

Поэтому, когда я недавно опять столкнулся с необходимостью стилизовать номера списка, я подумал, что нужно пойти по другому пути, без подделки этих номеров. Благодаря тому, что Internet Explorer начинает потихоньку понимать прогрессивные методы CSS , мне удалось найти приемлемое решение.

Если вы (ну хорошо, ваш клиент) можете продолжать жить, не имея особых стилей номеров списка в IE7 и старше, то можете использовать данный метод.

Ключевое значение в данном методе имеет использование Генерация контента CSS, для создания и вставки счетчика номера после удаления нумерации по умолчанию из списка.

Я создал демонстрационную страницу с простым примером для того, чтобы было с чего начать изучение этой техники.

Ниже представлен CSS, который я применил в демонстрационной страничке:

ol {
    counter-reset:li; /* Инициализируем счетчик */
    margin-left:0; /* Удаляем дефолтный левый margin */
    padding-left:0; /* Удаляем дефолтный левый padding */
}
ol > li {
    position:relative; /* Создаем среду позиционирования */
    margin:0 0 6px 2em; /* Каждому элементу списка добавляем левый margin для места под числа */
    padding:4px 8px; /* Добавим немножко пространства вокруг контента */
    list-style:none; /* Отключаем стандартную нумерацию */
    border-top:2px solid #666;
    background:#f6f6f6;
}
ol > li:before {
    content:counter(li); /* Используем счетчик как content */
    counter-increment:li; /* Увеличение счетчика на 1 */
    /* Позиционируем и стилизуем числа */
    position:absolute;
    top:-2px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
    /* Оставляем немного места между числами и контентом для браузеров, которые поддерживают генерируемый контент, но не поддерживают его позиционирование */
    margin-right:8px;
    padding:4px;
    border-top:2px solid #666;
    color:#fff;
    background:#666;
    font-weight:bold;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align:center;
}
li ol,
li ul {margin-top:6px;}
ol ol li:last-child {margin-bottom:0;}

Вот ключевые моменты:

• list-style:none: отменяет стандартную нумерацию
  

• counter-reset и counter-increment: создают область работы счетчика и увеличивают его на 1. Оба описаны в CSS 2.1 12.4 Automatic counters and numbering.
  
• content: вставляет индекс созданного счетчика. Описан в CSS 2.1 12.2 The ‘content’ property
  

• :before: псевдо-элемент
  

Вы можете использовать почти любой стиль на сгенерированном элементе.

Однако, нужно всегда помнить, что произойдет, если список будет очень длинным – хватит ли места для трех- и четырех-значных номеров? Конечно, не очень распространенный сценарий, но все-таки нужно следить за шириной элемента, который содержит номер.

Как я уже говорил, этот способ не работает в ИЕ7 и старше, потому что ИЕ до 8 версии не поддерживает псевдо-элементы :before и :after.

С помощью условных комментариев и CSS хаков вы можете заставить старые браузеры отображать такие списки тоже, просто без всяких крутых стилей. Я думаю, большинство людей в состоянии жить и без этого.

Update: Демонстрационная страница теперь включает в себя «изящное деградирование» для ИЕ7 и старше. Спасибо всем, кто отметил его отсутствие и всем тем, кто предупредил меня о проблемах, которые должны быть исправлены. А также спасибо Эрику Мейеру, который напомнил мне, что некоторые браузеры не позволяют позиционировать генерируемый контент (например Camino 2 и Firefox 3.0). Я добавил некоторый padding и правый margin для генерируемых чисел для того, чтобы они выглядели немножко более прилично в этих браузерах.

Edited June 16, 2011 by buddah

[Great Rash]

Неактуально

http://html.book.ru/faq/kak-izmenit-vid-napisaniya-chisel-v-spiske

Все уже украдено до нас (с)

[buddah]

Неактуально

http://html.book.ru/faq/kak-izmenit-vid-napisaniya-chisel-v-spiske

Все уже украдено до нас (с)

Пропустил.. Но тут только числа, а эта статья более полная, как мне кажется.

[Shift-Web]

Спасибо, кое что почерпнул )))

 content:counter(li); /* Используем счетчик как content */
 counter-increment:li; /* Увеличение счетчика на 1 */

[buddah]

Я тоже) Пожалуйста.