Избавляемся о ошибок xHTML-валидации при использовании JavaScript, Flash, <noindex>, CSS
Я являюсь сторонником веб-стандартов, но, к сожалению, по тем или иным причинам не всегда их соблюдаю (кстати сказать, когда я верстал таблицами, то о стандартах и понятия не имел :). Как вы наверняка уже знаете, в настоящее время в Рунете проходит конкурс сайтов WebHiTech, целью которого является распространение современных веб-стандартов в русскоязычном сегменте сети.
В общем-то, у меня было желание подать заявку, но по определенным требованиям блог не подходит для участия. Тем не менее, само существование данного конкурса явилось очень хорошим стимулом для того, чтобы я, наконец, привел код моего блога в соответствие со стандартом xHTML. И я этому, безусловно, очень рад.
Хочется отметить, что, как правило, имеет место следующая ситуация. Если “чистая” верстка (аля PSD → HTML) проходит xHTML-валидацию без вопросов, то после “натяжки” на движок (для примера, тот же WordPress), появляется множество различных недочетов, которые делаю страницы сайта невалидными.
А “портят” наши страницы в основном следующие 4 вещи:
- JavaScript.
- Глобальные CSS, размещаемые в заголовке документа.
- Flash.
- Несуществующий по стандартам тег <noindex>, придуманный Яндексом.
Отказаться от каждого из этих пунктов часто не представляется возможным, но, благо, существуют обходные пути, которые позволяют привести эти 4 элемента к виду, соответствующему стандартам.
Об этом и хочу поведать ниже.
JavaScript
Во-первых, тег, обозначающий JavaScript, часто имеет следующий вид:
1 2 3 | <script> код скрипта </script> |
А должно быть так:
1 2 3 | <script type="text/javascript"> код скрипта </script> |
Во-вторых, чтобы скрипт окончательно прошел валидацию, необходимо использовать следующие специальные комментарии:
1 2 3 4 5 | <script type="text/javascript"> <!--//<![CDATA[ код скрипта //]]>--> </script> |
Глобальные CSS
Здесь все по аналогии с предыдущим пунктом:
1 2 3 4 5 | <style type="text/css"> /* <![CDATA[ */ .style {margin: 0; padding: 0} /* ]]> */ </style> |
Flash
Решение для флеша я нашел у Максима Покровского, за что говорю ему: “Спасибо!”.
1 2 3 4 5 | <object type="application/x-shockwave-flash" data="flash.swf" width="468" height="60"> <param name="flashvars" value="link=http://site.com/" /> <param name="movie" value="flash.swf" /> <param name="quality" value="high" /> </object> |
Данный код не позволяет автоматически устанавливать флеш-плейер, но ведь нам важнее валидность, не правда ли?
Тег <noindex>
За решение этой задачи “Большое спасибо!” отправляется к NickSpring.
Оформить этот тег необходимо следующим образом:
1 2 3 | <del class="hide"><![CDATA[<noindex>]]></del> то, что необходимо запретить индексировать Яндексу <del class="hide"><![CDATA[</noindex>]]></del> |
А в файл стилей добавить:
1 | .hide {display: none} |
P.S. В результате применения вышеизложенного материала я избавился от 300 с лишним ошибок валидации и теперь мой блога соответствует стандарту xHTML 1.0 Transitional. Не исключено, что некоторые страницы блога все-таки не пройдут валидацию, но это уже результат действия какого-либо из плагинов.
Поздравляю с XHTML1.0 (хехе, коллега), но по прежнему некоторые баги валидатор заметил
По теме - http://kurapov.name/technology/web/interfaces/xhtml
Артём Курапов, какие, например, баги?
106: лишний открывающийся span
108: лишний закрывающийся span ( если они перекрёстные, то в xhtml это запрещено)
411: пустые b
583: пустые li
Ещё что-то про использование знаков тэга в яваскрипте было.. Поставьте плагин для FF, там можно на лету смотреть. Онлайн-валидатор от W3C в этом смысле более жесток.
На счет span - я уже говорил в статье, что это плагины. В данном случае плагин подсветки, и поделать тут ничего не могу. А вот на счет пустых b и li - валидатор не считает это ошибками.
Спасибо, пригодится…
Отдельное спасибо за noindex и за JS.
CDATA что-то никогда и не применял в JS скриптах.. :)
Автору респект, полезная статья!
Dimox, <![CDATA[…]]> нужен только в том случае, если внутри скрипта/CSS встречаются символы <, >, &. В противном случае, можно обойтись и без CDATA.
По поводу NOINDEX в CDATA - это не более, чем самообман: все мы прекрасно знаем, что NOINDEX нет в DTD, сам тэг как был, так и остался, только валидатор мы жестоко обманули. Но документ-то от этого валиднее не стал. Плюс к тому же, налепили абсолютно левый del (ИМХО, span здесь лучше, ибо у него нет дополнительной семантики), и всё ради какого-то поисковика. Есть ли смысл в таком обмане? Не лучше ли оставить, как есть, тем более, что браузер игнорирует неизвестный тэг? Ведь, по большому счету, можно взять абсолютно невалидную туфту (я утрирую, но тем не менее) и засунуть ее в CDATA. Валидатор скажет, что всё ОК, но мы-то знаем, что это не так, и проблемы, связанные с невалидностью, останутся.
PS - пока не забыл: если будете отдавать контент как application/xhtml+xml, нормальный браузер (типа FireFox) скрипт вообще не увидит, ибо для него внутри тэга SCRIPT бует находится комментарий, который он проигнорирует. Поэтому так:
2
3
4
...
/*]]>*/
</script>
либо, если нужно сильно извратиться
2
3
4
<!--//--><![CDATA[//><!--
...
//--><!]]>
PS - Dimox, а что за плагин для подсветки вы используете, если не секрет? Если хотите, могу его подправить. В качестве альтернативы могу предложить WP Codebox Эрика Вонга или свою версию плагина, в которой исправлены ошибки, присутствующие в WP CodeBox.
А почему сразу не в Strict ?
Денис, а в чём глубокий смысл Strict, если страница отдаётся как text/html?
Я когда-то читал об этом, но в голове данный момент не осел :) По крайней мере, для всех скриптов блога пришлось применять CDATA.
Не отрицаю. Ну и пусть :)
Окей, учту. Спасибо.
CodeColorer. Жаль, что давно не обновляется.
К сожалению, это проблематично. Тогда придется редактировать кучу постов.
Dimox, подправленная версия CodeColorer.
:-) могу поправить плагин, чтобы он понимал синтаксис CodeColorer.
Владимир, хотел бы уточнить пару вопросов: что вы подправили в CodeColorer и в чем смысл перехода на Codebox?
Обновил движок (GeSHi), добавил парочку языков и подкорректировал, хм, грамматику в существующих (это касается (X)HTML - распознавание условных комментариев и т.п.). Ну и генерируемая разметка теперь валидна, судя по тестам.
Судя по коду, CodeColorer тот же CodeBox - у Эрика и Дмитрия в коде плагина так много общего. Но у CodeBox функциональность больше :-)
Как вчера оказалось, этих вещей пять. Пятая - кривая реализация функции wpautop. Для тех, кто пользуются WYSIWYG, это не сильно заметно. А в обыкновенном редакторе это всё видно.
Например,
2
3
4
<strong>Strong</strong>
<div>Nested div</div>
</div>
будет “любезно” преобразован в
2
3
4
<strong>Strong</strong></p>
<div>Nested div</div>
</div>
Об этом (и как это исправить) я еще напишу.
Ясно. Тогда большое спасибо за обновление и буду ждать вашу версию CodeBox, которая без проблем встанет вместо CodeColorer.
Я вообще не знаю, что это такое, впервые вижу :) Именно в расчете на то, что возможны еще какие-то причины, я в статье использовал слова “в основном” ;)
Самое опасное в плане баговости на валидаторе - это размещение сторонних счетчиков, кнопочек, баннеров и прочих пузомерок.
Они на 99% невалидны, поэтому приходится постоянно что-то дописывать/переписывать самому. Ручками и трезвой головой.
А я в конкурсе рискнул поучаствовать. Отправил заявку, но пока тишина…
С Ноиндексом все понятно, а вот с флеш проблема.
Да вообще забить на валидность - главное, чтобы отображалось корректно.
[m.k], в чем с флеш проблема?
Спасибо, оcoбенно за скрипт и за сообщение о конкурсе, может сделаю специально под него какой-нибудь сайт, то есть сверстаю специально под него.
Хотя и не пользуюсь noindex, но за подсказку спасибо.
спасибо, теперь буду знать как проавильно оформить свой код
2
3
4
5
6
7
8
9
10
<param name="movie" value="file.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="file.swf" width="x" height="x">
<!--<![endif]-->
alt content
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
для флэша валидно и кросбраузерно
Да - согласен , сначала проверяешь пустой сайт = есть валидация .
Потом стоит добавить счетчик или банер = сразу проблемы появляются.
Поразительно! Неужели у кого-то бывают проблемы с валидацией из-за стилей в head? Мне приходит в голову только один возможный случай: если применяются expressions. Зато валидатор ругается на скрипт, в котором применяется нечто вроде document.write(’<a href=”">…’). Поэтому для вставки элементов скриптом я предпочитаю createElement.
Мега респект.. Люди! Я даже о таком не слышал. Спасибо! Полез у себя в блоге исправлять такие ошибки..
Спасибо за статейку.
Меня тоже мучает вопрос насчёт , и статейку NickSpring тоже читал, но вроде, там в комментариях было выяснено, что после этих манипуляций появляются проблемы с работой .
Решение по noindex кривое. Валидация невалидными средствами. М.б. лучше посмотреть в сторону расширения XHTML за счет dtd?