O'Reilly

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!

Track.js Error Reporting

Recent Features

  • Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • I&#8217;m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

Incredible Demos

  • Dynamically Create Charts Using MooTools MilkChart and Google Analytics

    The prospect of creating graphics charts with JavaScript is exciting. It's also the perfect use of JavaScript -- creating non-essential features with unobtrusive scripting. I've created a mix of PHP (the Analytics class), HTML, and MooTools JavaScript that will connect to Google Analytics,...

  • Hot Effect: MooTools Drag Opacity

    As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is...

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!

Recently on David Walsh Blog

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...