Невалидность Marquee

Невалидность Marquee

Атрибуты Marquee Marquee в текстовых браузерах Индексация 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> маленькими пиши непиши, всё равно будут невалидными).



Форточка

Если уж данная страница заявлена автором с доктипом DTD XHTML 1.0 Transitional, а не с DTD XHTML 1.0 Strict, то исходя из выше сказанного, для воспроизведения бегущей строки можно использовать фрейм, благо все современные графические браузеры фреймы поддерживают. Frame (форточка, фрамуга)- выделенная область в веб документе, через который можно просматривать контент другой страницы или только один веб элемент. Посмотрим через форточку на страницу Ускорение и замедление в Marquee, на которой приведены примеры скриптов замедления и ускорения бегущей строки, вот код форточки:
<iframe frameborder="1" scrolling="yes" width="80%" height="70" src="/marquee/marquee.html#slow"></iframe>, где iframe - "плавающий фрейм" т.е. устанавлевыемый в любое место документа, frameborder="1" - рамка (граница форточки), scrolling="yes" - атрибут разрешающий скроллинг внутри фрейма, что позволит просмотреть весь контент страницы, width="80%" height="70" - ширина в процентах от 100% окна браузера и высота форточки в пикселях, src="/marquee/marquee.html#slow - адрес (путь к) вызываемой страницы, #slow - указатель идентификатора (имени) тега <marquee id="beg"> который служит якорем, при выгрузке будет показан тот участок страницы, где установлена бегущая строка с этим именем. (ПРИМ: в некоторых версиях браузеров якоря не срабатывают при первой выгрузке, при этом отображается шапка вызываемой страницы, в этом случае для нормального отображения примера, необходимо перезагрузить страницу виртуальной кнопкой "Обновить" на панели браузера или используется кнопка F5 на клавиатуре)

Если запретить в плавающем фрейме скроллинг scrolling="no" и убрать отрисовку границы frameborder="0", то мы получим зрительный эффект, того что бегущая строка является элементом документа, для примера берём ту же страницу о замедлениях и ускорениях, и покажем только одну строку с именем fast

Пример с ускорением (fast), мы можем видеть в двух форточках, но в первой необходимо предварительно прокрутить страницу до требуемого примера. Конечно фреймы это очень удобно и если можно так сказать производительно, но страница которую мы просматриваем через frame невалидна, в ней присутствует Marquee, а для строгих документов, как указывалось выше frameset невалиден (невалиден, но воспроизводится без проблем), и ещё однин аргумент против фрейма, поисковые системы, сканирующие роботы недолюбливают страницы с фреймами, и с большой неохотой заглядывают в форточки, особенное, если их в документе больше чем одна.



Старый добрый GIF

В гиф-фармате очень легко создать бегущую строку, опустим описание технологии работы графических редакторов создания анимации типа Photoshop или его бесплатного аналога GIMP, автор отдает предпочтение GIF Movie Gear, в статье Непрерывная бегущая строка рассматривается вопрос о скроллинге тексата без паузы, который невозможно создать атрибутами тега <marquee>, но реализутется в других веб технологиях, одной из альтернатив <marquee> рассматривается гиф-формат. Возьмём уже готовый пример бегущей строки в gif, /img/beg.gif, установим картинку фоновым рисунком табличной ячейки, никакой разницы не будет, если мы укажем сразу стиль. Дело в том, что атрибут таблицы или ячейки <td background=""> для xhtml невалиден, впрочем как и атрибут высоты ячейки height="" таблица расширяется по высоте по заполнению контента, и несмотря на то, что эти атрибуты отлично выполняются любым браузером, а нам нужно оставить ячейку пустой &nbsp;, но с бекграундом и заданной высотой, то указываем всё это через стиль:


<table width="80%" align="center" border="1" cellspacing="0" cellpadding="0"><tr><td style="background-image:url(/img/beg.gif);height:18px;">&nbsp;</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:#ff0000;font-size:16px;"> &nbsp; &nbsp; В А Л И Д Н О ! &nbsp; &nbsp; </tt></strong>, даже вложение одно тега в другой <tt> в <strong>, "матрёшка" прошла валидатор, хотя всё надо указывать через стиль, так гласят правила W3C, но ведь не все скрипты и фильтры CSS поддерживаются браузерами, поэтому приходится иной раз втыкать пустышки &nbsp;. Но всё это примеры, и уважаемый читатель вполне разумно может указать, на то зачем мучаться с фоновым рисунком, можно сразу указать вывод графики на страницу. Совершенно верно: но и в этом случае не будем забывать о валидности: установим уже изрядно поднадаевшую картинку с бегущей в гиф с помощью тега <img /> в xhtml именно так с пробелом и слешем <img src="/img/beg.gif" alt="валидная бегущая" />

валидная бегущая

Красота мало кода, а эффект тот же, правда отсутсвие рамки для всех картинок заложено в общей таблице CSS для этого сайта, а то пришлось бы указывать border="0" он пока ещё валиден, можно обойтись и без указания ширины и высоты картинки, их отсутсвие не является нарушением, любой браузер всё равно покажет, а вот замещающий (альтернативный на случай неотображения катринки) текст alt="валидная бегущая" обязателен, без него <img /> невалиден, кстати главное это наличие этого атрибута, даже если он пустой alt="", но тогда в Эксплорере не будет всплывающей подсказки при наведении мыши на картинк, впрочем в Лисе и Опере её не будет если замещающий текст присутствует, для того что бы подсказка появлялась, во всех браузерах, и во всех тегах, а не только в картинке используют атрибут title="": наведите мышь на это слово ПРИМЕР, код этой нулевой ссылки (<a href="#0" title="пример всплывающей подсказки">ПРИМЕР</a>, увы но в более строгих разметках это тоже невалидно. Забавно, <img /> непарный тег, но если его закрыть, хотя в этом нет необходимости <img /></img> код останется валидным.



Валидная вспышка

Если валидатор от консорциума W3C чётко определяет, что он обнаружил конкретно именно тэг <marquee>, то он предложит заменить (пофиксить) его на Flash или JavaScript реализацию. Вставляем код для заранее созданого файла beg в формате swf в котором содержится анимированный текст - Бегущая в Flash - :


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
width="386" height="20">
<param name="movie" value="/flash/beg.swf" />
<param name="quality" value="high" />
<embed src="/flash/beg.swf"
pluginspage="http://www.macromedia.com/shockwave/download/"
width="386" height="20"></embed>
</object>

Скармливаем код валидатору и... засада, валидатор снова выдаёт приведённый выше текст, хотя ни <spacer>, ни <marquee>в коде нет, и все буковки маленькие, и теги закрыты, как это требует разметка XHTML. Вот тебе и послушался совета. Что же не понравилось валидатору, на этот раз, ему не понравился тэг внедрения объектов <embed>, FAQ valid Flash: Many Flash authoring tools recommend, or enforce, the usage of the <embed> element to include flash animations or applications in Web pages. <embed>, however, was never part of any standardized version of HTML, and this practice produces invalid markup. но тут же предлагается ссылка на статью Дрю МакЛиллана (Drew McLellan) О том как правильно внедрять flash content в веб документы. Статья на английском языке, но примеры кодов весьма наглядны, создание валидного flash. Сделать валидное внеддрение кода флеш, да всё очень просто, берём и вырезаем <embed> вот и всех делов:


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
width="40%" height="20">
<param name="movie" value="/flash/beg.swf" />
<param name="quality" value="high" />
</object>

Снова даем на проверку валидатору, и он без оговорок принимает код, и главное, что при наличии интегрированного флэш-плеера, "вспышка" воспроизводится и на странице появиться текст: Бегущая в Flash.

В Internet Explorere, Opere 8-9, FireFox 2, Google Chrome 4 после подобного обрезания кода, плеер работает, и на субъективный взгляд автора с таким обрезанным кодом, браузеры быстрее загружают флэш, но в десятой Опере и третьем Огнелисе флэш не воиспроизводится. Ради любопытсва можно вызвать отдельно этот файл, по адресу a-cto.narod.ru/flash/beg.swf, и Opera 10 и FF 3.5 c включенным флеш-плеер обязательно его воспроизведут, и взглянем в исходный код, и мы увидим в исходнике, что браузеры сами вводят тег <embed>. Если взять статью Дрю МакЛиллана, то в ней приводиться код внедрения flash с использованием MIME-типа (Multipurpose Internet Mail Extension - многозадачные расширения электронной почты). Делаем по примеру вот теперь совсем правильно:

<object type="application/x-shockwave-flash"
data="/flash/beg.swf" width="40%" height="20">
<param name="movie" value="/flash/beg.swf" />
</object>

И код полегче, и главное всё это прекрасно работает в современных браузерах, если конечно в браузер интегрирован флэш-плеер, и воспроизведение разрешено.



Автоскроллинг JavaScript

Flash это конечно очень хорошо, но в качестве альтернативы 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"
style="background-color:#e0edf6; border:0px; width:500px; " />
. Начнём с бекграунд, по умолчанию фон текстовой формы белый, меняем на цвет фона данной страницы: 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 (скорость по-английски), вот только скорость чего? Mеняем с 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:#99ff00;">Когда нибудь этот текст станет бегущим</span>

Когда нибудь этот текст станет бегущим

Но к 2013 году нет браузеров выполняющих этот код, т.е. стильный бег это разговор будущего, поэтому нет предмета обсуждения, например, что лучше элемент marquee-speed, с тремя значениями fast | slow | normal в CSS или scrolldelay="" c миллисекундной настройкой в HTML.

в начало статьи

Апокриф веб-дизайна Текст в Marquee Графика в Marquee Формы в Marquee Скорость Marquee Направление Marquee Поведение Marquee Старт и стоп в бегущей строке Бегущая строка JavaScript

eXTReMe Tracker Карта сайта