Главная›CSS-верстка

Избавляемся о ошибок xHTML-валидации при использовании JavaScript, Flash, <noindex>, CSS

33 комментария

Я являюсь сторонником веб-стандартов, но, к сожалению, по тем или иным причинам не всегда их соблюдаю (кстати сказать, когда я верстал таблицами, то о стандартах и понятия не имел :). Как вы наверняка уже знаете, в настоящее время в Рунете проходит конкурс сайтов WebHiTech, целью которого является распространение современных веб-стандартов в русскоязычном сегменте сети.

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

Хочется отметить, что, как правило, имеет место следующая ситуация. Если «чистая» верстка (аля PSD → HTML) проходит xHTML-валидацию без вопросов, то после «натяжки» на движок (для примера, тот же WordPress), появляется множество различных недочетов, которые делаю страницы сайта невалидными.

А «портят» наши страницы в основном следующие 4 вещи:

  1. JavaScript.
  2. Глобальные CSS, размещаемые в заголовке документа.
  3. Flash.
  4. Несуществующий по стандартам тег <noindex>, придуманный Яндексом.

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

Об этом и хочу поведать ниже.

JavaScript

Во-первых, тег, обозначающий JavaScript, часто имеет следующий вид:

<script>
код скрипта
</script>

А должно быть так:

<script type="text/javascript">
код скрипта
</script>

Во-вторых, чтобы скрипт окончательно прошел валидацию, необходимо использовать следующие специальные комментарии:

<script type="text/javascript">
<!--//<![CDATA[
код скрипта
//]]>-->
</script>

Глобальные CSS

Здесь все по аналогии с предыдущим пунктом:

<style type="text/css">
/* <![CDATA[ */
.style {margin: 0; padding: 0}
/* ]]> */
</style>

Flash

Решение для флеша я нашел у Максима Покровского, за что говорю ему: «Спасибо!».

<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.

Оформить этот тег необходимо следующим образом:

<del class="hide"><![CDATA[<noindex>]]></del>
то, что необходимо запретить индексировать Яндексу
<del class="hide"><![CDATA[</noindex>]]></del>

А в файл стилей добавить:

.hide {display: none}

P.S. В результате применения вышеизложенного материала я избавился от 300 с лишним ошибок валидации и теперь мой блога соответствует стандарту xHTML 1.0 Transitional. Не исключено, что некоторые страницы блога все-таки не пройдут валидацию, но это уже результат действия какого-либо из плагинов.

Смотрите также

HTML5 - уже сегодня, XHTML 2 - прощай

27 комментариев

Интересная ситуация складывается в сфере веб-стандартов. Опубликована официальная информация о том, что стандарт XHTML 2 так и не увидит свет, рабочая группа прекратит дальнейшую его разработку к концу 2009 года. ...

10 фиксов, решающих проблемы Internet Explorer 6

58 комментариев

Данный пост основан на переводе интересной англоязычной статьи «10 Fixes That Solve IE6 Problems«. Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, ...

5 советов верстальщику

32 комментария

Лучше поздно, чем никогда. Наконец-то я готов представить свои пять советов в рамках эстафеты, запущенной Никитой, тем более что «пинок» получил от трех человек. 1) Читайте блоги специалистов в данной ...

Трехколоночный макет на CSS с одинаковой высотой колонок

24 комментария

Представляю Вашему вниманию еще один 3-хколоночный макет страницы, реализованный с помощью XHTML и CSS. Вот так он выглядит в миниатюре: Особенности: Оба сайдбара (левая и правая колонки) расположены с правой ...

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

  1. Денис Радченко
    5 июля 2008 г. в 08:30

    А почему сразу не в Strict ?

  2. Vladimir
    5 июля 2008 г. в 11:36

    Денис, а в чём глубокий смысл Strict, если страница отдаётся как text/html?

  3. Dimox
    5 июля 2008 г. в 12:44

    Dimox, нужен только в том случае, если внутри скрипта/CSS встречаются символы <, >, &. В противном случае, можно обойтись и без CDATA.

    Я когда-то читал об этом, но в голове данный момент не осел :) По крайней мере, для всех скриптов блога пришлось применять CDATA.

    сам тэг как был, так и остался, только валидатор мы жестоко обманули

    Не отрицаю. Ну и пусть :)

    PS — пока не забыл: если будете отдавать контент как application/xhtml+xml, нормальный браузер (типа FireFox) скрипт вообще не увидит, ибо для него внутри тэга SCRIPT бует находится комментарий, который он проигнорирует.

    Окей, учту. Спасибо.

    PS — Dimox, а что за плагин для подсветки вы используете, если не секрет?

    CodeColorer. Жаль, что давно не обновляется.

    В качестве альтернативы могу предложить WP Codebox Эрика Вонга или свою версию плагина, в которой исправлены ошибки, присутствующие в WP CodeBox.

    К сожалению, это проблематично. Тогда придется редактировать кучу постов.

  4. Vladimir
    5 июля 2008 г. в 19:44

    Dimox, подправленная версия CodeColorer.

    Тогда придется редактировать кучу постов.

    :-) могу поправить плагин, чтобы он понимал синтаксис CodeColorer.

  5. Dimox
    6 июля 2008 г. в 12:25

    Владимир, хотел бы уточнить пару вопросов: что вы подправили в CodeColorer и в чем смысл перехода на Codebox?

  6. Vladimir
    6 июля 2008 г. в 15:13

    что вы подправили в CodeColorer

    Обновил движок (GeSHi), добавил парочку языков и подкорректировал, хм, грамматику в существующих (это касается (X)HTML — распознавание условных комментариев и т.п.). Ну и генерируемая разметка теперь валидна, судя по тестам.

    чем смысл перехода на Codebox?

    Судя по коду, CodeColorer тот же CodeBox — у Эрика и Дмитрия в коде плагина так много общего. Но у CodeBox функциональность больше :-)

    А “портят” наши страницы в основном следующие 4 вещи

    Как вчера оказалось, этих вещей пять. Пятая — кривая реализация функции wpautop. Для тех, кто пользуются WYSIWYG, это не сильно заметно. А в обыкновенном редакторе это всё видно.

    Например,

    <div>
    <strong>Strong</strong>
    <div>Nested div</div>
</div>

    будет «любезно» преобразован в

    <div>
    <strong>Strong</strong></p>
    <div>Nested div</div>
</div>

    Об этом (и как это исправить) я еще напишу.

  7. Dimox
    6 июля 2008 г. в 16:34

    Обновил движок (GeSHi), добавил парочку языков и подкорректировал, хм, грамматику в существующих (это касается (X)HTML — распознавание условных комментариев и т.п.). Ну и генерируемая разметка теперь валидна, судя по тестам.

    Ясно. Тогда большое спасибо за обновление и буду ждать вашу версию CodeBox, которая без проблем встанет вместо CodeColorer.

    Как вчера оказалось, этих вещей пять. Пятая — кривая реализация функции wpautop.

    Я вообще не знаю, что это такое, впервые вижу :) Именно в расчете на то, что возможны еще какие-то причины, я в статье использовал слова «в основном» ;)

  8. rotor
    8 июля 2008 г. в 00:02

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

    Они на 99% невалидны, поэтому приходится постоянно что-то дописывать/переписывать самому. Ручками и трезвой головой.

    А я в конкурсе рискнул поучаствовать. Отправил заявку, но пока тишина…

  9. [m.k]
    8 июля 2008 г. в 03:12

    С Ноиндексом все понятно, а вот с флеш проблема.
    Да вообще забить на валидность — главное, чтобы отображалось корректно.

  10. Vladimir
    8 июля 2008 г. в 11:47

    [m.k], в чем с флеш проблема?

  11. VolCh
    13 июля 2008 г. в 08:52

    Спасибо, оcoбенно за скрипт и за сообщение о конкурсе, может сделаю специально под него какой-нибудь сайт, то есть сверстаю специально под него.

  12. Zigzag
    13 июля 2008 г. в 14:00

    Хотя и не пользуюсь noindex, но за подсказку спасибо.

  13. Alexander
    16 июля 2008 г. в 09:38

    спасибо, теперь буду знать как проавильно оформить свой код

  14. шкутер
    17 июля 2008 г. в 13:08 
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="x" height="x">
	<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>

    для флэша валидно и кросбраузерно

  15. seo
    18 июля 2008 г. в 18:51

    Да — согласен , сначала проверяешь пустой сайт = есть валидация .
    Потом стоит добавить счетчик или банер = сразу проблемы появляются.

  16. Княгиня
    4 августа 2008 г. в 14:22

    Поразительно! Неужели у кого-то бывают проблемы с валидацией из-за стилей в head? Мне приходит в голову только один возможный случай: если применяются expressions. Зато валидатор ругается на скрипт, в котором применяется нечто вроде document.write(‘…’). Поэтому для вставки элементов скриптом я предпочитаю createElement.

  17. WebMast
    2 декабря 2008 г. в 20:34

    Мега респект.. Люди! Я даже о таком не слышал. Спасибо! Полез у себя в блоге исправлять такие ошибки..

  18. Алексей
    26 декабря 2008 г. в 18:01

    Спасибо за статейку.
    Меня тоже мучает вопрос насчёт , и статейку NickSpring тоже читал, но вроде, там в комментариях было выяснено, что после этих манипуляций появляются проблемы с работой .

  19. Исаак Тынгылчав
    12 апреля 2009 г. в 08:01

    Решение по noindex кривое. Валидация невалидными средствами. М.б. лучше посмотреть в сторону расширения XHTML за счет dtd?

  20. le-genda
    19 ноября 2010 г. в 17:07

    Тем не менее, само существование данного конкурса явилось очень хорошим стимулом для того, чтобы я, наконец, привел код моего блога в соответствие со стандартом xHTML. И я этому, безусловно, очень рад.

    а 451 ошибка на этой странице и одинадцать предупреждений — это как?

    1. Dimox
      19 ноября 2010 г. в 17:36 / ответ на коммент le-genda

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

      1. le-genda
        19 ноября 2010 г. в 17:49 / ответ на коммент Dimox

        согласна.. )
        спасибо за блог, радует. а у вас есть подписка в твиттере, не люблю в rss читать

        1. Dimox
          19 ноября 2010 г. в 18:15 / ответ на коммент le-genda

          Есть — http://twitter.com/Dimox_ru

          1. le-genda
            19 ноября 2010 г. в 19:11 / ответ на коммент Dimox

            отлично, подписываюсь )

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код

© 2006–2025 Dimox.name. Все права защищены. Перепечатка запрещена.