Does anybody know if there is a plugin like HTML5 shiv for CSS3 that allows CSS3 to be rewritten and render properly in browser versions before IE9?
You can try CSS3PIE.
Did the job for me a while back.
CSS3Pie is awesome (and +1 to both the answers that suggested it), but it only covers a small number of CSS properties.
If you need other CSS features to work, then you may want to look at some of the following as well:
CSS Sandpaper
Selectivizr
Any one of several scripts listed here
CSS3 PIE is a good one.
Related
Our website looks great in all browsers except IE 6-8. We're not even using many CSS3 features. These are just plain old IE rendering bugs (like margins and padding). Before trying to apply a bunch of IE specific fixes, I was wondering if anyone knows of a javascript library that I could apply to fix a bunch of these typical bugs?
Update: Like I mentioned, we're not necessarily using any "modern" CSS3 features nor HTML5, so these are just typical IE 8 bugs where IE renders things differently than all the other browsers.
Go for excellent normalize.css reset that takes care of most of it (also used by HTML5 Boilerplate)
Normalize.css is a customisable CSS file that makes browsers render
all elements more consistently and in line with modern standards. We
researched the differences between default browser styles in order to
precisely target only the styles that need normalizing.
As for getting support of CSS3 for browsers that don't support it, check out CSS3Pie
You don't need JavaScript; just use a CSS reset file: http://yuilibrary.com/yui/docs/cssreset/
That will work across most browsers to not only fix IE issues, but also make your site render more uniformly over different browsers.
You might wanna take a look at this one: https://code.google.com/p/ie7-js/
or this: https://code.google.com/p/html5shiv/
I am trying to get the CSS3 border-radius to work on IE8. But for some reasons, it is not working: http://uiux.atwebpages.com/
I am using the border-radius.htc file.
Is there some other way to make border-radius work on IE8 without using the .htc file ?
It's not possible without using VML just with pure CSS in IE<9. The only other way is to use sliced images. I'd recommend, if those rounded corners are not really necessary, just omit them. It's not your fault, if people use outdated browsers.
However I can recommend you css3pie. Take a look at it.
edit:
your page has a 404 on css_reset.css
Are you sure, your resources have loaded all correctly?
you need to include behavior:url(border-radius.htc) in your css (with the correct url of course), but i couldn't find this in your css. Try it and see, if it works.
No, CSS3 border-radius isn't supported in IE8.
Please, refer to this chart for my info about compatibility:
http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx
Is jQuery an option? If so then try this - http://jquery.malsup.com/corner/
if you do what's said on this page it should work properly. one more advice: clean up your css and define browser depending rules before you do general css rules.
css3 in ie
Since many modern browsers support CSS3, I would like to use many CSS 3 features to use on my work but some older browsers still not support CSS3.
Should I separate those two css files separately?
Or is there an effective way to handle both old and new browsers while having most of nice features of CSS 3.
You could have a look at HTML5 boilerplate.
If you take a look at the very first lines of index.html, you'll see how to use various features of CSS depending on the browser, all within the same CSS file. The idea was originally explained here.
In very short, the trick is to conditionnally define which CSS classes apply to body depending on the browser.
If you want to support many CSS3 features in IE6-9, you should use PIE.
Very new to CSS webkit animation, and very keen on learning it! And also plenty clueless!!!
So the couple of questions:
What is the best walkthrough/tutorial/official site for CSS webkits?
Do I need to install webkit before I can program it in my CSS files?
Thanks and regards!
Parijat
WebKit is a rendering engine, used in Safari and Chrome. If you have either of those browsers you don't have to install anything. They have several articles about animation on their blog, but I'd also encourage you to Google it because there are lots of other useful articles out there too.
I would recommend you to google for css3 animations.There are a LOT of tutorials. There is also one on w3schools.com. Read those to learn animations.
Webkit is a rendering engine and is used by chrome/safari. So instead of specific search for webkit, unless necessary, i would recommend you to go through searching for css3 tutorials.
For beginning, there are css3 animation generating websites, do look into those, they're helpful in visualizing dynamically what happens with changes in element values.
CSS3 animation generating websites : http://www.css3maker.com/css3-animation.html , http://css3generator.com/
Filters like
img {filter:flipV;}
I'm guessing are pretty old, I just was asked by a colleague why they weren't working for him in FF. I assume they were an IE only thing that died out a while back?
Yes, it is IE-only. They didn't die-out, they were just a bad idea to begin with.
They were the only way to do some things in IE, for example PNG transparency in IE6...so they're still around. Web developers everywhere are hoping they die :)
Even in the latest jQuery UI files you can find it being used for Alpha transparency: http://dev.jqueryui.com/browser/trunk/themes/base/jquery.ui.theme.css
By no means are they gone...unfortunately. At this point, I'm hoping they don't stick something like this into IE9 and call it a "feature"...
You may find this article interesting. While filter is IE only, there is a Firefox equivalent (opacity) which is part of the CSS3 recommendation.
They are pretty old and work only in IE. Bad, don't use them unless you are targetting only IE (not good again). There are some things in CSS3 not supported by IE, you can sometimes use these filters to get around things.
For example, box shadow effect can be easily done with CSS3 but IE again does not support that, you can use these filters for IE and normal CSS3 for other browsers to create a cross-browser solution.