Тег <marquee> (от английского marquee, «афишная вывеска») превращает содержимое в бегущую строку: текст едет внутри своей области сам, без скриптов. Он парный, закрывающий тег </marquee> обязателен, а движением управляют атрибуты behavior, direction, scrollamount и другие. Тег появился в ранних версиях Internet Explorer, но его отображают и остальные браузеры, хотя стандарт HTML запрещает его использовать.
<marquee>Скидки до 50% только сегодня</marquee>В этой статье
- Что делает тег marquee в HTML
- Атрибут behavior: scroll, slide и alternate
- Атрибут direction: куда движется текст
- Скорость: scrollamount, scrolldelay и truespeed
- Число кругов loop, методы start и stop
- Размеры и оформление: width, height, bgcolor, hspace, vspace
- Чем заменить тег marquee: CSS-анимация
- Доступность: пауза и настройка уменьшения движения
Что делает тег marquee в HTML
Тег marquee двигает своё содержимое внутри собственной области. По умолчанию область занимает всю ширину контейнера и высоту одной строки: текст появляется у правого края, уходит за левый и начинает путь заново. Внутри можно размещать не только слова, но и картинки, ссылки и блоки вроде абзацев.
Тег работает без единого атрибута: скорость по умолчанию около 70px в секунду, то есть 6px каждые 85 миллисекунд. Как и тег font или тег center, он описывает внешний вид, а не смысл, поэтому для вспомогательных технологий это просто текст.
Пример: чем marquee отличается от обычного текста
Кнопки переключают тег marquee и обычный абзац с тем же текстом. Под рамкой написано, на сколько пикселей сместился текст за последнюю секунду: измерение идёт прямо в кадре.
У абзаца смещение равно нулю, у marquee оно близко к 70px. Это и есть вся суть тега: движение без CSS и без JavaScript.
Атрибут behavior: scroll, slide и alternate
Атрибут behavior выбирает, как двигается текст. Допустимы три значения: scroll (по умолчанию), slide и alternate. Пропущенное или неверное значение работает как scroll.
В режиме scroll текст появляется у правого края, целиком уходит за левый и начинает круг заново. В режиме slide он доезжает до левого края и остаётся там. В режиме alternate текст ходит между краями туда и обратно: у каждого края он упирается в границу области, а не уходит за неё.
Пример: куда приезжает текст в каждом режиме
Кнопки подставляют значение в behavior. Для наглядности шаг увеличен до scrollamount="10". Под рамкой написано, что сделал текст: сколько кругов прошёл, где остановился или сколько раз отскочил.
Режим slide срабатывает один раз: после остановки у левого края текст больше не двигается. Режим alternate подходит для коротких надписей, которые должны оставаться в области целиком, а scroll лучше подходит для длинных.
Атрибут direction: куда движется текст
Атрибут direction задаёт направление: left (по умолчанию), right, up и down. Регистр не важен, а неверное значение работает как left.
Вертикальные up и down требуют высоты. Без атрибута height область остаётся высотой в одну строку, и текст быстро пролетает через узкую полосу. Чтобы вертикальная прокрутка выглядела как прокрутка, задайте height, например 100.
Пример: четыре направления и роль высоты
Кнопки подставляют direction и height. Под рамкой написаны высота области и направление, которое кадр определил по движению текста.
Горизонтальные направления высоту не требуют: область и так подходит по высоте для одной строки.
Скорость: scrollamount, scrolldelay и truespeed
Скорость задают два атрибута. Атрибут scrollamount задаёт шаг в пикселях, а scrolldelay задаёт паузу между шагами в миллисекундах. Скорость в пикселях в секунду равна шагу, делённому на паузу в миллисекундах и умноженному на 1000. Значения по умолчанию 6 и 85 дают около 70,6px в секунду.
Нулевой scrollamount останавливает строку. Дробное значение 2.5 браузер округляет до 2, а отрицательное и нечисловое возвращают шаг по умолчанию, 6.
У паузы есть минимум. Без атрибута truespeed значение меньше 60 не принимается. Спецификация предписывает брать в этом случае 60, но браузеры на движке Chromium берут паузу по умолчанию, 85: при scrollamount="1" и scrolldelay="59" строка идёт со скоростью 11,7px в секунду, как при 85. С truespeed значение принимается как есть.
Пример: расчёт скорости и скорость в кадре
Три ряда кнопок подставляют scrollamount, scrolldelay и truespeed. Под рамкой записан расчёт по формуле и скорость, которую кадр измерил по движению текста.
Расчёт и измерение совпадают, пока пауза не меньше 60. Выберите scrolldelay="30" без truespeed, и расчёт покажет, что браузер подставил 85.
Число кругов loop, методы start и stop
Атрибут loop задаёт число кругов. По умолчанию это -1, то есть бесконечно. Положительное число останавливает строку после указанного числа кругов, причём текст остаётся за краем, и область выглядит пустой. Ноль, нечисловое значение и -1 дают бесконечную прокрутку, а дробное 3.7 округляется до 3.
Остановить и снова запустить строку можно из скрипта методами stop() и start(). Наведение мыши строку не останавливает. Документация MDN описывает события onstart, onbounce и onfinish, но в стандарте их нет, и в браузерах на движке Chromium они не срабатывают: у элемента нет и самих свойств onstart, onbounce и onfinish.
Пример: сколько кругов проходит строка и срабатывает ли finish
Кнопки loop задают число кругов, кнопки stop() и start() вызывают методы элемента. Под рамкой написано, сколько кругов пройдено, идёт ли строка и сколько раз сработало событие finish в вашем браузере.
Не стройте логику на событии finish: если в вашем браузере счётчик остаётся нулевым, код, который ждёт это событие, не выполнится.
Размеры и оформление: width, height, bgcolor, hspace, vspace
Размер и внешний вид области задают атрибуты width, height, bgcolor, hspace и vspace. Они работают как у других устаревших тегов: значение записывается в разметке, а CSS его перекрывает.
Пример: как атрибуты меняют область marquee
Кнопки подставляют атрибуты в тег. Под рамкой записаны размер области, цвет фона и отступы, которые вернул браузер.
Ширину можно задать в пикселях или в процентах от контейнера, а hspace и vspace добавляют отступы слева и справа или сверху и снизу. Сводка всех одиннадцати атрибутов:
| Атрибут | Статус | Что делает | Пример записи |
|---|---|---|---|
behavior | Устарел | Режим движения: scroll, slide или alternate | behavior="alternate" |
direction | Устарел | Направление: left, right, up или down | direction="up" |
scrollamount | Устарел | Шаг прокрутки в пикселях, по умолчанию 6 | scrollamount="3" |
scrolldelay | Устарел | Пауза между шагами в миллисекундах, по умолчанию 85 | scrolldelay="100" |
truespeed | Устарел | Разрешает паузу меньше 60 миллисекунд | truespeed |
loop | Устарел | Число кругов, по умолчанию -1 (бесконечно) | loop="3" |
width | Устарел | Ширина области в пикселях или процентах | width="300" |
height | Устарел | Высота области, нужна для up и down | height="100" |
bgcolor | Устарел | Цвет фона области | bgcolor="#ffcc00" |
hspace | Устарел | Отступы слева и справа | hspace="20" |
vspace | Устарел | Отступы сверху и снизу | vspace="10" |
Чем заменить тег marquee: CSS-анимация
Бегущую строку заменяет CSS-анимация: текст сдвигается свойством transform на свою ширину, а всё лишнее скрывает overflow. Правило @keyframes описывает путь, свойство animation запускает его без конца.
<div class="ticker">
<span>Скидки до 50% только сегодня</span>
</div>.ticker {
overflow: hidden;
white-space: nowrap;
}
.ticker span {
display: inline-block;
padding-left: 100%;
animation: run 10s linear infinite;
}
@keyframes run {
to { transform: translateX(-100%); }
}Отступ слева в 100% сдвигает текст за правый край области, а сдвиг на минус 100% уводит его за левый: получается тот же путь, что у режима scroll. Длительность подбирают по длине пути: ширину области плюс ширину текста делят на нужную скорость.
| Возможность | Тег marquee | CSS-замена |
|---|---|---|
| Скорость | scrollamount и scrolldelay | animation-duration, урок про длительность и повтор |
| Число кругов | loop | animation-iteration-count |
| Ход туда и обратно | behavior="alternate" | animation-direction: alternate, урок про направление |
| Пауза | Только методы stop() и start() из скрипта | animation-play-state: paused, урок про паузу |
| Пауза при наведении мыши | Нет | Правило :hover и animation-play-state |
Пример: marquee и CSS-лента рядом
Сверху тег marquee, снизу CSS-лента с тем же путём и той же скоростью. Кнопка «Над строками» включает у ленты правило с наведением. Под рамкой записана скорость каждой строки, измеренная в кадре.
В обычном ходе скорости совпадают, а при наведении лента встаёт, тогда как marquee продолжает ехать. Это главное практическое преимущество замены: поведением управляет CSS.
Доступность: пауза и настройка уменьшения движения
Движущийся текст мешает читать и может вызывать дискомфорт, поэтому доступность требует контроля над движением. Критерий WCAG 2.2.2 (уровень A) требует, чтобы движение, которое запускается само и длится дольше 5 секунд, можно было приостановить, остановить или скрыть.
У marquee встроенной кнопки нет, наведение мыши строку не останавливает, а системную настройку уменьшения движения тег не учитывает: при включённой настройке строка движется как обычно. У CSS-ленты это одно правило с условием по настройке:
@media (prefers-reduced-motion: reduce) {
.ticker span {
animation: none;
}
}Пример: пауза и настройка уменьшения движения
Кнопки «Включена» и «Выключена» имитируют системную настройку: у ленты включается то же правило, что в коде выше. Кнопки «Пауза» и «Продолжить» вызывают stop() и start() у marquee и останавливают анимацию у ленты.
Настоящую настройку браузер берёт из системы, а в примере она имитируется классом. Подробнее о настройке в уроке курса «prefers-reduced-motion: уважение к выбору пользователя».
