I am in the process of updating my business website and I've decided to use HTML5/CSS3 (with some PHP) for the whole thing and it works fantastic in every new browser (IE9, FF6, O11, S5, C13) with or without JS.
Now I am not sure what I should do about every other browser version. I imagine I have a small amount of leeway with most of the browsers (atleast the previous version) except IE8 (I have the IE shiv, but it doesn't cover non-js browsers.). Most of the features degrade nicely, but there will always be issues with older browsers.
I know nonJS browsers are probably a minority, but it would be nice
to cover them as well
This list is ordered in the order of current preference to cover the
largest number of browsers(nonJS/JS) but time to implement hasn't been
considered.
Only considering web-browsers, plan is for a mobile site for mobile browsers
Here is the list:
Build a really dodge version of the site using tables^, etc. and redirect the users there if they have an old version of the browser (server-side) and have a warning on there about upgrading.
Use Javascript to fix up the bits they don't work (like the shiv). This doesn't really cover the nonJS browsers which as stated are probably a minority.
Build a static old browser page to redirect the old browser users to a page with links to upgrade download links. This is a real copout solutions, but is quick to implement
Assume the only users that have old browsers are IE users, and use conditional comments to implement one of the previous options. Assumptions are always bad
Pretend users have the most upto date browsers and make no attempt to fix the site at all. Not really a practical option
Rebuild the website for HTML4 and use it accross the site. Bit of a waste of current work. As well as it looks a bit dissappointing if a webdeveloper has a site using old technologies, which was the driving force for the upgrade
What are your thoughts/solutions to the HTML4/5 limbo? Is there anything you've done in current projects to combat this?
Cheers,
Steve.
P.S. Being a member of the 'I hate IE6 and don't care for it's existance' club, I'm pretending that IE6 (or less) never existed.
Update (to clarify)
^ - by tables, I mean are really slapped together version of the current website, using either a table/non-table based layout. But something that may not look pretty when the source is viewed, it's really just there to fill the compatibility void.
It's perfectly acceptable to have features in some browsers and no features for an older browser. See Here.
However, it should be noted that whenever a fix is doable, you should have it. Unless a website is a JavaScript based app, it should be working without JavaScript, note that working != working perfectly.
if you have a hover state with a cool transition, which Chrome 23423 will support, but IE7 won't, then you can either emulate it using Modernizr and jQuery, or leave it as is, and IE7 won't enjoy the goodness. BooHoo.
You must however, give older browser users a message to encourage them to upgrade to a better ones, especially talking about IE<=7.
You built the website in the wrong direction.
If you want to support older versions, instead of building a cutting edge website and then trying to get it to work in older browsers, you need to build a basic site that works everywhere, then use advanced CSS and Javascript feature detection to add features for the newest browsers.
Related
I have decided not to support older browsers (IE6 & Before) and alternatively providing a page that forces the user to upgrade their browser. The demographic I am targeting are generally technologically savvy and very few users will encounter this page. What I am hoping to do is not support any browsers older than 5 - 6 years. What would be the best way about to achieve this? Would it be better to ONLY eliminate IE6 and below? What about early versions of Firefox, etc.?
You can read the browser version from the User-Agent string passed by the browser. You want to do a RegEx match on it. Depending on how harsh you want to be you could put a big banner at the top of the page with what you have detected their browser to be and a link for them to upgrade.
You should be able to find libraries in your chosen server-side language to do the parsing for you, save the hard work. An ultra-quick Google returned: https://github.com/tobie/ua-parser
I have focussed on server side development for a few years and now I am branching out into client-side application construction.
I must say that I am finding it difficult to make the client-side application look the same across multiple browsers....
Are there any decent online resources that can aid the faster learning of cross-browser compatibility principles...
For the HTML/CSS part, I find that if you follow the following two rules, things usually work out fairly well:
Write standards-compliant, semantic HTML. Focus on semantically correct document structure first, then use CSS to lay it out the way you want. Only change the HTML if you feel you absolutely have to. Avoid layout patterns that are hard to get right with HTML and CSS, and if you have to, A List Apart contains tons of articles about these things.
Test in all the browsers. If you're serious about web development, you need a bunch of test setups; at the very least, I recommend you have these ready: Internet Explorer 6, 7 and 9 (this means you have to use virtual machines, as there is no way to realistically simulate different IE versions on the same OS install); Firefox 3.6 and 7 (or whatever the current version is); the most recent Google Chrome; a somewhat older Chrome or Chromium (I use chromium from debian); Opera (because it does not share any important components with any other browser). If you can afford a Mac, add FF/Mac and Safari to the mix. If you develop for mobile devices, you need to test on those as well - at least Android and iOS.
If you have to support older Internet Explorer versions (7 or, gasp, 6), then conditional comments are your friend - my usual strategy is to make a design that works on all the other browsers first, and then add one or more special style sheets in conditional comments (so that only IE loads them) that 'fix' things for these broken browsers.
For the javascript part, the sane thing to do is go with a framework that polishes the various pecularities away - jQuery is probably the most popular one at the moment.
Is there any single framework with which I can build a css3, html5 website that is compatible for all browsers including IE7 and later? Can http://html5boilerplate.com/ boilerplate help me in this?
You will never get the IE7 or IE8 rendering engine to achieve full compatibility with HTML5, CSS3, and other modern technologies. They are simply not capable of it.
However there are some hacks, tools and plugins which can get you part of the way.
Tools like Modernizr will help you by allowing you to detect which features are supported, to give your site a chance to work around it.
jQuery is a great library anyway, but is particularly good in this context because it abstracts a lot of browser differences away from the developer. Some things are easy in most browsers but a real pain in IE; jQuery takes a lot of that kind of stuff and makes it easy regardless.
Dean Edwards' IE7.js and Selectivzr are both Javascript libraries that give IE support for lots of the CSS selectors which were missing in older versions. This allows you to write your stylesheets without worrying so much about what IE supports. (IE7.js also fixes a number of IE's other glitches and missing features too)
CSS3Pie is a hack for IE that adds support for CSS border-radius, gradients and box-shadow.
There are in fact a whole load of hacks along these lines, all aimed at adding features to older versions of IE which it is missing. Modernizr's website has a big list of them here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
However there is one big caveat to all of this. Speed. IE<=8 is a slow browser. It has a slow Javascript engine. Virtually all of these hacks are javascript based. You might get away with running a few of them on any given site, but trying to use enough of them to give IE anything like full support for HTML5 and CSS3 will slow the browser down to the point of being unusable.
There is one other angle to approach this question though, and that's Google's Frame plugin for IE. This basically installs the entire Google Chrome browser engine into IE. The user is still running the IE shell, but the web page is rendered as it would be in an up-to-date version of Chrome.
This sounds great, but of course it isn't perfect. The main down-side of it is that the end user has to install it manually onto their computer, which means that you as a web developer have no real control over whether it's there or not. So its not something you can just add to your site and expect everything to magically work.
Finally, you may also be interested in CanIUse.com, which gives browser support tables for various features, allowing you to see at a glance what is and what isn't supported in various versions of each browser.
HTML 5 is more an umbrella term for a variety of technologies than any one thing or framework. Really, any implementation you do should degrade gracefully-- and that is what makes the site browser compatible. Detect what the browser supports, and then have alternatives that are legacy friendly.
Check out: http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/
And: http://diveintohtml5.ep.io/detect.html
Good luck.
Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
MS is including it in the ASP.net MVC template projects
html5boilerplate won't help you.
As others have said html5 and css3 are very broad terms, there's no framework that implements all of the features provided by both of these. In fact they are not equally supported in browsers that say that they support them. And more, even W3C guys (who write the specs for html5 and css3) are not yet established on what features they will include or what steps will be required to implement them. You get the idea...
But.. if you narrow your requirements to some specific features, like video, audio tags, canvas drawing, nifty css effects, File API, or others, you CAN find frameworks that implement (or try to mimic) them with available technologies in cross-browser manner (more or less).
What would be the process for ensuring that the code works as expected across multiple browsers. What would be the best answer?
Be XHTML compliant (w3.org validator)
Be CSS compliant (w3.org validator)
Use a JavaScript library that is cross-browser compatible (less direct call to JavaScript as possible)
Test, test, test during development. Not at the end!
Avoid bleeding edge code.
Yeah, I know, many of you will hate that answer. And if you've never worked in a large enterprise environment, you'll think I'm a Luddite. However, I can't tell you how many times the requirements I've been given have specifically listed "No HTML5" or "No CSS3" elements simply because the client was paranoid about IE6 working exactly as the others did.
The obvious overall answer is testing, but I'd go one step further. If you're worried about 100% operation in all browsers, you have to define your standards. For example, if you have to code back to IE6, do you have to worry about mimicking rounded corners, which is always a hack on IE6 and below? Or, will the client accept progressive enhancement such as square corners for those on browers from the dark ages and rounded for the rest of us? Does the client specify fonts that can't be told apart when pulling the page up side-by-side, or do they understand that browsers use different font rendering engines? Is it ok to work just in IE6, or do you have to also support quirks mode? What about rendering with a screen reader (accessibility) or without CSS or Javascript. How about mobile devices? All these were valid and measurable issues with my last major corporate client.
I like Adobe's Browser Labs as my first line of defense for testing. However, it's just one of many steps I take including multiple physical computers on multiple OS's connecting via multiple connections through different network proxies. You just can't test enough....and even then expect to find an error as the site is launched and matures.
Take each browser and test :D
You can use websites like browsershots.org to see how it looks on different browsers and platforms.
The most comprehensive way of doing that is to actually test in different browsers. A simple solution would be to create a virtual machine hosting server, set up multiple VMs, and then install a different browser version to different VMs to fully test your application.
Absent that, there are tools that can emulate (but not fully) browsers and you can test through those.
The best measures to adopt are:
Use a CSS Reset (read about it at the link, implement it however you like)
Use a Javascript Framework like jQuery (This will abstract a lot of cross browser quirks)
Validate your HTML and CSS. Make sure you are specifying a Doctype
You can test most browsers via Chrome, Firefox and IE8. IE8 has an IE7 mode that can be used to test for IE7. Press F12 in IE8 to get the developer window to debug and solve issues. Make sure you are prompting for all JS errors. IE6 is a tough one, but there are a number of resources available that you can probably find to help you with this.
Hope this helps. Good luck.
http://browsershots.org/
thats the site you looking for. You need to put in the url of your website, select the browsers that you want to check and click submit. It will return screenshots of the your website based on the browsers that you have selected.
There is no one way to test the app's compatibility for web browsers. First thing to keep in mind is understand the standards set for the app, define the number of browsers and versions to support. Once we know what we need to support we can keep the following points to ensure compatibility:
Test during development. Not at the end.
Avoid bleeding edge code. New functions that come with ES5 or ES6 standards would only be supported by modern browsers, hence would need polyfills in older browsers. Therefore use the most native form of Javascript wherever possible.
Use jQuery functions if it's included in the project. It helps take care of most javascript cross browser issues. If not included, use just bring its particular function in your project that you might need.
For CSS, try to use the traditional methods of layout and styling instead of the latest CSS3 one's which might not be supported by old browsers(like transform property).
Tools like Browserstack can be used to see the screenshots of how the CSS turned out on different machines.
Actually test on different machines and browsers. Although chrome provides a superb emulator but when code actually runs on that particular OS and ecosystem, then it may misbehave. So the best way to ensure is actually test them in every ecosystem.
Use Tools like VirtualBox to be able to test old browsers and different OS.
There is no way to ensure it aside from testing testing testing :-)
I currently work for a large company and I design for their high-traffic ecommerce website. We support tens-of-thousands of users across a variety of browsers. Our current browser stats point to most people using either Firefox 3+ and IE8. There are about 5% of users still on IE6.
Is it time to start coding for the future and impliment HTML5 across the site? Is it a responsible thing to do or should I wait a year for people to upgrade to better supporting browsers?
Thank you.
HTML5 isn't one specific thing. You can start using it even in browsers that have no idea what HTML5 is. If you just start using some of the extra tags or form types, they degrade perfectly into standard elements in older browsers. Video needs a Flash fallback anyway. The advanced scripting features all need fallbacks for non-supporting browsers anyway, or must only add non-essential functionality.
In short, sure, start using HTML5 techniques now to provide advantages for cutting-edge browsers, just make sure it all degrades nicely in older browsers.
IE8 doesnt support most of HTML5.
There are libraries you can use to make it more HTML5 aware; but for a large production site I think your better of waiting a year.
I would say that the 5% of users still on IE6 will probably remain on IE6. They either aren't interested in upgrading (perhaps they don't know about these things), or are restricted to IE6 by security policies in their workplace. In particular I've found that a number of our clients are not upgrading from IE6 because their IT teams consider it to be too big a change, or their existing software is not compatible with anything else.
Therefore, my advice is: go HTML5. With a bit of work you can work around IE6's deficiencies (look at Modernizr, CSS3PIE for ideas). And that way, the other 95% of customers get a better experience.
... what is "large"? Considering HTML5 is still considered work in progress, I'd vote no.
The name "HTML5" is tending to be used by most people at the moment to describe all the exciting new features in web browsers. Not all of these features are actually part of the HTML5 spec - for example, CSS and Javascript have new features which are being referred to under the HTML5 banner. I'm going to assume you mean all these features.
My answer would be to investigate which features you can implement, but remain backward-compatible. Many of the features of HTML5, CSS3, etc can be added to your site without making it un-usable for older browsers.
Some examples: (but do spend time researching for more)
New input types, such as <input type='date'> and <input type='number'>These give you new features in a modern browser, but old browsers will still show a normal input field.
More info: http://www.456bereastreet.com/archive/201004/html5_input_types/
Semantic HTML5 tags, such as <section>, <footer>, etc.
These give you additional semantic meaning to your HTML tags, which is good for SEO and other automated systems that look at your site. They are broadly backward-compatible, though in order to support them in IE6/7/8, you will need to include an IE hack such as HTML5Shiv. However, I would suggest using Modernizr, which includes the HTML5Shiv plus a stack of other useful functionality.
Some CSS3 features such as border-radius. IE doesn't know about this, but the result is that IE will have square corners and other browsers will have rounded corners. So nothing that breaks the site for IE users.
But if you really want to, IE can be made to support a number of CSS3 features, including border-radius, using tools such as CSS3Pie.
Instead of using SVG graphics directly, use a Javascript graphics library such as Raphael, which will draw SVG in browsers that support it, and fall back to VML for IE (which will even work in IE6).
Obviously stuff like the <video> or <canvas> tags aren't going to work in older browsers, but frankly, it'll take you long enough just implementing the features you can use straight away; by the time you're ready to take a step further, things will have moved on anyway.