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

    Здравствуйте.

    Коль скоро «Хабрахабр» тоже состоит из кода, займусь лёгкой ревизией той его части, с которой могу совладать, и которую скачиваю десятки раз в день. Проведём ревизию кода раздела «Прямой эфир».

    Под катом HTML и CSS листинги.


    Исходный код



    Давайте покопаемся во внутренностях. Сейчас раздел «Прямой эфир» описывается следующим набором элементов (беру живой пример прямо со страницы блогов):

    <div class=«live_section»>
    <div class=«live_section_navtext_title»>
    < a href=«naz.habrahabr.ru»><img src=«i/small_default_userpic.gif» border=«0» alt=«посмотреть профиль» title=«посмотреть профиль»></a> 
    <a href=«naz.habrahabr.ru» class=«live_section_nickname»>naz</a> → 
    <a href=«www.habrahabr.ru/blog/google» class=«live_section_navtext_title_sec»>Google</a> /
    <a href=«www.habrahabr.ru/blog/google/17315.html#comment217245» class=«live_section_navtext_title»>Google обвинил Microsoft в монополизме
     22</span>
    </div>
    </div>

    Что не так с кодом?



    1. Код перегружен слишком длинными названиями классов.
    2. Маркер возле имени пользователя вставлен с помощью элемента <img>, вместо того, чтобы быть заданным в CSS. Этот кусок кода повторяется возле каждого имени пользователя в «Прямом эфире».
    3. HTML плохочитаем.
    4. CSS плохочитаем и размазан по файлу стилей.

    Новый код


    Разберёмся с логикой информации



    Что представляет собой запись в «Прямом эфире»? По сути это информация о том кто, где и что прокомментировал. Дополнительно указано общее число прокомментировавших. Зная это, выбираю новые наименования классов для элементов кода.

    Итак, ссылке на пользователя присваиваю class=«who», ссылке на блог — class=«where», а ссылку на конкретную тему внутри блога поименую классом topic.

    Осталось разобраться с общим количеством комментариев: class=«total» и наименование общего контейнера для всей записи — class=«entry».

    Далее следует сразу же оценить поведение ссылок. Итак, при наведении на ссылки у них меняется фоновый цвет и цвет текста. Обычное дело. Однако коль скоро я собираюсь упрятать маркер юзера в фон, задав его в CSS, я должен учесть специфичное поведение маркера при наведении мыши на эту ссылку. Фоновый рисунок в данном случае нельзя вешать на элемент <a>. Нужно обязательно обернуть его в <span>, повесив фоновый рисунок именно на <span>, а изменение фона и цвета ссылки — на саму ссылку. Вот какой HTML для этого нужен:

    <div class=«live_section»>
    <div class=«entry»>
    <span class=«who»><a href="…">username</a></span> →
    <a class=«where» href="…">Google</a> /
    <a class=«topic» href="…">Google обвинил Microsoft в монополизме</a> <span class=«total»>22</span>
    </div>

    </div>


    Теперь у нас есть готовый HTML-код, более читаемый, более лёгкий. Украсим его стилями.

    Новые стили



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

    .live_section {
    padding: 20px 20px 7px 20px;
    font-family:tahoma,arial;
    font-size:12px;
    }


    Теперь зададим нижний отступ для записей «Прямого эфира»:

    .live_section .entry {
    margin-bottom: 1ex;
    }


    Опишем общие свойства для всех трёх ссылок:

    .live_section span.who a, .live_section .where, .live_section .topic {
    margin-bottom: 1ex;
    line-height: 1.35em;
    }


    А теперь укажем специфичные свойства:

    .live_section .who {
    padding-left: 16px;
    background: url(i/small_default_userpic.gif) 0 50% no-repeat;
    }
    .live_section .who a, .live_section .where {
    color:#999;
    }
    .live_section .topic {
    color:#666;
    }


    Настала пора описать поведение ссылок:

    .live_section span.who a:hover, .live_section a.where:hover {
    text-decoration: none;
    background: #ff6666;
    color:white;
    }
    .live_section a.topic:hover {
    text-decoration: none;
    background: #66cc66;
    color:white;
    }


    И напоследок украсим общее количество комментариев:

    span.total {
    color: #CC0000;
    }


    По-моему, получилось хорошо: живой пример. Код стал легче и понятней.

    UPD: Альтернативная версия Владимира Агафонкина.

    P.S. В примере нарочно убраны не относящиеся к делу элементы страницы. Удобства восприятия ради.

    Поделиться публикацией
    Похожие публикации
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 119
    • 0
      А в stylish это можно запихать?
      • 0
        Что это?
        • +2
          Изменения CSS
          • 0
            Расширение что-ли какое для Firefox?
            • +1
              • 0
                ok, спасибо. Едва ли вопользуюсь, впрочем.
                • +1
                  Под него уже довольно много стилей написано. Например, есть удачные варианты для gmail
          • +2
            Расширение для Firefox. Аналогично Greasemonkey, только для стилей - позволяет описывать собственные корректировки для любого сайта.
        • +2
          Не имеет смысла. Мы же не внешний вид изменить хотим, а только в учебных целях код переделать, внешне оставив всё как есть.
        • +3
          мне кажется, рассматривая какой то кусок кода в отрыве от всего проекта, говорить что он перегружен, равно как и делать любые другие выводы (кроме как о его работоспособности) не совсем правильно
          • 0
            Человек рассмотрел весь код, но в качестве примера взял лишь небольшую часть. Что же тут неправильного?
            • +4
              Я достаточно хорошо знаком с кодом Хабра. Старожилы помнят — почему.
              • +1
                беру свои слова обратно ;)
                • +1
                  Честно говоря, я думал дивной версткой занимались именно «Россомахин и Со», а, как оказалось — не вы.
                  • +1
                    А кто по вашему входит в "Co"?
                    • 0
                      Вы туда не входите? :) Например, из комментариев в этом топике (и других, лень искать остальные) я сделал вывод, что в работе Максиму помогали и другие люди. Например, он упоминал посмотреть профиль Flack-a. К сожалению, не знаком лично ни с одним, ни с другим.
                    • 0
                      Не я. Элементарно не успел бы. Проект серьёзный, сложный и чертовски интересный, что, прежде всего, требует кропотливой работы чесов эдак по 8-9 каждый день.
                • 0
                  Теоретически это можно переверстать definition list'ом. В крайнем случае - списком. А то сплошные дивы и спаны...
                  • 0
                    Можно, конечно.
                    • 0
                      Да вот только в данном случае несколько иная связь между элементами. В равной стпени это всё можно в UL засунуть. Так что я не стал мудрить.
                      • +1
                        http://www.maxdesign.com.au/presentation…

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

                        Засунуть в ul - это как минимум стоило бы сделать. Divitis/Spanitis - главная проблема новой вёрстки Хабра, - если показательно перевёрстывать, ее тоже стоит затрагивать имхо.
                        • 0
                          1. Предлагаешь взять юзера за DT?
                          2. Ну так я показательно и попытался.

                          P.S. Статью Расса я читал.
                          • +2
                            Как минимум — UL. Как максимум — DL (не забывай, что одному DT может соответствовать более одного DD):
                            <dl>
                                <dt>Комментатор&nbsp;&rarr;</dt>
                                <dd class="blog">Блог&nbsp;/</dd>
                                <dd class="topic">Тема</dd>
                            </dl>
                            • +2
                              По большому счёту, весь Хабр — это списки. Ныне свёрстанные дивами.
                              • +1
                                Согласен. Списки и потенциально — микроформаты. Жаль, Дима Барановский сейчас вне Сети. Можно было бы развить тему.
                              • 0
                                Как использовать DL я хорошо знаю. И использую там, где считаю уместным.

                                Мне в данном случае не нравится то, что комментатора засунули в DT. Оба DD не описывают комментатора так, как это принято в логике DL, там другая, не столь однозначная, связь. Здесь скорее связь с комментарием, как объектом, являющимся частью топика из такого-то блога, написанным таким-то человеком. Понимаешь? Reverse DL или вроде того.
                                • 0
                                  В спецификации w3c в качестве примера использования DL приводится разметка диалога (там получаются пары "автор" - "реплики"). Тут связь аналогичная, поэтому думаю, что всё в порядке.
                                  • 0
                                    Не аналогичная. Пользователь оставил комментарий, но не создал блог, в котором он этот комментарий написал.

                                    Ссылка на блог не обязательно описывает пользователя. Вот комментарий — да, описывает. Связи неоднозначные.
                                    • 0
                                      Если прописывать блог отдельным dd, то да. Но если так, как я (один dd и на то, и на другое) - комментатора описывают ссылки на блог + пост в комплексе. В таком случае связь верная.
                                    • +1
                                      Попробую ещё раз сформулировать. Сейчас перечитал своё, и вижу, что могут быть неясности.

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

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

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

                                      Я вижу другую цепочку связей: DT должна быть ссылка на комментарий. Описывается она так: её создал пользователь такой-то, и комментарий является частью такого-то блога. Нарисуй взаимосвязи в виде графа — должно быть наглядно.
                                      • 0
                                        Я прекрасно понял, что ты хочешь сказать. :) Просто в таком случае очередность данных будет не той, какой мы ее хотим видеть на странице. Но вариант, который я описал комментарием выше - отличный компромисс.
                                        • 0
                                          ok, если как компромисс, то пусть будет так. Принимаю доводы.
                                          • +1
                                            Спасибо за апдейт!
                                            Только ссылка не туда на словах "Альтернативная версия" :)
                                            • 0
                                              Хе. Рассу было бы приятно.
                                              Сейчас поправлю.
                                    • +3
                                      Макс, список определений в широком смысле описывает связь чего-то с чем-то. Определением или описанием DD быть не обязан.

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

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


                                      Твои мысли понимаю и разделяю — иногда, действительно, хочется поменять местами DT и DD, однако, увы, до тех пор, пока через CSS нет возможности оперировать DOM, так или иначе приходится идти на компромиссы.
                                      • +1
                                        очепятка:
                                        <dd>Тема&lt;/dd> → <dd>Тема</dd>
                                    • +1
                                      P.S. Ну мы ж теоретизируем сейчас, как обычно. Володя уже реализовал, и хорошо реализовал.
                                    • +2
                                      Вот, переписал немного на свой манер - глянь. :) http://agafonkin.com/files/etc/habratest…

                                      Ты в своём коде еще забыл о некоторых шорткатах, можешь подправить.
                                      • +2
                                        Ага. font-ы.
                                        Хорошая работа. Надеюсь, не зря мы тут воду мутим.
                                        • +1
                                          Спасибо. :)
                                          Цвета еще. К тому же совершенно непонятно, зачем ты прописывал margin-bottom для ссылок. Вертикальные марджины всё равно у инлайн-элементов игнорируются. И line-height если и прописывать, то элементу выше - унаследуют (у меня он в шорткате font).
                                          • +1
                                            Марджины, скорее всего, выплыли из оригинального CSS-файла. С утра пораньше мог не отловить. Собственно, и не отловил.
                                          • +1
                                            не зря)

                                            лично я,кое что новое для себя узнал...)
                                            • 0
                                              Хорошо, если так. Бог в помощь.
                                          • 0
                                            мне этот вариант приглянулся более всего
                                            • 0
                                              хотя да, имя пользователя не совсем подпадает под причинно-следственную свять term - description
                                              • 0
                                                Я в подобных случаях стараюсь избегать подобные конструкции, если на то нет какой-то особой необходимости. Слава богу, не часто и случается.
                                                • 0
                                                  Имя пользователя замечательно подпадает под смысл, который есть у dt - не зря dl рекомендуют для оформления диалогов.
                                                  В данном случае, хотя ссылка на блог и не связана с автором, но пара блог/комментарий очень неплохо подходит для dd.
                                        • 0
                                          Кстати, ul даже с точки зрения компактности кода подошёл бы лучше - не пришлось бы на каждую строчку вешать class='entry'.
                                          • 0
                                            Да, ты прав.
                                            • 0
                                              Но я воздержусь :)
                                            • 0
                                              Согласен. И не только с точки зрения компактности. По моему скромному мнению, dl здесь совсем не к месту.
                                        • 0
                                          Грамотно, красиво, удобно.
                                          А отступы в начале строк в коде намеренно не ставил или просто авто-форматируется так?
                                          • 0
                                            Автоформатируется так. В коде примера всё отбито табуляцией. Будет время — накатаю багрепорт. Надо доработать поведение вставляемого кода.
                                            • 0
                                              Ясно.
                                              Неплохо было с подсветочкой реализовать – пальчики оближешь!
                                              • 0
                                                <pre>?
                                          • +1
                                            - а где он закрывается?

                                            точнее я знаю где он закрывается, но в коде не вижу....)
                                            • +1
                                              черт... я про вот это - <span class="who">
                                              • +1
                                                В топике не закрыт. В примере все правильно :)
                                                <span class="who"><a href="http://naz.habrahabr.ru/">naz</a></span>
                                                • 0
                                                  В топике тоже закрыт. Другое дело, что пока я не заменил < на сущность, движок проглатывал закрывающий тег.
                                                  • +1
                                                    я имел в виду топик)

                                                    просто в глаза бросилось...
                                              • 0
                                                Зачем так усложнять:


                                                .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;
                                                • 0
                                                  С font меня уже поправили. Утром писалось — не доглядед.
                                                  Что до первого замечания: я правил код в живой странице с подключенными оригинальными стилями, и там сыграл каскад, который иначе было не перебить.
                                                • –7
                                                  профессионально конечно.
                                                  но мне кажется опять загоны у вас ..

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

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

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

                                                  заметьте!! что в htm коде google нет кавычек в описании атрибутов (вроде бы какой не профессионализм),т.е на хрен w3c стандарты - работающий продукт и пользователь важнее!
                                                  • +8
                                                    «За великими нужно следовать в достижениях, подвигах и победах, а не в ошибках, неудачах и поражениях...» ©
                                                    • 0
                                                      =) где вы видите ошибки неудачи и поражения?
                                                    • +3
                                                      Вы, собственно, кто?
                                                      И на каком основании говорите о каких-то моих «загонах», да ещё и «опять»?
                                                      • –1
                                                        я не о ваших загонах говорю...
                                                        просто охарактеризовал этим словом жесткое обсуждение узкоспециализированных вещей на хабре, которое часто встречается..
                                                        написал свое мнение о том что это не так важно, а важнее результат
                                                        не более..
                                                        • 0
                                                          Ну так и чем вас результат не устраивает? Я целенаправленно добивался снижения веса того кода, который и сам, как пользователь, ежедневно часто качаю. При сохранённом в неизменности интерфейсе удалось снизить издержки ну хотя бы трафика, пусть и чуть-чуть — это плохо что-ли?

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

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

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

                                                            я не говорю про баннеры на странице
                                                            • 0
                                                              Зачем читать, если не слушаешь и не понимаешь смысла?
                                                              • +2
                                                                уж извините, если я и не знаю всех тонкостей верстки это не значит что не могу высказать свое мнение..

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

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

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

                                                                вот ниже например объяснили(комментарий tom'a) почему у google и скрипты и css не вынесены отдельно - потому что одни http заголовки будут по размеру такие же как само содержание, и 3 запроса на сервер однозначно хуже одного.. и красота тут не причем и нахрен не нужна
                                                                • 0
                                                                  Уважаемый, вы к филателистам так же будете подкатывать с вопросами типа "зачем ты фантики всякие собираешь"?
                                                                  Как говорится, "не ломай кайф, в натуре, а!" :)

                                                                  По поводу Google - я на 100% убеждён, что такой код обоснован. Просто мы с вами не полностью понимаем, какие там могут быть требования к код (например, защита от парсеров и пр).
                                                      • +1
                                                        «Вообще нет никакого html-кода»
                                                        убило!.. это называется «слышал звон, да не знаешь где он».
                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                          • 0
                                                            да там у них и правда народ не далекий собрался, я их не в тему в пример привел ..
                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                              • 0
                                                                да я в шутку написал, вы что ..
                                                                короче не знаю...не верится мне что там необдуманно что либо вообще используется!
                                                                я привел google в пример потому что подумал мол хоть на него наезжать не будут...и то не так..

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

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

                                                                тот же google вытащил на публику механизмы ajax запросов
                                                                потому что посчитал что это удобно , а не потому что описано стандартами...
                                                                и уже сам w3с стандартизирует этот самый ajax
                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                  • 0
                                                                    Ну всё правильно, внутри же нету java script'a :)
                                                                    • 0
                                                                      я считаю что - это совсем не важно и это не
                                                                      ошибка, это еще раз на примере успешного проекта показывает что качество продукта определяется не вылизанностью кода,
                                                                      а его работой..

                                                                      важно понимать на что реально нужно приложить усилия и от этого будет приемущество у продукта, а на что прикладываются усилия только ради собственного интереса..
                                                                      непрерывно улучшать красоту кода без причины (циклический рефакторинг) - очень серьезная проблема большинства специалистов
                                                                      • +1
                                                                        Значит проект хабрахабр должен оставаться с плохим кодом? Так?
                                                                        • 0
                                                                          =) т.е сейчас код ужасен? и нужно принимать меры?
                                                                          как я могу ощутить как пользователь что есть проблемы в html коде верстки?
                                                                          • +1
                                                                            На мой вопрос пожалуйста дайте ответ.
                                                                            • 0
                                                                              проект хабрахабр должен совершенствоваться,
                                                                              если я хочу как пользователь помочь этому процессу, я напишу об ошибке или предложу усовершенствование..
                                                                              но не буду советовать исправить код на свой манер..

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

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

                                                                            но не в том ракурсе что есть проблема непосредственно у сайта habra и надо ее решать ..проблемы нет
                                                                    • 0
                                                                      Каскадные таблицы и скрипты в коде самой страницы сделаны с той же целью, что и использование лишь одного графического файла — для уменьшения количества запросов на сервер. Гугл это не страница-хомяк школьника Василия Пупкина, которую запрашивают раз в полгода, и то по случайности.
                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                        • +1
                                                                          Очень сомнительная экономия - для сайтов типа google пользователь обычно делает много загрузок страниц сайта, а однажды запрошенный css файл надолго кэшируется в браузере. На самом деле, стили прописывают в странице не для экономии трафика, а для визуального ускорения загрузки страницы - Яндекс, например, тоже частично выносит стили в код главной страницы, чтобы основной элемент - форма поиска - появилась сразу и в правильном оформлении.
                                                                          • 0
                                                                            Тоже разумно.
                                                                            Может быть, они часто меняют стили и скрипты? :)
                                                                  • 0
                                                                    Поставил бы плюсик. Полностью поддерживаю.
                                                                  • +1
                                                                    Да, код, пожалуй, стал лучше... Но внешне и на удобство это никак не повлияло =) Хотя, повлияло на правильность верстки, на красоту, на логичность. В общем, дополнения и изменения ценные.

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

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

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

                                                                      a:hover span {background: #ff6666; color: white;}
                                                                      • 0
                                                                        Ну и повесить на ссылку атрибут title="Посмотреть профиль", конечно.
                                                                        • 0
                                                                          Поведение по :hover в этом случае будет отличаться от того, что сейчас. Фоновая картинка сейчас никак не зависит от смены цвета фона ссылки. Если спан поместить внутрь, то всё поменяется.

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

                                                                            Я думаю, что этот вариант предпочтительнее, если, конечно, не стояло задачи сделать точно так же, как было.
                                                                            • 0
                                                                              Согласен с вами.
                                                                              Действительно лучше.
                                                                              • 0
                                                                                Отношение к этому варианту складывается из отношения к тому, дозволительно ли подсвечивать элемент интерфеса, который явно не находится под курсором. Ну а поскольку я тут проблем не вижу — ваш вариант вполне годится в дело.
                                                                                • +2
                                                                                  Спасибо. Остается только надеяться, что люди из Futurico возьмут на вооружение один из трех предложенных здесь вариантов. И не так уж и важно, какой именно.
                                                                          • 0
                                                                            Но внешне и на удобство это никак не повлияло =)

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

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

                                                                            Одной из моих задач было снижение веса кода. Я её решил.
                                                                          • +4
                                                                            Россомахина хлебом не корми, дай пощупать чей-нибудь html и css. :-)
                                                                            Спасибо, Док!
                                                                            • 0
                                                                              Лучший валидатор — это браузер ;-)
                                                                              • 0
                                                                                еще лучший - человек который собственно сайт смотрит :)
                                                                                • 0
                                                                                  Хе-хе. В данных случаях (уже три реализации) и тут всё должно быть тип-топ ;-)
                                                                                  • 0
                                                                                    Ага, люди с ослабленным зрением идут лесом и говорят вам спасибо.
                                                                                  • +2
                                                                                    Спасибо большое за такое обсуждение. Редко оно получается. Я Хабр хочу видеть обществом профессионалов, любящих своё дело, готовых обсудить проблему, найти решение. Совместно. Этот топик очень наглядно показывает, что у Хабра действительно есть будущее! =)
                                                                                    • +2
                                                                                      Макс, а почему не список?! Я был уверен, что гуру тут напишет ul. По крайней мере, посмотреть профиль pepelsbey бы точно ul написал :) А вариант с dl мне совсем не нравится: не логично это, заголовок комментария никак не является пояснением, расшифровкой к имени юзера.
                                                                                      • 0
                                                                                        Просто для меня в данном случае что UL, что DL, чтоь моя реализация — примерно равнозначны в своём неполном соответствии описываемым данным. Хотя, конечно, мог бы и UL-ом, да и DL-ом — тоже :-)

                                                                                        Вадик, кстати, я думаю, сделал бы DL-ом. Надо бы его вытащить сюда, а то варится там в СУПе, как лосось в белом вине.
                                                                                        • 0
                                                                                          Да, DL мне дороже ;) Про лосося улыбнулся. Я тут, просто немного запарен.
                                                                                      • +1
                                                                                        В 2012-м году Путин вернется к власти, ибо закончится срок правления предыдущего президента, который будет избран в 2008-м. :) Что тогда будет...
                                                                                        • +2
                                                                                          извините, не в тот топик поместил.
                                                                                          • +1
                                                                                            Ничего-ничего. Это как перчинка в блюдо. Для контраста.
                                                                                          • +3
                                                                                            Как это что? Отсутствие кавычек в XML-атрибутах запретят законодательно!
                                                                                            ;)
                                                                                          • –1
                                                                                            К нам в Санкт-Петербург летят розовые фламинго!
                                                                                            В это воскресенье (08.07.07),в 15 часов 150 – 200 молодых людей соберутся у Дома кино,поприветствовать чужеземцев!

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

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

                                                                                              Самое читаемое