CSS-live.ru

Гибкие многострочные списки определений при помощи двух строк 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. Какраз недавно с этойже темой копался, тоже такой вариант расматривал, но немно расширеннее, тем же способом например для dt кроме первого ставим before и можно несколько терминов в столбик писать.
    dd:after, dt:before {
    content: «\A «;
    white-space: pre;
    }

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

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

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

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

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

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

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

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

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

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