Ревизируем HTML и CSS «Хабрахабра»

[Vox]

А в stylish это можно запихать?

[rossomachin]

Что это?

[Vox]

Изменения CSS

[rossomachin]

Расширение что-ли какое для Firefox?

[MTonly]

Да

[rossomachin]

ok, спасибо. Едва ли вопользуюсь, впрочем.

[Vox]

Под него уже довольно много стилей написано. Например, есть удачные варианты для gmail

[Mourner]

Расширение для Firefox. Аналогично Greasemonkey, только для стилей - позволяет описывать собственные корректировки для любого сайта.

[rossomachin]

Ясно.

[Mourner]

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

[alammi]

мне кажется, рассматривая какой то кусок кода в отрыве от всего проекта, говорить что он перегружен, равно как и делать любые другие выводы (кроме как о его работоспособности) не совсем правильно

[Mourner]

Человек рассмотрел весь код, но в качестве примера взял лишь небольшую часть. Что же тут неправильного?

[rossomachin]

Я достаточно хорошо знаком с кодом Хабра. Старожилы помнят — почему.

[alammi]

беру свои слова обратно ;)

[ProRunner]

Честно говоря, я думал дивной версткой занимались именно «Россомахин и Со», а, как оказалось — не вы.

[TheBits]

А кто по вашему входит в "Co"?

[ProRunner]

Вы туда не входите? :) Например, из комментариев в этом топике (и других, лень искать остальные) я сделал вывод, что в работе Максиму помогали и другие люди. Например, он упоминал  Flack-a. К сожалению, не знаком лично ни с одним, ни с другим.

[rossomachin]

Не я. Элементарно не успел бы. Проект серьёзный, сложный и чертовски интересный, что, прежде всего, требует кропотливой работы чесов эдак по 8-9 каждый день.

[Mourner]

Теоретически это можно переверстать definition list'ом. В крайнем случае - списком. А то сплошные дивы и спаны...

[rossomachin]

Можно, конечно.

[rossomachin]

Да вот только в данном случае несколько иная связь между элементами. В равной стпени это всё можно в UL засунуть. Так что я не стал мудрить.

[Mourner]

http://www.maxdesign.com.au/presentation…

Связь между элементами вполне походит по смыслу для dl, как по мне. Хотя на это есть разные точки зрения - это описано в статье.

Засунуть в ul - это как минимум стоило бы сделать. Divitis/Spanitis - главная проблема новой вёрстки Хабра, - если показательно перевёрстывать, ее тоже стоит затрагивать имхо.

[rossomachin]

1. Предлагаешь взять юзера за DT?
2. Ну так я показательно и попытался.

P.S. Статью Расса я читал.

[MTonly]

Как минимум — UL. Как максимум — DL (не забывай, что одному DT может соответствовать более одного DD):
<dl>
    <dt>Комментатор&nbsp;&rarr;</dt>
    <dd class="blog">Блог&nbsp;/</dd>
    <dd class="topic">Тема</dd>
</dl>

[MTonly]

По большому счёту, весь Хабр — это списки. Ныне свёрстанные дивами.

[rossomachin]

Согласен. Списки и потенциально — микроформаты. Жаль, Дима Барановский сейчас вне Сети. Можно было бы развить тему.

[rossomachin]

Как использовать DL я хорошо знаю. И использую там, где считаю уместным.

Мне в данном случае не нравится то, что комментатора засунули в DT. Оба DD не описывают комментатора так, как это принято в логике DL, там другая, не столь однозначная, связь. Здесь скорее связь с комментарием, как объектом, являющимся частью топика из такого-то блога, написанным таким-то человеком. Понимаешь? Reverse DL или вроде того.

[Mourner]

В спецификации w3c в качестве примера использования DL приводится разметка диалога (там получаются пары "автор" - "реплики"). Тут связь аналогичная, поэтому думаю, что всё в порядке.

[rossomachin]

Не аналогичная. Пользователь оставил комментарий, но не создал блог, в котором он этот комментарий написал.

Ссылка на блог не обязательно описывает пользователя. Вот комментарий — да, описывает. Связи неоднозначные.

[Mourner]

Если прописывать блог отдельным dd, то да. Но если так, как я (один dd и на то, и на другое) - комментатора описывают ссылки на блог + пост в комплексе. В таком случае связь верная.

[rossomachin]

Попробую ещё раз сформулировать. Сейчас перечитал своё, и вижу, что могут быть неясности.

Пользователю, как DT, однозначно соответствует ссылка на комментарий, как DD.
Ссылка на блог уже такой связью наделена с большой натяжкой.

Наши комментарии, как и реплики в примере w3c, характеризуют нас, описывают нас. Мы создаём их.

Но как описывает нас ссылка на блог?

Я вижу другую цепочку связей: DT должна быть ссылка на комментарий. Описывается она так: её создал пользователь такой-то, и комментарий является частью такого-то блога. Нарисуй взаимосвязи в виде графа — должно быть наглядно.

[Mourner]

Я прекрасно понял, что ты хочешь сказать. :) Просто в таком случае очередность данных будет не той, какой мы ее хотим видеть на странице. Но вариант, который я описал комментарием выше - отличный компромисс.

[rossomachin]

ok, если как компромисс, то пусть будет так. Принимаю доводы.

[Mourner]

Спасибо за апдейт!
Только ссылка не туда на словах "Альтернативная версия" :)

[rossomachin]

Хе. Рассу было бы приятно.
Сейчас поправлю.

[MTonly]

Макс, список определений в широком смысле описывает связь чего-то с чем-то. Определением или описанием DD быть не обязан.

Связь DT и DD с названием блога вполне можно охарактеризовать как «автор такой-то написал в блог такой-то», и потому связь между ними есть. Другой вопрос, что я привёл лишь один из возможных вариантов, и можно сделать чуть иначе, явно увязав также и блог с темой:

<dl>
    <dt>Комментатор&nbsp;&rarr;</dt>
    <dd>
        <dl>
            <dt>Блог&nbsp;/</dt>
            <dd>Тема&lt;/dd>
        </dl>
    </dd>
</dl>

Твои мысли понимаю и разделяю — иногда, действительно, хочется поменять местами DT и DD, однако, увы, до тех пор, пока через CSS нет возможности оперировать DOM, так или иначе приходится идти на компромиссы.

[MTonly]

очепятка:
<dd>Тема&lt;/dd> → <dd>Тема</dd>

[rossomachin]

P.S. Ну мы ж теоретизируем сейчас, как обычно. Володя уже реализовал, и хорошо реализовал.

[Mourner]

Вот, переписал немного на свой манер - глянь. :) http://agafonkin.com/files/etc/habratest…

Ты в своём коде еще забыл о некоторых шорткатах, можешь подправить.

[rossomachin]

Ага. font-ы.
Хорошая работа. Надеюсь, не зря мы тут воду мутим.

[Mourner]

Спасибо. :)
Цвета еще. К тому же совершенно непонятно, зачем ты прописывал margin-bottom для ссылок. Вертикальные марджины всё равно у инлайн-элементов игнорируются. И line-height если и прописывать, то элементу выше - унаследуют (у меня он в шорткате font).

[rossomachin]

Марджины, скорее всего, выплыли из оригинального CSS-файла. С утра пораньше мог не отловить. Собственно, и не отловил.

[never_again]

не зря)

лично я,кое что новое для себя узнал...)

[rossomachin]

Хорошо, если так. Бог в помощь.

[XEK]

мне этот вариант приглянулся более всего

[XEK]

хотя да, имя пользователя не совсем подпадает под причинно-следственную свять term - description

[rossomachin]

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

[jahson]

Имя пользователя замечательно подпадает под смысл, который есть у dt - не зря dl рекомендуют для оформления диалогов.
В данном случае, хотя ссылка на блог и не связана с автором, но пара блог/комментарий очень неплохо подходит для dd.

[Mourner]

Кстати, ul даже с точки зрения компактности кода подошёл бы лучше - не пришлось бы на каждую строчку вешать class='entry'.

[rossomachin]

Да, ты прав.

[rossomachin]

Но я воздержусь :)

[Mourner]

Почему?

[moroz]

Согласен. И не только с точки зрения компактности. По моему скромному мнению, dl здесь совсем не к месту.

[theOnlyBoy]

Грамотно, красиво, удобно.
А отступы в начале строк в коде намеренно не ставил или просто авто-форматируется так?

[rossomachin]

Автоформатируется так. В коде примера всё отбито табуляцией. Будет время — накатаю багрепорт. Надо доработать поведение вставляемого кода.

[theOnlyBoy]

Ясно.
Неплохо было с подсветочкой реализовать – пальчики оближешь!

[denver]

<pre&gt?

[rossomachin]

Не пробовал.

[rossomachin]

Попробовал. Не понравилось.

[never_again]

- а где он закрывается?

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

[never_again]

черт... я про вот это - <span class="who">

[Nightquest]

В топике не закрыт. В примере все правильно :)
<span class="who"><a href="http://naz.habrahabr.ru/">naz</a></span>

[rossomachin]

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

[never_again]

я имел в виду топик)

просто в глаза бросилось...

[Mailo]

Зачем так усложнять:

.live_section span.who a, .live_section .where, .live_section .topic

можно просто: .live_section a


А так же вместо:

font-family:tahoma,arial;
font-size:12px;

можно: font:12px tahoma,arial;

[rossomachin]

С font меня уже поправили. Утром писалось — не доглядед.
Что до первого замечания: я правил код в живой странице с подключенными оригинальными стилями, и там сыграл каскад, который иначе было не перебить.

[sapl]

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

что за фраза "более читабелен html"?
кто его читать то будет кроме таких же разработчиков? для покрасоваться что ли все это..

посмотрите код http://www.google.com/ , они ни перед кем не красуются,
а стараются для рядового пользователя - максимально ужимают вес html

посмотрите код http://www.gmail.com там вообще нет никакого html кода, так как все построено на javascript движке

заметьте!! что в htm коде google нет кавычек в описании атрибутов (вроде бы какой не профессионализм),т.е на хрен w3c стандарты - работающий продукт и пользователь важнее!

[yaroslavpat]

«За великими нужно следовать в достижениях, подвигах и победах, а не в ошибках, неудачах и поражениях...» ©

[sapl]

=) где вы видите ошибки неудачи и поражения?

[rossomachin]

Вы, собственно, кто?
И на каком основании говорите о каких-то моих «загонах», да ещё и «опять»?

[sapl]

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

[rossomachin]

Ну так и чем вас результат не устраивает? Я целенаправленно добивался снижения веса того кода, который и сам, как пользователь, ежедневно часто качаю. При сохранённом в неизменности интерфейсе удалось снизить издержки ну хотя бы трафика, пусть и чуть-чуть — это плохо что-ли?

Да, и пожалуйста, очень прошу: не тычьте в сторону Гугла и его экономии на кавычках. Я инженер, и вопрос следования стандартам для меня давно решён.

[sapl]

да..я просто обще рассуждаю (оправданы ли затраты и т.п)..
вот сохраните эту текущую страницу через save as:
получим: 200 кб js файлов и css таблиц , да сама страница 220 кб
да это и не страшно...
просто если уж подходить к задаче скажем снижения веса станицы,
то тогда уж радикальными мерами:
генерировать комментарии javascript'ом,
убрать левые библиотеки js, если они не нужны на данной странице
сжать код методом переименования ,как сделано у google и т.п

или лучше потратить свое время на более важные вещи в развитии сервиса,

один ваш аватар весит столько же сколько вы сэкономили на сжатие кода ..

я не говорю про баннеры на странице

[jahson]

Зачем читать, если не слушаешь и не понимаешь смысла?

[sapl]

уж извините, если я и не знаю всех тонкостей верстки это не значит что не могу высказать свое мнение..

сколько я тут не рыпался с комментариями меня только минусуют,
а внятно объяснить никто не может - зачем кроме самовыражения сие чрезмерное увлечение усовершенствованием уже работающего, к тому же чужого кода html

когда привел в пример google - тоже самое нашли какие-то нелепые ошибки
в их верстке, как будто это самое важное в интернет сервисе.

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

вот ниже например объяснили(комментарий tom'a) почему у google и скрипты и css не вынесены отдельно - потому что одни http заголовки будут по размеру такие же как само содержание, и 3 запроса на сервер однозначно хуже одного.. и красота тут не причем и нахрен не нужна

[Junior]

Уважаемый, вы к филателистам так же будете подкатывать с вопросами типа "зачем ты фантики всякие собираешь"?
Как говорится, "не ломай кайф, в натуре, а!" :)

По поводу Google - я на 100% убеждён, что такой код обоснован. Просто мы с вами не полностью понимаем, какие там могут быть требования к код (например, защита от парсеров и пр).

[Nightquest]

«Вообще нет никакого html-кода»
убило!.. это называется «слышал звон, да не знаешь где он».

[sapl]

да там у них и правда народ не далекий собрался, я их не в тему в пример привел ..

[sapl]

да я в шутку написал, вы что ..
короче не знаю...не верится мне что там необдуманно что либо вообще используется!
я привел google в пример потому что подумал мол хоть на него наезжать не будут...и то не так..

не всегда надо придерживаться общих правил ,
а искать лучшее решения в данной ситуации..

>Да, и пожалуйста, очень прошу: не тычьте в сторону Гугла и его экономии на >кавычках. Я инженер, и вопрос следования стандартам для меня давно решён.

тот же google вытащил на публику механизмы ajax запросов
потому что посчитал что это удобно , а не потому что описано стандартами...
и уже сам w3с стандартизирует этот самый ajax

[k_s]

Ну всё правильно, внутри же нету java script'a :)

[sapl]

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

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

[TheBits]

Значит проект хабрахабр должен оставаться с плохим кодом? Так?

[sapl]

=) т.е сейчас код ужасен? и нужно принимать меры?
как я могу ощутить как пользователь что есть проблемы в html коде верстки?

[TheBits]

На мой вопрос пожалуйста дайте ответ.

[sapl]

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

если я хочу помочь как разработчик, то устроюсь на работу в futurico и буду работать в команде,

другого не вижу варианта

[sapl]

само обсуждение знающих людей конечно на благо - и обмен опытом и уроки для новичков,

но не в том ракурсе что есть проблема непосредственно у сайта habra и надо ее решать ..проблемы нет

[tom]

Каскадные таблицы и скрипты в коде самой страницы сделаны с той же целью, что и использование лишь одного графического файла — для уменьшения количества запросов на сервер. Гугл это не страница-хомяк школьника Василия Пупкина, которую запрашивают раз в полгода, и то по случайности.

[smart]

Очень сомнительная экономия - для сайтов типа google пользователь обычно делает много загрузок страниц сайта, а однажды запрошенный css файл надолго кэшируется в браузере. На самом деле, стили прописывают в странице не для экономии трафика, а для визуального ускорения загрузки страницы - Яндекс, например, тоже частично выносит стили в код главной страницы, чтобы основной элемент - форма поиска - появилась сразу и в правильном оформлении.

[tom]

Тоже разумно.
Может быть, они часто меняют стили и скрипты? :)

[Chupa]

Поставил бы плюсик. Полностью поддерживаю.

[yaroslavpat]

Да, код, пожалуй, стал лучше... Но внешне и на удобство это никак не повлияло =) Хотя, повлияло на правильность верстки, на красоту, на логичность. В общем, дополнения и изменения ценные.

Нашел только один недостаток: в Вашей версии при наведении на картинку больше не появляется alt и она не является ссылкой. Но рядом есть текстовая, так что, думаю, это мелочь...

Спасибо, интересно.

[moroz]

Нашел только один недостаток: в Вашей версии при наведении на картинку больше не появляется alt и она не является ссылкой. Но рядом есть текстовая, так что, думаю, это мелочь...

Это легко исправить. Достаточно поменять местами span.who и ссылку, что лежит в нем, а в стилях написать что-то вроде этого:

a:hover span {background: #ff6666; color: white;}

[moroz]

Ну и повесить на ссылку атрибут title="Посмотреть профиль", конечно.

[rossomachin]

Поведение по :hover в этом случае будет отличаться от того, что сейчас. Фоновая картинка сейчас никак не зависит от смены цвета фона ссылки. Если спан поместить внутрь, то всё поменяется.

В описании я как раз упоминал эту причину, когда объяснял введение спана в код.

[moroz]

Не вижу ничего плохого в том, что ссылка будет подсвечиваться при наведении на картинку. В конце-концов, по логике, картинка — это объект, относящийся к имени пользователя, а не что-то самостоятельное.

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

[Nightquest]

Согласен с вами.
Действительно лучше.

[rossomachin]

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

[moroz]

Спасибо. Остается только надеяться, что люди из Futurico возьмут на вооружение один из трех предложенных здесь вариантов. И не так уж и важно, какой именно.

[rossomachin]

Но внешне и на удобство это никак не повлияло =)

И это хорошо.

Нашел только один недостаток: в Вашей версии при наведении на картинку больше не появляется alt и она не является ссылкой. Но рядом есть текстовая, так что, думаю, это мелочь...

Так в том и заковыка, что раньше на одного юзера было две ссылки на его профиль. Сейчас этот самый title не составляет труда повесить на оставшуюся ссылку, ну а alt теперь вообще не нужен.

Одной из моих задач было снижение веса кода. Я её решил.

[qsc]

Россомахина хлебом не корми, дай пощупать чей-нибудь html и css. :-)
Спасибо, Док!

[Novikov]

Лучший валидатор — это браузер ;-)

[sapl]

еще лучший - человек который собственно сайт смотрит :)

[rossomachin]

Хе-хе. В данных случаях (уже три реализации) и тут всё должно быть тип-топ ;-)

[Junior]

Ага, люди с ослабленным зрением идут лесом и говорят вам спасибо.

[huze]

Спасибо большое за такое обсуждение. Редко оно получается. Я Хабр хочу видеть обществом профессионалов, любящих своё дело, готовых обсудить проблему, найти решение. Совместно. Этот топик очень наглядно показывает, что у Хабра действительно есть будущее! =)

[smart]

Макс, а почему не список?! Я был уверен, что гуру тут напишет ul. По крайней мере,  pepelsbey бы точно ul написал :) А вариант с dl мне совсем не нравится: не логично это, заголовок комментария никак не является пояснением, расшифровкой к имени юзера.

[rossomachin]

Просто для меня в данном случае что UL, что DL, чтоь моя реализация — примерно равнозначны в своём неполном соответствии описываемым данным. Хотя, конечно, мог бы и UL-ом, да и DL-ом — тоже :-)

Вадик, кстати, я думаю, сделал бы DL-ом. Надо бы его вытащить сюда, а то варится там в СУПе, как лосось в белом вине.

[pepelsbey]

Да, DL мне дороже ;) Про лосося улыбнулся. Я тут, просто немного запарен.

[AHTOH]

В 2012-м году Путин вернется к власти, ибо закончится срок правления предыдущего президента, который будет избран в 2008-м. :) Что тогда будет...

[AHTOH]

извините, не в тот топик поместил.

[rossomachin]

Ничего-ничего. Это как перчинка в блюдо. Для контраста.

[bubuq]

Как это что? Отсутствие кавычек в XML-атрибутах запретят законодательно!
;)

[VladiMMir]

К нам в Санкт-Петербург летят розовые фламинго!
В это воскресенье (08.07.07),в 15 часов 150 – 200 молодых людей соберутся у Дома кино,поприветствовать чужеземцев!

http://www.fontanka.ru/2007/07/05/025/
читайте и не падайте со стульев
PS Любители экзотики, скорей заряжайте свои фотоаппараты и айда охотиться за фламинго!

[ivanov]

Мне интересно, зачем полные урлы указываются в ссылках? Чтобы уж наверняка? ;)

[rossomachin]

Я уже писал об этом людям из futurico. Думаю, со временем поправят.