CSS

CSS is very powerful, but not all of it's features are supported across every browser. So here is a place for me to keep notes on useful css code, as well as quickly and easily determine browser support.

@media: Css for Mobile Devices

This does not work in IE pre 9, however most devices should support it.

With this we can target devices by how big they are and deliver specific layouts based on that. Such as loading smaller graphics, shrinking widths, even changing the entire layout from multi-column to single-column

     #mediabox{background-color:#7DB6E6;}
	 //set blue as default.
   @media only screen and (max-width: 900px) {
     #mediabox{background-color:#AD0000;}
	 //change to red if width is 900px or less.
   }

  <div id="mediabox">Blue if your resolution is bigger than 900.
  <br />Red if smaller.</div>

Blue if your resolution is bigger than 900.
Red if smaller.

Attribute Selectors

The following examples work in IE7-9

    a[rel='keyword']{color:red;}
    //exact match

    a[rel~='keyword2']{color:green;}
    //looks for the word as space separated

    a[rel*='key']{text-decoration:underline;}
    //finds the phraze anywhere
   //even as a partial word. Key = KEYword.

    a[href^='http']{color:blue;}
   //begins with

    a[title$='four']{color:black;font-weight:bold;}
   //ends with

   <ul>
      <li><a rel="keyword">List item 1</a></li>
      <li><a rel="keyword keyword2 keyword3">List item 2</a></li>
      <li><a href="http://wwww.google.com">List item 3</a></li>
      <li><a title="test for four">List item 4</a></li>
      <li><a title="test for four fail">List item 5</a></li>
    </ul>

List item 1
List item 2
List item 3
List item 4
List item 5

Adjacent & General Sibling Selector

The following examples work in IE7-9

    h2+p{text-decoration:underline;} //adjacent
    h2~p{color:red;} // general

    <p>P 1</p>
    <h2>H2!</h2>
    <p>P 2</p>
    <p>P 3</p>
    <p>P 4</p>

P 1

H2

P 2

P 3

P 4

Psuedo Class

Does not work in IE8 and older.

   div :nth-child(2n){color:green;}
   //selects every other tag within the div

   div strong:nth-of-type(2n){text-decoration:line-through;}
   //Selects every second strong tag within the div

   Note: nth-last-child and nth-last-of-type work the same
         but count from the bottom up.

   #targetTest:target{background-color:#7DB6E6;}
   //If you click the link 'Target Test' 
   it will bring you back to this page and
   auto scroll to this div with the id:targetTest.
   The css will also change the background color of the div
   to blue indicating that it was targeted.

strong Test

p One

p Two

strong Psuedo

p Three

p Four

strong class

Target Test

td:empty{background-color:black;width:20px;}
//Selects any empty td tags in the table.

Hello

How are you?

UI Elements

Does not work in IE8 and older.

 .ui input[type="text"]:disabled{border:dotted 1px #ccc;background-color:white;}
 .ui input[type="text"]:enabled{border:solid 1px black;background-color:white;}

 <form class="ui">
 Disabled: <input type="text" disabled=disabled />
 Enabled: <input type="text" />
 </form>

Collumns

Does not work in IE.

p{ 
	 border:solid 1px black;
	-moz-column-count:2;
    -webkit-column-count:2;
}
//Two Collumns
p{
	 border:solid 1px black;
	-moz-column-count:3;
    -webkit-column-count:3;
}
//Three collumns
p{
	 border:solid 1px black;
	-moz-column-width:100px;
    -webkit-column-width:100px;
}
//As many 100px wide collumns as you can fit.

An extremely handy new feature of CSS3 which currently has Webkit and Firefox support, but no IE support, is collumns.

It allows you to devide content into collumns, just by giving it a number of collumns or a width for each individual collumn. As you can see this is extremely useful for page layout design.

Sadly, since it doesn't work for IE.. it's usefullness is trumped by lack of support. Though, on this website I am using it in the Website Breakdown section. All it means is those with non-IE browsers can read nice collumned text, and those with IE will have to read it the old fashioned way.