Tuesday, January 24, 2012

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;

-moz-column-count: 3;
-moz-column-width: 13em;
-moz-column-gap: 1em;

-webkit-column-count: 3;
-webkit-column-width: 13em;
-webkit-column-gap: 1em;

Attribute selectors

•attribute beginning matches exactly
The element has an attribute called foo that begins with "bar" e.g.
•attribute ending matches exactly
The element has an attribute called foo that ends with "bar" e.g.
•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


background-origin and background-clip
multiple backgrounds

HSL colors
HSLA colors
RGBA colors

Text effects

nav-top, nav-right, nav-bottom, nav-left

attribute selectors

Basic box model
overflow-x, overflow-y

Other modules
media queries
multi-column layout
Web fonts

Monday, January 23, 2012

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:
  <legend> Question 1 </legend>

</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?

Thursday, January 19, 2012

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.