Скоростная валидация (на примере сайта habrahabr.ru)

    Валидация. О её достоинствах/недостатках, необходимости/ненужности, актуальности/неактуальности и прочем, и прочем… можно спорить бесконечно :) Для себя я вывел одно неоспоримое правило (очень простое): когда я вижу в правом нижнем углу Firefox'а такой значок —

    валидацию не прошёл

    я точно могу знать, что ошибка где-то в незакрытом тэге, некорректном расположении блоков или, например, неправильно названном атрибуте… или ещё в чём-то, что реально влияет на производительность/функциональность/отображение (нужное подчеркнуть). У меня не возникает ленивых размышлений из серии: «А, ну это ж валидатор… Что-то там ему опять не понравилось… Можно забить».

    На самом деле, при отсутствии каких-либо средств, так сказать, «дебаггинга» html-разметки, валидатор — отличный способ избежать глупых ошибок и отловить их быстро и безболезненно. (Казалось бы, прописные истины, но почему-то об этом часто забывают… Меня удивляет, как те же программисты частенько пренебрежительно относятся к валидации html и в очередной раз пишут, к примеру, значение атрибута без кавычек — при переносе верстки в шаблон. Казалось бы, кому же ещё сознавать значение соблюдения правил синтаксиса и всяких формальностей, как не кодерам?)

    Но вернёмся к нашему заголовку...

    Итак, открываем главную страницу Хабрахабра — и видим:

    8 ошибок/0 предупреждений

    8 ошибок (я использую SGML parser). В принципе, неплохо. Оно и понятно, ресурс делался людьми, мягко говоря, понимающими, разбирающимися… одним словом, профессионалами.

    Дальше мне стало просто интересно, что же это за ошибки такие и насколько они «необходимы»:

    исходный код

    т.е. все ошибки, по сути, содержатся в блоке, вставляющем Javascript. Что характерно, во всех остальных подобных блоках — всё отлично. Самое главное: исправить их можно было бы в буквальном смысле «в два счёта»:

    1) добавляем необходимый атрибут type="text/javascript"
    2) заключаем содержимое тэга в CDATA (насколько я понимаю, так оно и положено, ведь валидатор обрабатывает только html — ну, SGML, если быть точным — всё остальное от него должно быть скрыто)
    3) ВСЁ!

    Также есть один непроставленный alt для картинки с красноречивым классом «kill-ie-please» :) Ну, тут всё и того проще…

    Предвосхищая множество недоумевающих комментариев из серии: «И что?!!» Отвечаю: ничего. Это просто очередная демонстрация как исчезающе малое количество действий может приводить иногда к значительным результатам. И как даже на таких уважаемых ресурсах этим предпочитают пренебречь…

    Повод к размышлению, так сказать.

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

    Подробнее
    Реклама
    Комментарии 64
    • +1
      Обычно это приводит к спорам нужна ли валидация вообще…
      Но когда люди декларируют у себя на сайте XHTML 1.0 Transitional — для примера. И потом не придерживают этого, то их стоит осуждать. Так что я с вами вполне согласен.
      • –2
        И где здесь валидация? Приведение кода в соответствие стандартам?
        • 0
          вы имеете ввиду несоответствие заголовка содержимому? возможно, следует переименовать в «Как сделать страницу валидной за 10 секунд»? :)
          • 0
            угу, ожидал увидеть здесь что-нибудь типа Zend_Validate, валидации данных и т.п.
        • НЛО прилетело и опубликовало эту надпись здесь
          • +1
            Да что вы говорите? Сделайте документ XHTML 1.0 Strict, допустите пару ляпов, например:
            <?xml version="1.0" encoding="UTF-8"?>

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
            />
            TODO supply a title
            TODO write content
            Как вы знаете, правильно надо писать абзацы открывая и закрывая <p> </p>
            А вот что будет в FireFox-e если мы написали просто <p> без закрытия, Вы увидите на этой странице:
            goalgoal.ru/test.xhtml
            Создано в целях демонстрации молодежи результатов невалидной XHTML 1.0 Strict верстки



            И посмотрите на результат:
            goalgoal.ru/test.xhtml
            • 0
              Извиняюсь, код не смог правильно привести:

              <?xml version="1.0" encoding="UTF-8"?>
              <!--
              To change this template, choose Tools | Templates
              and open the template in the editor.
              -->
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
              <title>TODO supply a title</title>
              </head>
              <body>
              <p>
              TODO write content<br />
              Как вы знаете, правильно надо писать абзацы открывая и закрывая &It;p &Гt; &It;/p &Гt
              А вот что будет в FireFox-e если мы написали просто &It;p&Гt; без закрытия, Вы увидите на этой странице:
              </p>
              <p>
              <a href="goalgoal.ru/test.xhtml">goalgoal.ru/test.xhtml</a>
              Создано в целях демонстрации молодежи результатов невалидной XHTML 1.0 Strict верстки
              </p>
              </body>
              </html>


              • –1
                не знаю как фф, но опера честно говорит pic.ipicture.ru/uploads/090730/x65p6qSeqk.jpg
                • –1
                  У Firefox страница красочнее :)
                  • –1
                    но менее информативна и желтый фон не сочетается с красным и вообще красное режет глаза.
                  • –1
                    В новой «Опере» красивее — img193.imageshack.us/img193/7864/65833195.png :)
                    • –1
                      а я пока на 1601 первом билде просто
              • –14
                Лучший валидатор — браузер пользователя.
                Все остальное — от лукавого.
                • –3
                  Если конечно браузер поддерживает стандарты.
                  Насколько я заню только Opera максимально стремится поддерживать стандарты W3C
                  Но если IE их не особо старается поддерживать о какой валидации можно говорить (хотя этим браузером пользуется добрая половина пользователей.)
                  • –6
                    Валидация браузером пользователя — это чтобы у пользователя отображалось и работало все как положено — а не так как прописано в стандартах. Как раз из за таких браузеров типа ИЕ и нужна валидация пользователя а не стандартов.

                    Главное чтобы работало правильно, а не строго чтить рекомендации W3C
                    • +1
                      Ну да. Пройдет год или два, браузеры для которых вы проверили исчезнут, их заменят более современные.
                      Если сверстали по стандарту, то переделывать не нужно будет.
                      Лучший валидатор — валидатор
                      • –10
                        За 2 года…
                        Ну как бы бросить без поддержки и изменений проект на 2 года — нехорошо.
                        Да и к тому-же слова про валидатор — это не мои слова а Темы (с) Лебедева.
                        • –1
                          А Тема у нас что? Великий эксперт в этом? О филосов в большей степени.
                          Проект пишется один раз и правильно, в дальнейшем только усовершенствование. Если писать валидно то и переписывать ничего не нужно.
                          • –3
                            Ага, скажите еще теоретик :)
                            • 0
                              Я сказал то что сказал и передергивать не нужно.
                              Если браузер не поддерживет стандарты то о чем можно говорить…
                              • –1
                                Злой вы и мелочный :)
                                • 0
                                  Да не берите в голову. Не люблю когда браузер показывает не правильно.

                                  Был проект… Во всех браюзерах на ура, а в IE5 критическая ошибка — даже браузер закрывается.

                                  Оказалось от Jquery.Lightbox. (На сайте Microsoft этот баг был описан, и было обновление). Хак был найден и установлен. А все из-за того что у заказчика был IE5 и все проверял на нем. Кстати IE8 тоже не радует. Особенно «режим совместимости».
                        • +2
                          >их заменят более современные.

                          У более современных браузеров будут более современные ошибки и глюки.

                          >Если сверстали по стандарту, то переделывать не нужно будет.

                          Переделывать и допиливать придется в любом случае.

                          >Лучший валидатор — валидатор

                          Лучший валидатор — браузер пользователя. Поверьте, никого не волнует, проходит ли страница валидацию, если она при этом разваливается в любимом браузере пользователя. Кроме того, некоторые вещи принципиально невозможно сделать 100% соответствующими стандарту — как раз из-за того что производители браузеров трактуют стандарт по-своему. Особенно это касается CSS.
                        • 0
                          > это чтобы у пользователя отображалось и работало все как положено — а не так как прописано в стандартах

                          Так стандарты-то как раз и описывают, как положено.
                        • НЛО прилетело и опубликовало эту надпись здесь
                          • 0
                            Вот только на acid3 тесте он пролетает как фанера над Парижем :)
                            • –1
                              Opera рулит :)
                              • НЛО прилетело и опубликовало эту надпись здесь
                            • 0
                              Насколько я знаю самый валидный браузер Amaya. Но я его на системах пользователей видел 1 раз всего.
                              • 0
                                Попробуйте пройти им acid тест. ;)
                            • +6
                              «Валидация уже потому нужна, что она код в порядок приводит» ©
                              :)
                              • 0
                                Может быть замкнутый круг, особенно если угождать всем браузерам :)
                              • –5
                                Хорошая у вас здесь быдлообстановка. 4 минус, а лишь один отписался. Участник высказал своё мнение — вы его «в морду» причём анонимно.
                                • –2
                                  Бывает.
                                  Я высказал не мнение, а итог своего опыта.
                                  Ибо не скажешь гендиректору ООО Ромашка — что у него меню поплыло в его любимом ИЕ 5.5 из за того что я следовал стандартам, и он сам дурак. Непоймет, и ему хоть кол на голове чеши, объясняй что у пользователей Оперы Хромы и другие Лисы стоят — ему «нас рать»
                                  • –2
                                    Ага и приходится делать хак не совсем совместимый с W3C и дополнительный CSS именно для этой версии браузера.

                                    Радует только что ситуация меняется и люди переходят на валидные браузеры :)
                                    Например Opera. После написания под Opera обязательно приходится смотреть IE (даже 8) и все равно приходится изощрятся :)

                                    В общем весело нашему брату :)
                                    • +1
                                      «хак не совсем совместимый с W3C», «валидные браузеры»… мде…
                                      • +1
                                        90% случаев несоответствия стандартам связано не с хаками, а с криворукостью — глупо это отрицать.
                                        Несоответствие стандарту почти всегда является ошибкой в верстке(а не фичей), вину за которую гораздо легче свалить на браузер, чем на свой промах.
                                        Чем ближе HTML код к стандарту, тем меньше хаков придется использовать ( иногда можно и без них вовсе обойтись — просто изменить подход, например)
                                      • +1
                                        Ой, не надо пожалуйста лень и кривые руки оправдывать отсутствием/присутствием того или иного браузера у заказчика. И тем более не надо говорить что «раз я не могу сделать валидно и правильно, то сделаю как умею и скажу что валидация сосет».
                                        • 0
                                          А зачем на личности переходить?
                                          Я всего лишь хотел сказать что случаи разные бывают, бывают и крайняя степень дубизма у заказчика. Я рад что Вы с такими не встречались, повезло.
                                          Мы сайты делаем не для браузеров а для людей которые эти сайты смотрят, так что надо как бы относится к тому что делаем не с точки зрения стандартов — а с точки зрения удобства для пользователей. А пользователям пофигу по стандартам или нет — их не интересует чем браузер кормить и им пофигу что бывают «правильные» или «неправильные» смотрелки. А вы сразу про кривизну рук и прочее.
                                          Я не противник стандартов и пытаюсь им следовать — просто надо делать не ради технологии, и не впадать в крайности.

                                          3-4 варнинга на сайте с 99,9 % вероятности — не приведут ни к чему плачевному, но смогут избавить от проблем с «неверными» смотрелками.
                                          • 0
                                            Одно не заменяет другое. Если я говорю «валидный», это не значит что мне пофиг на то что видит пользователь.

                                            Почему авиастрители придерживаются стандартов, но тем не менее «ухитряются» создавать удобные для пассажиров условия в самолете?

                                            Почему дома строят по стандартам, и тем не менее квартиры хуже от этого не становятся?

                                            Как может инженер, создающий прототип устройства подумать о том, чтобы сказать «Я не противник стандартов и пытаюсь им следовать — просто надо делать не ради технологии, и не впадать в крайности»?!

                                            Откуда такое пренебрежение? Из-за того что не погибнет 100-200 человек, зайдя на сайт с кривым кодом? Это что, единственный способ заставить работать по стандартам? Подумайте над этим.
                                            • 0
                                              Вот как раз про такие крайности я и говорю…
                                              • 0
                                                Ну да, чего там, это ж всего лишь верстка…

                                                Скажите, у вас когда зуб болит, вы к соседу дяде Пете идете, чтоб он его вам долотом выбил, или все-таки к стоматологу обращаетесь?
                                                • 0
                                                  А вот вы если пришли к стоматологу и вам нужно дергать корень. У вас дикая болевая чуствительность — и вам вкололи 1 укол ультракоина. Посидели 10 минут — нихрена не подействовало. В принципе вы знаете что 1 укол на вас не действует. Вы говорите про это доктору, но он посмотрел в рецепте — и сказал «незя». И будет вам ковырять по сути без наркоза. Как раз про это — он не нарушил стандарт, но вам то от этого не лучше.
                                                  • 0
                                                    Одно дело не нарушить стандарт, ради чего-то, а другое — не достичь его вобще.

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

                                                    Всего доброго, оставайтесь при своем мнении.
                                            • 0
                                              Если эти 3-4 предупреждения связаны, допустим, с атрибутом alt у картинок, то потенциальный пользователь с ограниченными физическими возможностями уже, увы, не узнает об их содержимом. Таких примеров очень большое количество. Вот здесь и прослеживается чёткая связь между соблюдением стандартов и удобством пользователей: стандарты сделаны для того, чтобы конечный пользователь гарантированно смог получить необходимую ему информацию.

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

                                              И я вам советую всё-таки выучить термины соответствующей предметной области, так как судя по ветке вы их совершенно не знаете или банально не умеете ими оперировать, из-за чего случаются недопонимания.
                                              • 0
                                                Приношу свои извинения: последнее предложение относится к пользователю conturov.
                                        • +1
                                          >> Участник высказал своё мнение

                                          он высказал не своё мнение, а скорее озвучил общеизвестное чужое, без какой-либо аргументации от себя, так что отвечать тут особо не на что. Тыц сюда и смотрим первую ошибку валидации
                                      • +2
                                        вижу зелёную галочку в правом нижнем углу. разработчики прочитали и им стало стыдно :)
                                        а вообще я согласен с автором 100%, умеешь писать правильно — пиши правильно, сам маньяк валидаторов, ибо лучше перебдеть потратить полчаса на отлов явных ошибок с валидатором, чем потом полдня, в поисках причины — «а почему это у меня эта функция не так работает?»
                                        • +1
                                          Вижу 62 Errors, 33 warning(s)
                                          validator.w3.org/check?uri=http%3A%2F%2Fhabrahabr.ru&charset=%28detect+automatically%29&doctype=Inline&group=0
                                          • 0
                                            не хватает тега irony, сорри, про зеленую галочу я пошутил естественно — хотел подколоть местных кодеров
                                            • 0
                                              Не забывайте о том, что пользователи как в статьях, так и в комментариях на Хабре могут использовать ограниченный набор тегов HTML, пишут их руками, вставляют картинки.
                                              При этом большая часть пользователей для написания поста не смотрит на DTD, которому им стоит следовать.

                                              Только исключив этот фактор, мы вправе оценивать качество верстки сотрудниками Тематические Медиа
                                          • +1
                                            По-моему мнению, валидация сайта это хорошо, но совсем молиться на зеленый цвет валидатора не стоит, т.к. можно сверстать валидно, но код будет вообще ужасный и наооборот, т.е. хотелось сказать что из валидности не всегда следует красивая, правильная верстка.
                                            • –2
                                              Для валидности сам браузер должен быть валидным
                                              • 0
                                                Подмена понятий.
                                                Быть может воспринимать код согласно стандартам?
                                                • 0
                                                  Собственно это и имелось в виду.
                                                  Это игра слов такая :)
                                              • +1
                                                Хоть это очень и ленивое занятие, но часто убеждаюсь что делать всетаки нужно. Хоть изредка!

                                                Вот почему-то у программеров (С++, Delphi, Php) выскакивают «варнинги» и «ошибки» они большинство для красоты компиляции стараются исправить. Почему же при верстке мы не смотрим на валидацию? Думаю в этом виноваты сами браузеры, которые многие ошибки исправляют на лету. Но потом же часто возникают ситуации когда один браузер ошибку исправил, другой не исправил, третий исправил несколько иначе чем первый итд. Поэтому и получается, что в разных браузерах из-за ошибок выглядит иначе. (конечно баги IE 6 не в счет)
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                  • 0
                                                    я скрипты по-старинке заключаю в хтмл-комментарий — вроде и валидно, и работает. или это все-таки не по фэн-шую?
                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                    • 0
                                                      рискую показаться невеждой, но — зачем же тогда вообще нужна эта CDATA? разве не для таких именно случаев? (не с целью наезда говорю, а действительно любопытно)

                                                      я знаю, что CDATA ни что иное, как Characted DATA и, что там просто сивольные данные должны быть… но! что ж теперь — вообще тэги скрипт внутрь html не помещать, а как же быть-то тогда?

                                                      и когда на одной чаше весов располагается «забить на валидацию», а на другой «пускай будет не совсем корректно и семантично, но я смогу и дальше отлавливать другие ошибки валидатором» — для меня выбор очевиден :)
                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                    • +1
                                                      Спасиба большое!
                                                      Узнал про этот полезнючий плагин (https://addons.mozilla.org/uk/firefox/addon/249?src=api)
                                                      Это ж надо, даже как то в голову не приходило поискать такое, а ведь иногда приходиться повозиться с валидацией, а здесь как говориться все под рукой — очень удобно, спасибо…
                                                      • +1
                                                        тоже люблю ковырять исходный текст, когда в нижнем правом углу крестик ;) и интересно и познавательно.
                                                        • +3
                                                          по моему скромному опыту большинство нареканий валидатора на моих страничках вызывают коды счетчиков :)) и тут хоть усрись, делая валидный код, всё равно счетчики все испортят :))

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