CSS: When to Use Generated Content

Published on February 24, 2014 (↻ February 5, 2024), filed under Web Development (RSS feed for all categories).

This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.

Generated content means a special option in CSS to embed content—text or graphics—in documents. It’s achieved through the content property, traditionally in conjunction with the pseudo-elements ::before and ::after. Generated content has first been specified in 1998.

That’s no news. Neither is it that generated content has for the longest time not been supported well enough (Internet Explorer). Only for a few years now has it been ready for broad and with that commercial use. However, generated content is also a bit cumbersome to work with, and that turned out to be useful as it has prevented abuse. The possibility of abuse is why I like to cement when and when not to use generated content. It’s simple, but even though I’m extremely confident someone has laid it out before, I still haven’t seen it put this way.

What Not to Use Generated Content For

Generated content should not be used for actual content, like copy text or important messages. A good sanity check is to imagine that content not to be available to the user (or to simply disable CSS) and to confirm that the site or application can still be understood and used.

The reason for this is not concern about user agent support, not anymore, than instead technical purpose and separation of concerns. CSS is simply not there to hold contents. Contents belong into a database of sort or, lacking means of full separation, an HTML document or template.

When to Use Generated Content

It suffices to reverse the above statement and say that anything that doesn’t actually represent content, like auxiliary information or decorative elements, is fine to be held in a style sheet. Which can be advantageous for performance and also maintenance reasons.

Generated Content Can Save the Day

You can stop reading now unless you like a lengthy promotional example of how generated content can be of particular help. My favorite example is one that I myself have worked on at Google (no backhanded compliment, though living a life in self-imposed isolation occasionally makes my world shrink a little):

A few years back we, Google’s former Webmaster Team, were asked to add a “New” notification behind certain footer links so as to indicate a change in Google policies. As we worked with a corpus of about 100,000 static web pages that appeared like a problem, but we had brought ourselves in a good maintenance position by using our Google-specific HTML/CSS framework on a majority of these pages. We then could, instead of editing and re-publishing those thousands of pages, use that framework to plug in one style sheet that generated the desired “New” behind all relevant footer links. We used one @import rule to hook up that notification style sheet, and very specific selectors to generate the “New” in 40 different languages. Taking this route we updated thousands of pages by just creating one and changing another file. The foundation was laid by separating concerns and following maintainability principles, but generated content was the key. (The first version of this notification style sheet is available for inspection at archive.org. Google has used the same method for the last Terms of Service change.)

❧ Now, I didn’t intend to dedicate a lot of energy to describing how Google does notifications, but the point is, generated content should only be used for uncritical content, for which it can then be a sharp instrument. Especially in projects that have been set up with maintenance in mind.

About Me

I’m Jens, and I’m an engineering lead and author. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma.

With my current move to Spain, I’m open to a new remote frontend leadership position. Feel free to review and refer my CV or LinkedIn profile.

I love trying things, not only in web development, but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.