Статьи о Marquee
Невалидность тега Мarquee в html кода
Январь 2012 г.
В 1989 году Тим Бернерс-Ли, упростив академический язык разметки электронных текстовых документов SGML, создал HTML, в который он добавил тег якоря с гиперссылкой <a href=" ">, написал первый браузер и сервер WWW, это стало началом эры Web. К 1996 году HTML начал расщепляться на диалекты из-за внедрения в него дополнительных тегов от разных производителей браузеров. Чтобы навести порядок в синтаксисе был создан Веб консорциум W3C, который возглавил сам Тим Бернерс-Ли, а уже в 1999 году вводится стандарт HTML-4. Некоторая часть тегов признана несоответствующими развитию языка, и они не включены в спецификацию, т.е. признаны невалидными (несоответствующими, недействительными). Собственно исключили из спецификации устаревшие или дублирующие теги, например: вместо устаревшего (но удобного) <b> (bold) принято использовать <strong>, наклон букв устанавливать не <i> (italic), а <em> (emphasa) и так далее. Свою роль в отказе от некоторых тэгов, (в основном от тегов определяющих дизайн контента), ввиду рекомендации использовать каскадные таблицы стилей (CSS), так привычный <font face=""> признан невалидным, а вместо него надо использовать <style="font-family:">. В идеале весь дизайн должен определяться из CSS, а контент располагается, так как это принято в XML, который кстати в отличии от HTML, в случае невалидности кода, вообще не обрабатывается (не парсится). HTML изначально кроссплатформенный язык, и с учётом резкого и масштабного развития сети Интернет, повсеместное использование мобильных гаджетов: сотовых телефонов, смартфонов, ультрабуков, наладонных и планшетных компьютеров, а так же бытовых электронных приборов с сетевыми опциями, это и телевизоры, и холодильники, и кухонные комбайны, и микроволновые печи с веб-интерфейсом, возникает острая необходимость стандартизации языка разметки. Важная роль валидации документов, обусловлена и тем, что к сожалению существует большое количество людей с ограниченными возможностями, например незрячие люди, для них общение с Интернетом это голос программы ридера (читалки). Для полноценного воспроизведения текстового контента в речь, требуется качественная разметка страницы. Существуют, но пока ещё невероятно дорогие дисплеи тактильного восприятия (чтение кончиками пальцев, принцип знаков Брайеля), для слепоглухих людей, только представьте насколько чётко должна передаваться информация с веб страницы, при использовании подобных девайсов.
Декларацией о соответствии документа определённому стандарту служит корневой тег !DOCTYPE. Доктипы с допущением использования устаревших тегов это Transitional (переходные стандарты), и Strict (строгие) в которых устаревшие теги не приемлемы. Документ созданный в полном соответствии с указанным доктипом, признается валидным. Но часть тегов невалидны в любом варианте доктипа, например: <blink> и <marquee>.
Эти тэги наследие пресловутой войны браузеров конца 90-х годов прошлого века, между Netscape и Microsoft. С целью продвижения своих продуктов, Netscape включила исполнение эффекта "мигания" контента помещённого в контейнер тега <blink> Navigtor'ом (6-я версия), а Microsoft предложил веб-дизайнерам эффект автоматического скроллинга тегом <marquee> в Explorer'е-3. В начале 21 века стало ясно, IE одержал сокрушительную победу над NN. И несмотря на то, что <marquee> невалиден, Навигаторы 8-ой и 9-ой версии воспроизводят бегущую строку, а вот <blink> не поддерживается, ни одним браузером (кроме NN естественно). А вот Internet Explorer до восьмой версии, не воспроизводит мигание даже в CSS style="text-decoration:blink;" (в Опере и ОгнеЛисе, это работает прекрасно).
Нужна ли валидность html? Надо признать невалидные теги прекрасно работают, а вот некоторые валидные, не исполняются даже самыми современными браузерами.
Но если проверить программой-валидатором исходный текст веб-документа в котором присутствует тэг <marquee>, то обязательно будет указано: код невалиден. Программ для проверки валидности html достаточно, они бывают встроенными (плагины) в веб-редакторы, Dreamweaver или Aptana тому пример, есть плагин валидности в Опере, не говоря уже о продукте от самой W3C, Amaya (редактор, браузер, справочник и валидатор в одном флаконе). Валидация у Амайи производиться на лету, зашёл на страницу, а в правом нижнем углу символическая лампочка, валидна страница, горит зелёный, невалидная соответственно красный. При серфинге Amaya по нету, зелёная большая редкость, да и сёрфом это назвать трудно, знакомые до боли страницы предстанут перекошенными и корявыми, впрочем несмотря на это, Амайя давно перешагнула десятый релиз.
Итак автор задался целью создать валидную страницу, в которой присутствует бегущая строка. Доктип для этой страницы выбран самый популярный: DTD XHTML 1.0 Transitional в исходном тексте это выглядит так: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" (Список доктипов на сайте W3C), для проверки валидности автор использовал ОНЛАЙН-ВАЛИДАТОР W3C, в отличии от других валидаторов, он не только указывает невалидность кода, но и даёт рекомендации по исправлению. Вот текст (естественно на английском) при обнаружении в коде документа невалидного тэга, в том числе и <marquee>:
You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:
• incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
• by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead),
• by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case)
Данное сообщение уведомляет, что в документе используется элемент (в нашем случае тег,) не соответствующий заявленному типу документа. Мол чаще всего некорректность в случае если: Для "строгого" документа использован фрейм, это неправильно, но для менее строгих документов фрейм всё-таки можно применить, в документе присутствуют недопустимые тэги типа "<spacer>" (создания отступов на странице) или "<marquee>" (бегущая строка), но если есть необходимость в отступах или бегущей строке, то создавать их надо не тегами, а каскадными таблицами стилей (CSS), и в последней строке напоминание о том, что в разметке XHTML нельзя использовать буквенные знаки верхнего регистра, только нижний, т.е. заглавных, букв быть не должно, код пишется строчными (к текстовому контенту это естественно не относиться, а вот <spacer>, <marquee>, <blink> маленькими или большими, всё равно будут невалидными).
Старый добрый GIF
В гиф-формате очень легко создать бегущую строку, опустим описание технологии работы графических редакторов создания анимации типа Photoshop или его бесплатного аналога GIMP, автор отдает предпочтение GIF Movie Gear, в статье Непрерывная бегущая строка рассматривается вопрос о скроллинге текста без паузы, который невозможно создать атрибутами тега <marquee>, но реализуется в других веб технологиях, одной из альтернатив <marquee> рассматривается гиф-формат. Возьмём уже готовый пример бегущей строки в gif, /img/beg.gif, установим картинку фоновым рисунком табличной ячейки, никакой разницы не будет, если мы укажем сразу стиль. Дело в том, что атрибут таблицы или ячейки <td background=""> для xhtml невалиден, впрочем как и атрибут высоты ячейки height="" таблица расширяется по высоте по заполнению контента, и несмотря на то, что эти атрибуты отлично выполняются любым браузером, а нам нужно оставить ячейку пустой , но с бэкграундом и заданной высотой, то указываем всё это через стиль:
<table width="80%" align="center" border="1" cellspacing="0" cellpadding="0"><tr><td style="background-image:url(/img/beg.gif);height:18px;"> </td></tr></table>Как видно из примера кода, ширина таблицы width="80%", рамка border="1", ориентация align="center" и отступы в ячейке cellspacing="0" cellpadding="0"> валидны для данного документа, но в более строгих их тоже придётся указывать через CSS, и даже полностью отказаться от таблицы.
Но для некоторых старых браузеров даже это незначительное использование стиля в таблице, невоспроизводимо, никакого бэкграунда они не отобразят, пользователь увидит только рамки таблицы, потому, что и высоту таблицы через стиль они не понимают. Радует, что таких браузеров становиться всё меньше. Впрочем в HTML5 указание стиля не валидно, указывать только через class. Кстати фоновый рисунок через стиль можно указать в любом управляющем тэге создающем область в документе <p>, <h>, <div>, <code>, <em> и т.д.. Для примера возьмём такой редко употребляемый, но валидный тег, как телетайпный текст <tt> (прим: в HTML5 тоже не валиден):
В А Л И Д Н О !
Телетайпный текст вполне уместно смотрится в бегущей строке, но в данном случае он статичен и уведомляет о том что в этом примере всё ВАЛИДНО!: <strong><tt style="background:url(/img/beg.gif);color:#ff0;font-size:16px"> В А Л И Д Н О ! </tt></strong>, даже вложение одно тега в другой <tt> в <strong>, "матрёшка" прошла валидатор, хотя всё надо указывать через стиль, так гласят правила W3C, но ведь не все скрипты и фильтры CSS поддерживаются браузерами, поэтому приходится иной раз втыкать пустышки . Но всё это примеры, и уважаемый читатель вполне разумно может указать, на то зачем мучаться с фоновым рисунком, можно сразу указать вывод графики на страницу. Совершенно верно: но и в этом случае не будем забывать о валидности: установим уже изрядно поднадоевшую картинку с бегущей в гиф с помощью тега <img /> в xhtml именно так с пробелом и слешем <img src="/img/beg.gif" alt="валидная бегущая" />
Красота мало кода, а эффект тот же, правда отсутствие рамки для всех картинок заложено в общей таблице CSS для этого сайта, а то пришлось бы указывать border="0" он пока ещё валиден, можно обойтись и без указания ширины и высоты картинки, их отсутствие не является нарушением, любой браузер всё равно покажет, а вот замещающий (альтернативный на случай неотображения картинки) текст alt="валидная бегущая" обязателен, без него <img /> невалиден, кстати главное это наличие этого атрибута, даже если он пустой alt="", но тогда в Эксплорере не будет всплывающей подсказки при наведении мыши на картинку, впрочем в Лисе и Опере её не будет если замещающий текст присутствует, для того что бы подсказка появлялась, во всех браузерах, и во всех тегах, а не только в картинке используют атрибут title="": наведите мышь на это слово ПРИМЕР, код этой нулевой ссылки (<a href="#0" title="пример всплывающей подсказки">ПРИМЕР</a>, увы но в более строгих разметках это тоже невалидно. Забавно, <img /> непарный тег, но если его закрыть, хотя в этом нет необходимости <img /></img> код останется валидным.
Автоскроллинг JavaScript
В качестве альтернативы marquee, наилучший вариант это конечно JavaScript (подробнее см. в отдельной статье Бегущая строка JavaScript). В подзаголовок об автоскроллинга JavaScript установлен скрипт выполняющий познаковый (побуквенный) вывод текста, но почему-то в коллекциях скриптов его называют Бегущей строкой, странно, ведь никуда ничего не бежит, скрипт эффекта печати, автору кажется наиболее подходящим. Но неважно какое действие выполняет скрипт, его тоже необходимо внедрить с учётом правил соблюдения валидности (для этой страницы это правила валидности xhtml). Итак смотрим код этого скрипта, скопированного на одном из сайтов:
<SCRIPT language="JavaScript">
var line=" Пример работы скрипта ";
var speed=200;
var i=0;
function pechatanie() {
if(i++<line.length) {
document.pechat.pt.value=line.substring(0,i);
}
else{
document.pechat.pt.value=" ";
i=0;
}
setTimeout('pechatanie()',speed);
}
</SCRIPT>
<FORM name=pechat>
<input name=pt type=text size=30>
</FORM>
<SCRIPT language="JavaScript">pechatanie();</SCRIPT>Если вставить код скрипта в исходник страницы, с любым доктипом, то скрипт будет работать, но при проверке, валидатор выдаст, несколько десятков замечаний. Конечно в первую очередь заменяем верхний регистр (up-case), на нижний (lower-case), SCRIPT, на script, FORM, на form, устанавливаем кавычки (квоты) в атрибутах формы type="text", name="pechat", имена pechat и pt произвольные, но с учётом, что они указываются в коде скрипта, некоторые имена лучше не присваивать, например логично было бы дать имя print (печать), но это один из операторов JavaScript, и если присваивать имена, то лучше это делать в редакторе с подсветкой синтаксиса, если цвет имени совпал с другими операторами, например с setTimeout, от греха подальше, изменяем. Лучше давать имена с русским значением, но естественно латинскими буквами, а в xhtml обязательно маленькими. В тег формы добавляем атрибут action="" действия, чаще всего это реферал (ссылка), ситуация аналогична alt="" в <img>, в нашем случае нам нет необходимости направлять пользователя по ссылке или выполнять иное действие, но без этого атрибута тэг не валиден, главное его наличие, а значение оставляем пустым. Для изменения оформления поля в которое выводиться текст сделаем стиль <input name="pt" type="text". Начнём с бекграунд, по умолчанию фон текстовой формы белый, меняем на цвет фона данной страницы: background-color:#e0edf6;, как и в примере с фреймом убираем рамку: border:0px;, задаем ширину поля width:500px;, если не запариваться валидностью, то высоту и ширину поля, можно выставить атрибутами
style="background-color:#e0edf6; border:0px; width:500px; " /><input height="" width="" />, но для правильного кода если не достаточно size, то их выставляют только через CSS, и ещё одно требование закрытие тега, как в img: пробел и слеш />, input тег непарный, но его иногда закрывают <input /></input>, и это валидно, но зачем лишние буковки писать.
В теге script, заменяем невалидный атрибут указания языка скрипта language="JavaScript", на валидное указание тип текста скрипта type="text/javascript". А в самом скрипте изменим только содержание текста, пишем всё что нам угодно, даже с грамматическими ошибками, эйчтимиэль валидатору глубоко наплевать на правила русского, английского или любого другого человеческого языка. Орфографию проверить можно в Word, встроенной программой проверки текста, тот же валидатор. Код получается таким:
<script type="text/javascript">
var line=" Реализация валидной бегущей строки в JavaScript ";
var speed=200;
var i=0;
function pechatanie() {
if(i++<line.length) {
document.pechat.pt.value=line.substring(0,i);
}
else{
document.pechat.pt.value=" ";
i=0;
}
setTimeout('pechatanie()',speed);
}
</script>
<form name="pechat">
<input name="pt" type="text" size="30" style="background-color:#eeeeee; border:0px; width:500px; " />
</form>
<script type="text/javascript">pechatanie();</script>Проверяем работу, всё работает нормально, даем на проверку: в тэгах всё нормально, а вот по коду скрипта есть претензии. Но автор, честно признаёт, что не ухом, не рылом, не смыслит в JavaScript. Единственно на, что хватает ума поменять числовые значения переменных var, понятно speed (скорость по-английски), вот только скорость чего? Меняем с 200 на 100, смотрим, это скорость вывода знаков в миллисекундах, чем меньше значение, тем быстрее "печатаются" буквы. Но что делать, если не умеешь программировать, JavaScript, а найти такой, что-бы валидатор пропускал, не удаётся? Просто надо убрать код скрипта из исходного кода страницы! Выделяем код в первом контейнере<script> и вырезаем его, в странице останется <script type="text/javascript"> </script>, открываем любой текстовый редактор, чаще всего это "Блокнот" и вставляем в чистое поле вырезанный код:
var line=" Реализация валидной бегущей строки в JavaScript ";
var speed=200;
var i=0;
function pechatanie() {
if(i++<line.length) {
document.pechat.pt.value=line.substring(0,i);
}
else{
document.pechat.pt.value=" ";
i=0;
}
setTimeout('pechatanie()',speed);
}Кликаем Файл, выбираем функцию Сохранить как... в открывшемся поле присваиваем имя файлу, для нашего примера назовём его text_print, после имени ставим точку и указываем расширение яваскриптов: text_print.js, жмем Сохранить, в запросе, Куда сохранить? Указываем заранее созданную папку например с именем script, в тэге указываем путь к скрипту src="/script/text_print.js". Второй скриптовый контейнер не трогаем, валидатор к нему претензий не имеет. В исходнике документа остается такая конструкция:
<script type="text/javascript" src="/script/text_print.js"></script>
<form name="pechat">
<input name="pt" type="text" size="30" style="background-color:#eeeeee; border:0px; width:500px; " />
</form>
<script type="text/javascript">pechatanie();</script>Понятно, что размещая на сайте, такой документ, на сайте тоже должна быть папка script, и в неё должен быть помещён файлик изготовленный в текстовом редакторе. Вот теперь страница валидна, (валидатор не будет заглядывать в папку со скриптами). Кстати такой метод, хорош не только для создания правильности, но и в случае использования скрипта на нескольких статичных страницах, ведь коды скриптов бывают в несколько сот строк. Но, мы возьмём код попроще:
<script type="text/javascript">
function tekst(msg,ctrlwidth)
{
msg = " "+msg
newmsg = msg
while (newmsg.length < ctrlwidth) {newmsg += msg}
document.write ('<form name="Tekst">')
document.write ('<input name="tekst" style="background-color:#e0edf6; border:0; font-weight:bold;" value= "'+newmsg+'" size= '+ctrlwidth+' />')
document.write ('</form>')
prokrutka()
}
function prokrutka()
{
NowMsg=document.Tekst.tekst.value
NowMsg=NowMsg.substring(1,NowMsg.length)+NowMsg.substring(0,1)
document.Tekst.tekst.value = NowMsg
bannerid=setTimeout("prokrutka()",56)
}
</script>
<script type="text/javascript">
tekst("Бегущая в JavaScript",50)</script>На странице о непрерывности этот код расположен в исходном тексте, автор не заботился о валидности, но в этом документе поставлена конкретная задача. Поэтому поступаем по выше указанной схеме. И создаем файл runline.js, а в общем коде остаются, только два контейнера.
<script type="text/javascript" src="/script/runline.js"></script>
<script type="text/javascript">tekst("Бегущая в JavaScript",50)</script>Но автор предлагает внимательно посмотреть на код сценария убранный в отдельный файл, а именно на строчки:
document.write ('<form name="Tekst">')
document.write ('<input name="tekst" style="background-color:#eeeeee; border:0; font-weight:bold;" value= "'+newmsg+'" size= '+ctrlwidth+' />')
document.write ('</form>')Мы видим ту же форму, как и в предыдущем примере, но она выводится с помощью скрипта document.write (). Задумка такова, если страница выгружается с отключением активных сценариев, то в первом примере будет показана пустая форма, и будет она на странице ни к селу, ни городу, а во втором примере, в подобной ситуации ничего не будет выводиться, как будто ничего и не должно быть. А раз можно вывести форму с помощью document.write () форму, то и другие тэги можно, вывести, вернее записать в документ, так можно перевести на русский язык имя этого скрипта. Для примера в последний раз обратимся к примеру бегущей в гиф-формате, скопируем код тэга img, и вставим его в значение document.write (), от альтернативного текста можно отказаться, аналогично как и форме из предыдущего примера отсутствует action="": document.write ('<img src="/img/beg.gif" />'), ну а дальше делаем очередной файл gifbeg.js с этим кодом, и указываем путь к нему: <script type="text/javascript" src="/script/gifbeg.js"></script>
Выглядит так же, но в случае отключения в браузере активных сценариев, будет пустышка. Сценарии отключают с целью безопасности или для экономии трафика, но 80% пользователей при просмотре веб-страниц не отключают выполнение JavaScript. Но ведь тогда можно и <marquee> записать используя document.write (), скажет читатель. Да! Уважаемый читатель совершенно прав. Напишем привычный код бегущей строки в MARQUEE:
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="1" scrolldelay="100" style="color:#000066; background-color:#99ff00; width:160px; height:20px; border-color:#663399; font-style:oblique; border-style:groove; border-width:medium;">Обычная бегущая строка</marquee>А теперь сделаем файл с именем marquee.js
document.write ('<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="1" scrolldelay="100" style="color:#000066; background-color:#99ff00; width:160px; height:20px; border-color:#663399; font-style:oblique; border-style:groove; border-width:medium;">Обычная бегущая строка</marquee>')Ну и в исходник вставляем:
<script type="text/javascript" src="/script/marquee.js"></script>И если в браузере включено разрешение на выполнение активных сценариев, и он выполняет тэг <marquee>,а таковыми являются большинство популярных браузеров, то будет выводится обычная бегущая строка, и в ней даже будут выполнятся скрипты старта и останова при наведении мыши. И это наверное самый простой и удобный вариант если нужна и бегущая строка и валидность.
Стильный бег
В начале этой статьи автор упомянул о невалидном тэге <blink> и о его аналоге в CSS, а точнее CSS lavele 2.1, это мигание давно реализовано в Опере, Сафари и Мозиллах и некоторых других, но IE8 и тем более старшие, упрямо не желают выполнять. А вот реализация бегущей в CSS, пока не имеет поддержки в браузерах, и пока остаётся в стадии рекомендации W3C CSS3 Marquee, мы видим, что реализация предполагается дескрипцией в overflow-style, код бегущей в CSS3 выглядит так:
<span style="overflow-style:marquee-line;marquee-play-count:infinite;marquee-speed:fast;marquee-style:scroll;marquee-direction:reverse;width:80%;background-color:#9f0">Когда нибудь этот текст станет бегущим </span>Когда нибудь этот текст станет бегущим
Но к 2012 году нет браузеров выполняющих этот код, т.е. стильный бег это разговор будущего, поэтому нет предмета обсуждения, например, что лучше элемент marquee-speed, с тремя значениями fast | slow | normal в CSS или scrolldelay="" c миллисекундной настройкой в HTML.
в начало статьи
Апокриф веб-дизайна Текст в Marquee Графика в Marquee Формы в Marquee Скорость Marquee Направление Marquee Поведение Marquee Старт и стоп в бегущей строке Бегущая строка JavaScript
