Since Firefox 4 was relesed, loads of new (CSS) features were released into the wild. Ofcourse, this is a great thing, since Firefox has a rock solid place as 2nd most popular web browser. More people will actually be able to see all the nifty stuff you'll create using CSS.

I recently came accross a CSS selector that was included in Firefox 4 (and is added to Webkit (nightly) as well), called the :any() selector. We'll take a look at what this selector does, and why you would want to use it.

Be aware that the :any() is not part of the CSS3 specification (yet), but since Webkit already implemented it, I'm pretty sure others will follow as well. Also, to make it work in Firefox, use the -moz- vendor prefix, resulting in :-moz-any (-webkit- vendor prefix for Webkit). So let's see what this :any() selector can do for you.

Not only Internet Explorer has it flaws when it comes to parsing/using the CSS file. Even though the Webkit engine is the best CSS engine out there (at the moment), I was still able to find a little bug while searching for a solution to a problem last week.

Although the bug is really small and you'll probably never need to use it in real life, I did want to give it a little attention (just in case you do want to solve this problem). I found this one since I wanted to create another Proof of Concept for an article here. Of course, I hope this problem could be solved in the next release of the engine.

In simple words, this bug occurs when combining the generic sibling selector (in CSS: ~) in combination with the hover event (in CSS: :hover). Dive into the example/source code to see how it looks like, and think about the effect you think it would produce.

  

Take note this is a webkit bug only: The example works just fine in Firefox, Opera (and yes - even in Internet Explorer!). It doesn't work in those browsers using webkit: Safari and Chrome. Now let's dive into the problem, and look at possible solutions for this bug.

A couple of days ago, Mozilla released their newest version of their ever popular browser: Firefox. It was in beta before, but now version 3.6 can be officially downloaded. This version of the browser brings us a couple of improvements on several aspects, like using Personas (themes), improved (JavaScript) performance and an extended version of the CSS engine compared to the 3.5 release. Today, we're going to look at a couple of the new CSS3 properties that are added to Firefox 3.6.

In this article, we'll be looking at the following properties that are now supported by Firefox 3.6: pointer-events, Using gradients and Multiple backgrounds.

  

Please note that this article only aims at Firefox 3.6, using the -moz CSS prefix. Therefore, not all techniques will be visible when using any other browser (or older versions of Firefox). So let's see what the latest version of this browser has added to his CSS arsenal.

As you might know already, I'm not a big fan of animations that are added in CSS3. Yet, several people on Twitter told me why they really like the feature. At that point, I wanted to play around with it too.

At the same time, I wanted to see if those animations with CSS3 could be created with jQuery too (especially for those browser that don't support CSS3 animations yet). So today, I present you Five examples of CSS3 animations and their jQuery equivalents.

This tutorial/these examples will show the use of the same HTML, with different classes for CSS3 and jQuery. You can compare both the codes and see which one you like more. Don't forget to check the demo/download the source code to view how everything is working under the hood.

  

IMPORTANT NOTE:
Sadly, CSS3 and HTML5 aren't the standards (yet) these days (when will it ever be?). Since this demo is using CSS3 animations, not all (modern) browsers will be able to show off the full effects. Because of this, it only works on Apples Safari and Google Chrome as they are the only browsers supporting the CSS3 animations via the -webkit- prefix. So, for now, this is just for fun and learning more about CSS3 and jQuery. The jQuery effects will work on other browsers though.

With that said, check out how you can re-create these and learn some more about CSS3 animations and jQuery.

Although I don't understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we're using today. I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3.

This tutorial takes on the following CSS(3) properties:

• rgba
• opacity
• text-shadow
• pseudo selectors
• rounded corners
• gradients
• box-shadow

  

As you could expect, this demo only works in browsers that support the new CSS3 features. This code fully works in Safari / Firefox 3.6, but hasn't been tested in other browsers. Now let's see how you can create this kind of sweet menu yourself!