Opera 12 is knocking at the doors and it bring couple of nice new features like new HTML5 parsing engine called Ragnarok and native support of CSS radial gradients, wich I’d like to introduce a little.

CSS Gradients

Opera supports CSS linear gradients since version 11.10 and time has come to take CSS3 gradients to new level. Finally. Alpha version of Opera 12 brought possibility to define radial gradients using same syntax firefox and chrome browsers are using.

And this is how you do it:

/* General syntax looks like this */
E {background-image: -o-radial-gradient(position,size and shape,colour stops);}

Continue reading →

We all know browser specific CSS for IEs. But what happens, if one of the big guys like Chrome, Safari or Firefox starts behaving badly? Fortunately, there are few tricks to rule them all. (no, not the ring thing you nerd!)

Webkitties

Here is neat CSS trick that targets browsers with webkit rendering engines, e.g. Chrome and Safari. Works like a charm.

.hackedElement {
background: #fff; /* for Life, the Universe and Everything */
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .hackedElement {
   background: #eee; /* for Chrome and Safari */
   }
}

Continue reading →

Admit it. Browser specific CSS hacks saved your sanity quite a few times. Especially dealing with that thing Microsoft dares to call browser! Yeah, I am looking at you IE6/7/8. Anyway, I’ve thrown together couple of examples of CSS rules, that helps you target different version of Internet Explorer.

Browser specific CSS

Note: This may not a complete list of possible hacks. I just picked ones, that proved to be most useful.

.hackedElement {
background: #fff; /* for Life, the Universe and Everything */
background: #eee\9; /* IE 9 and below */
background: #ddd\0/; /* IE 8 only - might not work with all attributes (lovely, isn't it?) */
*background: #ccc; /* IE 7 and below */
_background: #bbb; /* IE 6 and below */
_bac\kground: #aaa; /* IE 6 only */
}

/*
asterisk attribute usually works for both IE7 and IE6,
however selector of direct child ">" is not supported by IE6,
so CSS below gets rendered only by IE7
(note: missing parent tag before ">" is automatically substituted by "*")
*/

> body .hackedElement {
*background: #ccc; /* only IE 7 */
}

Asking yourself who, in the world, could invent such hacks and even implement them into IEs? Well, I can just say, that not all of us had luck of having a loving mother.

Continue reading →

Though, I am Opera fan, I couldn’t wait for Firefox 4 release as it brings one of the most exciting CSS3 features I’ve ever used. This new cool thingy is called CSS transitions which is, in other words, animations purely trough CSS. I bet you remember those nights when you wrote quite a few lines of JavaScript to make items fade in/out and how happy you were, when jQuery appeared. These basic animations can be now easily created via CSS.

Continue reading →