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
Related
What would be the best Javascript framework to implement objects that can be dragged around the window and hovered over to make other objects appear?
I was thinking about AngularJS but is that the best choice? jQuery doesn't seem to be versatile enough.
Also, which one is the most cross-browser compatible?
Thanks
Edit: jQuery UI could be an option but it seems that what I am trying to do would be animation-heavy and a framework using hardware acceleration would be more suitable than one using browser acceleration?
You're only going to get native acceleration using HTML5 in combination with CSS3. To that end, there are means of implementing something similar to dragability, which, in combination with this answer, may achieve what you need via the events. JS still required, but much, much less.
The downside is that you lose browser compatibility. To remedy this, check out Modernizr. You can add in jQuery UI if a legacy browser accesses your site, but otherwise stick with HTML5. As you can guess, doing animations without Flash and with native acceleration AND browser compatibility can get hairy quickly.
To animate an element, we can use css animations, or we can do it in javascript.
Reading up on this, it seems like css animations are expected to render more quickly than javascript animations, since the browser can execute css animations in native code. This info was gathered from posts dated from 2008 - 2011.
With ios 6, is this still the case? In the release notes, I found this item:
"WebKit no longer always creates hardware-accelerated layers
for elements with the -webkit-transform: preserve-3d option.
Authors should stop using this option as a way to get hardware
acceleration."
http://developer.apple.com/library/ios/#releasenotes/General/RN-iOSSDK-6_0/_index.html
Since I'm pretty new to animations in the web, I'm not sure what the current status is,
Thanks
CSS animations and transitions will always be faster than JavaScript ones, simply because there is just a single instruction to be handled, as opposed to having to follow all the JS instructions required for the same effect.
I'd interpret the release message as "It is no longer guaranteed that a value of preserve-3d enforces hardware acceleration" (and should not be used as a hack to assert HA). If the UA chooses not to use HA, it will have good reasons for that.
Regardless, native implemented CSS transitions are still faster than manual JS animations (in general, at least). Also, there is no cause for using JavaScript when you can achieve the same thing with short [basic] 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.
I have a couple of UI elements such as buttons in my web application. I was going to use CSS3's transitions to animate the transition from one background-image to another. I figured out that it's not possible with the current transitions draft at least. So, I was wondering if it would make sense to use Canvas as the button. I'm sure it can handle events, so, I see no problems here. Are there any?
Other than the fact that it's not supported in IE, no.
canvas is not supported in Internet Explorer. Also, canvas animations render very slowly on PCs with little CPU power.
Unless you are writing something that is for a specific target audience (say internal users with Firefox and dual-core cpu) I think you should avoid using canvas for now...
I came to conclusion: using Canvas for UI elements is not a good idea.
For example, if you create a select-box using Canvas, how is the list going to appear in the top of other HTML elements?
Use raphael.js (MIT license) - it give you canvas-like API using SVG (and VML for IE) and works in all amjor browsers including IE6. And its fast (not too slow even in IE)
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.