Гибкие многострочные списки определений при помощи двух строк CSS 2.1

Если вы когда-либо использовали списки определений (<dl>) то вы в курсе проблемы. По дефолту, у <dt> и <dd> стоит display: block. Для того, чтобы превратить их в то, что нам надо в большинстве случаев (каждая пара термина и определения на одной строке) мы обычно используем несколько техник:

  • Используем разный <dl> для каждой пары: разметка доминирует над стилями, что плохо
  • Float: не гибко
  • display: run-in; для <dt>: плохая поддержка браузерами (не поддерживается в Firefox)
  • Добавление <br> после каждого <dd> и установка термину и определению display: inline;: невалидная разметка. Нужно ли продолжать?

Ах, если бы добавление <br> было валидным… Или, даже так: что если бы мы могли вставлять <br> при помощи CSS? На самом деле мы можем!

Наверняка вы в курсе, что символы CR и LF которые представляют собой разрыв строки — это обычные unicode-символы, которые могут быть вставлены где угодно как и все остальные unicode-символы. Им соответствуют коды 000D и 000A соответсвенно. Это значит, что они тоже могут быть вставлены в генерируемый контент если их должным образом экранировать. Далее, мы можем использовать соответствующее значение white-space, чтобы заставить браузеры обращать внимание только на вставленные разрывы строк. Выглядит это вот так:

dd:after {
    content: '\A';
    white-space: pre;
}

Заметьте, что ничего из вышеперечисленного не относится к CSS3. Все это старый добрый CSS 2.1

Конечно если у вас есть несколько <dd> для каждого <dt>, то вам придется немного изменить код. Но в этом случае вам, скорее всего, не понадобится такое форматирование.

Добавлено: как заметил Кристиан Хейльман (Christian Heilmann), в HTML3(!) в элементах <dl> использовался атрибут compact, который, собственно, делал тоже самое. Сейчас в HTML5 он считается устаревшим, как и остальной фукнкционал представления в HTML.

Вот так выглядит финальный результат:

Протестировано в IE8, Chrome, Firefox 3+, Opera 10, Safari 4+.

Перевод статьи Flexible multiline definition lists with 2 lines of CSS 2.1 автор Lea Verou

P.S. Это тоже может быть интересно:

21 Комментарии

  1. SD

    В ие7 и ниже работать не будет.
    Интересно чем автору флоаты не угодили.

    1. SilentImp

      В ie7 и ниже будут проблемы и с флоатами.
      А еще там есть экспрешены ;)

  2. Seva

    Какраз недавно с этойже темой копался, тоже такой вариант расматривал, но немно расширеннее, тем же способом например для dt кроме первого ставим before и можно несколько терминов в столбик писать.
    dd:after, dt:before {
    content: «\A «;
    white-space: pre;
    }

    1. SelenIT

      В комментах к оригиналу записи для той же цели предложен вариант dd+dt:before.

      1. Seva

        не для тойже, если несколько dt идёт сначала, не прокатит.

        1. Seva

          типа такого что-то я имел ввиду
          http://jsfiddle.net/4nAyZ/10/

        2. SelenIT

          А, тут да. Ну в любом случае хорошо, что возможны разные комбинации для разных случаев :)

  3. SilentImp

    Первая статья в проекте которую прочитал с искренним интересом и удовольствием.
    Спасибо.

    1. psywalker

      Остальные были не очень? :)

  4. SelenIT

    Буквально позавчера использовал прием на практике (для приведения к нужному виду неподконтрольной мне разметки, генерируемой сторонним приложением). Кстати, по-моему, метод будет великолепен не только (и не столько) для списков определений, сколько для форматирования в столбик контактных данных (физических адресов и т.п., особенно с микроформатом hCard и его span-ами для каждой строчки) и подобных вещей, где раньше обычно использовали настоящий <br>. Благодаря изобретению Лии, теперь можно делать это оформление чисто стилями.

    Ну и я втайне подогреваю своё ЧСВ тем, что «допиливание» метода для IE8-9 (где изначальный вариант ‘\D\A’ создавал лишний разрыв) не обошлось без ма-аленькой толики моего участия… :)

    1. psywalker

      Да, и за это тебе огромное спасибо, дружище! :)

  5. vlad

    А вам не кажется, что стоит упоминать авторов приемов, которые вы описываете? В данном случае это Lea Verou, конечно.

    1. Seva

      Я только не понимаю почему авторство только емум приписывают, я такой же вариант даже немного расширеннее сам придумал (выше описан), да думаю ещё много кто до этого додумался самостоятельно.

      1. SelenIT

        Лиа (Михаэлия) — это она :)

        1. Seva

          А ну тогда можно! :)

    2. psywalker

      А мы разве не поставили в конце ссылку на автора?

    3. SelenIT

      А вам не кажется, что стоит читать статью до конца (включая последнее предложение курсивом), прежде чем?.. ;)

  6. RomanWeberov

    /* ie7 fix */

    dd {//z-index:expression(runtimeStyle.zIndex = 1, insertAdjacentHTML(‘beforeEnd’, »));}

    1. RomanWeberov

      Парсер видимо тег переноса строки съел, вобщем http://jsfiddle.net/RomanWeberov/A2eP9/

  7. Seva

    Они убрали атрибут compact, согласен не семантично, но ведь напрмер класс «short_description» вполне семантичен, тоесть можено седлать базовый стиль списка похожим на его стандартное отображение и расчитанным на много терминов и значений, а если пункту добавлен класс short_description и соответственно имеет не много информации, то выводить в виде в строчку.

  8. Евгений

    К сожалению в ie8 налюдается небольшой отступ перед второй и последующими парами dt dd. 

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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