Treehouse

CSS attr, content, and L10N

By on  

I have the privilege of working for Mozilla on the Mozilla Developer Network (MDN).  As with any Mozilla-made website, localization is paramount to MDN, so we must be mindful of that when we put text anywhere on the site.  I was recently working on a feature which made use of CSS content:  a visual notice on an element's pseudo-element which are experimental and only available to beta testers.  The obvious problem in doing so is that hardcoding the generated content message in the stylesheet means I can't localize it;  a definite localization taboo.  The solution was simple:  use the attr expression to pull the localization message from an element's custom data- attribute.

The HTML

Start by outputting the localized text to a data- attribute:

<div class="beta-feature" data-message="{{ _('This feature is only seen by beta testers') }}">
	<!-- some content here -->
</div>

With the text available in an attribute, the CSS attr expression and content will be used to display the text in a pseudo-element:

.beta-feature:after {
	content: attr(data-message);

	/* formatting here */
}

The formatting is up to the developer but the main point is that we get to use the attribute value to display the variable text.

This post isn't groundbreaking and it's not meant to be;  I just want to reinforce how awesome and useful CSS content paired with attr can be.  I love that this strategy prevents the need to preprocess CSS files with the localized text, and love that...it's just so easy!

ydkjs-6.png

Recent Features

  • Create a CSS Flipping&nbsp;Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • CSS&nbsp;Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome,...

Incredible Demos

  • MooTools onLoad&nbsp;SmoothScrolling

    SmoothScroll is a fantastic MooTools plugin but smooth scrolling only occurs when the anchor is on the same page. Making SmoothScroll work across pages is as easy as a few extra line of MooTools and a querystring variable. The MooTools / PHP Of course, this is a...

  • Control Element Outline Position with&nbsp;outline-offset

    I was recently working on a project which featured tables that were keyboard navigable so obviously using cell outlining via traditional tabIndex=0 and element outlines was a big part of allowing the user navigate quickly and intelligently. Unfortunately I ran into a Firefox 3.6 bug...

Discussion

  1. Hi, that’s really nice feature. It’s interesting for me, is there any other usage, different from the one that you showed. I’m asking because for me it looks like it’s just better to put the text inside the tag instead of adding it to the data-liked attribute.

  2. I`m also curious, how is this preferable to putting it in the div normally? Using css to dictate content seems it violates the separation of concerns that CSS was meant to fix.

  3. Realize that the message goes into a *pseudo-element*, not inside the beta element itself. The goal is for the message to be applicable to *any* element, so the pseudo element just allows me to hang text above the element itself.

  4. Nicely flexible content/attribute set-up. Very handy way to create either a single message, or multiple, element specific messages and have them displayed, or not, per preference.

  5. Another option is to use data-* attribute with a message key. With :lang selector it’s possible to localize string for different languages. Also in this case you have message value inside of a css file that can be cached. Check out there: https://github.com/chemerisuk/formvalidation.js#internationalization

  6. A good use for this is also to make a styled title (tool tip), using the data-title attribute, and content before to style it.

  7. hamburger

    Do the brackets in your message {{ _(‘This feature is only seen by beta testers’) }} have a special meaning? Or is it just your style of messages?

    • It’s django’s template code to localize the message into the user’s requested locale.

  8. This is very useful for designers and frontend devs working on data-driven websites.

    We’re always having to balance how much content to show or hide in a page. So far the best compromise is to show the essential information, then allow users to “expand” the object to view more details.

    Most of us store that extra information in divs or spans or title attributes, which always seemed like a hack-y way to me. I always felt like the extra information should be a property of the element, and not an extra span or div nested and initially hidden inside the element.

    I’m glad we can now harness the power of data-attributes with CSS!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!