1 of 2
1
Making the ‘content’ property useful! 
Posted: 24 January 2006 12:33 PM   [ Ignore ]
Newbie
Rank
Total Posts:  14
Joined  2006-01-12

CSS Generated content. One of the most facinating aspects of CSS2.

A lot of web sites explain how to use the ‘content’ property, (along with the :before and :after pseudo elements) but they often don’t give you real-world examples of what GOOD uses for this property would, or could be. For example:

h1:before
{content
"Chapter "}

Is often used. It makes perfect sense syntactically, but how useful is that?  Unless you name your headers One, Two, Three, etc… I don’t see that as being of much use in the real world of web development. With this topic, I thought it would be nice to share all of the facinating uses you may have come accross or made up using the :content property yourself.

Show us only examples which really push the envelope and allows us to broaden our understanding of how we can really begin to take advantage of this property; and all the more so when IE7 hits the streets. I’ll kick off the discussion with some code examples of my own using ‘content’ and explain why they are useful.

Profile
 
 
Posted: 24 January 2006 12:46 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  14
Joined  2006-01-12

Dynamic file-type notations

In this example, we use an attribute selector, with the CSS-3 substring matching attribute selector designated by a dollar sign ( $ ) to select an element based upon what file extension is used at the end of the “href” attribute value.

...in plain english, CSS can style a link differently than others based upon what type of file the link is!

/* 
  If the file is a .pdf file, display it as such
  otherwise display it as something else. 
*/

a[href$='.pdf']:after { content" (PDF)"}

a[href
$='.doc']:after { content" (MS Word)"}

a[href
$='.xls']:after { content" (Excel)"}

The output of this code would look something like this (PDF)

Also, you may notice that the (PDF) notation has an underline and is part of the link. This is not a bad thing, but it doesn’t look all that good. To fix it, and make sure its lined up nicely you can additionally throw in a few extra properties.

a[href$='.pdf']:after {
padding
:3pxdisplay:inlinevertical-align:middle;
background-color:#FFF; content: " (PDF)";

The output now (improved) looks like this (PDF)

If you want to get even more creative, you can append a small icon after the link, that allows the user to know what type of file they are about to click on!

a[href$='.pdf']:after {
padding
:3pxdisplay:inlinevertical-align:middle;
background-color:#FFF; content: url(/images/pdf.gif);
}

Update: 
As of late, people seem to be calling this technique “link markers”. If your thinking what I’m thinking, I think, this may be something we’ll start seeing a lot more of in Web 2.0

Notes:
http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#attribute-substrings

Profile
 
 
Posted: 24 January 2006 01:04 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  14
Joined  2006-01-12

The attr(x) function

Plenty of web sites refer to this example when describing what the attr(x) function does. In general, it justs pulls the attribute value out of an element, and returns it as a string. A string that can be used, however you please.

@media print {
a
:after {
content
attr(href);
}
}

Sure, I’ll admit - showing users what the URL of a link was, AFTER the page has been printed is quite useful.

Though, it doesn’t look all that good crammed up against the right side of a link. And what if we have “back to top” (section anchored) links inside/throughout the page?  In this case it would be useless to the user to see “#top” as the URL, to remedy this, we can:

1. Make it exclude links which begin with a pound sign:

@media print {
a
:not([href^='#']):after {
content
attr(href);
}
}

2. Make it enclose the href value with parenthesis, and give it some spacing so it’ll look pretty :-)

@media print {
a
:not([href^='#']):after {
background
-color:#FFF; padding:3px;
content:" ( " attr(href" ) ";
}
}

Profile
 
 
Posted: 24 January 2006 01:52 PM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  14
Joined  2006-01-12

Be sure to “cite” the author(s) of your blockquotes!

This one I can’t take the credit for, I stumbled upon it, and when I found it, I was jumping up and down in awe. It’s generally a good practice to include the “cite” attribute when you use a blockquote so the user will have some sort of reference of what URL or whom the quote was taken from.

However, this attribute is never displayed on-screen. So most users simply disregard it when coding their pages. But now so now. This code:

blockquote[cite]:after {
  content
"Quote from: " attr(cite);
  
displayblock;
}

When used with:

<blockquote cite="http://www.cssdreams.com">
Using CSS can really be powerful, and is most certainly the future for web designers.
</
blockquote>

Will output something like this:

Using CSS can really be powerful, and is most certainly the future for web designers.
Quote from: http://www.cssdreams.com

However the link following the “Quote from:” bit will not be hyperlinked as it is here, unless you add some DOM scripting to do that part.

Additionally, the guy who thought of this also included some code to make it look nice. Adding the bit of code below gives it some padding/margin spacing, and add’s a single pixel divider between the quoted text and the cite URL.  This is very nice!

blockquote[cite]:after {
  margin
1em 0 0 0font-size0.8emdisplayblock;
  
padding0.5em 0 0 0font-weightbold;
  
border-top1px solid #669;  color:#666; 
  
content"Quote from: " attr(cite);
}

Profile
 
 
Posted: 06 February 2006 08:07 PM   [ Ignore ]   [ # 4 ]
Newbie
Rank
Total Posts:  4
Joined  2006-02-06

In addition to using the content property, you can also use counters to number your chapter headings automatically.

h2 { contentcounter(section); counter-incrementsection}
h2
:before { content"Chapter "counter(section)": ";  }

http://nickpresta.ath.cx/source/h1_before_content.html

The possibilities are endless.

Profile
 
 
Posted: 21 October 2006 11:57 PM   [ Ignore ]   [ # 5 ]
Newbie
Rank
Total Posts:  21
Joined  2006-10-21

great tut mike.
i didn’t really understand the part with the links, but i was fine with the rest ^^;

thanks a lot!

Profile
 
 
Posted: 12 May 2007 08:44 AM   [ Ignore ]   [ # 6 ]
Member
RankRankRank
Total Posts:  54
Joined  2005-01-13

Thanks Mike for the informative Tutorial

Profile
 
 
Posted: 05 June 2007 11:15 AM   [ Ignore ]   [ # 7 ]
Newbie
Rank
Total Posts:  21
Joined  2007-05-04

agreed, thanks - Informative stuff I will no doubt come back to sometime when I am wearing a css3 hat :)

Profile
 
 
Posted: 28 June 2007 05:56 AM   [ Ignore ]   [ # 8 ]
Newbie
Rank
Total Posts:  15
Joined  2007-06-28

Great stuff thanks for the quality tutorial

Profile
 
 
Posted: 23 August 2007 05:00 AM   [ Ignore ]   [ # 9 ]
Newbie
Rank
Total Posts:  6
Joined  2007-01-16

i didn’t really understand the part with the links, but i was fine

Profile
 
 
Posted: 06 February 2008 05:22 AM   [ Ignore ]   [ # 10 ]
Newbie
Rank
Total Posts:  1
Joined  2008-02-06

An example I use frequently is the following:

#element:after {
  content".";
  
displayblock;
  
clearboth;
  
height0;
  
visibilityhidden;
}

Instead of adding <div class="clear"></div> (or whatever other solutions people add to their XHTML) underneath an element that contains floating elements, just use this CSS. #element needs to be the ID of the element that contains the floating elements.

Hope this helps someone, and apologies if it has been mentioned already :-)

Profile
 
 
Posted: 20 April 2009 08:30 PM   [ Ignore ]   [ # 11 ]
Newbie
Rank
Total Posts:  1
Joined  2009-04-20

Thank you so much for your sharing ;-)

maison de credit

Profile
 
 
Posted: 28 April 2009 07:22 PM   [ Ignore ]   [ # 12 ]
Newbie
Rank
Total Posts:  1
Joined  2009-04-28

Thank you very much
organisme de credit

Profile
 
 
Posted: 17 May 2009 06:20 PM   [ Ignore ]   [ # 13 ]
Newbie
Rank
Total Posts:  1
Joined  2009-05-17

simulation credit auto
A VERY DIFFERENT BEAT.
Great

Profile
 
 
Posted: 20 May 2009 07:42 PM   [ Ignore ]   [ # 14 ]
Newbie
Rank
Total Posts:  1
Joined  2009-05-20

That’s quite a great interesting topic. Thank u so much, Newbie. Your detail is very helpful and easy to understand. :lol:

simulation rachat credit

Profile
 
 
Posted: 21 May 2009 07:40 AM   [ Ignore ]   [ # 15 ]
Newbie
Rank
Total Posts:  1
Joined  2009-05-21

this is an interesting discussion.. thank you for sharing :)
simulation rachat de credit

Profile
 
 
   
1 of 2
1
 
‹‹ Free CSS Layouts      using existing layouts ››