We Keep Coding

Javascript animation: IE vs other browsers

Before I launch into the specifics of the issues I am facing, I just need to ask: Is it a mistake to use IE8 as the reference for building a website, particularly one that uses JavaScript animation? I ask because I have written a fairly simple animation page, mostly from scratch, even with my weak grasp of HTML and JavaScript languages, using IE8 to monitor the progress. I have tweaked the code so that it works just fine in IE8 (compatibility mode turned off), but when I tried it in Safari and Chrome, it does some weird hiccuping in the animation.
I find a lot of questions with the opposite problem: that it works well in everything but IE. So I am wondering, should I be using a different browser for my reference? Or is there a better approach to make it compatible with all browsers? It's so frustrating (as I am sure most of you will agree) to have to deal with the different interpretations of the different browsers.
Thanks for any help!
p.s. I have not coded yet for Mozilla.

Using ie8 as a reference from a performance point of view is not a bad idea, since it has weak js and rendering performance. Using ie7 is even better.
Cross browser compatibility wise, it doesn't matter what you use - unless you use a crossbrowser library like jQuery as your base for the animations you will have to write specific code for the various js and render engines.
Even if you use a library like jQuery, you will still run into rendering issues since the various html/render engines are different across browsers. chrome/safari uses webkit, firefox uses gecko etc.
The only way to do it right is to start your project by defining what browsers you wish to support and then test what you do in all of them while you are developing your code.

If you're doing animations, I encourage you to take advantage of css transitions instead of controlling the elements via javascript - you'll have an opportunity to take advantage of graphics hardware as well as more efficient drawing of pixels in general.
If you need to still perform animations in browsers that don't support those css transitions ( some in ie9, none in ie6-8) then you can use a tool like modernizr to detect what's available and control those elements in the event those features aren't available.
Typically, the animations are extra - so I've had good success in ditching the animations for IE users - if you're making slow, javascript driven animations just to work for IE users, you're punishing users that are using better browsers.
Just my $0.02 of course

Add style elements in CSS

I want to make my own custom CSS elements that will be handled by a js file of mine. Is this possible?
Here would be an example:
div {
rounded-corners:15px 15px
}
And then use Javascript to apply the styles for each browser for rounding corners.
Is there a way to do something like this?
EDIT
The point isn't to add a common support for browsers. I want to implement my own CSS things.

The answer is "no". While it is possible to easily get style values from stylesheets in Internet Explorer by accessing the currentStyle property, like so:
alert(myDiv.currentStyle['rounded-corners']);
//-> "15px 15px"
...other browsers don't support the currentStyle property, opting instead to support the W3C standard window.getComputedStyle(). getComputedStyle() doesn't include "expando" style properties in the outcome, which means your only option would be to iterate over the rules in each stylesheet instead, which could be an expensive procedure depending on how many stylesheets and rules you have. Obviously, you also lose out on the browser's cascading/computing.

IE9 and the latest versions of Firefox and Chrome all handle border-radius anyway.
And you can use CSS3 Pie to add support to older version of IE. No need to write your own script.
EDIT: I suppose you could write your own version of CSS3 Pie, but why would you want to?

You may want to look into SASS/SCSS or LESS, which both offer "mixins". These act like functions in CSS, and should let you do what you want. LESS at least can be made to work client-side through Javascript; I suspect SCSS can too.

CSS already has a property for rounded corners, called border-radius.
This is supported by virtually all browsers in current use. The only exception of any significance is IE8 and earlier.
The good news in this case is that IE8 can indeed be programmed to work the way you're asking. Other browsers cannot, but IE can, and this is lucky, as it's the one browser that needs it more often than most.
So the direct answer to your question is "sometimes". Most browsers drop the styles they don't support, but IE keeps them. It obviously don't do anything with them, but you can access them via the DOM, which means that you can do what you're asking.... but only really in IE.
In the case of rounded corners, there is already an excellent Javascript-based hack for it called CSS3Pie. This is open source, so you can examine their source code to learn how it's done.
The CSS3Pie code is quite complex though, so if you want a simpler example to work from, take a look at this older script which does the same thing a lot more simplistically. Easier to read, but not as functional. For real life use, use CSS3Pie, but for learning, this one is a better starting point.
For working with IE, I would suggest following the examples in these scripts to achieve what you're asking. For other browsers, you will have a much harder time.

Detecting if a CSS3 property is doable using Jquery?

I'm wondering if I can figure out if a CSS3 property is doable in user's web browser
like:
if($('#element').css('-moz-transform', 'rotateX(180deg')){ //Do something }
Above example does not work. If it is not possible how do I detect the browser using javascript? For example, webkit browser like Chrome and Safari or Mozilla browser?

It's not JQuery, but my suggestion would be to use the Modernizr Javascript library.
It does exactly what you're asking, being able to detect support for a wide range of browser features which may or may not be available in various browsers, including CSS 2D transforms.
It adds a range of classes to your <body> element so you can set CSS styles according to feature support, and it also makes available a Javascript object with all the feature support flags, which you can query at any point.

It might be possible using getComputedStyle but it's far easier to use a plugin that unifies all the browser differences in CSS3. One good plugin is the jQuery transform plugin

A good javascript framework which adds CSS3 support to IE6-8 & missing CSS3 in IE9?

I am surprised that the release version of IE9 is missing support for some more basic CSS3 elements like text-shadow and border-image.
What's the most comprehensive JavaScript framework for adding/emulating CSS3 elements to IE6-9 instead of using a bunch of smaller frameworks like ie-css3, CSS3PIE, Modernizr, html5shiv,... etc?
I am sure there's no single framework that does it all but I am looking for the closest.

What? You're suprprised that IE doesn't follow standards? When will people learn...
Try Selectivizr. From the website: "selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest." I don't know what's the support of IE9 but it should be much easier than IE6 so I guess it should work fine.
You will still need some of those "smaller frameworks" though, because they do what they do just fine, they are small enough, so there's no point in reinventing the wheel just for the sake of having one big framework instead of few smaller ones. It's hard to make a one-size-fits-all framework so that's why you have some diversity, and I think it's a good thing.
But don't expect that you'll just include some library and all of the browsers will get flawless CSS3 support because that's not gonna happen any time soon.
If you want advanced effects that would work consistently across all of the browsers from IE6 then I would recommend using Raphaël. It uses VML on IE and SVG on other browsers. The API is also simpler than CSS, but that is of course a matter of taste. But even if not the API, it's pretty hard to beat the argument that you can have rounded corners and other goodies that look the same on Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ without using images.

The items in your list each do different things. I don't think it would make sense for one single framework to implement all of these things.
Just include the ones from your list that you actually need.
You should (obviously) only use html5shiv if you're using HTML5 elements on your page:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Modernizr has the functionality of html5shiv plus a lot of feature detection:
Modernizr does not add missing
functionality to browsers; instead, it
detects native availability of
features and offers you a way to
maintain a fine level of control over
your site regardless of a browser’s
capabilities.
Use html5shiv if you just want to style the HTML5 elements in IE. Use Modernizr if you want to do different things depending on if certain features are supported, for example:
.my_elem {
border: 1px inset #666;
}
.borderimage .my_elem {
border: none;
border-image: url(fancy-border.png) 5 5 5 5 round;
-moz-border-image: url(fancy-border.png) 5 5 5 5 round;
-webkit-border-image: url(fancy-border.png) 5 5 5 5 round;
}
The idea behind CSS3PIE and Modernizr is very different.
The way CSS3PIE is most commonly utilized is inside CSS:
#myElement {
...
behavior: url(PIE.htc);
}
Modernizr allows you to use native fancy new functionality while being safe in the knowledge that you can provide whatever custom fallback you desire for browsers that do not support the specific functionality.
Whereas CSS3PIE tries to perfectly emulate a limited set of CSS3 properties to work in only the older versions of Internet Explorer, with no additional work other than including the behavior property on relevant elements.

Single JavaScript (library) to fix all IE 6 issues and make it compatible with css3

Is there any JavaScript (library) or any other solution, through which we can fix most of IE6 issues like PNG fix and also make IE6 to support CSS3 properties?

No. CSS3 support in IE6 is not going to happen. There is library available that will make IE6 more-or-less compatible with IE7:
http://code.google.com/p/ie7-js/

Short answer: No.
A little bit longer answer: While you can cobble together pieces of code here and there that help you get most of what you want in IE6, the problem is that none of these technologies out there are perfect (with most PNG fixes - try using transparent PNGs on a background image and change the background image by changing a class). There may be solutions for rounded corners or shadows but they will likely be glitchy too.
Many JavaScript frameworks offer nearly complete JavaScript feature-support for IE6, but the case is not the same for CSS. Many things in advanced CSS (2 and 3) will never be possible in IE6, but have to be achieved in different ways. There is no content property, :hover only works on anchor tags, attribute-based pseudo selectors don't work.
Even technologies like GWT that compile seamlessly to JavaScript for all browsers offer conditional CSS so that you can code your own hacks or graceful degradation.

I'm assuming jQuery goes a long way toward resolving IE6 issues because the library tries for cross-browser compatibility and deals with CSS. At least there might not be a better option.
You might check the Test Swarm for jQuery to see where the IE6 tests are at.

Late in the game but http://css3pie.com/ should help people looking for an alternative
PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features

jQuery and other popular frameworks handle many cross browser compatibility options but won't address PNG transparency, most unsupported CSS3 etc.
If you want to take it a step up though, Google Chrome Frame is an option, however this has to be installed on client computers.