I know there are programs like dreamweaver but none of them has significant success when it comes to creating automatic cross browser compatible html and css codes.
I was wondering, is there a framework or program that i can use for creating more cross browser compatible HTML and CSS layout ?
Currently, i am using a virtual windows xp version running on vmware to check how web pages looks in IE6, and manually using Chrome, Firefox, Opera and Safari.
What you want doesn't really exist as many have said. I do try to safe myself most of the hassle you describe by consciously using only things that have proven to be widely supported and with which I have good experiences.
The perfect solution doesn't exist but here are a few things to consider that could make your life easier:
Use a css reset so all default browser styles are gone.
Force yourself to write HTML that validates against a doctype. Personally I use only
XHTML 1.1 (which is very strict) but gives high compatibility in most browsers.
Use only fonts that are common and widely supported.
Limit your use of javascript to the absolutely necessary, and use jQuery where you can, as it will "often iron out differences for you". (suggested by Andrew Barber)
This way you'll end up with web sites that have a very high chance to be cross browser compatible
There is no reliable, broadly applicable solution to this beyond testing, testing, testing. The issues are so complex that it's essentially impossible to build a tool that could do this for anything close to every possible difference between the browsers.
Incidentally; there is a tool called IETester that you can use to be able to run multiple, previous versions of IE.
EDIT: You (motto) and others have noted issues with IETester. While I have not experienced issues with it myself, that could very well be because I have simply not used it to help me with layouts that use things which happen to be buggy in IETester.
Comments below note that the Developer Toolbar in IE9 permits us to use the IE7/IE8 rendering engines. I would guess this to be a more reliable way to test layouts for those browsers, and I plan to begin using that instead, myself.
I will then likely keep using IETester just for assuring basic usability for IE6.
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
I am playing around with the idea of using a dynamic stylesheet language to add functionality to the traditional CSS. This would come in very handy for a project I am working on. Thus far I have my eye on LESS.
I would like to have it client based, so probably JS would be my choice. However, I have some questions that I hope someone could give me a tip on:
LESS states it works in Chrome, Safari and FF on client side. What about IE? No support at all? How would the CSS behave in IE then?
are there any other comparable tools besides of LESS? I have looked into SASS, however it seems to be Ruby based, which I am completely unfamiliar with.
LESS supports IE. I use that functionality.
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 :-)
This is a story anyone developing web applications is surely aware of - You create a site, which is well coded and elegant in the browser of your choice - until you run it in a different browser, which a lot of the time required hacking and slashing to create a functioning site.
I wish to enquire the techniques used by developers to ensure their code works well the first time around in the plethora of web browsers with all aspects related - such as :xhtml, html5, javascript, css, etc..
As a side note, what developers do about IE progress - with the majority of the world still on IE7, and IE9 only including new css and html standards how long do you think standard practice will(if ever) take to achieve?
I am quite interested in your response, as I cringe at the thought of cross browser compatibly issues.
My advice: Use a decent CSS reset or framework. Good CSS frameworks are: 960, Blueprint, YAML and YUI grids.
For your javascript you should use a library like: JQuery, mootools or Dojo. You will still have a few browser incompatibilities, but using any of these tools should fix about 90% of them.
Good luck! (ps: I use Mootools and Blueprint)
If you really want to have some fun with the IE6 crowd, try this: http://ie6update.com/
All kiding aside, with a strong understanding of box-model tactics, a great framework, plus quirksmode.org, you should have no reason to have to do a bunch of exotic hacks to make your site work. Design intelligently for standards that are viable today and save the bleeding edge techniques for demo sites. High-value corporate sites don't HAVE to be exotic, they need to be good and reliable. Otherwise, be willing to design parallel sites so that those who refuse to update can at least get by. Most of all, stick to the standards...a few W3 errors is too many.
Understand your audience too. I can't tell you how many designers do dark on dark and small fonts for older crowds. Likewise for using exotic javascript or worse flash where it's not appropriate. Solicit feedback from others....in reality, even if we "get" this game, we really only really understand our own preferences.
Practice progressive enhancement. For example, Jquery UI will round corners, but will gracefully degrade to square for the IE (behind) crowd. Consider using HTML 4.01 strict as opposed to XHTML because it is closer in syntax to the future, HTML5. (XHTML is no longer being advanced anyway)
Finally, test everything you do in multiple browsers or in a tool like Adobe's browser labs. Turn off Javascript and CSS...is the result acceptable? Run without flash...does your site work? How does it look on a mobile browser?
It's not a fun game to play sometimes, but it's what makes us professionals. Good luck!
I am developing for all major browsers out there (IE 6+, Firefox 3+, current Safari, Chrome, Opera 9.5+). My main advice to keeping code clean and eliminating extreme hacking sessions is the following: Test your page simultaneously in all Browsers. It is a lot easier to fix multiple small Problems than fixing a complete page in a single pass. Style issues are really easy to fix when working this way. JavaScript is a bit more challenging, but still much easier when working like this. jQuery often helps with this kind of problems. I include the new standards here and there but i am making sure, that graceful degration takes place. Standards compliant browsers get the full experience. Older ones get less eye candy while still delivering a working page.
Learn the standards.
Write code according to the standards.
Test the code in popular browsers, and see where it breaks.
“The standards” are HTML, CSS, JavaScript and the DOM. jQuery does a lot to smooth out JavaScript and DOM inconsistencies between browsers, and is a bit of a nicer interface to the DOM in my opinion.
“Popular browsers” at the time of writing are IE 6–8, Firefox 3, and the latest versions of Safari, Chrome and Opera. Safari and Chrome have hardly any differences as they use the same rendering engine, and Safari, Chrome, Opera and Firefox have very few differences as they’re all about the standards.
I cringe at the thought of cross browser compatibly issues.
They‘re really not that bad. (When you ignore IE. And its issues are at least reasonably Googleable when you encounter them.)
I think it is important you start with a good set of defaults and follow best practices, it is not much of a hassle to work with deviating browsers. I worked on http://html5boilerplate.com so we have a list of links up there (along with the actual boilerplate) that make a web developer's job much easier.