Разметка облака тегов

Сегодня в очередной раз мне посчастливилось столкнуться с версткой облака тегов. Такого, знаете, стандартного, без излишеств и дизайнерских наворотов. Обычно конструкция данного блока становилась в итоге похожей на:

<ul class="tags">
    <li class="w1"><a href="#">amv</a></li>
    <li class="w2"><a href="#">anime</a></li>
    <li class="w3"><a href="#">music</a></li>
    <li class="w4"><a href="#">tnt</a></li>
    <li class="w5"><a href="#">авария</a></li>
</ul>

Классы w1, w2, w3 и т.д. расставляются по мере увеличения весомости тега и, следовательно, увеличивают размеры шрифта.

Для наглядности покажу, как это выглядит в браузере:

image
Сегодня же я изменил этот блок и получил неожиданный результат — именование классов в соответствии с общепринятыми обозначениями размеров одежды удобно и в данном случае (XS < S < M < L < XL < XXL < XXXL). Если нужно больше пунктов, это решается добавлением в конец или начало списка элемента с нужным количеством предшествующих знаков X. В итоге конструкция прекрасно видоизменяется, а мы радуемся ее приобретенной семантичности.

<ul class="tags">
    <li class="s"><a href="#">amv</a></li>
    <li class="m"><a href="#">anime</a></li>
    <li class="l"><a href="#">music</a></li>
    <li class="xl"><a href="#">tnt</a></li>
    <li class="xxl"><a href="#">авария</a></li>
</ul>
+13
25 января 2009, 19:55
23
Gunger 16,4

комментарии (67)

+7
tenshi #
и яваскриптом никак не узнать какой тэг «весомее»…
+2
Gunger #
Могу написать проверку, если хотите убедиться, что это вполне реально. Чуть сложнее, чем с w1, w2, w3 и т.д., но очень даже реально.
+2
tenshi #
а оно того стоит? чем циферки не угодили?
+3
Gunger #
Я разве сказал, что они мне чем-то не угодили. Не спорю, мне не нравится использование цифр в названиях классов и id. В крайних случаях я использую префиксы first, second и т.п. или постфиксы one, two… Все от личных предпочтений зависит, как и предложенный мной вариант.
–27
tenshi #
а мне не нравится твоя аватарка… накатаю-ка я об этом статью на хабр…
+2
Bakti9rov #
не лучше ли через inline-css (font-size)?
разброс (spread) «веса» тегов возрастает не всегда линейно.
+2
l2k #
weight={«s»:1,«m»:2,«l»:3,«xl»:4,«xxl»:5};
+1
l2k #
alert(weight[need]);
0
tenshi #
а при добавлении xs — строить хэш заново?
0
apla #
weight={«s»:-1,«m»:0,«l»:1,«xl»:2}
+3
tenshi #
замечательно. и получилась у нас унарная система счисления, где в качестве единицы используется «X», в качестве плюcа — «L», а в качестве минуса — «S».
это, конечно, куда семантичней, чем десятичная система с арабскими цифрами…
почему бы не пойти дальше и не воспользоваться римскими цифрами?
+7
y0ga #
всё-таки мне кажется указывать вес числом нагляднее.
–4
Gunger #
Мне тоже кажется, что разумное использование в названиях блоков постфиксов left, middle, right нагляднее, а кто-то яро противится этому, убеждая в том, что именование должно быть лишь смысловым. Сколько людей, столько мнений.
+4
kizu #
Числом не только нагляднее, но и может быть-таки семантичнее, т.к. «размер» — визуальная сторона отображения меток, вес можно выразить и иначе — оттенком, прозрачностью, или чем-то ещё.
0
Gunger #
В топике рассматривается блок «без излишеств и дизайнерских наворотов», то есть о различных оттенках, прозрачности, бекграундах и прочем речи нет. В случае с изменением перечисленных параметров, в зависимости от веса, будет крайне нелогично использовать как вариант с цифрами, так и предложенный мной, с размерами одежды. В случае изменения оттенка можно использовать light, dark и прочее, относящееся к цвету. А, вообще, никто ведь не запрещает использования нескольких классов. Например, «w1 s light». И вес указали, и изменение размера и, даже, осветление оттенка.
0
kizu #
Использование в названии класса визуального отображения блока противоречит идеям семантики. Если нужно тексту в определённом блоке сообразно дизайну придать зелёный цвет, мы пропишем класс green? А если потом дизайн изменится, или же в соответствии с какими-то условиями текст должен стать красным? Малиновым? Цвета бедра испуганной нимфы?
Так же и с метками: единственное что мы знаем — их вес. И классы для тех или иных меток необходимо прописывать сообразно весу, в таком случае если в будущем придётся изменить их отображение — нам не придётся менять классы. И т.д. и т.п.
Это же основы основ семантики :)
+1
Gunger #
Ну так смысл в том, что обозначения размеров — это соотношения весов тегов. То есть small (s) — это не значит, что текст должен быть размером в 10 пикселей. Это значит, что его вес меньше, чем у остальных (medium, large и пр.). Насчет цветов переборщил, соглашусь.
0
kizu #
Ну разве что так. Правда, слово large мне в этом контексте всё-равно не нравится, для веса больше бы подошло big, хотя понятно, что large тут очень хорошо вписывается в XXL :)
Но цифровое обозначение для веса немногим хуже, единственный относительный недостаток, который вы и указали — в меньшую сторону сложнее добавлять классы. Однако, если начинать не с 1, а со 128…
НЛО прилетело и опубликовало эту надпись здесь
+1
Gunger #
У большинства дефис служит разделителем в названиях классов, поэтому у них изначально классы именовались бы как w-1, w-2 и т.д.
+1
kizu #
Ну, с одной стороны — нет, но с другой — дефис часто используется как разделитель слов/сущностей в менах классов, если будет и w1 и w-1 всё-таки могут возникнуть проблемы с читаемостью. Хотя, если в остальном дефисы не использовать в именах классов, то можно и так, да :)
0
optio #
Прикольно придумано, почти лайфхак :)
0
Agatov #
Отличная идея. Применю в своём проекте. Спасибо.
+2
theKitich #
о семантичности ещё надо подумать. Но оригинально и красиво — однозначно :)
+1
DOKA #
Ну это каждый сам выбирает как удобнее. Какой смысл вообще на таких мелочах акцентировать внимание?
+6
pepelsbey #
Вопрос из разряда «Какой смысл жить, если мы всё равно умрём?» — если можем что-то обсудить, то не стоит упускать этой возможности. Самообразование, попытка найти лучшее решение, чтоугодно…
+1
Psixozzz #
Я все-таки так и не понял, чем цифровое обозначение не устроило? Ну или какие такие преимущества у новой методики?
0
Psixozzz #
Кроме того, а когда над проектом будут работать другие люди, вы уверены, что они разделят ваши предпочтения?
+1
Gunger #
То есть, по-вашему, люди будут в восторге увидеть обозначения, вроде w12, а то и вовсе s12?
0
y0ga #
а по ваше при таких размерах надо будет писать «xxxxxxxxxxl»? :)
0
y0ga #
* по-вашему
0
Gunger #
Видимо, моей идеи Вы так и не поняли. Уменьшение/увеличение происходит пропорционально как со стороны small, так и со стороны large. То есть, w12 = xxxxxl (список начинается с xxxxs). Правда, такие конструкции — редкость. Облака тегов, в которых больше 5-6 разных весов тегов неэффективна.
+2
y0ga #
я прекрасно вас понял. я к тому, что легче воспринимается конкретное число в «w12», чем считать количество иксов в «xxxxxl».
+3
gigigi #
чесно говоря не понимаю зачем это нужно. я по формуле высчитываю размеры и подставляю в style размер шрифта, к чему эти классы? А если тегов очень много и все они абсолютно разные по весомости?
+1
Zigzag #
вот и я за inline css, мы ведь как бы все должны проверять при отключенных стилях, скриптах, графике и пр. так вот при отключенных стилях, облако тэгов теряет свой смысл, если оно сделано списком и размер прописан не инлайном, а в стилях.
+2
pepelsbey #
Честно говоря, у отключения стилей должна быть аргументация.
Я готов принять следующие:

— Инвалиды // прописать title на каждую ссылку, etc…
— Версия для печати // просто скрыть облако тегов

А делать только потому, что «круто без стилей»… ну, это как делать потому, что «отлично отображается в Lynx».

Поэтому аргумент «семантически верно — значит хорошо отображается без стилей» нельзя развернуть как «хорошо отображается без стилей — значит семантически верно».
+1
Zigzag #
хм. есть что-то и в твоих словах верное. не знаю, что же выбрать для себя? о_0
–9
talisman #
А что если отказаться от списка и использовать заголовки внутри блока? h2, h3, h4, h5, h6, strong, em, p.
–5
aratak #
шесть уровней тегов вполне достаточно. h1..h6

опять же внутри тега h1..h6 можно либо помещать strong либо не помещать. таким образом весов тегов может быть двенадцать. и при просмотре с мобильных, на печати будет хотя бы понятно что это облако тегов.
–2
aratak #
забыл написать, что для семантичности нужно поместить каждый элемент в элемент списка.
+2
talisman #
Тоже излишне, как мне кажется. Надо упрощать, а не усложнять.
+2
talisman #
Ну, как бы, h1 не рекомендуется повторять внутри страницы несколько раз, а тут это возможно. Да и излишняя вложенность не нужна.
0
aratak #
тут тяжело с вами поспорить, но это единственный способ размещать ссылки разного «веса» семантически верно.

можно исключить h1 и оставить десять тегов.

хочу добавить, что я понимаю, что не очень хороший вариант. но не могу придумать вариант лучше, для семантичности облака тегов. Какие у нас есть теги, для различия «веса» ссылок?
0
talisman #
Сейчас таких нет :)
Давайте писать в w3c письмо, с просьбой создать теги a1, a2, a3, a4, a5, a6 :)
+1
aratak #
можно кстати использовать теги BIG и SMALL. Сделать семантически три уровня тегов (ссылка, ссылка + big, ссылка + small). поместить все это блок, и при выключенном CSS, на мобильном, на принтере (уж если облако тегов придется печатать :) будет отлично смотреться.

Калибровку делать с помощью CSS классов.
0
Sannis #
Это только три размера. А если делать дополнительную калибровку с помощью CSS, то нет смысла и small/big привлекать.
0
tenshi #
гм… а что ты подразумеваешь под семантикой?
0
aratak #
использовать теги там, где они нужны и не использовать иначе.
+1
tenshi #
то есть, если нужно сделать текст моноширинным, то надо юзать тэг pre, красным — font, крупным — big и тп?
0
aratak #
ну… не нужно утрировать ситуацию.

вы прекрасно меня поняли. теги должны нести смысловую нагрузку, а не графическую.

сдесь теги big и small предлагаются, как альтернатива h1..h6. Плюс еще и инлайновая.
+8
pepelsbey #
Заголовки — это структурные элементы. Структурные по отношению ко всему документу. Так что странное предложение…
0
talisman #
Я соглашусь :)
Это было всего лишь предложение.

Сам я делаю куда более просто — выношу размер в style.
+2
pepelsbey #
А почему сразу не <font size="3">? ;)
Мне кажется, что инлайн-стили говорят нам… а вот ни о чём не говорят. А классы вводят определённую логику.

Ну и чисто теоритический переезд сайта с em'ов на пикселы будет гораздо дешевле, если оформление будет лежать в стилях, для чего они и предназначены.
0
talisman #
Все верно, все верно :)
Я в теории, к сожалению, не силен, к всему приходил сам. Читал лишь спецификацию два дня в самом начале. Надо исправляться :)
0
talisman #
Хотя вы знаете. На уровень продаж это никак не влияет :)
0
Zigzag #
Вадим, а что ты думаешь по этому поводу? habrahabr.ru/blogs/webdev/50212/#comment_1326521
+1
andryukhin #
Изюминки внутри кода — чтоб приятнее работалось. Очень хорошо :)
0
Silverstorm #
tag_1, tag_2, tag_3… и собственно у самих ссылок. Вы ведь их размер меняете а не размер контейнеров ;)
+2
kirbak #
Неужели все наизусть знают какой размер из этих эсок и эмок больше? Или я один такой…
0
Sannis #
Конечно, думаю большинство. Расшифровывается же очень просто.
+1
shiko_1st #
На мой взгляд, куда семантичнее было бы нечто вида

<ul class="tags">
<li weight="-1">tag 1</li>
<li weight="0">tag 2</li>
<li weight="1"> tag 3</li>
</ul>

правда, не каждый браузер сможет обработать css для такой записи.
0
Gunger #
Я обеими руками за подобные решения, но у нас, к сожалению, нет такой свободы в верстке.
0
garex #
По моему семантичность пострадала.

w1, w2, w3 лучше
0
petergreen #
+1 мнение о «несемантичности» вашего подхода, т.к. М в одежде = самый распостраненный. А в случае тегов такой статистики нет, и может получится байда типа xxxxxxxxxxxxxl……… xl — l — m — s — xs, лучше уж писать тогда 5xl
0
WoR #
Засуньте облако тегов в жопу, оно не удобно. Сейчас облако тегов похоже, как давно на всех сайтах была бегущая строка. Аналогичный бред.
0
Zigzag #
не нужно так категорично
–1
n1k1c4 #
Автор, картинки в посте не видно.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.