CSS Marquee Replacement

The HTML marquee tag, which was used to create scrolling text or images on a web page, has been deprecated and is no longer supported in modern web development. This means that while it may still work in some older web browsers, it is not considered a valid HTML element in current web development standards and should not be used in new or updated websites.

There are several reasons why the <marquee> tag was deprecated:

  1. Accessibility: Scrolling text or images can be distracting for users and can make it difficult for users with visual impairments to read the content on a page.

  2. User experience: The scrolling effect can also be distracting and annoying for users, and can make it difficult to read the content.

  3. Compatibility: The <marquee> tag is not well supported across different web browsers, and can cause inconsistencies in the way the page is displayed.

The main reason however was that HTML was never meant to act as a styling language, it is a markup language.

Modern alternatives: There are more modern and flexible ways to achieve similar effects, such as using CSS and JavaScript. These methods provide more control and customization options and are better supported across different web browsers.

Here is an example of how you can achieve the same effect as the HTML <marquee> tag using CSS:

<div class="marquee" data-text="This is some scrolling text!"/>
.marquee {
  width: 300px;
  height: 50px;
  overflow: hidden;
  position: relative;

.marquee:before {
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  animation: marquee 5s linear infinite;

@keyframes marquee {
  from {
    left: 100%;
  to {
    left: -100%;

In this example, the text is added to the content of the :before pseudo-element using attr to get the contents of the data-text attribute. The animation then moves the text from right to left until it disappears completely off the left edge of the container.



Be the first to comment!

Read More

Dynamically loading Google Fonts

Google Fonts is a great tool for web developers, it allows you to load in almost any font on to you website and use it with only a few lines of cod...

Generating Random Colors on a Range

If you want to add some visual interest to your website, consider incorporating random colors. While using the Math.random() function to generate colors can be a quick and easy option, it may result in some less-than-appealing hues. An alternative approach is to create a set...

CSS Pseudo Elements

CSS pseudo elements allow web developers to add specific elements to their webpages without having to write additional HTML or JavaScript. These elements are created by adding a colon and a keyword to the end of a CSS selector. Some of the most commonly used pseudo elements are :before and :after which can be used to add content before or after an element, :first-letter which can be used to style the first letter of a paragraph, and...

NixOS Logo
NixOS Logo

Nix Package Manager

Nix is a tool that enables reproducible package build in isolation allowing package's to be install on any Linux based operating system including Mac OS.