hypeway

The release of Opera Unite is making a lot of people talking about it. Its main selling point is the embedded Web Server in the Opera’s browser that allows users to share their local media files with friends over the Web. Hats off to the Opera dev team for reinventing the Web browser and making it more than a Web browser.

However, Opera Unite doesn’t really make me want to switch to using Opera browser for privacy, bandwidth, and security reasons. More importantly, all the services of Opera Unite are already available in Facebook, and I am happy to use Facebook to share my notes and photos just like most of my friends do. Lastly, (a bit of bias) I really like Safari on the Mac. It is simple, yet it runs and loads Web pages really fast in comparison to Firefox, Flock, and Opera.

Here is a great article on Opera Unite for those who want to learn more about it.

Dealing with the differences in CSS implementation by various Browsers is a pain in the neck. So, I’ve become a big fan of utilizing CSS framework to neutralize these differences and to have a standardized foundation to start with any client-side design.

One of the CSS frameworks I’ve been using is YUI’s CSS Reset, CSS Fonts, and CSS Grids. Recently I came across Blueprint CSS, another CSS framework that tries to differ itself from the developer-oriented YUI CSS framework by putting an emphasis on the needs of typographic design.

The interesting thing is how these two frameworks are being compared to each other. In my experience as a client-side designer, I am always looking for better ways to solve the same development problems quicker and easier. And Blueprint CSS framework appears to meet my needs well.

I usually find CSS behaving quite consistent between Firefox and Safari. But today I ran into a situation where a CSS hack or filter is needed in Firefox. I found this useful snippet of CSS working perfectly for my purpose.

blockquote, x:-moz-any-link { /* FireFox 2 hack */
  padding-top: 5px;
} 

blockquote, x:-moz-any-link, x:default { /* FireFox 3 hack */
  padding-top: 5px;
}

Came across 2 great articles on CSS filters and hacks for various browsers. One is available at BTreeHugger’s Blog and another one is available at Mezzoblue, whose author happens to be Dave Shea, the creator of CSS Zen Garden. For anyone who developed IE6-centric CSS for corporate intranets or mainstream audience, the articles presented some great hacks in case you need to target certain CSS rules just for IE7, Firefox, or Safari, and validate CSS 3 at the same time.

To target IE7 only, simply prepend *:first-child+html to your selector as:
*:first-child+html div {...rules...}

To target Firefox/Gecko only, just prepend *> to your selector as:
*>div {...rules...}

To target Safari/Webkit/KHTML only, simply prepend body:last-child:not(:root:root) to your selector as:
body:last-child:not(:root:root) div {...rules...}