code-dependent

Introduction

Marquee tags used to be quite the popular party guests at HTML cocktail parties. They would enter from the front door, head over to the drinks, keep walking, jump out the window, only to re-enter from the front door. Oh! those crazy tricksters.

Still not jogging your memory? Marquees look like this:

If you want a more immersive experience, visit Evan Goer’s Page of the Damned. It’s simply spectacular.

History

The marquee element was invented by Internet Explorer to try and get an edge on Netscape Navigator. For the babies out there, Netscape was a web browser that dominated the market up until the First Browser War and it had its own proprietary tag, blink. The battle was epic, it was like Ali versus Frazier III but instead of boxing gloves, they had proprietary, equally obnoxious tags.

The marqee tag was pretty popular—look at basically any GeoCities page—but it had some fierce critics. Vicious haters and cowards claimed that the marquee tag was distracting and that it caused issues for users of assistive technology. On both these counts they were right. Haters also said that it was difficult to print out webpages with marquee elements. But really who does that? NOT A PROBLEM. Other two complaints: problem. Printing webpages: not problem.

Due to these complaints, the W3C decided that the marquee tag is not valid HTML, declaring it non-compliant. However, many browsers such as Chrome, Firefox, and Safari continue to support it.

In fact, Firefox and now Chrome support a wide array of attributes. For instance, in addition to rendering marquee tags that scroll horizontally, these browsers allow marquee tags to scroll from top to bottom. Another attribute allows you to reverse the content’s direction once it hits the side of the marquee. These browsers also allow marquee tags to be nested (though Evan Goer does not recommend it)—that is, having one marquee tag inside of another. Put the two and two together, and you get a div that ‘bounces’. In other words, the effect of a ball hitting walls can be achieved with just HTML and some old school CSS.

Creating a Bouncing Ball Using Marquees

Please read the rest of this post in Firefox or Chrome as most other browsers can’t support the nested marqee tags below. Note that it’s way smoother in Chrome.

There are five steps. They are simple. So simple.

Step 1: Create the markup

To start out, we’re gonna nest some divs like they’re dreams and we’re in Inception. Okay so create a container. Inside this container, create a bar-like div. Inside this bar, nest a green square. Ta-da!

1
2
3
4
5

<div class="container">
  <div class="bar">
    <div class="square"></div>
  </div>
</div>

Step 2: Move the square from left to right

Wrap the .square div in a marquee tag and give this marquee tag a behavior attribute of alternate.

1
2
3

<marquee behavior="alternate">
  <div class="square"></div>
</marquee>

Step 3: Move the bar from top to bottom

Repeat step 2 but for the .bar div: wrap it in a marquee tag with the alternate behavior. Add two more attributes: give it a direction of up and give it the height of the container in which it’s nested.

1
2
3
4
5

<marquee behavior="alternate" direction="up" height="300">
  <div class="bar">
    <marquee>...</marquee>
  </div>
</marquee>

Step 4: Nest a circle div inside the square div

Take a look at CSS Trick’s shapes article if you need help styling a circle-shaped div.

1
2
3

<div class="square">
  <div class="circle"></div>
</div>

Step 5: [lowers glasses like Tim Gun] Make it work.

Don’t want to write any of this? I get it. Here’s the Codepen.

Conclusion

Using nested marquee tags is an easy way to create the appearance of a bouncing ball that requires no JavaScript or fancy new CSS and it renders in almost 50% of viewers’ browsers! Yay!

To learn more about the marquee tag, check out Evan Goer’s blog, Zach Holman’s blog, or David Walsh’s letter to the webmaster.

Background

You may have noticed that some of your favorite websites, like Google Now and Pintrest, have started to put small amounts of content into discrete divs. These small units of content are called cards and the card UI pattern is gaining traction because they are scalable and easy to manipulate.

A while back, I implemented this design:

1
2
3
4
5
6

.card {
  display: inline-block;
  background-color: #89b1b5;
  padding: 10px;
  margin: 5px;
}

1
2
3
4
5
6

<div class="card">
  <img src="picture.jpeg" />
</div>
<div class="card">
  <p>Lorem ipsum</p>
</div>

I imagined that this would look okay. Instead, it looked like this:

Q: Why do bad things happen to good HTML elements?

A: Because we live in a cruel world where nothing has meaning.

Wha?

So it turns out that images have a veritical-align property that defaults to baseline. You might be asking, “WHAT IS A BASELINE?!?”

First off, calm down. We’re going to get through this together.

Okay, do you remember writing on college-ruled paper in school or are you reading this in the future where everyone comminucates via brain chips and Kanye West is worshipped as a god? Well, if you remember ruled paper, those blue lines are perfect examples of baselines. Letters like p, q, and y have appendages that exend below the baseline but most letters sit on it.

For instance, the teal line in this image is the baseline:

Keep in mind that the vertical-align property does not affect the positioning of the element’s contents. Rather, it affects the element’s alignment on the page. If you want to vertically center its contents, adding vertical-align: middle will have absolutely no effect. Which is inconsistant, really, considering that text-align: center will. The W3C must contain some evil maniac just trying to drive us crazy. WE MUST NOT LET THEM!!!

…anyway, for my simple demo the image’s default alignment of baseline was causing the strange behaviour. The image was trying to line up with the baseline of the text in the div to its right, causing the left-hand div to be higher than the right-hand div.

Solution

A quick way to solve this is to override the image default:

1
2
3

.card img {
  vertical-align: middle;
}

To learn more about the vertical-align property, checkout Impressive Web’s blog or CSS-Trick’s article.

Throwback

All hail the You’ve Got Mail flash intro!