Multi-column layout

CSS3 has new properties with which one can create a multi-column layout (sort of like in a newspaper). So far it's only supported in Firefox and Safari 3 but not in IE.
Below is the code for both Safari 3 and Firefox that creates 3 columns with a 1em space between them

/*IE - not supported yet*/

column-count: 3;

column-width: 13em;

column-gap: 1em;




/*Mozilla*/

-moz-column-count: 3;

-moz-column-width: 13em;

-moz-column-gap: 1em;




/*Safari*/

-webkit-column-count: 3;

-webkit-column-width: 13em;

-webkit-column-gap: 1em;

Attribute selectors

element[foo="bar"]

•attribute beginning matches exactly

element[foo^="bar"]

The element has an attribute called foo that begins with "bar" e.g.

element[foo$="bar"]

•attribute ending matches exactly
The element has an attribute called foo that ends with "bar" e.g.

element[foo*="bar"]

•attribute contains the match
The element has an attribute called foo that contains the string "bar" e.g. Examples:

a[href^="ftp:"] { ... }

a[href$=".edu"] { ... }

img[src*="photos"] { ... }

What's new in CSS3

Borders
border-color
border-image
border-radius
box-shadow

Backgrounds
background-origin and background-clip
background-size
multiple backgrounds

Color
HSL colors
HSLA colors
opacity
RGBA colors

Text effects
text-shadow
text-overflow
word-wrap

User-interface
box-sizing
resize
outline
nav-top, nav-right, nav-bottom, nav-left

Selectors
attribute selectors

Basic box model
overflow-x, overflow-y

Other modules
media queries
multi-column layout
Web fonts
speech

HTML5: fieldset and legend elements

fieldset element - is used to group a batch of controls together. Also it draws a box around the grouped elements. The title of such a group of controls is given by the first element of the fieldset - legend element. Example of grouped controls could be a question for multiple-choice test - collection of radiobuttons:

<form>
 <fieldset>
  <legend> Question 1 </legend>
  
 <input type="radio" name="answer"> A 
  
 <input type="radio" name="answer"> B 
  
 <input type="radio" name="answer"> C 
  
 <input type="radio" name="answer"> D 
 </fieldset>
</form>

To make sure the radiobuttons work together, they are given the same name. Fieldset element can be located ouside of a form but still be part of that form by specifying form attribute:

<fieldset form="form_id"> 

But the form attribute so far only supported in Opera browser. The HTML legend tag is used for providing a title or explanatory caption for the rest of the contents of the legend element's parent elements, in particular fieldset, figure, and details elements. Helpful links: HTML5 Forms What's different in HTML5?

HTML5: Difference between article and section tags

An article is an independent, stand-alone piece of discrete content, sort of like a blogpost or a news item, a self-contained composition. It should be able to stand on its own as if it was independent of its surroundings and that can be independently distributable or reusable.

Section, on the other hand, is either a way of sectioning a page into different areas, or sectioning an article into sections. basically it is a thematic grouping of content, usually with a heading.

Section can be used to group related articles together. It helps to think of a web page as a newspaper that has different sections: sports, real estate, etc. with a number of articles in each section.

Each section should have a heading to identify that secion's content. If you don't use a heading in your section element, you most likely should not use the section element. In that case a div might be more appropriate.