31.01.2011 09:24
Mekras 16 1500 Источник
Я работаю в веб-студии, постоянно пользующейся услугами верстальщиков-фрилансеров. И если несколько лет назад верстальщики частенько присылали код, пестревший ошибками разметки, то сейчас это уже большая редкость. К сожалению совсем другая картина с логикой разметки, автоматического валидатора которой, насколько мне известно, пока нет. В надежде, привлечь внимание верстальщиков к этой стороне их работы, хочу рассказать о недавнем случае, показывающем, что логичность разметки не менее важна чем её валидность.


А дело было так. Заказчик захотел чтобы на сайте были «красивые» поля ввода в формах. Верстальщик применил для этого скрипт custom-form-elements.js. Однако, когда вёрстку установили на CMS, выяснилось, что в некоторых браузерах, к примеру в FireFox, для изменения состояния чек-боксов требуется двойной клик, а не одинарный, как обычно. Программист, занимавшийся сайтом, первым делом заподозрил custom-form-elements.js. Другой скрипт аналогичного назначения проблему с чек-боксами решил, но не подошёл по другим соображениям. Программист занялся отладкой первого скрипта. Когда это ничего не дало, он обратился ко мне. Я тоже начал с отладки скрипта и обнаружил, что обработчик «onclick» мистическим образом вызывается дважды. Тогда я решил взглянуть на разметку, и вот что увидел:

<tr>
  <td><label>Машина в кредит:</label></td>
  <td><label><input type="checkbox" class="styled" name="credit" value="yes"></label></td>
</tr>


Обратите внимание на выделенный label. Скрипт custom-form-elements.js скрывает input с классом «styled» и ставит перед ним span «изображающий» из себя чек-бокс. При клике по span custom-form-elements.js изменяет состояние скрытого input. Но помимо span событие, порождённое этим же кликом, передаётся и обрамляющему span элементу label. Который транслирует это событие первому вложенному в него input-у. Таким образом состояние чек-бокса меняется дважды — один раз JS, второй — браузером, что и приводит к описанной проблеме. При всём при этом, label здесь совершенно не нужен, т. к. собственно метки (подписи) он и не содержит. Подпись размещается совсем в другом теге label.

Если бы верстальщик следовал логике, он бы не обернул этот input в label, скрипт custom-form-elements.js отработал бы правильно и ни программист, ни сам верстальщик не тратили бы лишнее время на устранение проблемы с чек-боксами.

Комментарии (16)


  1. webdew
    31.01.2011 09:32
    #3617802

    Это уже явная ошибка и непонимание принципа работы label

    Алогичность, это когда деревья строятся на div а не на UL>LI


  1. dapmoed
    31.01.2011 09:32
    #3617823

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


  1. VitaZheltyakov
    31.01.2011 09:32
    #3617924

    Очередной топик жалоба. Ничего личного — просто надоело.

    — Почему разметка должна быть не только валидной, но и логичной,
    — Почему программный код должен быть не только правильным, но и комментированным,
    — Почему работодатели должны быть не только при деньгах, но и быть адекватными,
    — Почему клиенты должны быть не только заинтересованы в проекте, но и пользоваться нормальными браузерами,
    — Почему правительство должно быть не только исполнительным, но и не быть коррумпированным,
    — Почему Солнце должно не только светить, но и греть…


    1. Mekras Автор
      31.01.2011 09:32
      #3617939

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


  1. KonstRuctor
    31.01.2011 09:32
    #3617960

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


    1. Mekras Автор
      31.01.2011 09:32
      #3617990

      Мысль хорошая. Попробую пособирать примеры.


  1. anonymous
    31.01.2011 09:32
    #3617984


  1. CAJAX
    31.01.2011 09:32
    #3617995

    Вобще-то претензии к input, вложенному в label необоснованны. Такое поведение описано в www.w3.org/TR/html401/interact/forms.html#h-17.9.1.


    1. Mekras Автор
      31.01.2011 09:32
      #3618045

      Не очень понял, о каких претензиях к input речь?
      В HTML 4.01 явно не прописано, что событие должно транслироваться вложенному input-у. Там сказано только про ассоциацию с этим input-ом. Поэтому я дал ссылку на HTML5, где это уже прописано явно.


      1. CAJAX
        31.01.2011 09:32
        #3618241

        Каюсь, я неправильно выразился.


  1. Voenniy
    31.01.2011 09:32
    #3618037

    Кстати, а почему верстка должна быть валидной?


    1. Mekras Автор
      31.01.2011 09:32
      #3618061

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


  1. jeppeQue
    31.01.2011 09:32
    #3618995

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


    1. Mekras Автор
      31.01.2011 09:32
      #3619072

      Увы, не я нанимаю сотрудников.


  1. EzS
    31.01.2011 09:32
    #3619292

    Если бы верстальщик следовал логике, он бы не обернул этот input в label, скрипт custom-form-elements.js отработал бы правильно и ни программист, ни сам верстальщик не тратили бы лишнее время на устранение проблемы с чек-боксами.
    А если форму из таблицы вытащить, совсем красота будет


  1. Veterinar
    31.01.2011 09:32
    #3639218

    Логика разметки называется семантикой. Грамотная семантика — признак хорошего, состоявшегося верстальщика. Подогнать под валидатор не сложно, а сверстать так, чтобы глаз радовался, читая исходник, может далеко не каждый.