I have a question regarding css3 animation. I know that it works well in all browsers except Internet Explorer(IE-7/8/9). How can I make it work in the older versions of IE as well?
You may find useful cssSandpaper – a CSS3 JavaScript Library.
Related
I have a small question, I am new to CSS and I have pretty stupid question. Why everybody add -webkit for Chrome and Safari, -moz for Mozzila Firefox and so on, I used just "transition:" and value and it worked on Mozzila, Chrome and Opera too. So what's the reason to add it?
Thanks.
that's for older versions of those browsers which only respond to the prefixed settings and are still installed on some computers.
Web world changes a lot, and before there was official support for CSS3 (such as the transition you are using), there were fallbacks, and shims to add these features specific to browsers.
The reason people would still use -moz & -webkit is to include support for older browsers. You should read up on the pains of doing this especially for internet explorer. So if you don't want to leave your ie9 customers behind, you should try and include appropriate CSS for them. transition isn't going to cut it for these browsers.
I've only recently come to realise that Internet Explorer 10 doesn't support the CSS border-image property at all, not even using a vendor-prefix.
My normal go-to solution would be to use CSS3 PIE, however that's in the rather unique position of being unable to do a whole lot to help given that Microsoft have opted to depreciate support for .htc behaviours in IE10. There's a discussion about this on their forums here.
It seems possible that there might be a work-around by building a custom JS version of CSS3 PIE but I'm loath to take the performance-hit.
Is there any other way that anybody has discovered to convince IE10 to support border-image (as it really should!).
IE10 doesn't completely remove support for HTC behaviors. You can still use them if you force IE10 to emulate IE9, which you can do by adding the following meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
This would let you use CSS3 PIE's HTC behaviors again, but it would also prevent you from using other new features introduced in IE10. It's a tradeoff, but one that would allow your site to appear as intended in IE10 until such time as a better border-image polyfill is available.
Should I fully learn CSS3 from the W3 "CSS specifications" or is CSS3 not fully supported on browsers yet?
All in the title :)
It is worth to learn. Even if will take some time until all browser supports the same things most browsers gives the possibility to user browser-based properties for css3 support. IE is the biggest problem is this field, but using scripts like css3pie then you can support css3 for internet explorer also. Some good sites offer you cross browser css3 are the following:
http://css3please.com/
http://css3generator.com/
Also visit http://www.css3.info to keep in touch with all news about css3. In any case worth.
Good overview of CSS3 support among various browsers is e.g. here http://www.findmebyip.com/litmus and here http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/
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.
As of right now I believe only Firefox support -moz-border-radius property. I am surprised that twitter uses it.
Are any other browsers planning on supporting this or does CSS3 have something like this in the works?
Edit: I also found -webkit-border-top-left-radius and then the CSS3 version
So when is CSS3 coming out?
CSS3 has border-radius.
For now, Mozilla- and WebKit-based browsers have experimental support, -moz-border-radius and -webkit-border-radius. It's not bad to use them now, as long as you understand they are temporary measures until they are properly implemented. I would expect it's not too long before you see full support for border-radius in Mozilla, Firefox and IE. (Well, hopefully IE.)
Update: as of August 2016, with border-radius being natively available in all native desktop browsers (and most mobile browsers, not to mention), the stringency of using -moz-border-radius, -webkit-border-radius and similar is being slowly relaxed.
Because the CSS3 spec hasn't been finalised, Mozilla and Webkit decided to implement their own method of rounded corners, doing it in the correct way, by adding the vendor-specific tag at the front.
This is done so that when the CSS3 is FINALLY released, should they change how border-radius is supposed to work (eg: the order of the parameters), then none of the sites using the vendor-specific methods will be broken. Mozilla and WebKit can just go ahead and implement the W3C style and developers can slowly move over to that.
It's not too surprising that you're seeing some websites using it, especially for something like rounded corners where it's not going to make a massive difference to the user experience. And I mean, it's just IE users who are missing out, and they deserve everything they get.
It bugs me when people talk about CSS3 coming out. It's not a complete spec like the previous ones. It has been broken up into separate modules that may increment their versions independently.
So Selectors Level 4 may make Recommendation before CSS Backgrounds and Borders Level 3 does.
So, will CSS3 arrive? Eventually, but not all a once. So don't wait for it, start using it now (where applicable).
CSS3 has something like this in the works.
According to this, IE 8 will not support border-radius.
Any CSS property that starts with a dash (e.g. -moz, -webkit) is a browser-specific property.
This allows browser vendors to experiment with new CSS properties. Doing so is a common part of the process for writing new CSS specs, to allow web developers to see how the properties work and raise issues.
Hence you’ll find a lot of CSS 3 properties, like border-radius currently implemented in some browsers with vendor-specific extensions.
There’s nothing particularly wrong with using these on production sites, as long as you’re aware they’ll only work in the one browser.
CSS 3 should be out any decade now :)
Browser-based properties are only meant for interim fixes for that particular browser, and are supposed to be deprecated when either the W3C adopts them into CSS, or not. I wouldn't rely on them to be cross-browser or even be kept for the particular browser.