Member Avatar for fumnimda

as i read marquee tag is not compatible with XHTML.
how can i implement it with CSS ?

  • 2 Contributors
  • 2 Replies
  • 88 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by fumnimda

Dani AI

Generated

Building on 's question and 's pointer to CSS, the practical, standards-based replacement for a <marquee> is a CSS animation that moves the text using transforms. This gives smoother rendering (GPU-friendly), lets you pause on hover/focus, and is easy to make accessible. For very old browsers you can add a tiny JavaScript fallback, but aim for progressive enhancement: CSS first, JS only if needed.

A minimal pattern (duplicate content for a seamless loop; pause on hover/focus; respect reduced-motion):

<div class="marquee" tabindex="0" aria-label="Announcement">
  <div class="track">
    Scrolling announcement — Scrolling announcement —
  </div>
</div>
.marquee { overflow: hidden; }
.track { display: inline-block; white-space: nowrap; animation: marquee 12s linear infinite; will-change: transform; }
.track:hover, .track:focus { animation-play-state: paused; }

@keyframes marquee {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .track { animation: none; }
}

Notes and tips: duplicate the inner content (or clone it with JS) for a continuous loop; pick a duration that matches the content length or compute it in JS for variable content; always offer pause-on-hover and honor prefers-reduced-motion. For implementation details and browser support, see Using CSS animations and prefers-reduced-motion, and check current support at caniuse — CSS animations.

Recommended Answers

All 2 Replies

Member Avatar for Thirusha

Seems CSS3 has a marquee property, click here

I know that a marquee can be done using javascript, so check these out too

Member Avatar for fumnimda

Seems CSS3 has a marquee property, click here

but all browsers don't support CSS3 ,such as IE6.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.