W3docs
ru
Войти

HTML <marquee> Tag

Устаревший тег HTML marquee прокручивал текст или изображения. Узнайте, почему он удалён и как анимировать контент с помощью CSS.

Элемент <marquee> — устаревший, нестандартный HTML-тег, который использовался для создания прокручиваемого текста или изображений. Он заставлял контент прокручиваться горизонтально или вертикально по веб-странице. Подобно элементу <blink> от Netscape, он подвергался широкой критике из-за проблем с удобством использования.

Опасно

Не используйте <marquee> в новом коде. Тег был удалён из HTML Living Standard и официально признан устаревшим. Примеры на этой странице приведены исключительно для того, чтобы вы могли распознать и заменить устаревший код — это не рекомендация к использованию. Для создания эффектов прокрутки сегодня используйте современную замену на CSS ниже. Смотрите также список устаревших HTML-тегов.

Пример тега HTML marquee

Эта страница рассказывает о том, что делал <marquee>, почему он был упразднён, как воспроизвести его эффект с помощью стандартных CSS-анимаций, а также о правилах доступности, которым необходимо следовать, когда контент движется на экране.

Почему <marquee> был удалён

Хотя большинство браузеров по-прежнему отображают <marquee> для обратной совместимости, следует считать его нерабочим:

  • Он не включён ни в одну актуальную спецификацию. Поставщики браузеров вправе в любой момент отказаться от поддержки, а инструменты, линтеры и валидаторы помечают его как ошибку.
  • Это представление в разметке. Анимация относится к CSS, а не к HTML-элементам.
  • Он ухудшает доступность. Непрерывно движущийся контент может нарушать стандарт WCAG (см. Доступность ниже).

Современная замена на CSS

Эффект marquee — это просто элемент, смещаемый по контейнеру в цикле. Его можно воспроизвести с помощью CSS @keyframes и свойства transform — без JavaScript и без устаревших тегов.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .marquee {
        overflow: hidden;       /* hide the text outside the box */
        white-space: nowrap;    /* keep the text on one line */
        box-sizing: border-box;
      }
      .marquee span {
        display: inline-block;
        padding-left: 100%;     /* start fully off-screen on the right */
        animation: scroll-left 12s linear infinite;
      }
      @keyframes scroll-left {
        from { transform: translateX(0); }
        to   { transform: translateX(-100%); }
      }
      /* Pause the animation when the user hovers, giving them control. */
      .marquee:hover span {
        animation-play-state: paused;
      }
    </style>
  </head>
  <body>
    <div class="marquee">
      <span>A scrolling text created with CSS animation instead of marquee.</span>
    </div>
  </body>
</html>

Поскольку движение теперь задаётся в CSS, вы управляете его скоростью с помощью animation-duration, направлением — меняя значения translateX, а плавностью — свойствами transition и animation, которые являются стандартными и полностью поддерживаются.

Предупреждение о доступности

Движущийся контент — это реальная проблема доступности, а не вопрос стиля.

  • Критерий успеха WCAG 2.2.2 (Пауза, остановка, скрытие) требует, чтобы любой контент, который автоматически движется, мигает или прокручивается более пяти секунд, мог быть приостановлен, остановлен или скрыт пользователем. «Голый» <marquee> такой возможности не предоставляет, поэтому не соответствует этому критерию.
  • Учитывайте prefers-reduced-motion. Некоторые пользователи явно просят свою систему свести анимацию к минимуму (она может вызывать тошноту или головокружение). Отключите прокрутку для них:
@media (prefers-reduced-motion: reduce) {
  .marquee span {
    animation: none;
  }
}
  • Предусмотрите кнопку паузы. Приведённый выше CSS-пример приостанавливает анимацию при наведении с помощью animation-play-state, однако наведение недоступно для пользователей клавиатуры или сенсорных устройств. Для важного контента добавьте видимую кнопку «Пауза/Воспроизведение», переключающую animation-play-state, чтобы каждый мог остановить движение.

Альтернативы HTML-тегу <marquee>

Помимо описанного подхода на чистом CSS, можно создавать более сложные эффекты прокрутки, комбинируя CSS и JavaScript. Прочитайте наш сниппет, чтобы узнать больше об этом методе.

Устаревший синтаксис (только для справки)

Внимание

Примеры в этом разделе являются устаревшим кодом, приведённым здесь исключительно для того, чтобы помочь вам его распознать и перенести на новые стандарты. Не добавляйте <marquee> на новые страницы — используйте вместо этого современную замену на CSS.

Тег <marquee> используется парами. Контент размещается между открывающим (<marquee>) и закрывающим (</marquee>) тегами.

Пример использования HTML-тега <marquee>:

Пример HTML-тега <marquee>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      marquee{
      font-size: 30px;
      font-weight: 800;
      color: #8ebf42;
      font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <marquee>A scrolling text created with HTML Marquee element.</marquee>
  </body>
</html>
Попробуйте сами »

Используйте атрибут direction элемента <marquee>, чтобы изменить направление текста или изображения. Посмотрите другой пример, где текст прокручивается сверху вниз.

Пример прокручиваемого текста:

Пример тега <marquee> с атрибутом direction

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <marquee direction="down">A scrolling text created with HTML Marquee element.</marquee>
  </body>
</html>
Попробуйте сами »

Теперь рассмотрим пример использования элемента <marquee> для отображения прокручиваемого изображения:

Пример прокручиваемого изображения:

Пример тега <marquee> с атрибутами behavior и direction

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
     <marquee behavior="scroll" direction="up">
      <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="W3docs" />
    </marquee>
  </body>
</html>
Попробуйте сами »
Совет

Используйте CSS-свойства width и background-color для стилизации элемента <marquee>.

Пример создания прокручиваемого текста с помощью HTML-тега <marquee>:

Пример стилизации HTML-тега <marquee> с помощью свойств width и background-color

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <style> 
      marquee {
        width: 100%;
        padding: 10px 0;
        background-color: lightblue;
      }
    </style>
    <marquee direction="scroll">This scrolling text is created with HTML Marquee element and styled with CSS properties.</marquee>
  </body>
</html>
Попробуйте сами »

Атрибуты

Следующие атрибуты использовались для настройки внешнего вида элемента <marquee>. Все они нестандартны. Они не определены ни в одной актуальной спецификации, и совместимые со спецификацией инструменты будут помечать их как ошибки; даже там, где браузеры сегодня их поддерживают, это поведение не гарантировано.

АтрибутЗначениеОписание
behaviorscroll, slide, alternateОпределяет тип прокрутки.
bgcolorrgb(x,x,x), #xxxxxx, colornameЗадаёт цвет фона.
directionup, down, left, rightЗадаёт направление прокрутки контента.
heightpixels, %Определяет высоту элемента marquee.
hspacepixelsОпределяет горизонтальное пространство вокруг элемента marquee.
loopnumberОпределяет, сколько раз контент будет прокручиваться. Если не указан, контент прокручивается бесконечно.
scrollamountnumberОпределяет величину прокрутки за каждый интервал в пикселях. Значение по умолчанию — 6.
scrolldelaymillisecondsОпределяет задержку между прокрутками. Значение по умолчанию — 85.
truespeedbooleanОбеспечивает постоянную скорость прокрутки в разных браузерах.
vspacepixelsОпределяет вертикальное пространство вокруг элемента marquee.
widthpixels, %Определяет ширину элемента marquee.

Тег <marquee> также поддерживает глобальные атрибуты и атрибуты событий.

Практика

Практика
Какие функции CSS следует использовать для воспроизведения эффекта прокрутки старого тега marquee в современном коде?
Какие функции CSS следует использовать для воспроизведения эффекта прокрутки старого тега marquee в современном коде?
Was this page helpful?