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-5.png

Recent Features

  • Page Visibility&nbsp;API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else?...

  • CSS 3D Folding&nbsp;Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS;...

  • Write Better JavaScript with&nbsp;Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the...

Incredible Demos

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!

Use Code Editor