Гибкие многострочные списки определений при помощи двух строк 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. Это тоже может быть интересно:
В ие7 и ниже работать не будет.
Интересно чем автору флоаты не угодили.
В ie7 и ниже будут проблемы и с флоатами.
А еще там есть экспрешены ;)
Какраз недавно с этойже темой копался, тоже такой вариант расматривал, но немно расширеннее, тем же способом например для dt кроме первого ставим before и можно несколько терминов в столбик писать.
dd:after, dt:before {
content: «\A «;
white-space: pre;
}
В комментах к оригиналу записи для той же цели предложен вариант
dd+dt:before.не для тойже, если несколько dt идёт сначала, не прокатит.
типа такого что-то я имел ввиду
http://jsfiddle.net/4nAyZ/10/
А, тут да. Ну в любом случае хорошо, что возможны разные комбинации для разных случаев :)
Первая статья в проекте которую прочитал с искренним интересом и удовольствием.
Спасибо.
Остальные были не очень? :)
Буквально позавчера использовал прием на практике (для приведения к нужному виду неподконтрольной мне разметки, генерируемой сторонним приложением). Кстати, по-моему, метод будет великолепен не только (и не столько) для списков определений, сколько для форматирования в столбик контактных данных (физических адресов и т.п., особенно с микроформатом hCard и его span-ами для каждой строчки) и подобных вещей, где раньше обычно использовали настоящий <br>. Благодаря изобретению Лии, теперь можно делать это оформление чисто стилями.
Ну и я втайне подогреваю своё ЧСВ тем, что «допиливание» метода для IE8-9 (где изначальный вариант ‘\D\A’ создавал лишний разрыв) не обошлось без ма-аленькой толики моего участия… :)
Да, и за это тебе огромное спасибо, дружище! :)
А вам не кажется, что стоит упоминать авторов приемов, которые вы описываете? В данном случае это Lea Verou, конечно.
Я только не понимаю почему авторство только емум приписывают, я такой же вариант даже немного расширеннее сам придумал (выше описан), да думаю ещё много кто до этого додумался самостоятельно.
Лиа (Михаэлия) — это она :)
А ну тогда можно! :)
А мы разве не поставили в конце ссылку на автора?
А вам не кажется, что стоит читать статью до конца (включая последнее предложение курсивом), прежде чем?.. ;)
/* ie7 fix */
dd {//z-index:expression(runtimeStyle.zIndex = 1, insertAdjacentHTML(‘beforeEnd’, »));}
Парсер видимо тег переноса строки съел, вобщем http://jsfiddle.net/RomanWeberov/A2eP9/
Они убрали атрибут compact, согласен не семантично, но ведь напрмер класс «short_description» вполне семантичен, тоесть можено седлать базовый стиль списка похожим на его стандартное отображение и расчитанным на много терминов и значений, а если пункту добавлен класс short_description и соответственно имеет не много информации, то выводить в виде в строчку.
К сожалению в ie8 налюдается небольшой отступ перед второй и последующими парами dt dd.