Oncemade

Can everyone feel how square the IE world is about to become? We have recently began the effort of killing the rounded corner graphics and even sillier solutions such as Nifty Cube in favor of the progressive CSS rounded corner tags.

CSS
-webkit-border-radius
-moz-border-radius

It's a tough decision to start dramatically forking the experience between IE and “the rest of the world.” But, before you get overly excited, note the border-radius has it's gotchas!

When positioniseverything.net posted an article about clearfix technique, it didn't take much for web developers and designers to start adopting it. Lately, Dan Cederholm has been talking about renaming the class clearfix to group, which semantically speaking makes a lot more sense. So, let's go ahead and rename the class.

New Easy-Clearing
.group:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Using conditional comments, let's add the proper code to handle IE 6 and IE 7 (IE8 supports the :after pseudo-elements; no extra code is necessary).

One of the best progressive enrichment that I use on my projects is to set colors as RGBa (red, green, blue, alpha) values. As I write this, RGBa is current supported in firefox 3.0.5+, Safari 2+, Chrome 1+, and Opera 10+.

The most efficient way that I found to declare RGBa values is to separate the flat colors into code block, and keeping RGBa with the other styles. Like in this example:

CSS
/* NON RGBa BROWSERS
  ------------------------------------------------------ */
#wrap { background-color: #000; }
#footer,
#header { background-color: #ccc; }
.section { color: #fff; }

/* HEADER
  ------------------------------------------------------ */
#header { background-color: rgba(204,204,204,.8); }
#header ul { float: right; }
#header li {
  float: left;
  margin-left: 1em;
}
#header li:first-child { margin-left: 0; }

/* WRAP
  ------------------------------------------------------ */
#wrap {
  width: 960px;
  margin: 0 auto;
  background-color: (0,0,0,.7);
}
.section {
  padding: 1em;
  color: rgba(255,255,255,.9);
}

I always keep the flat colors separated because they can be easily removed when the other browsers start supporting RGBa. Why didn't I declare the HEX colors on the same line as the RGBa? Simple! IE doesn't support it; no color will be rendered at all. Note: Please be aware that the RGBa colors have to be the last ones declared.

Lately I've been seeing lots of websites using animated page scroll, it can be easily done with the help of jQuery. Here is how:

jQuery Code
$('.scrollPage').click(function() {
   var elementClicked = $(this).attr("href");
   var destination = $(elementClicked).offset().top;
   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 500 );
   return false;
});

The code gets the href from the anchor and uses it as the target element. If you want to adjust the scroll speed just change the 500.

Don't forget to checkout the live demo

Browser Support

• Firefox
• Safari
• Chrome
• Opera
• Internet Explore 7 & 8
• Internet Explore 6

I recently ran into a bug on Internet Explore 7 that was driving me nuts. After hours of debugging, I finally found the solution.

IE7 has a bug when using adjacent sibling selectors. If there is a comment between two elements, it will think that the comment is the next element. Here is the example:

CSS
p + p { background-color: #fc0; }

Markup with comment
<p>Paragraph #1</p>
<!-- my comment here -->
<p>Paragraph #2</p>

The image bellow shows how it supposed to look like in all modern browsers. Unfortunately, the only way to make it work in IE7 would be by removing the comment.

Markup without comment to make it work in IE7
<p>Paragraph #1</p>
<p>Paragraph #2</p>