CSS1 And CSS2 Differences

Perm url with updates: http://xahlee.org/js/css2.html

CSS1 And CSS2 Differences

Xah Lee, 2005-11, ..., 2010-08-21

This page shows the primary features in CSS2 not in CSS1. If you are not familiar with CSS, see: CSS Basics. If you know the basics and want a practical examples of css tag matching supported by all current versions of browsers, see: CSS Tag Matching (Selector) Syntax.

CSS1 is published in 1996. CSS2 is published in 1998. As of today, all major browsers supports pratically 99.9% of CSS2. CSS3 is in works but not out yet.

Note: there's no way to specify a CSS version number in your HTML markup. Just test with browsers if you must use new features.

Tag Matching

CSS2 provides more powerful ways to associate styles with tags.

“*” matches any tag.

/* make everything red */
* {color:red}

“>” means parent-child relationship.

/* p inside div of class header inside body */
body > div.header > p {color:red}

Space can be used to specify that a tag must have other tags as its ancestor.

/* make any div.x inside table red */
table div.x {color:red}

“+” can be used to specify some restriction on same level tags.

/* if p comes immediately after img, make the text red */
img + p {color:red}

Pseudo-class: link, hovering, focus, first child...

There are special syntax to match some mouse hovering, focusing, behaviors. (these “:xxx” forms are called pseudo-class.)

a:link {color:red}
a:visited {color:green}
a:hover {color:yellow}

div.myButtonX:hover {color:red}
div.myButtonX:active {color:green}
div.myButtonX:focus {color:yellow}

“:first-child” can be used to match a tag only if it is the first child.

/* make first line of list red */
li:first-child {color:red}

“:first-letter” and “:first-line” can be used. e.g.

p:first-letter {color:red}
p:first-line {color:blue}

For detail, see: CSS “first-letter” and “first-line” Example.

Matching Tags with Attributes

Existance of a Attribute

You can match the existance of a attribute, by the syntax “tagName[attributeName]”.

/* if a link has a “title” attribute, render the link red */
a[title] {color:red}

Matching Attribute Values

You can match a tag's attribute's value, using the syntax “tagName[attributeName="valueString"]”.

/* if a image's alt attribute is “icon”, set a red border */
img[alt="icon"] {border:solid thin red}

Matching a Word in the Attribute's Value

A word in the value of a attribute can be matched, by using the operator “~=”.

/* if a image's alt text has the word “house” in it, set a red border */
img[alt~="house"] {border:solid thin red}

Layout, Layers, Tabular Format, and Text Flow

A very important feature in CSS2 is the ability to do layout and with layers.

Layout and Layers

Layout is to specify the position of each item, in a absolute coordinate or relative to its parent. In HTML, It is often done in practice by using Table tag with width attribute.

In CSS2, layout are done with attributes “display” and “position”. The value fo “position” can be “absolute” or “relative”. There's also attributes “top”, “bottom”, “left”, “right”, and each's value is a length unit. Example:

AAA {display:block;}
BBB {display:block; position:absolute; top:300px, left:50px}
CCC {display:block; position:relative; left:100px}

Examples: CSS Layout and Layers

Example: Fixed Widget with Cascading Style Sheet

CSS2 allows one to specify which element should be displayed on top of another (hiding the one behind). This is done with the “z-index” attribute. The parameter for z-index are integers. The larger the integer, the more front it is.

BBB {display:block; position:absolute; top:300px; z-index:50}
CCC {display:block; position:absolute; top:300px; z-index:2}

Another useful directive is the “visibility” attribute. It can be set to “visible” or “hidden”, giving more control of CSS2's layout capabilities. This can be used in conjunction with javascript to fruitful effects. For example, if you have tabs on a page, clicking a tab can automatically make the main area content associated with that tab visible, while make all content associated with other tabs hidden.

The CSS2's layering and layout feature is used to implement pop-up tooltips.

Tabular Format

• CSS2 has the ability to specify a table format. This in conjunction with “position” and “z-index” can achieve may web-design effects. For example:

* {border: solid}
AAA {display: table}
BBB {display: table-row}
CCC {display: table-cell}
DDD {display: table-cell}

will render the following XML code:

<AAA>
  <BBB>
    <CCC>ccc1</CCC>
    <DDD>ddd1</DDD>
  </BBB>
  <BBB>
    <CCC>ccc2</CCC>
    <DDD>ddd2</DDD>
  </BBB>
  <BBB>
    <CCC>ccc3</CCC>
    <DDD>ddd3</DDD>
  </BBB>
</AAA>

like a table as in HTML:

<table border="1">
  <tr>
   <td>ccc1</td>
   <td>ddd1</td>
  </tr>
  <tr>
    <td>ccc2</td>
    <td>ddd2</td>
  </tr>
  <tr>
    <td>ccc3</td>
    <td>ddd3</td>
  </tr>
<table>

See a example here: Tabular Formatting with CSS2

“white-space” has a new behavior spec: nowrap. Example:

BBB {white-space: normal}
CCC {white-space: pre}
DDD {white-space: nowrap}

Example: CSS Text Wrapping.

Changing Content

Text can be inserted at the beginning or end of specified tag, using “:before” and “:after”. e.g.

AA:before {content:'Proof: '}
AA:after {content:'End of Proof.'}

for element such as:

<AA>because 1+1 is 2, therefore I win.</AA>

will become

<AA>Proof: because 1+1 is 2, therefore I win. End of Proof.</AA>

Example: css_before_after.html

Color, Background image, Tex decoration, Font

CSS2 supports color names of Browser's GUI. For Example:

A {color:AppWorkspace}
B {color:ButtonFace}
C {color: ButtonHighlight}
D {color:ButtonText}
E {color:CaptionText}
F {color:Highlight}
G {color:HighlightText}

Example: CSS2's System Colors.

Several features are new in CSS2 for background image. It can be repeated, or just horizontally or vertically. It can also be fixed, so that scrolling doesn't move it. Example:

AAA {background-image:url("some.gif")}
AAA {background-repeat:repeat-x}
AAA {background-position: top}
AAA {background-attachment: fixed}

A new tag text-shadow can have size and color.

BBB {text-shadow: 5px 12px red}

Font can now be specified based on Browser's setup. e.g.

AAA {font:caption}
BBB {font:small-caption}
CCC {font:status-bar}

Mouse Pointer or Cursor's shape can be specified. e.g.

AAA {cursor: crosshair}
BBB {cursor: pointer}
CCC {cursor: move}
DDD {cursor: e-resize}
EEE {cursor: text}
FFF {cursor: wait}
help {cursor: help}
uri {cursor: url(".../pointer.gif")}

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs