Design, CG Graphics & Inspiration
To Copy or Not to Copy: The content CSS Property

To Copy or Not to Copy: The content CSS Property

I’ve decided to use a trendy CSS property, content, for my web project, to make webpages more “lightweight” and to improve the flexibility of tuning their appearance. As the project was only intended for web developers, I didn’t need to bother about supporting outdated browsers (IE 6 and 7). Alas, I was greatly disillusioned in that CSS property: though everything was displayed correctly, the end user’s experience was far from perfect.

What is the content CSS property?

In case you’ve never used this “wonderful” property, I’ll tell you about it in brief. The very name indicates that it controls some content. According to the CSS2 specifications, this property is only used with the :before and :after pseudo-elements. However, CSS3 will let web coders use it with ordinary elements too (actually, the Opera browser already supports such usage).

The content property lets you specify the text for (pseudo-)elements. Here’s a classical example of using this property to show a link’s content near the element in a website’s print version:

Our catalog contains lots of interesting things.


The :after pseudo-element defines the content following the attr() function, which displays the content of a context element’s attribute. Here’s how the result of using this code looks in a web browser fully compatible with CSS2:

If you are interested in this property, you can find out more about it online. Let’s get down to the core of its usage problem.

The Problem

As end users see the result of applying the content property just like an ordinary text, the question is whether they can select and copy such text.

The project I’m currently implementing is a tool for easy working with XML documents. I chose the above-mentioned property for displaying a colorful tree of elements.

div class=demo


The good thing is that you can greatly reduce the number of elements used for coloring the tags. (You can define any color for angle brackets by using the :before and :after pseudo-elements.) For attribute values, I used the tag and the quotes CSS property, which defines the opening and closing quotation marks. Some people like to use double quotes in their code, while others prefer single quotes, so it’s nice to be able to change all quotes in the whole document on the fly. The choice of the tag and of the CSS property proved to be an important part of the experiment.

Web browsers display webpages with that code just fine:

However, XML must not only look fine but also work correctly: the user must be allowed to select and copy a document fragment easily to use it, for example, in his favorite text editor. This is where I was completely disappointed in the content property — I tried to copy fragments of text in my web browsers (Safari 4, Opera 10, Firefox 3.5, and IE8) and got the following results:

  • Safari: div class=demo
  • Opera:
  • Firefox: div class="demo"
  • IE8:

As you can see, the browsers copied the text in different ways: Safari failed to copy the content data, Opera and IE8 copied everything, and Firefox copied only the quotes surrounding the attribute.

Then I determined to use an ordinary instead of the element, and here’s what I’ve got:

  • Safari: div class=demo
  • Opera:
  • Firefox: div class=demo
  • IE8:

Same as before, but this time Firefox didn’t copy the quotes.

Conclusion

I draw the following conclusion from my little experiment:

  • Safari doesn’t understand the quotes CSS property at all. The fact that Safari did display the quotes surrounding the <q> element is simply its standard behavior. For example, you cannot replace double quotes via the quotes property by single ones — they will stay double ones anyway. And if you rename the element to <span>, the quotes will completely disappear.
  • Firefox, when copying the text, checks the element’s name: if the name is <q>, then the quotes are copied; other elements produce nothing.
  • Firefox always copies double quotes for the <q> tag, even if you change them to something else (for example, to «guillemets»). That is, you cannot control how the characters are copied. Always use double quotes, or get nothing at all.
  • IE8, when copying the text, checks the element’s type: for example, if you define display: list-item for the tag, a bullet will be copied (although no bullet will be displayed on the webpage)

By and large, I find no reason for joy. The content property doesn’t let you get a cross-browser solution, whether you need to let the user copy the data or needn’t (for example, in case of line numbers in code listing). As it often happens, the emptiness of inexperienced web coders’ joyful cries and marketing guys’ showy demos is revealed in the moment of real-life use, when you must do what makes sense, not following the hype. Therefore, so far I’d better stick with outdated but time-tested solutions.

SHARE THIS POST

This post has been written by the team here at Splashnology.com

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.