CSS3 – Substring matching attribute selectors

[att^=val] : Represents an element with the att attribute whose value begins with the prefix “val”.

[att$=val] : Represents an element with the att attribute whose value ends with the suffix “val”.

[att*=val] : Represents an element with the att attribute whose value contains at least one instance of the substring “val”.

This whole group of selectors is new, and the selectors in it let developers match substrings in the value of an attribute.

Assume that we have an HTML document that contains the following markup structure:
<div id=”nav-primary”></div>
<div id=”content-primary”></div>
<div id=”content-secondary”></div>
<div id=”tertiary-content”></div>
<div id=”nav-secondary”></div>

By using the substring matching attribute selectors we can target combinations of these structural parts of the document.

The following rule will set the background colour of all div elements whose id begins with “nav”:
div[id^=”nav”] { background:#ff0; }

In this case the selector will match div#nav-primary and div#nav-secondary.

To target the div elements whose id ends with “primary”, we could use the following rule:
div[id$=”primary”] { background:#ff0; }

This time the selector will match div#nav-primary and div#content-primary.

The following rule will apply to all div elements whose id contain the substring “content”:
div[id*=”content”] { background:#ff0; }

The elements that will be affected by this rule are div#content-primary, div#content-secondary, and div#tertiary-content.

The substring matching attribute selectors are all fully supported by the latest versions of Mozilla, Chrome, Firefox, Safari and Opera.

Reference: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

JSON Object with integer values as key attributes

Using JSON object selection to paint the output based on descending key values.

JSON Object:

var popularObj= {
“89”:”animation”,
“71”:”apple”,
“64”:”barbara beery”,
“48”:”video”,
“39”:”cheese sticks”,
“29”:”games”,
“28”:”bbq pork sticks”,
“27”:”asian chicken tenders”,
“25”:”bake”,
“24”:”banana”
};

Problem:
The requirement was to paint only the values in descending order as they are the popular searches within the website. Whether we use for in loop or jquery each construct which does the same thing if the variable is an object, our results were varying across browsers namely Google chrome. The reason being in chrome, the key values were seen as array index instead of object key properties. The key values here were treated as indexes (integer indexes) and were painted in reverse order.

In Firefox and IE, we will get

“animation apple barbara beery video cheese sticks games bbq pork sticks asian chicken tenders bake banana”

and in chrome

“banana bake asian chicken tenders bbq pork sticks games cheese sticks video barbara beery apple animation”

Solution:
Convert the object into array, reverse it for chrome browser and then the finally load the dom object.

Note: In case the key was a text then the order of rendering is same across the browsers.

HTML5 Reset Stylesheet

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:”;
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

Reference: http://code.google.com/p/html5resetcss/downloads/list

Web 2.0 Design Guide

The list below is a summary of many of the common features being used on “Web 2.0” sites.

Clearly, a site doesn’t need to exhibit all these features to work well, and displaying these features doesn’t mean your site will look Web 2.0.

  1. Simplicity
  2. Central Layout
  3. Fewer Columns
  4. Separate Top Sections
  5. Solid Areas of Screen Real-estate
  6. Simple Navigation
  7. Bold Logos
  8. Bigger Text
  9. Bold Text Introductions
  10. Strong Colors
  11. Rich Surfaces
  12. Gradients
  13. Reflections
  14. Cute Icons
  15. Star Flashes

Source: http://2-0.net