A good day for british sport Don’t call a team a BRAND!
Nov 14

Default text in CSS

Tech Add comments

When we style something in CSS, we can put images as backgrounds, font colors, alignment, and much more.

If I can assign images to an element, why not some text?

How about if we could say “this id or class has the default text of FOO”. We can take the DRY principle and take it to CSS.

We get to set default text in a site/application wide CSS file, and share this throughout.

.nosuch {
text-content: "some default text";
}

We could also give default pre-text (always put “Error: ” before anything in the error class).

A slight abuse of CSS? Totally, but could be useful! :)

This could even be implemented a little via JavaScript behaviour (not with nice CSS syntax).

7 Responses to “Default text in CSS”

  1. Marcus Says:

    Wouldn’t this sort of do what you want?

    http://www.w3.org/TR/CSS21/generate.html#before-after-content

    I guess it’s not a perfect match but everything can be used to what it wasn’t designed for :)

  2. Chris Laprun Says:

    Generated content in CSS seems to be a good fit as pointed out by Marcus. Obviously, though, it doesn’t work in Internet Explorer! :/

  3. Nicolas Delsaux Says:

    We could even use it to provide easy internationalization of web pages …

  4. James Estes Says:

    CSS3 has a lot of stuff that is really starting to blur the line of data, behavior and style.

    I’m actually tinkering with a template system that uses css syntax to locate portions of a page and inject the model pieces into it. Its a template system with total separation of display from business logic (I know…I’d probably roll my eyes too). It’s geared toward web developers (well…those familiar with css anyway).

    Paired with ajax it could even be applied on the client side…then the server could just serve up mostly static content for the page layout and that could be cached…then the communication is mostly data (dwr or whatever).

    If you’re interested, I’ve been blogging some progress at
    http://www.itsalleasy.com

  5. Olwe Says:

    I just got to your site Googling on this very functionality, that is, I need it! Weeelll, this is what I’ve said before (to many boos and cat-calls), CSS slowly becomes a language. I’m for it! Why have html AND javascript AND css AND, AND, AND. Two’s company, three’s (or more’s) a crowd. Obviously, Javascript as CSS’s natural homebase (rather than raw text file) would be a solution.

  6. Olwe Says:

    I just got to your site Googling on this very functionality, that is, I need it! Weeelll, this is what I’ve said before (to many boos and cat-calls), CSS slowly becomes a language. I’m for it! Why have html AND javascript AND css AND, AND, AND. Two’s company, three’s (or more’s) a crowd. Obviously, Javascript as CSS’s natural homebase (rather than raw text file) would be a solution.

  7. molly Says:

    I’ve been tryiing to implement this on my site but no luck. Found something close but it isn’t ie completable

    http://www.reabo.co.uk

Leave a Reply

Spam is a pain, I am sorry to have to do this to you, but can you answer the question below?

Q: What is the number before 3? (just put in the digit)