CSS: When to Use Generated Content
Post from February 24, 2014 (↻ June 1, 2020), filed under Web Development.
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
::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 very 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 for 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 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 non-critical content, and it can then be a very sharp instrument. Especially in projects that have been set up with maintenance in mind.
If you have a question or suggestion about what I write, please leave a comment (if available) or a message.
Have a look at the most popular posts, possibly including:
Perhaps my most relevant book: CSS Optimization Basics (2018). Writing CSS is a craft. As craftspeople we strive to write high quality CSS. In CSS Optimization Basics I lay out some of the most important aspects of such CSS. (Also available in a bundle with Upgrade Your HTML and The Web Development Glossary.)
Looking for a way to comment? Comments have been disabled, unfortunately.