-webkit support in Internet Explorer - css

I am a little new to CSS and CSS animations. I am tired of optimizing my webpages specifically for IE (all versions). Is there some javascript library of something of the same sort that can enable CSS -webkit syntaxes in IE?
I find it easy and good designing for webkit browsers like chrome but IE needs special focus.
Thanks in advance.

The Internet Explorer 10 supports some more CSS3 features. Did you to obmit the prefix? If this doesn't work there is nothing you can do. You may need to wait for the Internet Explorer 11.
However I would not recommend to concentrate your work for the IE. Better try to make run your app on Firefox, Safari, Opera and co.
Have also a look to the blog post Adapting your WebKit-optimized site for Internet Explorer 10 by Microsoft.

have a look at css3pie.com it can render as from IE6. Hope this helps you.

Related

CSS - why to add -webkit and so on to transitions

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.

CSS Filter Works In Chrome and Firefox But Not IE

The CSS filter property works in Firefox and Chrome. How can I get this same affect to work in Internet Explorer. For more information on what the filter property is go here: https://css-tricks.com/almanac/properties/f/filter/.
The reason CSS Filter doesn't work in IE is because it's not supported in IE.
This feature is currently in development stage for modern IE. https://status.modern.ie/filters
Generally for any modern CSS features it's good practice to check
http://caniuse.com to see which browsers actually support the property.

CSS3 support on browsers

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/

Are there any example of CSS hacks which were working before but not after new version or patch released?

Are there any example of CSS hacks which were working before new version or patch released?
Is it ever happened?
mainly i want to know for IE, but would like to know cases of other browsers also.
my question is not about "CSS hacks vs IE conditional css"
Yes, there are. On the page CSS Compatibility in Internet Explorer 7 you can find six examples of CSS hacks that stopped working when IE7 was released.

Best approach for fixing CSS issues to work with IE 7

Recently, I started maintaining a web application which unfortunately works only with IE 6. Most of the issues are related to CSS.
Is there any tool which can help me standardize the CSS classes to work with both IE 6 and IE 7? I understand I have to go through standards but I need something to start with quickly.
Firebug can help me to some extend in identifying the CSS classes related to the UI elements (if the page renders on firefox). But, I was looking for something more like an advisor tool. If you have some experience to share, please feel free.
Try out SuperPreview or the whole package (Expression Web announced at Mix)..
SuperPreview is a new free standalone application from Microsoft (still in beta) which enables you to see how your websites will look across different versions of Internet Explorer making migration from IE6 to 7 and 8 much easier than before, without have to start up a Virtual Machine to run IE6, or have a separate computer dedicated to running IE6.
Check out Dean Edwards' IE7
Tredosoft's Multiple IEs is a good compare/contrast. You go ahead and upgrade to IE7, then install this (selecting just the IE6 option, unless you need all of 5.5/5.0/4.0/etc.), and you can see the pages simultaneously in both browsers. This will help you figure out what has to be conditionalized/hacked.
Also, the IE Developer Toolbar, although not as good as Firebug et. al., will at least let you see in IE what the browser thinks is happening with your styling.
Sometimes you need to introduce a little hack for IE6 and IE7 like removing double margin and I use the following pure CSS code
css-selector { code for all browsers }
*html css-selector {code for IE6 browser }
*+html css-selector {code for IE7 browser }
it is not a tool that you expecting, but may be it would helpfull

Resources