Making websites that appear correctly in IE is a big problem. Is there any java script library to fix all CSS and other issues associated with Internet Explorer (7, 8, 9) and make it work like Google Chrome, Firefox?
use a doctype to make the page render in standards mode instead of quirksmode
Check out what properties in CSS you can use and what browser supports them
If you plan to use HTML5/CSS3 tech, then you should check the property and what browser is currently implementing these new tech
You can reset the CSS using a CSS reset to start off from scratch in your styles
If you need a stable ground to build on for your page, consider using a "base" style framework like Blueprint CSS's typography and forms CSS.
Use a toolkit like jQuery, Mootools, Dojo etc. This will speed up your JS development. But NEVER let JS do styling and style fixes. That's the work of CSS.
Ofcourse, never assume your design works at all. You must test on all available browsers, on the current version, 2 versions back, and on betas.
One important thing to remember is that different browsers respond differently to errors. So make sure your HTML and your CSS pass the W3C validator error free. That will go a long way in ensuring your site will look the same on different browsers.
Also, don't use quirks mode. Different browsers have different quirks!
If you are referring to some of the CSS3 styles, then I would suggest you look into CSS3 PIE.
Short answer is no but you can check which properties are not supported in IE with caniuse.com
http://selectivizr.com/ or http://css3pie.com/ will help you but they both won't work if js is disabled.
Read this if you're using html5 http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/
And what Joseph said.
You could always check the results with http://browsershots.org/ but it's just a screenshot so it won't give you an idea for example of how things behave when you click/hover on them etc.
The short and simple answer is yes, you can target the older versions of IE using a combination of Modernizr and HTML5 Boilerplate. Modernizr is now included in the HTML5Boilerplate package.
For more details of an HTML5Boilerplate approach to this:
HTML5 Boilerplate, IE7 & 8
Related
I am just curious to know that why default css doesn't works for all the browsers, specially it breaks for IE browsers(6,7,8,9). So usually we need to create different css files for different browsers (mainly for IE), why is that?
Some browsers don't support all of the features CSS has to offer.
Also in some cases you need to "fine-tune" the css specially for IE because of the "css box model". You may also need it to enable backwards compatibility for previous versions.
I'm not a fan of creating browser specific CSS and usually try to use a solution that will work in all browsers. The reasons for some things not working in different browsers are:
bugs
different interpretation of styling
using something that was not implemented in the previous version
CSS is a big scary technology with no official implementation, only official specs. This means that there is no STANDARD interpreter that defines how the language is supposed to be interpreted, only docs which guide interpreter makers. The result is many interpreters, each with their own quirks and glitches.
...
And then there's IE
...
Microsoft has long held a firm foot in the "let's do it our way" ring. There have been many reasons for this ranging from implementing features that the WC3 CSS standards don't, yet, support (for example, they had a very early version of the modern opacity command) to more sinister reasons like trying to force compliance with their standard making niche appeal for their browser.
Either way, if you're going into web-dev, IE is going to be the bane of your existence. If you think CSS is bad, wait till you get to JS.
It is needed when you implement some feature of css which is not provided in all browser.
Then someone need various css files for fallback.
suppose you are using position:fixed; in css and if you want your site to be perfect in ie6 then you will need some other css file for callback because position:fixed; is not supported in ie6
What is the practical way to support multiple browser types?
using custom CSS per type ?
using GWT ?
some other way?
i am currently using jquery for the jscript side, and it's great, but the CSS side is starting to kill me :(
There is no way that supporting "all" browsers while aiming best possible design. You should define your minimums e.g. support IE 7+, Firefox 4+ etc. Then look for each browsers that should be supported for CSS support. Say you find lowest supported version is CSS 2 in our example. Then look at CSS 2 specification which CSS rules are supported. Design your site with those CSS rules. Sometimes you can use higher CSS versions to improve your site design for up-to-date users i.e. the users who uses latest version of the browsers. Border radius, box shadows, text shadows are great example what I meant here.
There are some libraries on the internet that enable to mimic some behaviors across browsers (most of them designed especially for IE). They are mostly rely on Javascript, but there are some other methods too. If you want to play with your own way, you can rely on jQuery which is good for such usages.
These are not universal methods to support multiple browsers. But, this methods work for us.
For the CSS part, use normalize: https://github.com/necolas/normalize.css/
For a great starting point that includes normalize and some invaluable tips: http://html5boilerplate.com/
A little bit of http://www.modernizr.com/ should give you a lot of help.
I've been developing on the web for a while now and most of my cross browser compatibility consists of using IE css hacks, which is not standard by any means so I'm just curious how do you handle cross browser rendering issues when developing web applications? I've never worked for a larger company, so how you do think (of if you have some experience working for a large company) they handle these cross browser differences? I would love some professional feedback on this subject or perhaps some tips.
We start our projects by using a reset stylesheet (Eric Meyer's is good), which fixes most cross-browser display issues we've ran in to.
My personal strategy is to make everything look right in Firefox first, which usually also takes care of Webkit-based browsers, then go back in and fix IE issues using separate stylesheets linked inside of conditional comments.
For some CSS3 that IE<=8 doesn't support, we use CSS3 PIE.
Finally, if you haven't already, check out Modernizr and html5boilerplate (html5boilerplate implements Modernizr). html5boilerplate is a good starting point to help alleviate cross-browser issues.
My personal strategy is to start with a reset stylesheet (I use Eric Meyer's as well), to reset default styles by browsers.
To solve issues with particular versions of IE, I use conditional comments instead of CSS hacks, so that my styles for CSS are more likely to work in IE, if IE fixes CSS hacks.
Using a CSS framework such as Blueprint can provide basic styles that you can override with your own styles, and provides a basis for your styles so you don't have to duplicate some basic styles. It also provides good compatibility with IE's CSS quirks by using conditional comments as well.
It's usually best to test in a variety of standards-compliant browsers, and then apply CSS fixes to IE. Usually, to give pseudo-CSS3 styles to IE, you need to investigate IE's filter, a non-standard way of applying styles. Microsoft's MSDN documentation is fairly comprehensive on this note. Be wary—anti-aliasing may disappear when you use filter styles on an element.
If you need support with IE for new HTML5 tags, such as <section> and <header>, use an html5shim.
I want to use HTML5 because it supports in Iphone also and I really liked its capabilities but what can I do if it is not fully compatible with all browsers? Specially IE family. So is there a way by adding some js script e.t.c. so that HTML5 and its js api work normally in IE also as it works on other browsers like chrome, firefox and opera e.t.c.? So that I can use it without thinking of browser compatibility issues. There are also many game engines in html5 but what if this is not supported major IE browsers. Or can some one tell that how much advantage can I take of html5 without thinking of compatibility issues?
Thanks in advance
You can use http://html5boilerplate.com/ together with http://code.google.com/p/html5shiv/ and you're good to go.
For some other cool features, like video in old IE, you need to use workarounds like Flash for video and Javascript libs for canvas.
Simply put, if the markup is valid in HTML 4, change the Doctype and it will work as HTML 5.
If you want to use the new elements like <article> or <footer>, you will need to include a small javascript snippet in order to register those new types.
document.createElement("article");
document.createElement("footer");
This will make these new elements usable and stylable like an ordinary <div> element
Polyfills let you use new HTML5 apis on older browsers. The Modernizr project keeps a list of good ones: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
I'd like to start using HTML5's basic features, but at the same time, keep my code backwards compatible with older browsers (graceful degradation). For instance, I'd like to use the cool CSS3 properties for making rounded corners. Is there any available tutorial for writing gracefully degradable HTML5 ?
Additionally, what browsers should I support so that my app. is functional for at least 95% of visitors? What are the ways to test those browsers painlessly ?
When talking about HTML5 or CSS3, you should head over to:
When can I use...
As can be seen, we are still far far away from using that.
Also, since old versions of the browsers won't support HTML5 or CSS3, however, you can do what is known as:
Progressive Enhancement and Graceful Degradation
Here are some resources also:
Gallery of HTML5 Sites (You can learn and get the idea from them)
Create modern Web sites using HTML5 and CSS3
Browsers that, collectively, cover 95% of the world: Firefox, Chrome, IE6/7/8.
The best way to test them is to install them on your computer.
You want to use html tags and css compatible with mobile browsers.
For anything CSS3 wrap it in conditional javascript. I always make sure the device width is atleast 240px, then anything below that is the old, crappy, mobile look.
You can use a small mobile boilerplate for CSS, to reset the basic tags you use (make them look them same in different browsers). As with any boilerplate, you should look at the css to see if it's WAY overkill.
For a comprehensive guide check out the W3 Mobile CSS2 guidelines: http://www.w3.org/TR/2000/WD-css-mobile-20001013
Another good resource is this compatibility table: http://www.quirksmode.org/m/css.html
Graceful Degradation is all about making compromises -- if you could do everything in the lower version, you probably would. To pick on the example of rounded corners you cite, it may acceptable to you (or your client) to live without them, where there don't exist renderer specific CSS extensions to support them (this is how http://www.ipswich-angle.com/ handles it, for example, I believe). Other options involving images are there, but it is largely dependant on what compromises you and your client are willing to make.
A service like browsershots.org is quite useful to check how your site renders on different browsers and operating systems. You have to wait in a queue for a while but it's worth doing that.
I was going to make this a comment, but then I got carried away..
w3schools has suggestions for using semantic web elements on your site. It suggests using a Javascript library called html5shiv.js to add styling support to IE8 and below so you can find javascript files which emulate specific functionality built into HTML5 like JSON2.js and Webforms2.js.
Finally this article gives a full example of emulating a HTML5 form with many of the new attributes/functionality.
As for building the site, I'd recommend building a HTML4 site first using semantic elements freely (with html5shiv) and testing with IE7. Then as you build parts of the site that require new features, research a Javascript file that will provide older browsers with the same functionality, e.g: when it's time to add your first rounded corner or gradient maybe add CSS3Pie. Always remember as well that your box-model; border-radius and gradients are supported in webkit as well as mozilla's API so many css3 attributes you'll need to add 3 times:
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
Unfortunately I don't have a good resource for how the webkit/mozilla APIs compare with HTML5 functionality.
The only functionality I've struggled to find is support for CSS3 selectors in older browsers, often you can get away with this, I mean if you're not gonna upgrade your browser IMHO you can live with few double-thickness borders or missing alternate row styling in tables.
Maybe one day there will be a site that you can upload your code to that will tell you things like "chrome 20.xyz doesn't support rounded corners, add -webkit-border-radius to add support" but until then adding backwards compatibility after the fact will be near-impossible for complex sites.