Content - Htmlpedia

From Htmlpedia

Jump to: navigation, search

1 CSS 2 property: content

[edit]

CSS 2 property: content

Description of content's purpose goes here.

[edit]

Property Values

The content accepts the following values:

List
of
values

[edit]

Example

<style type="text/css">
     selector { content: value; }
</style>
...
<element attribute="foo">Contents</element>

[edit]

Browser Support

If you have tested support for content in any of the following browsers, please indicate its level of support using one of the following keywords:

Full
Partial
Buggy
None

If you indicate that support is "Partial" or "Buggy," please add further comments explaining what's missing or what doesn't work right.

IE 3: Support is Unknown
IE 4: Support is Unknown
IE 5: Support is Unknown
IE 5.5: Support is Unknown
IE 6: Support is Unknown
IE 7: Support is Unknown
NS 3: Support is Unknown
NS 4: Support is Unknown
NS 4.5: Support is Unknown
NS 6: Support is Unknown
NS 7: Support is Unknown
NS 8: Support is Unknown
Firefox 1: Support is Unknown
Firefox 1.5: Support is Unknown
Firefox 2: Support is Unknown
Firefox 2: Buggy
Mozilla: Support is Unknown
Opera 6: Support is Unknown
Opera 7: Support is Unknown
Opera 8: Support is Unknown
Opera 9: Support is Unknown

[edit]

Tips and Tricks

If you know of any useful or uncommon tips or techniques using this property, please describe them here.

To create a list of nested categories and subcategories numbered ‘1. ’, ‘1.1. ’, ‘1.2. ’, ‘1.2.1. ’, ‘2. ’, etc. with <ol>:

ol {
  counter-reset: item;
}

This starts the numbering in the variable ‘item’ every time <ol> is encountered. It seems that a browser is expected to honor scoping when you nest the lists; so when you reset the counter ‘item’ it does not effect the value of the counter in the parent <ol>. In which case, it is not clear why you need the reset; except perhaps it is acting more as a variable declaration for later use.

ol > li {
  display: block;
}

Not at all clear why display block is necessary.

ol > li:before {
  content: counters(item, ".") ". ";
  counter-increment: item;
}

This redefines the element decorating the beginning of the <li> block.

Note that this does not appear to work in IE 6.x or IE 7.x. It does work in Firefox 1.5.x and 2.x, but note that Firefox does not indent the text behind the numbering without some help:

ol ol > li {
  text-indent: -27px;
}

I am not sure whether this constitutes a Firefox bug or not. Note also that since IE ignores the content instruction the extra indenting does not look good.

For an example see: http://www.vineyardcup.com/nor.shtml

This example was largely derived from the W3C documentation. http://www.w3.org/TR/CSS21/generate.html

[edit]