Вредная верстка

    Как определить, что сайт сверстан качественно?
    Есть много статей о том, как делать хорошо, но совсем нет – о том, как делать не надо, ведь даже валидный и кроссбраузерный сайт может быть сверстан отвратительно.

    Из этой статьи вы узнаете:


    • О плохих приемах современной верстки;
    • О том, как даже не будучи профессионалом, за 5 минут определить плохо ли сверстан сайт или нет.




    Какие ошибки бывают в верстке?


    • Вызывающие проблемы у пользователей;
    • Влияющие на SEO;
    • Затрудняющие дальнейшую поддержку и масштабирование сайта и говорящие о низкой квалификации верстальщика.



    Проблемы у пользователей


    В первую очередь это доступность сайта. Доступность не только для здоровых людей, пользующихся современными браузерами на десктопах/ноутбуках с хорошей скоростью соединения и неограниченных какими-либо политиками безопасности, а доступность для клиентов:
    • с мобильных устройств;
    • с отключенным javascript’ом;
    • с устаревшими браузерами (IE5.x);
    • с низкой скоростью соединения;
    • с отключенной графикой;
    • с физическими ограничениями (в первую очередь это слепые пользователи).



    Шрифты в px


    body {font-family:Arial, Tahoma, Verdana, sans-serif; font-size:12px}

    причём часто именно в таком убогом виде, а не в сокращённом

    Чем плохо:


    • пользователи IE не смогут увеличить размер шрифта.


    Как надо:


    html {font-size: 75%}
    body {font: normal 1em/1.3 Arial, sans-serif}




    Общий CSS для всех media


    <link href="main.css" rel="stylesheet" type="text/css" />

    Почему плохо:


    • при печати страницы на принтере получаем не документ, а исковерканный скриншот сайта 1;
    • мобильные устройства не в состоянии отобразить большинство этих стилей и как следствие встроенные в них браузеры вообще не отобразят этот сайт 2;
    • OperaMini попытается конвертировать его в доступный вид, но результат будет весьма далёк от идеала: внешний вид не ахти, много бесполезных на мобильном устройстве элементов и больший чем должен был бы быть трафик у пользователя.


    1 – сайт это в первую очередь документ. Это информация, которая может и должна быть представлена в виде: заголовок, текст, иллюстрация.
    2 – встроенный браузеры мобильных телефонов (даже старых) вполне могут открывать не только WAP, но и обычные сайты, если они валидны, мало весят и сверстаны семантически, а не презентационно.


    Как надо:


    <link rel="stylesheet" href="css/main.css" type="text/css" media="screen,projection" />
    <link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
    <link rel="stylesheet" href="css/handheld.css" type="text/css" media="handheld" />


    Почему не подключать общий стиль для всех, а в print.css и handheld.css лишь убирать ненужное?

    Потому что всё не уберёте, все стили не обнулите, потому что это мартышкин труд, потому что после вас main.css допишут, а про print.css никто и не вспомнит.


    Недоступный javascript


    <a href="javascript:DoWin(this.href)">Refund Policy and Contact Information</a>


    Сюда же относится глупости типа (div не может иметь фокус ввода и к нему нельзя перейти с клавиатуры)

    А если у человека отключен Javascript?

    Как надо:


    <a href="policy_contact.html" target="_blank" onclick="DoWin(this.href); return false">Refund Policy and Contact Information</a>
    

    или даже так:
    <a href="policy_contact.html" target="_blank" id="policy_contact">Refund Policy and Contact Information</a>
    
    в js на onload:
          document.getElementById('policy_contact').href = '#';
          document.getElementById('policy_contact').target = '_self';
          document.getElementById('policy_contact').onclick = DoWin;

    Продолжая тему доступности:


    *:focus {outline: none}

    У меня сели батарейки в мыше, как я пойму на какой ссылке я сейчас нахожусь?
    Не отбирайте у пользователя то, к чему он привык!
    Также это относится к ссылкам:
    • всё-таки лучше когда они подчеркнуты;
    • незабывайте про стили для посещённых ссылок!




    img вместо background


    <a href="#"><img alt="Переплет на любой вкус" src="images/offer1.jpg"/></a>

    Почему плохо:


    • Я мабилко и гружу непонятную картинку ужатую до нечитаемого размера;
    • Я принтер и зря засоряю лист бумаги картинками;
    • Это лишний презентационный мусор в коде для поисковиков, для тех кто будет поддерживать ваш код (вы не поменяете картинку только из css, придется лезть в шаблоны, доступ к которым может быть например только у программеров)


    Как надо:


    <a href="#">Переплет на любой вкус</a>

    Стили (background-image и отступ под неё – в css)

    Это касается вообще всех изображений на сайте — в тегах img должны быть только иллюстрации! но не презентационная графика.




    Ошибки влияющие на SEO



    Отсутствие структуры или вообще отсутствие как таковых h1,h2,h3…



    Неправильные h1,h2,h3...

    Сюда же входит непродуманность структуры заголовков, из-за которой потом программер, которому срочно понадобилось добавить новый блок с текстом на сайт копирует блок в котором уже есть h1, потому что «он выглядит так как нужно»
    Верстальщик должен думать наперёд, он архитектор сайта, он должен предусмотреть стили даже для неиспользуемых элементов, он должен думать над структурой заголовков, и смотреть на их смысл, а не на внешний вид – разные по внешнему виду заголовки, могут быть отмечены тегами одного уровня, если такова логика документа.


    Как надо:



    Правильные h1,h2,h3...

    Выше я описывал img vs background-image – это относится сюда самым непосредственным образом.

    Вместо:


    <div id="logo"><img alt="Trinity group" src="img/splash/trinity-group.jpg"/></div>



    Надо:


    <h1>Trinity group</h1>



    Вместо:


    <li><a href="expert_inner.html"><img alt="" src="img/splash/expert-menu-01.gif"/></a></li>



    Надо:


    <li><a href="expert_inner.html">Спроси сомелье</a></li>



    Но как?!


    Читаем про LIR и Pixy.



    Антисемантика


    <div class="menu">
      <a title="Kinderspiele" class="kinderspiele" href="#"></a>
      <a title="Artikel" class="artikel" href="#"></a>
    </div>


    Это классический пример, но он досих пор встречается повсюду — большинство примеров этой статьи я взял с портфолио топовых по сумме за проект фрилансеров. После просмотра портфолио топовых страшно думать что у нетоповых :)

    Почему плохо:


    • У ссылок отсутствует текст.
    • Отсутствует логика в документе. Это тоже влияет на ранжирование.
    • На мобилке и в печатном варианте, этот код будет выглядеть убого даже если бы там был текст внутри ссылок.


    Как надо?


    <ul class="menu">
      <li><a title="Kinderspiele" id="kinderspiele" href="#">Kinderspiele</a></li>
      <li><a title="Artikel" id="artikel" href="#"> Artikel</a></li>
    </ul>



    Сюда же относятся перлы вида:


    <div class="hr"></div>
    <div class="header"></div>

    и т.п. — используйте существующие html-тэги, старый добрый html (POSH).

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

    Плохо:


    <table id="t-personal" class="t-text">
      <tbody>
        <tr>
          <th>Настоящее Имя:</th>
          <td>Иван Копейкин</td>
        </tr>
        <tr>
          <th>Дата рождения:</th>
          <td>16 сентября 1977г.</td>
       </tr>
      </tbody>
    </table>



    Хорошо:


    <dl id="t-personal">
      <dt>Настоящее Имя:</dt>
        <dd>Иван Копейкин</dd>
      <dt>Дата рождения:</dt>
        <dd>16 сентября 1977г.</dd>
    </dl>



    Плохо:


    <p><strong class="black">Предметом бухгалтерского учета</strong> в обобщенном виде выступает хозяйственная деятельность предприятия
    с точки зрения системы учета ресурсов и результатов финансовой и хозяйственной деятельности предприятия…</p>

    Хорошо:


    <p><dfn>Предметом бухгалтерского учета</dfn> в обобщенном виде выступает хозяйственная деятельность предприятия
    с точки зрения системы учета ресурсов и результатов финансовой и хозяйственной деятельности предприятия…</p>



    Плохо:


    <div class="info">
      <p class="data">January 5, 2006</p>
      <p>Finally! We're officially launched! </p>
      <p>Quality product for SEO webmasters. </p>
      <a title="" href="#">Try it and you'll see</a>
    </div>



    Хорошо:


    <div class="hentry">
      <var class="published" title="2006-01-05">January 5, 2006</var>
      <h4 class="entry-title">Finally! We're officially launched!</h4>
      <div class="entry-content">
        <p>Quality product for SEO webmasters.</p>
        <a href="#" rel="bookmark">Try it and you'll see</a>
      </div>
    </div>



    Плохо:


    <div class="copy">2007 — 2008 © Строительная компания «Меридиан»</div>



    Хорошо:


      <address class="vcard">
        © <a class="fn n org url work" href="http://www.meridy.ru/">Строительная компания «Меридиан»</a>, 2007—2008
        <span class="adr work">
          <span class="street-address">ул. Ленина 247</span> ·
          <span class="locality">Москва</span>,
          <span class="postal-code">109012</span>
          <span class="country-name">Россия</span>
        </span>
        <span class="tel">
         <span class="type">Work</span> <span title="+74957889775" class="value"> +7 (495) 788-97-75</span>
        </span> ·
        <a class="email" href="mailto:info@meridy.ru">info@meridy.ru</a>
      </address>



    Почему?!


    Потому что это:
    • Помогает семантическим роботам;
    • Позволит будущим браузерам отдавать юзеру всю необходимую ему информацию быстро и легко (контакты, новости и пр.)





    Стили затрудняющие дальнейшую поддержку и масштабирование сайта и говорящие о низкой квалификации верстальщика



    float: left для всего



    Это ппц. По другому не могу сказать.

    Что это означает:


    • либо что верстальщик не знает для чего нужно и что именно делает свойство float;
    • либо что он вообще верстать не умеет.


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

    Упрощённо говоря свойство float было придумано для того чтобы текст мог обтекать картинки. Да, его можно и нужно использовать для позиционирования элементов, но не для всех элементов на странице!
    Свойство float оно НЕ для того чтобы:

    • поставить элемент слева или справа, не бывает float: center;
    • ширина блока стала равна его содержимому;
    • блоки шли один за одним, как кирпичики;
    • и совсем не для того чтобы «неглючило в IE».


    Что происходит реально:

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


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


    Почему плохо когда ВСЕ элементы плавающие:


    • потому нарушена логика документа, веб-страница представляет собой не документ, а нагромождение блоков, которые держатся на честном слове. это презентационный подход: раньше было , теперь —
    • масштабировать такой сайт очень тяжело. Особенно программерам.
    • Глюков там немерянно (особенно в IE которому тяжело расчитывать такое кол-во плавающих элементов… которые кстати ещё и с Layout) И чем больше разрастается сайт, тем хуже становится. Мне приходилось поддерживать чужие сайты, где добавляемые ссылки типа «назад-вперёд», выпрыгивали даже из ячеек таблиц (!) на 200-300 пикселей(!!).
      Сайт становится подобен карточному домику, который может упасть от малейшего дуновения ветра.


    Как надо:


    Тут нельзя написать волшебный код который всё исправит. Для каждого макета — своя вёрстка, это только при презентационном подходе всё одинаково, тут я аппелирую к здравому смыслу — надо учится верстать. Читать спецификации. Читать блоги отцов. Учится. Думать головой.

    Сюда же относятся перлы типа:


    <br style="clear: both" />


    Как надо:


    • overflow: hidden для нормальных браузеров (в особых случаях — :after с clear:both);
    • hasLayout для IE.



    Неуниверсальные глобальные стили базовых элементов


    a,body,p,span,td {font-family: Tahoma,Verdana,Sans-serif; color: #3C5C92; font-size: 10px;}
    ul li {margin: 0; padding: 0; list-style-type: none}


    Если вы увидели такое в стилях вашего верстальщика – остановите его!

    Почему это плохо:


    • это грубое нарушение логики документа: например вы зададите стиль для блока – размер шрифта 12px, а текст в параграфах этого блока всё равно будет 10px. Вы зададите дополнительный стиль для параграфов, а ссылки всё равно будут 10px…
    • где-то на новой странице контент-менеджер вставит текст со списками… он не увидит списков. Потому что верстальщик обнулил базовый стиль, и создал специальный класс для списков! Контент менеджеру теперь html учить и в код лезть чтобы список добавить?
    • Самое главное – верстальщик не думает головой. Он просто хуячит как Рамшат и Джумшут.



    Многократно вложенные div



    Многократно вложенные div

    Что это означает:


    • Что верстальщик привык к , и теперь многократно вложенными div (как правило с float: left) он имитирует ячейки таблицы.


    Почему это плохо:


    • Такой код ничем не лучше чем табличный.
    • Такой проект невозможно масштабировать – только выбросить и сделать заново, по нормальному.




    Как же определить плохо ли сверстан сайт или нет?



    Для этого вам понадобится Firefox и несколько плагинов к нему:


    Устанавливаем их и открываем сайт в Firefox.

    Проверяем доступность сайта без картинок:


    Images → Replace Images with alt attributes


    Все заголовки должны быть видны. Графические ссылки должны быть заменены текстом или выделены фоновым цветом, с титлами при наведении мыши.

    Проверяем структуру заголовков:


    Information → View Document Outline


    Должна быть аккуратная лесенка из ключевых заголовков и слов без красных строк.

    Проверяем семантику:


    CSS → Disable Styles → All Styles


    Сайт должен стать похож на word'овский документ. Без оформительских картинок, с выделенными меню, списками, заголовками и т.п.

    Проверяем микроформаты:


    В правом нижнем углу браузера должна загореться иконка: Microformats present

    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 339
    • 0
      Можно поподробней о проверке на микроформаты?
      • 0
        т.к. валидатора для микроформатов не существует, единственный простой способ увидеть их наличие (кроме "посмотреть к код" :) явлеятся установка плагинов, которые интерпретируют информацию из них.
        Для Firefox это Tails Export (если на странице присутсвуют микроформаты в правом нижнем углу браузера загорается иконка-символ микроформатов) и Operator.
        • +5
          http://microformatique.com/optimus/ кстати валидатор микроформатов =) Надеюсь кому-то пригодится.
          • 0
            о, супер!
            только он на вложенных микроформатах лажается (проверил свой сайт, потом с microformats.org взял пример для чистоты эксперимента).
            но в любом случае - это огромный шаг вперёд.
            спасибо за ссылку!
    • 0
      Распечатал.
      • +19
        Нафиг ты печатал текст, где много глупостей.
      • 0
        Хорошая статья.
        Неплохо было бы иметь какую-то тулзу, которая анализировала код страницы и на основе замеченных ошибок (не ошибок соответствий с W3C, а именно ошибочных решений) выдавала советы по исправлениям.
        Это весьма пригодилось бы начинающим верстальщикам, которые все эти методы в голове держать не могут, а по ходу работы совершенствовали своё мастерство. А то как закажешь вёрстку на фрилансе - там не то, что о помощи незрячим речи не идёт, там по 100 ошибок на страницу обычный валидатор w3c выдаёт..
        • 0
          webo.in?
          • 0
            он наоборот советует слить все css файлы в один:)
        • 0
          yslow?
        • 0
          Я очень часто ищу подобные статьи, их мало и по этому автор молодец! Если знаете где еще можно почитать, то дайте ссылку, буду очень признателен!
          • +13
            Ряд моментов:
            1. Пользователи IE (особенно 5 и 6 версий) — это интернет-быдло которое будет жрать то, что подали.
            2. target="_blank" — не хорошо.
            3. :focus работает и без мыши. Так что проблем с keyboard-only не будет.
            4. «чтобы „неглючило в IE”» порой приходится не только безобидный float поставить, а столько намудрить, что самому потом смотреть противно. Поэтому см.п.1.
            5. Беда не в глобальных стилях. Это удобное и гибкое средство. Беда в неправильном их использовании.
            6. На масштабирование влияет не тот код что получается в результате, а то как составлены шаблоны.
            • +1
              >> :focus работает и без мыши. Так что проблем с keyboard-only не будет.
              речь о том что outline: none убирает рамку вокруг выделенных ссылок, и их становится тяжело заметить - это явное ухудшение доступности.
              • 0
                Аааа… Тогда да. Но если вместо outline используется другой способ выделения то можно (если осторожно).
                • +2
                  вы бы видели как круто в новой опере выделяются ссылки с клавиатуры )
                • НЛО прилетело и опубликовало эту надпись здесь
                  • +11
                    Пользователи IE - это те, кто не знает про нормальные браузеры,
                    а вы - эстет :)
                  • 0
                    >> 1. Пользователи IE (особенно 5 и 6 версий) — это интернет-быдло которое будет жрать то, что подали.

                    ну как вы можете? как можно так называть людей на основании того, какой программой они пользуются? откуда хамство такое берётся?
                    • 0
                      Ровно так же, как можно называть людей на основании их поведения.
                      Вы же не удивитесь, ели к вам гопота пристанет со словами "ну ты чё, слыш, мабилу гани"? Правильно, вы назовете их быдлом. Они ведь могут без этого обойтись, нормально общатся, нормально жить. Но ведут себя как быдло, вот и называются оным. Так же пользователи. Могут же, МОГУТ нормальными браузерами пользоватся. Но нет, им нравится сидеть на этом глючном и дырявом со всех сторон IE. Вот и получайте, чего хотели. Исправится ведь никто не мешает в любом случае.
                      • НЛО прилетело и опубликовало эту надпись здесь
                        • +2
                          А есть люди, которые даже не подозревают что такое интернет браузер. У них на рабочем столе есть иконка эксплорера с надписью "интернетик" (Ира привет:)), они этим и пользуются. Им вообще по барабану что люди тратят 50% (может и больше) своего времени, чтобы сайты корректно работали под IE 5/6.
                          • 0
                            Они не становятся небыдлом от этого. Как уличная гопота может быть не в курсе, что можно прийти к успеху без отжимания мобил.
                            • 0
                              Ох. Не знаю даже как меня угораздило ответить на комментарий из 2008 года.
                        • 0
                          Вполне понятная и объяснимая лютая ненависть к IE плавно переходит в ненависть к пользователям IE.
                          • 0
                            и какая сволочь минусит вполне нормальные, но кому-то неугодившие комментарии, интересно?..
                            • 0
                              Моё суждение вторично.
                            • +1
                              Вы про корпоративные стандарты когда-нибудь слышали? Во многих конторах люди пользуют то, что дали (в большинстве случаев именно IE6). Все быдло кроме Я, так?
                              • –2
                                В таком случае быдло те, кто такие стандарты устанавливает. А причисление к быдлу тут скорее по аналогии с низкосортной музыкальной попсой. Жрут же… И даже ещё просят.
                                • 0
                                  У нас в компании в корпоративных стандартах браузером по-умолчанию указан Firfox.
                                  Это очень упрощает разработку корпоративного сайта/ERP-системы.
                                  А какой смысл указывать в КС стандартным браузером IE? Кому от этого лучше/легче/удобней? Пользователям? Разработчикам?
                                  • –1
                                    >> А какой смысл указывать в КС стандартным браузером IE?
                                    У нас, например, есть SharePoint, в котором через FF не полазить - будешь вводить логин, пароль на каждую страничку.
                                    Причем я уверен, что это не единственная причина использования IE...
                                    • 0
                                      1. централизованная настройка и управление через групповые политики?
                                      2. автоматические обновления с какого-нибудь _локального_ wsus?
                                      3. использование уже оплаченного N лет назад приложения на ms jvm?
                                      4. требования сторонних сертифицирующих организаций (для госконтор)?
                                      • 0
                                        Понял.
                                        Спасибо за пояснения.
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                    • 0
                                      У меня нет ЖЖ :-)
                                      Ищите лучше, мой основной ник Exel, просто на Хабре он был занят.
                                    • 0
                                      >Пользователи IE (особенно 5 и 6 версий) — это интернет-быдло которое будет жрать то, что подали.
                                      Предположим, я простой электрик. Вы даже представить себе не можете, сколько мучений мне доставляют некачественные розетки, которые приходится устанавливать. А Вы ими пользуетесь, да еще и перегружаете. Как теперь мне Вас называть?
                                      В то же время я пользуюсь ИЕ, мне вполне удобно, и я понятия не имею как устроены сайты. Но оказалось что я - быдло.
                                      Я придумал выход: как оплачивается программист по Linux? а Windows?
                                      Не нравится писать под ИЕ - дерите за это с заказчиков…

                                      А на счет статьи — очень даже полезно, несмотря на то, что для большинства случаев много лишнего. Стиль у всех разный. Что удобно одному — не удобно другому. Почерпнул много полезного практического (прям хоть copy-paste) и идеологического. Сохранил страничку для заглядывания оффлайн)))
                                      • 0
                                        > Как теперь мне Вас называть?
                                        Я думаю, его можно называть электро-быдло.
                                      • 0
                                        >Пользователи IE (особенно 5 и 6 версий) — это интернет-быдло которое будет жрать то, что подали.
                                        Предположим, я простой электрик. Вы даже представить себе не можете, сколько мучений мне доставляют некачественные розетки, которые приходится устанавливать, а алюминиевые провода — полная Ж. А Вы ими пользуетесь, да еще и перегружаете. Как теперь мне Вас называть?
                                        В то же время я пользуюсь ИЕ, мне вполне удобно, и я понятия не имею как устроены сайты. Приходится быть быдлом.

                                        Придумал выход: как оплачивается программист по Linux? а Windows?
                                        Не нравится писать под ИЕ - дерите за это с заказчиков… если убедите… )

                                        А на счет статьи — очень даже полезно, несмотря на то, что для большинства случаев много лишнего. Стиль у всех разный. Что удобно одному — не удобно другому. Почерпнул много полезного практического (прям хоть copy-paste) и идеологического. Сохранил страничку для заглядывания оффлайн)))
                                        Автору спасибо.
                                        • 0
                                          Очень грубо. Конечно, гонятся за парой пикселей и подгонять их, чтобы в IE выглядело также, как и в других браузерах, смысла нет. Именно потому, что будут жрать все подряд.
                                          Но называть таких людей быдлом... с таким же успехом можно былом называть всех, кто слушает что либо отличное от классической музыки. Непривередливость/всеядность в одной области — не показатель.
                                          Тем более, многие браузеры для людей с ограниченными возможностями могут быть сделаны на движке IE. Потому, что там(IHTMLBrowser2) и куки, и DOM-парсер и все остальное уже готовое.
                                        • 0
                                          Автор молодец безусловно! Серьезная, полезная статья для многих...
                                          Только вот читал я и думал, что моим клиентам все это нафиг не нужно! И уж платить за эти "дополнительные правильности" они точно не будут!!! А сверстать просто ровно и аккуратно это одно, а Правильно (как автор описывает), да еще для всех устройств, для слепых, для глухих и т.д. - это простите в три-четыре раза больше работы...
                                          Так что все это далеко не для каждого клиента и не для каждого сайта! Хотя стремиться к лучшему конечно же нужно по-любому...
                                          • 0
                                            ну так приучайтесь постепенно.
                                            автору спасибо, теперь бы найти того, кто содержащуюся в статье полезную информацию уместит на листочке в половину формата А4
                                            • 0
                                              половина A4 — A5 :)
                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                • 0
                                                  Тогда это два листочка A6 :-)
                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                • +1
                                                  Я с вами полностью согласен. Зачастую заказчику важен лишь конечный результат (т.е сам факт существования и работы сайта), а вот то как это сделано его не беспокоит. В этом основная проблема наших заказчиков, которые "я в этом ничего не понимаю, делайте всё сами - вы же профессионалы, отчитаетесь такого-то"... Т.е недальновидны в веб-разработке, но при этом без их одобрения ни одно нововведение в сайте не появится!
                                                  • +2

                                                    я ставлю не от хорошей жизни, а потому что в ИЕ после \n рендерится перенос строки


                                                    display: block для img и всё будет ок. но собственно - зачем вообще использовать img когда есть гораздо более удобный способ - background-image?

                                                    судя по описанию "убираем бордер - элемент отображается со смещением на одну строку вниз"


                                                    вы столкнулись с схлопыванием границ
                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                      • 0
                                                        как это img в relative?
                                                        img - одиночный элемент, смысл назначать ему position: relative - всё равно в него другие элементы не вставишь.

                                                        img или background - решать вам, я лишь написал почему img плохо.
                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                          • 0
                                                            img - одиночный элемент, смысл назначать ему position: relative - всё равно в него другие элементы не вставишь.

                                                            Э... Вы шутите или и правда не знаете что основная цель position:relative не в том, чтобы изменять координаты отсчёта для вложенных элементов. Иногда так бывает, что какой-то блок или картинку нужно сдвинуть относительно её позиции в основном потоке. Вот для этого и делаются <img style="position:relative; top:10px; left:10px;" />
                                                            • 0
                                                              я знаю, но я не ясновидящий и незнаю как выглядит ваш макет.
                                                              • 0
                                                                нет. приведённая цитата как раз говорит о том, что вы не поняли зачем используется position:relative. К конекретному макету это отношения не имеет.
                                                • +8
                                                  Хорошая статья. Но очень не понравился тон - бессмысленная высокомерность. :(
                                                  К тому же местами противоречит сама себе - сказать, что сверстаное валидно и кроссбраузерно, но при этом в объяснении почему плохо "глюков немеряно". Так глючит или все-таки не глючит? :)

                                                  И, имхо, намешано все в кучу. Например, есть сайты, которые вообще нет смысла открывать без картинок - чисто имиджевые.
                                                  Опять таки, не сказано, как "правильно" сверстать, то что по стандартам и семантике в ИЕ нельзя сверстать в принципе...
                                                  С размерами шрифтов - таже байда. На имеджевых сайтах размер шрифта должен правильно соотносится с картинкой. Для информационных сайтов - совсем наоборот. К тому же все нормальные браузеры давно чихать хотели в чем там у вас задан размер.
                                                  А то что ИЕ.3.0 так не умеет - так это его проблемы. Человек с плохим зрением - пользуется нормальным браузером с произвольным увеличением текста, а не таким, который посчитали достаточным разработчики ИЕ.
                                                  • 0
                                                    валидно и кроссбраузерно
                                                    • +1
                                                      хабр скушал комментарий(

                                                      валидно и кроссбраузерно неравно качественно


                                                      16-кратная вложенность блоков не делает страницу невалидной, хотя это явная недоработка.
                                                      Валидность можно сравнить с проверкой орфографии в вёрде - можно написать глупость, но зато без ошибок :)

                                                      про "глюков немеряно" в float:left расскладках


                                                      При поддержке такой вёрстки сталкиваешся с её непредсказуемостью, особенно в IE, которому очень тяжело обрабатывать такое кол-во плавающих элементов. Хаками и другими грубыми действиями её удаётся привести в чувства, но она неправильна изначально. Зачастую такие сайты первоначально проверяли в IE6, а потом через html>body #someelement {} приводили внешний вид в FF к запланированному.

                                                      Опять таки, не сказано, как "правильно" сверстать, то что по стандартам и семантике в ИЕ нельзя сверстать в принципе...


                                                      про это много хороших статей есть, достаточно в меру использовать hasLayout и одноразовые expression.
                                                      • 0
                                                        много статей - не спорю, но если уж вы взялись писать статью о том в каком случае нужно "гнать верстальщика в шею" - то уж постарайтесь описать все возможные варианты. На некоторые пункты, можно сходу назвать несколько примеров, когда они становятся бессмысленными.
                                                        Например, сайт без картинок - звучит глупо в отношении фотосайта. Так же как возможное открытие его с мобильных устройств.
                                                        Откуда вообще взялось вот это понятие про мобильные устройства? Мобильные устройства уже давным-давно умеют открывать полноценно "большие" сайты.
                                                        А если уж делать версию для мобильных устройств, то тогда уж делать полностью другую "шкурку" специально разработанную под мобильные устройства, а не тот нечитабельный кошмар, который получается при описанных выше раскладах - пример - http://ljmob.ru/
                                                        • 0
                                                          Ну как мабилка полноценно откроет большой сайт на маленьком экране? Например на 176px?

                                                          Разные версии для разных устройств - это презентационный подход. Это лишние расходы. Надо сразу делать нормально.
                                                          • 0
                                                            Если вы чего-то не знаете - не стоит утверждать, что такого не бывает. Скачайте себе в мобилу Оперу.Мини и посмотрите. Или вы так - только теоретически? :)

                                                            Ну когда же вы уже поймете, что комбайны хуже ускоспециализированных вещей!
                                                            Сделать так чтобы выглядело хорошо и в мобиле текстом и в браузере - нереально, не делая разных версий. В при просмотре в браузере должно быть море необходимых вещей, которые в мобиле будут только засорять и без того мелкий экран - дублирующая навигация - пэйджер вверху и внизу списка, куча копирайтов, хлебные крошки и т.д. и т.п. Если делать усреднное - то скорее всего получится и там и там говно. В браузере будет неудобно потому, что много будет не хватать, а в мобиле будет куча лишнего.
                                                            • +1
                                                              я каждый день захожу на сайты из OperaMini

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


                                                              Если это не можете сделать вы. это не значит что это нельзя сделать. Можно. И очень даже легко.
                                                              • 0
                                                                >я каждый день захожу на сайты из OperaMini
                                                                и до сих пор не заметили как можно преподнести "большой" сайт на маленьком экране? :)

                                                                >Можно. И очень даже легко.
                                                                Примеры в студию!
                                                                • 0
                                                                  http://anime.kharkov.ua/
                                                                  там есть доп. ссылка "к навигации"

                                                                  а вообще на мабиле будет хорошо отображатся любой семантически качественно сделанный сайт:
                                                                  http://www.webmascon.com/forum/viewtopic…
                                                                  • 0
                                                                    причем тут "отображаться"?
                                                                    я ни слова не сказал, что нельзя сделать так, чтобы хорошо отображалось.
                                                                    я говорю о нормально представлении инфрмации.
                                                                    вот то, что там отображается - эту простыню из кучи текста, ссылок на форум (который в таком виде, кстати, не читается, километровый копирайт, куча счетчиков и т.д. - никто просто читать не станет - оно не подготовлено для того, что бы его читали. (это если смотреть с просто отключенными стилями).

                                                                    Но я пошел дальше - я открыл этот сайт с мобильника (Nokia 5300 XpressMusic) встроенным (x)HTML-браузером.
                                                                    То что оно начало мне качать что-то очень долго это один вопрос - текст появился и я даже начал проматывать в надежде на удивление) Но промотав процентов 5 от всей простыни, телефон выдал окошко, что ему надо что-то срочно догрузить. Секунд через 30 мне начало выдавать какую-то бесформенную хрень с кнопкой "регистрация" - а все остальное уползло за край экрана.
                                                                    И все продолжало и продолжало что-то грузится. В этом месте мне надоело и я отрубил связь, так и не узнаю будут ли мне грузится счетчики, ссылки на форум, облако тэгов, ваши партнеры и другие абсолютно необходимые мне, человеку зашедшему на сайт по тарифам доллар за мегабайт, вещи.
                                                                    Скажете - используй ява-браузер? Так явабраузером я могу и весь сайт посмотреть - выбрав нужный мне кусочек и не тратя при этом кучу трафика.
                                                                    В общем, если вы действительно полагаете, что это сайт оптимизированный под просмотр на мобильных устройствах - то дальше и говорить собственно не о чем... :(
                                                                    • 0
                                                                      *сайт оптимизированный под просмотр на мобильных устройствах, с дорогим трафиком -
                                                                      • 0
                                                                        должно быть ~30 килобайт.
                                                                        я проверял по счётчику данных столько и выходит.
                                                                        не думаю что мой старенький телефон какой-то особенный.
                                                                      • 0
                                                                        должно быть вот так:

                                                                        с мобилки будет результат почти 1:1 как если просто выключить стили - это легко можно сделать в современных браузерах. в Опере даже есть специальный режим: Вид - Небольшой экран (Shift-F11) - он отобразит сайт как если бы он был открыт мобильным устройством.
                                                                        Остаётся лишь структурированный контент - заголовки, абзацы, списки, иллюстрации (не презентационные) и т.д.
                                                                        А как у вас отобразилось, что вы говорите о неподготовленной простыне?

                                                                        Я проверял сайт именно обычным встроенным в обычную мабилу браузером. Ещё старым древним телфоном SE K750 - всё отлично, результат почти 1:1 как в Опере в режиме эмуляции. У вас на Нокии обязан быть такой же результат.
                                                                        • 0
                                                                          Я не знаю кто, кому и чем обязан - я вижу то, что вижу. :)
                                                                          Это как в старой шутке -
                                                                          "- Акулы в Черном море не водятся!
                                                                          - Это ты им расскажи - они об этом видимо не слышали". :)
                                                                          Что-то в роде того.
                                                                          Я не знаю - может у вашего телефона и такое разрешение как показано на картинке и все так же красиво выглядит, но у моего - стандартное разрешение 240х320. При этом все выглядит далеко не так радужно.
                                                                          А что там ниже куда недоскроллено? не кнопочки ли рейтингов?
                                                                          И не ссылки ли на форум, который даже так не "складывается" в тексте?
                                                                          И нужно ли мне каждый раз качать эти 30КБ (или сколько там) с текстом, который я уже сто раз прочел, и минуту скролить вниз чтобы добрать до меню? В чем вообще смысл открытия этого сайта на мобильном устройстве?
                                                                          • 0
                                                                            у меня вообще 176х220

                                                                            если на вашем телефоне так происходит, возможно он пытается загрузить сайт считая себя полноценным браузером? т.е. применяя те же css-стили что и desktop, а не те что написаны для мобильных.
                                                                            • 0
                                                                              главное не это.
                                                                              главное - это вопрос - зачем мне заходить на этот сайт с мобильника?
                                                                              если нет ответа на этот вопрос - все остальное уже не важно.
                                                                              для начала нужно определить зачем что-то делается, а потом уже обсуждать пути реализации. иначе - будет плохо.
                                                                        • 0
                                                                          кстати ява-браузером будет вообще классно.
                                                                          я смотрел в ОпераМини - она грузила 13 кб траффика! в два раза меньше чем весит просто html страница, без иллюстраций (пусть они и маленькие, но всё же) и css!

                                                                          на экране - только информация, всё аккуратно. структурированно и ничего лишнего.
                                                        • 0
                                                          солгасен, чересчур эмоционально
                                                          • +2
                                                            даже в имиждевых сайтах есть раздел с "контактами" и не хорошо, если я не смогу до них добраться только из-за того, что у меня нет флеша, яваскриптов, картинок, сильверлайта или пучехрена.
                                                            • 0
                                                              вооот! :)
                                                              Именно поэтому можно смело утверждать, что статья сырая. Т.к. качество верстки нужно оценивать не только и не столько по описанным выше параметрам. Гораздо важнее - соблюдение красивых отступов, дублирование флешей, простота в управлении, соответствие задумке дизайнера и много другого, о чем в статье ни слова.
                                                          • +3
                                                            Охрененно обширная и правильная статья.
                                                            Посылаю автору лучи уважения и одобрения прямиком в карму.
                                                            • +2
                                                              Писатель статьи слишком умный. Видимо, так много времени уделяет верстке что аж самому тошно.
                                                              • +3
                                                                Не надо профанировать. Человек, который умеет не только х@ячить, но ещё и разобрался в сути достоин уважения, каким бы нудным вам не казался такой подход.
                                                                • –2
                                                                  В какой сути, не понимаю, всё что тут написано это просто основные мысли изложенные в книгах по верстке, никаких открытий здесь вообще нет.

                                                                  Меня бесит излишняя самоуверенность автора в том что он пишет (именно так а если иначе, то верстальщик лох и гавнюк), этакий судья, нашелся блин... Мы тоже не лыком шиты.
                                                                  • 0
                                                                    О стандартах и логике невозможно написать ничего нового. Но можно разъяснить и расставить акценты. Именно это попытался сделать автор глядя на недопонимание со стороны верстальщиков. (Я согласен далеко не со всем сказанным по сути, но поднятие такой темы считаю полезным)

                                                                    Вы правы в том, что автор действительно не смог не задеть вашего самолюбия, однако если взглянуть на материал прагматично, то даже обиженному там есть с чем согласиться =)
                                                                    • –2
                                                                      Тока вот не надо играть в психологов. Я хуячу потому что все клали на эту верстку, лижбы не ехало никуда и проще на cms насадить было, вот и все вам правила которые подходят под 95% случаев.
                                                                    • 0
                                                                      "у самих револьверы найдутся :D"
                                                                • 0
                                                                  Есть не только статьи, но и целый блог, который поможет определись и улучшить качество сайта
                                                                  http://webpagesthatsuck.com/does-my-web-…
                                                                  • +1
                                                                    Статью повесил в мемориз. Побольше таких!
                                                                    Автору - сто плюсов в карму.
                                                                    • 0
                                                                      очень нужная статья для программеров, дорвавшихся до верстки :0
                                                                      • 0
                                                                        Мечтаю о том, чтобы такие статьи были полезными для дизайнеров.
                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                        • 0
                                                                          палавина фигни, обычно требуют точного соотвествия с версткой в псд как же вы ее получите в em ?)
                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                            • 0
                                                                              нужный размер в em = нужный размер в px / размер шрифта содержащего блока
                                                                              несмотря на дробные значения получаются размеры почти 1:1

                                                                              что до точного соответствия psd, то Вадим Макишвили на UA WEB советовал увольнятся из фирм где требуют точности в 2px вместо семантики :)
                                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                                • +1
                                                                                  да можно вылизать все отступы, что нарисовал дизайнер, но дизайнер то не под линейку рисовал!
                                                                                  ну я о к примеры промеружках между абзацами и т.п. Замерял один раз интервал между ними, установил в css.

                                                                                  А по поводу увольнятся, он имел в виду то, что такая работа останавливает верстальщика в развитии, что нужно идти туда где это оценят, такие люди нужны.
                                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                                    • 0
                                                                                      как раз с текстом тяжелее всего - блоки то что - спозицировал и сидят себе строго пиксель в пиксель там, где ты сказал, никогда проблем небыло.
                                                                                      а вот текст - это и ошибки округления (на каскадах em), и интерьяж, и дизайнер - он же не робот, чтоб расположить все тексты точно как они должны были бы рендерится...

                                                                                      но и это можно править, если нужно - даже стилями для конкретного браузера... правда неинтерестно это уже... но проблем с этим при семантической верстке - нет.
                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                                  • 0
                                                                                    По-моему Вадим рекомендовал выбирать инструмент согласно поставленным задачам.
                                                                                  • –1
                                                                                    "Чтобы работать с em как с px, установите font-size для тега body 62.5%. Размер шрифта по умолчанию 16px используя это правило, мы задаем величину em равную примерно 10px (16 x 62.5% = 10). Это позволяет легко задавать в em размеры соответствующие пиксельным величинам, к примеру 1.3em примерно равно 13px."

                                                                                    отсюда: http://designformasters.info/posts/70-ex…
                                                                                    • –1
                                                                                      75%, 62.5%, кто меньше?
                                                                                      и размер шрифта у вас везде одинаков на странице
                                                                                  • 0

                                                                                    ибо не все браузеры понимают (понимали), что 1.3 — это высота строки


                                                                                    IE 5.0 - 7.0, Opera 8-9, FF, Safari - понимают. Какие непонимают?! И как задавать интерльяж для тех что "непонимают"?

                                                                                    Да и нах указывать «font-size: 75%»?


                                                                                    чтобы неиспользовать дробное значение в body.
                                                                                    Вам потом удобно будет размер шрифта по каскаду считать?
                                                                                    высота 14px в em = (14 x 0.8125)/13 = 0.875 (0.8125 - это 13px а не 12 :p)
                                                                                    размер в html задвётся чтоб пивести 1em = базовому размеру шрифта

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

                                                                                    Вижу очень много недостатков, невижу достоинств.
                                                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                                                      • 0
                                                                                        это тот самый line-height только в сокращённой форме записи.
                                                                                        сократить то можно и до body - но считать неудобно потом.
                                                                                        или вы принципиально, чтоб поспорить? :)
                                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                                  • +5
                                                                                    1. Коли ставите критерии качества, то и ставьте цену этой работы. А то люди начнут думать что классную вёрстку с микроформатами можно приобрести за $20 с макета

                                                                                    2. Жёстко вы: body-size {font-size: 1em}. Корневые элементы исчисляют em относительно начальных значений, которое для font-size- medium, и в разных браузерах этот medium вполне может быть разный, поэтому как раз у body или html надо указывать абсолютную величину, а не относительную и, пожалуй, лучше всего в pt.

                                                                                    3. Здорово что вы дошли в семантике до микроформатов… Может стоит разделять не только стили от содержания, но и скрипты? и вместо
                                                                                      <a href="policy_contact.html" target="_blank" onclick="DoWin(this.href,360,440); return false;">Refund Policy and Contact Information</a>
                                                                                      писать
                                                                                      <a href="policy_contact.html" target="_blank" id="heh">Refund Policy and Contact Information</a>
                                                                                      и уже в скриптах, вынесенных отдельно, объявленные среди head
                                                                                      document.getElementById («heh»).onlick=«DoWin (this.href,360,440); return false;»

                                                                                    Отличная статья, но в некоторых местах нарушено общий стиль изложения и заставляет перечитывать место по несколько раз, например про:focus, когда везде пишете как надо и как не надо, там «продалжая тему недоступности», причём без пояснения как везде

                                                                                    • 0
                                                                                      поправил про :focus

                                                                                      спасибо за дополнения!
                                                                                      • +1
                                                                                        самое важное- это первый пункт)
                                                                                        • 0
                                                                                          По поводу пункта «2»

                                                                                          В Опере исправил всего одну настройку- Web page normal text: вместо 16 поставил больше (30 вроде). Вот что стало с вашим (?) сайтом, вот что стало с хабром. Всему вина font-size для body в em.

                                                                                          • +2
                                                                                            Если у кого-то стоит размер текста 30px, то это ему зачем-то нужно, и не стоит мешать такому пользователю. Тут нужно писать не "Всему вина", а "Благодаря".
                                                                                            К примеру, у пользователя проблемы со зрением и он увеличил размер основного шрифта в браузере, а тут кому пришло в голову задать его в абсолютных единицах.
                                                                                            • 0
                                                                                              если у кого-то стоит ie6 значит это ему нужно и не стоит ему советовать перейти на oper'у или firefox. это я о том что в нём немного другие размеры у некоторых элементов
                                                                                      • 0
                                                                                        очень информативно. автор - человек _свод_законов:) но, мне показалось, что есть в тексте какая-то эмоциональная составляющая оценок "хорошо-плохо". то есть видятся моменты, в которых вёрстка может зависеть от факторов, которые автор не учитывает за счёт некоего формализма. формалисты в вопросах вёрстки это как бы хранители эталона, но человеческий фактор надо бы также учитывать, хотя бы для коммуникации с коллегой, который будет потом суппортить код.

                                                                                        Конкретнее:
                                                                                        >> Плохо: div class="info"..., Хорошо: div class="hentry"
                                                                                        инфо всё таки человечней звучит, не правда ли?

                                                                                        и ещё этот момент (я мелочный, наверное):
                                                                                        >> span class="adr work"...span
                                                                                        неужели формализм в вёрстке действительно требует форматирования КАЖДОЙ строки адреса? мне кажется, что приведённые основания (помощь роботам и быстрая и лёгкая отдача информации браузерами) слишком общие.

                                                                                        я правильно понял, описания типа a.footer права на авторское признание не имеют?

                                                                                        таких пуристов побольше и любой холодильник acid-тест проходить будет:):):)
                                                                                        • 0

                                                                                          инфо всё таки человечней звучит, не правда ли?


                                                                                          а можно ж объединять :) class="info hentry"

                                                                                          неужели формализм в вёрстке действительно требует форматирования КАЖДОЙ строки адреса?


                                                                                          требования формата hcard - ничего не поделаешь. А с другой стороны - как же ж ему разделить адресс на составляющие если мы не подскажем? Вообще же эти дополнитеьные стили бывают очень удобны - в футере редко пишутся полные контакты фирмы, поэтому можно в hcard вынести всё, а ненужное скрыть для отображения.
                                                                                          • +1
                                                                                            микроформаты сделаны что бы усложнить вашу жизнь и облечить жизнь пользователей, что бы адрес с сайта они могли добавить в адресную книгу в один клик. Обозначение адреса как адреса и есть самантика, но абсолютно все типы данных исполнять в html глупо, поэтому будут микроформаты
                                                                                          • +1
                                                                                            > Общий CSS для всех media
                                                                                            > Как надо:
                                                                                            > link rel="stylesheet" href="css/main.css" type="text/css" media="screen,projection"
                                                                                            > link rel="stylesheet" href="css/print.css" type="text/css" media="print"
                                                                                            > link rel="stylesheet" href="css/handheld.css" type="text/css" media="handheld"

                                                                                            простите, а куда делись Aural, Braille, Embossed, Tty, tv? И как будет отображаться в них?
                                                                                            • 0
                                                                                              поправка, как в них будет отображаться я то знаю :) но это "как" совсем не устраивает :)
                                                                                              • 0
                                                                                                в них будет отображатся настолько хорошо, насколько семантически верно сверстан документ, т.к. он подгружается без стилей.
                                                                                                если сайт действительно ориентирован на слепых пользователей, то конечно aural, braille, embossed можно определять, но и без них сайт будет хорошо читаться даже в браузерах (а таких большинство), ничего не знающих про эти media типы.

                                                                                                тоже самое tty и tv.
                                                                                              • +4
                                                                                                количество гонора на единицу текста зашкаливает. со смыслом не так всё хорошо. особенно «порадовали» параграфы про javascript и float:left;

                                                                                                кстати говоря: onclick как инлайн атрибут это ппц (с), а у вас он есть в разделе «как надо».
                                                                                                • –5
                                                                                                  бля да и вообще вся эта батва это экономия на спичках) верстка - это ху..ня как бы вы на спичках не экономили на сэкономленные деньги майбах и виллу в испании не купить) половина пунктов мягко говоря спорная, половина зависит от контекста задачи, а ради половины и париться не стоит (итого 3 половины неплохо), еще я над версткой думал) насмешили, ее обычно нужно сделать и избавиться от нее поскорее) вот что с ней нужно делать а не выискивать в документах W3C какуюто ху.ню которая поможет сэкономить 2байта текста в CSS файле))некоторые пункты конечно заставили задуматься но в большинстве обычная провокационная статья в модном ныне стиле) пойдите выпейте успокаивающего чая и все будет хорошо.
                                                                                                  • 0
                                                                                                    насчитать 3 половины целого это надо постараться
                                                                                                    • –1
                                                                                                      А вот соглашусь. Все таки верстка в проекте занимает небольшую роль (по ресурсам).
                                                                                                      Так что в 90% достаточно просто нормальной блочной верстки под конкретный дизайн. Отсюдаже в 90% случаях потом проще будет переверстать частично или полностью при изменении дизайна, расширении и т.п.
                                                                                                    • +1
                                                                                                      Есть разумное зерно в статье - но написано чересчур "крикливо", автор показывает своё ханжество: зачем учить других, как делать нельзя, допуская ошибки, которых делать нельзя действительно?
                                                                                                      Я согласен со статьёй - но не со всеми её пунктами: валидность ради валидности и семантика ради семантики - это порой похоже всё-таки на параною.
                                                                                                      Выше написали много указаний, я напишу ещё один: хозяину сайта порой глубоко фиолетово и психологически далеко до разницы между «i» и «em», «b», «strong» и «dfn» - он пишет текст в визуальном редакторе, для него разница между WYSIWYG и MSWord/OFWrite должна быть минимальна, а исходя из пользования этими программами пользователь знает только несколько кнопок: К, Ж и пр. Если человек на той стороне писать ДОЛЖЕН писать галимый html... это уж, извините, неверно: люди, которые не знают языка разметки - и не должны о нём задумываться.
                                                                                                      Я, конечно, понимаю, что таких пользователей нужно "загнать в рамки" немного, но всё же не "заставлять дворника шить сапоги".
                                                                                                      • 0
                                                                                                        люди которые не знают языка разметки и не должны заниматься заполнением сайта. остальное популяцизм и метание бисера. хотя ради денег приходится.
                                                                                                        • 0
                                                                                                          Ты же знаешь, что занимаются :) Да и знание языка и умение на нём разговаривать - всё же суть разные вещи.
                                                                                                          Знаешь теги del, ins, dfn, tt и разницу между blockquote и cite? :) Разница зыбка при отсутсвии дзен-философии вёрстки:)



                                                                                                          P.S. Есть у меня подруга в Москве, которой поручили заниматься сайтом. Девчёнка крайне сообразительная, но разметка - не её конёк. Постоянно звонила с вопросами, как лучше и правильнее оформить - и порой проверял её заполнения. Как-то раз просто объяснил смысл "заголовок1-заголовок2-текст-заголовок2-заголовок3-текст" на примере книги - всё сразу встало на свои места. Примитивно, но всё же. Больше и не нужно. Пока что. А потом время покажет.
                                                                                                          • 0
                                                                                                            Заказчику порой трудно найти хоть когото, чтобы заниматься сайтом, там уже не до профессионала прости господи
                                                                                                            • 0
                                                                                                              Для этого при внедрении сайта учитывается ещё 10 часов обучения сопровождающих. Плюс инструкции для последующих "поколений" работников на этой должности.
                                                                                                              • 0
                                                                                                                Обучение неотъемлимый процесс, инструкции весчь полезная но редко используемая.
                                                                                                                Нехватка рабочих кадров, времени на сайт — с чем приходится сталкиваться в первую очередь.
                                                                                                        • 0
                                                                                                          Вот непонятно:

                                                                                                          Неуниверсальные глобальные стили базовых элементов
                                                                                                          ...ul li {margin: 0; padding: 0; list-style-type: none}

                                                                                                          Это случаем не про reset css? (Крайне удобная штука, если чутка подогнать под свои нужды)

                                                                                                          Еще непонятно (тут уже о затаратах времени, не всегда обоснованных):


                                                                                                          с устаревшими браузерами (IE5.x);

                                                                                                          Забыли про четвертый ;)

                                                                                                          с физическими ограничениями (в первую очередь это слепые пользователи)
                                                                                                          Часто можно встретить сайт, с учетом того что он будет корректно отображаться при выводе устройствами, использующими Шрифт Брайля?
                                                                                                          Логичнее предложить что у пользователя уже есть user css специально настроеный под его личные нужды.

                                                                                                          Заметка хорошая, есть полезные вещи, но все-же пусть останется за Маяковским определине "что такое хорошо и что такое плохо" ;)
                                                                                                          • 0
                                                                                                            reset css обнуляет всё, даже strong и em до обычного текста. это как образец, но не руководство к действию, иначе получим на выходе равномерный текст.

                                                                                                            в чём штука с ul-li


                                                                                                            когда сайт сдан, правки текстов как правило происходят из визига в админке.
                                                                                                            Вот контент-менеджер вставляет список - а он неотображается как список! Потому что верстальщик обнулил базовый стиль, и создал специальный класс для списков! Контент менеджеру теперь html учить и в код лезть чтобы список добавить?

                                                                                                            поддержка IE5.x обычно занимает один час (переопределить width и height на основании traditional box model, т.е. width = width + padding + border)

                                                                                                            Поддержка IE4 - это всё равно что поддержка 78-го бензина - пустая трата времени и сил.

                                                                                                            про слепых


                                                                                                            у нас в городе недавно на одной улице поставили говорящий светофор: "переход разрешён"/"переход запрещён"... а ведь у слепых уже есть палочка (user-css).
                                                                                                            • 0
                                                                                                              По-поводу reset.css font-weight: inherit; не означает font-weight: lighter;
                                                                                                              Да и подправить под свои нужды никто не мешает.
                                                                                                              А по поводу очень больших проэктов с привалирующим JS и проч. для IE5 мало того что потребуется отдельный стилевой файл, но гораздо больше времени, чем час.
                                                                                                              • 0
                                                                                                                Нужно не специальный класс для списков создавать, а задавать оформление контента. Использование Reset.css этому никак не мешает.
                                                                                                              • 0
                                                                                                                Специально для пользователей с ослабленным зрением некоторые браузеры уже умеют читать вслух текст с сайта. И в этом случае семантика рулит.
                                                                                                              • –9
                                                                                                                +1
                                                                                                                Отлично! Одна из лучших статей на Хабре за последнее время.
                                                                                                                • 0
                                                                                                                  За статью респект, но имхо вы слишком сильно пытаетесь вылизать вертку, т.е. в некоторых примерах, абсолютно не будет разницы при отображении.

                                                                                                                  Дальше, да надо заботиться о людях со старыми браузерами (во вском случае, пока такие люди составляют какой то существенный процент), но, опять же имхо, отключенный javascript - это проблемы исключительно юзера, или его админа. И мне совсем не понятно при чем тут слепые (я вообще не понимаю как они могут пользоваться компьютером).
                                                                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                    • +1
                                                                                                                      слепые МОГУТ пользоваться компьютером. При этом браузер произносит содержимое страницы синтезированным голосом. Семантика влияет на расставляемые синтезатором акценты, так что именно там
                                                                                                                    • и для списков имеют первостепенное значение.
                                                                                                                • 0
                                                                                                                  Сори, забыл про тэги. Речь шла про <li> и <dd>
                                                                                                                  • 0
                                                                                                                    Да, слепые могут пользоваться компьютером, но про слабовидящих, которым необходима возможность переключения в спецрежим, тоже не забудьте, а то моему другу с таким зрением не подходят многие программы и на некоторых сайтах возможность пользовательских настроек отключена.
                                                                                                                    • 0
                                                                                                                      современные браузеры имеют возможность подключать и настраивать отдельные user.css, которые имеют приоритет перед стилями, которые навязывает сайт. У некоторых браузеров есть набор предустановок, где нужные стили user.css можно активировать просто галочками в меню. так что технически у слабовидящих есть возможность менять дизайн под себя вне зависимости от планов дизайнера.
                                                                                                                  • –4
                                                                                                                    "всё-таки лучше когда они подчеркнуты;"
                                                                                                                    Совершенно не имеет разницы, подчеркнуты или нет. Ссылку и без этого можно отлично обозначить.
                                                                                                                    • –1
                                                                                                                      Согласен, всё зависит от дизайна - но она должна быть оформлена.
                                                                                                                      • 0
                                                                                                                        и это верно, обычно разницы цвета всегда достаточно, а подчеркивать ссылки потому что к ним привыкли динозавры с 95 года или так сказал Лебедев, вовсе не стоит.
                                                                                                                        На Хабре, кстати,тоже не все ссылки подчеркнуты.
                                                                                                                        • 0
                                                                                                                          Имеет! Если каждый будет оформлять ссылки по разному (но не подчеркивая) то каша получится, а подчеркнутую всегда видно, и это привычно.
                                                                                                                          Ссылку и без этого можно отлично обозначить.

                                                                                                                          жирную сделать? — а как же strong
                                                                                                                          наклонную? - а em?
                                                                                                                          Цветом? — какой нибудь span например
                                                                                                                        • 0
                                                                                                                          вам +. в принципе со всем согласен, почти ничего нового не узнал (dfn был новостью, полез на w3c - он еще и валидный по стрикту оказался, то что нужно).
                                                                                                                          Также использовал раньше dl-dt, но отказался потому, что если они для этого не предназначены(а задуманы они для семантики типа FAQ: вопрос - ответ), то для себя решил, что не надо их там писать.

                                                                                                                          Уберите мат из текста(на детей может это и произведет впечатление, но у людей, уже знающих о чем текст, вызовет максимум кислую улыбку), и символы вроде копирайта все-таки писать нужно в html-эквивалентах & copy; .
                                                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                              • +1
                                                                                                                                Немного компенсировал вам карму.
                                                                                                                                По сути у меня замечаний нет. Точно так же был удивлён наездом на float, как и вы. Собирался написать подобный комментарий, если бы не было вашего.
                                                                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                                • 0
                                                                                                                                  Просто вы читали не совсем ту статью, что все остальные. Мало кто воспримет фразу "float:left для всего" как призыв совсем не использовать float.
                                                                                                                                  PS я не минусовал :)
                                                                                                                                  • 0
                                                                                                                                    Фраза "float:left для всего" по сути категорична и предвзята. Если обратить внимание на построение основного потока, то все display:inline элементы можно охарактеризовать как display:block; float:left. Имел ли автор в виду это? Для меня осталось загадкой. Если же его максиму рассмотреть с другой стороны множества, то можно заметить, что он ошибочно обвинил float в изъятии элемента из основного потока. Если внимательно присмотреться, то float элемент не теряет ни своего местоположения в основном потоке ни плейсхолдера (вытесняемого им свободного пространства страницы), то есть такая аналогия float с position:absolute очевидно безграмотна.

                                                                                                                                    Так что я рекомендовал бы не читать или игнорировать именно этот блок статьи, который построен автором исключительно на эмоциональном отношении к ошибочному рендерингу некоторыми браузерами некоторых частных случаев float, но никак не на логике или понимании технологии float.
                                                                                                                                    • 0
                                                                                                                                      А я похоже и не читал :). Мне кажется автор просто перепутал что-то вряд ли он это сознательно написал.
                                                                                                                                      • 0
                                                                                                                                        float изымает элемент из потока:
                                                                                                                                        Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.
                                                                                                                                        http://www.w3.org/TR/2007/CR-CSS21-20070…
                                                                                                                                        • 0
                                                                                                                                          Спасибо, что показали что именно вы поняли неправильно. От этого легче отолкнуться. Float это реально одна из самых сложных для понимания технологий. В результате техническая реализация этого процесса отразилась на документации. Однако если начать отдавать себе отчёт в реальном поведении браузеров, то можно заметить, что под изъятием из потока имелось в виду только смещение блока по горизонтали к краю контейнера (или предыдущему float). Все остальные свойства объекта в основном потоке сохранены и совпадают с inline. Единственным исключением является отсутствие учёта высоты этого объёкта (и его плейсхолдера) для подсчёта высоты контейнера. Причём это исключение описано даже в указанном вами документе.

                                                                                                                                          Что такое настоящее изъятие из основного потока вы можете прочитать (и наблюдать своими глазами в браузере) на примере position:absolite.

                                                                                                                                          По сему рекомендую меньше придираться к букве и больше прислушиваться к духу рекомендаций W3C. Тогда возможно вы перестанете излишне эмоционировать по поводу поведения float и сможете сформулировать более точные рамки применимости этой технологии (как это вполне удачно получилось у вас с другими технологиями в этой статье).
                                                                                                                                          • 0
                                                                                                                                            это именно исключение из потока.

                                                                                                                                            Cама коробка блока, следующего за float'ом, подлезает под него и занимают всю ширину потока, а вот текст внутри этого блока смещается в сторону и обтекает float.

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

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


                                                                                                                                            Можете пример написать - увидите.
                                                                                                                                            • 0
                                                                                                                                              =)
                                                                                                                                              Верхняя часть перемещаемого блока выравнивается по верхней части текущего линейного блока

                                                                                                                                              То есть переводя с русского на русский ваш float-блок ориентируется на линейный блок, находящийся в основном потоке и сдвигается вместе с ним при пересчёте основного потока. Это говорит о присутствии в основном потоке. Просто привязка блока идёт не к предыдущему inline-элементу, а ко всей строке. А то что float-блок перекрывает следующий контейнер это специальное исключение из правила, которое введено для улучшения отображения. Это не делает элемент исключенным из основного потока, поскольку его положение жёстко привязано к основному потоку, хоть и по другим правилам.
                                                                                                                                              • 0
                                                                                                                                                Это не делает элемент исключенным из основного потока, поскольку его положение жёстко привязано к основному потоку, хоть и по другим правилам.

                                                                                                                                                Если абсолютно позиционируемому элементу не указывать top то он тоже ориентируется на текущий линейный блок, получается тоже в основном потоке?

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

                                                                                                                                                Это все к тому, что из зависимости положение элемента от основного потока не следует, что он присутствует в основном потоке.
                                                                                                                                                • 0
                                                                                                                                                  Элемент в основном потоке имеет не только позицию, но и влияет своим размером на другие элементы основного потока. Про inline, float и position:relative можно сказать, что они влияют на расчёт позиций других элементов основного потока, а вот position:absolute действительно изъят из основного потока и никак на него не влияет.
                                                                                                                                        • 0
                                                                                                                                          Хех, вот автор все и разрулил, хотя вы и были столь убедительны, что я даже не задумался, что к чему. Чтобы float что-то вытеснял используется свойство clear у следующего элемента, или overflow у родительского блока причем делается это так часто, что очень легко поверить в то, что float что-то вытесняет, тут я вас понимаю, сам легко повелся.
                                                                                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                                          • 0
                                                                                                                                            для всего - это когда открываешь макет, а там почти у каждого div - float: left. бывает даже в стилях пишут :)
                                                                                                                                            float нужно использовать для раскладки колонками например, но не для того чтобы поставить три картинки вряд и т.п.
                                                                                                                                            Задача это статьи была рассказать про ошибки, дать методы исправления где это легко. про "правильную верстку" - это уже отдельная статья.

                                                                                                                                            Поэтому, все используют float как раз для того, чтобы "поставить элемент слева или справа"


                                                                                                                                            чтобы поставить элемент слева или справа есть margin-right: auto и margin-left: auto

                                                                                                                                            inline-block в мозилле


                                                                                                                                            display: -moz-inline-box; display: inline-block;
                                                                                                                                            • 0
                                                                                                                                              float нужно использовать для раскладки колонками например, но не для того чтобы поставить три картинки вряд и т.п.

                                                                                                                                              Ок, какими средствами вы ставите три картинки в ряд? Больше всего интересует ситуация когда картинки должны быть с подписью.
                                                                                                                                              • 0

                                                                                                                                                просто три картинки в ряд:



                                                                                                                                                <p>
                                                                                                                                                <img />
                                                                                                                                                <img />
                                                                                                                                                <img />
                                                                                                                                                </p>

                                                                                                                                                где img - inline-block

                                                                                                                                                три картинки с подписью:



                                                                                                                                                <ul>
                                                                                                                                                <li>подпись №1</li>
                                                                                                                                                <li>подпись №2</li>
                                                                                                                                                <li>подпись №3</li>
                                                                                                                                                </ul>
                                                                                                                                                • 0
                                                                                                                                                  А теперь покажите как БЕЗ float вы разместите все эти вещи горизонтально в ряд.

                                                                                                                                                  PS последний пример надеюсь не относится к картинкам контента, а только к презентационной графике, я полагаю?
                                                                                                                                                  • 0
                                                                                                                                                    можно через inline-block, но это конечно изврат будет :) конечно к презентационной.
                                                                                                                                                    я не призываю НЕиспольозовать float. Это великолепное свойство. Я призываю использовать его с умом, а не для того чтобы переламывать сткруктуру документа под себя.
                                                                                                                                                    • 0
                                                                                                                                                      Вы именно призываете не использовать float так, как он правомерно может быть использован. Причём ваши аргументы иррациональны, а значит и вам есть чему подучиться в указанной документации. Не думаю, что без глубокого копания в документации вы сможете ответить на вопрос "Почему колонки по-вашему допустимо делать через float?" (есть inline-block, но им что-то никто таких задач не решает). В качестве другого задания для самостоятельной проработки приведу картинку, которая расположена на указанной вами странице докумендации w3c. Получилось ли бы у вас сделать такое без float? А это именно выровненная налево картинка, против такой реализации которой вы так активно агитировали.



                                                                                                                                                      Надеюсь натолкнул вас на мысль о пересмотре своего отношения к float. Ещё раз замечу, что дело не в "использование float для всего", а в том, что предложенные вами варианты похожи на неоправданную перестраховку человека, который так и не научился пользоваться этим свойством и потому решил его избегать.
                                                                                                                                                      • 0

                                                                                                                                                        Вы именно призываете не использовать float так, как он правомерно может быть использован.


                                                                                                                                                        т.е. по-вашему ставить каждому блоку float правомерно?
                                                                                                                                                        тогда всё ясно, дальнейшая дисскусия бесмысленна.

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


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

                                                                                                                                                        насчёт рекомендации читать документацию


                                                                                                                                                        я её в отличии от вас читаю, и не пишу глупостей вроде того что float не винимает элемент из потока.
                                                                                                                                                        • 0
                                                                                                                                                          Я вообще не воспринимаю категоричных слов. Слова "каждый", "все", "всегда" игнорирую, заменяя на необходимость разобраться применимо ли это в конкретном случае. И хуже всего что вы не показали примеров что ВЫ понимаете под применимостью и недопустимостью float, а вместо этого вцепились в своё "каждый".

                                                                                                                                                          Я ни разу не спорил о РАЗУМНОМ использовании float. Но увы, вы ни разу не продемонстрировали его. Ваши примеры во некоторых случаях недопустимы ничуть не меньше, чем таковые бывают с float (и честно говоря вы не продемонстрировали чем 3 картинки float в ряд хуже). Вы не затронули, что inline-block привязан к тексту в контейнере и вы, "избегая глюков float" рискуете наплодить новые при решении элементарных задач.

                                                                                                                                                          Хамить пожалуйста не надо. Тут культурная дискуссия.
                                                                                                                                                          • –2
                                                                                                                                                            топик не про то что такое "хорошо", а про то что такое "плохо".

                                                                                                                                                            примеры когда float хорошо - колонки, врезки, картинки с обтеканием, галлереи (вместо картинок в таблице) и т.п.

                                                                                                                                                            если вам нужны доказательства моей профпригодности то вот: http://www.webmascon.com/forum/viewtopic…
                                                                                                                                                            там и хорошие примеры float есть) я его не боюсь, я знаю что это, и умею использовать.

                                                                                                                                                            если и вы и я согласны что float для всего - плохо, а там где надо - хорошо, тоо чём мы вообще спорим?
                                                                                                                                                            • 0
                                                                                                                                                              "плохо" без "хорошо" бесполезное крииканство. Причём у вас в статье почти везде, кроме float есть "хорошо".

                                                                                                                                                              В вашем профессионализме я не сомневался даже тогда когда обвинял вас в непонимании некоторых аспектов документации.

                                                                                                                                                              Я не согласен обсуждать "float для всего". Как я уже заметил, не мыслю такими категориями и мне необходима конкретика. Может так статься, что мы говорим об одном и том же, а может и нет, но за вашим обобщением это не понятно.
                                                                                                                                        • 0
                                                                                                                                          я имел в виду именно float:left для всего, а не его разумное использование.
                                                                                                                                          речь о неразумном использовании.
                                                                                                                                          • +1
                                                                                                                                            у вас есть примеры неразумного изпользования float? Поскольку в вашем топике написано слишком категорично и предвзято. Пара примеров помогла бы указать рамки разумности, про которую вы говорите.
                                                                                                                                            • 0
                                                                                                                                              неразумное - это когда float почти к каждому div, обычно их куча вложенных друг в друга.
                                                                                                                                              примеры можно глянуть на сайте фри-ланс.ру, я брал оттуда почти все примеры.