This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
Typical pitfalls of cross-browser compatibility
Generally what are the main issues of browser compatibility come when we create a web page?
There's a million different things, but quirksmode.org is pretty comprehensive.
The main issuses can be divided into several categories.
Standards support
Each browser version supports a set of different standards up to a certain version, but there is usually some exceptions that are still not supported. A browser can for example support CSS up to version 2.1, except a few styles that are not supported.
Incorrect implementation
Although some standard is supported, it might not be correctly implemented. All browsers have had some problem like this from time to time, but Internet Explorer is known to have several well known problems that has survived more than one major version release.
Non-standard additions
Most browsers support some features that are not a standard yet, or simply an addition that will never be a standard. Notably Internet Explorer has plenty of non-standard features. A few of them has later been incorporated in a standard, but most of them will remain non-standard.
Variations within the standards
Although something is covered by a standard, it might not be strictly defined. Different browsers uses different solutions for what's not defined. How form fields look and act is one example of this. Although the basic operation is defined, they vary in function and appearence from browser to browser, and also depend on the operating system and it's settings.
System limitations
Different computers have different features available, which limits what a browser can do. The most common example is that different computers have different sets of fonts installed. Some fonts are almost always available, but which these are also varies depending on the operating system, so on any given system you can't be certain that any specific font exists.
Not that this is entirely helpful but IE 6
In more seriousness, the more complex things you try to do the more issues you will have, the simpler you keep your CSS and such the fewer problems you will run into.
I think that the main issue is related to the presentation of the web page. I tried to use CSS to give a style to the page but there were lots of problems to keep the page aligned between different browsers, and I tested only Internet Explorer, Firefox and Google Chrome.
This thing is more evident if you want to be compatible with older versions.
Related
I have my application running when i Run on I.E8 it is working ok
but on other browsers like chrome,Firefox or I.E10 the functionality seems to be bit different.
For instance I have a log out button link that is missing in the other browsers and only visible in i.e8
my question is for these kind of things what are the exact things that are responsible for these functionality.
Where can I look and what can be the possible fixes?
Web browsers render things differently - this is a very common and frustrating part of web development. Older versions of Internet Explorer seem to be the worst.
To help you be less frustrated for now, I suggest you develop things to work primarily in the latest versions of the more popular browsers (Chrome, Firefox and IE9+), then fix your code to work with the less used browsers afterwards.
You also have discrepancies in default values for browsers. For instance, one browser might include margins in a default value whilst another will not. There are way too many cases for me to list all of the things which are responsible, the only way really is trial and error coupled with reading up online.
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 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.
I want to use css3 features like
box-shadow
so for that
Do i need to include some special tag for css3 at top of page
which browsers currently support it
what will happen if use many css3 features and people view in old brosers.cause any error or so
Should i really use it or not
Do i need to include some special tag for css3 at top of page
No
which browsers currently support it
Most browsers support some CSS 3. No browser supports all CSS 3. When can I use tracks when support for various features was added.
what will happen if use many css3 features and people view in old brosers.cause any error or so
Unless the browser is exceptionally buggy, the error handling rules of CSS will apply and the unrecognised thing will be ignored.
This is only a problem if another style (which does apply) will render content unreadable unless the unsupported style is also applied. This probably can sometimes be worked around by applying the same property twice. First with widely supported values, then with less widely supported ones: e.g.:
color: white;
background: url(blue_0.5_pixel.png);
background: rgba(0%, 0%, 100%, 0.5);
Should i really use it or not
That needs to be determined on a case-by-case basis.
You use css3 just like regular css - no special declarations necessary. The only thing to keep in mind is that there are browser-prefix versions of many css3 styles that you'll want to use and while most of them use the style rules in exactly the same way, there are a few that have slightly different syntax (some older versions of Chrome, for example, use different gradient syntax.) When you do use the browser-prefix versions, always use the non-prefixed version as well following the prefixed versions. For example:
div {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Updated Answer: If you're googling this some additional info might be helpful because CSS can be very confusing on how to get started.
CSS3 Doesn't really exist, per se: By that I mean that there is no Formal CSS3 Standard ( per MDN ).There was a CSS, then CSS2, which were "releases" or "recommendations" by themselves. CSS3 is really a set of modules that independently progress in development and browsers adopt the modules and the changes at different rates and it is evolving more "organically".
There is nothing to install or "add-on". Its all built into the various browsers ( some more than others ).
What this means is that using "CSS3" requires a lot of study and testing on one's own site(s) to figure out what is acceptable in your own use cases. As has been stated, it may ( or will most assuredly ) be necessary to have workarounds and multiple styles that will default depending on the browser in use by the user.
How do I know?:
If you are new to CSS my recommendation is to develop for a single browser at first to learn CSS ( personally, I tend to dev to the latest versions of Chrome as my personal standard, but this does change for me. I used to dev to FireFox ). Then go back and adapt it to other browsers by testing and seeing where it has issues.
How Old to Adapt to:
Also, you will want to identify how far back in browser versions you are willing to "adapt" your sites, ie: maybe stopping at IE 11, Chrome 49, Safari 5 as well as mobile versions, etc. This can be researched here to see which browser versions still have enough current user base to bother with. Once your site(s) are up and running browser usage can be tracked to get a better idea of your own user base's browser versions and adapt accordingly.
If you detect a user with a browser version that may not work well a dialog can be shown to let them know which minimum browser version is best on that site.
Testing Browser Compatibility:
Personally, I use https://crossbrowsertesting.com to test different browsers and versions. It has different browsers and operating systems that can be selected including mobile devices.
Its also a good idea to constantly check the compatibility tables in the documentation as those change on a regular basis.
Library:
As you continue to develop with CSS you should build up a library of how you prefer to do things and keep that updated as CSS and browsers change.
Avoid the "Bleeding Edge" Versions:
Its usually best to avoid the absolutely latest versions of CSS as the current browsers will tend to lag way behind as well as the legacy browsers that are still out there.
Enterprise or In-House:
If you are developing for "Enterprise" or "In-house" only web based apps then you have a lot more freedom to use the "latest and greatest" as you may have more control over which browser versions "must" be used and even whether or not you develop for certain browsers. I've had instances where we only developed to a single browser and version and the users had to be on that version, which can be better controlled in an organization like that of course.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Should i be using HTML5 and CSS3?
How do you decide if you need to use html5 and css3? and what will be the pros and cons in choosing that approach.
Pros and cons I can think of:
Pros:
cleaner codes
support for #font-face
shadows and rounded corner
animations
Cons:
not all browsers supports
Can you help me decide? How do you decide if you're in my situation?
Thanks!
It won't be time to switch to "HTML5 and CSS3" for a very long time indeed.
It is time to look carefully at the features added by HTML 5 and CSS 3 and decide, on a case by case basis based on:
Browser support
Consequences of using them in browsers that don't support them
Benefits gained
Fallback options available
… which specific features it is worth using today.
A well designed site should always degrade gracefully and both HTML and CSS support this. The goal should not be to make your look fantastic in older browsers - only to make your site USEABLE in older browsers. A well designed site should be useable with CSS turned off.
I think a clear YES can come only after the target browsers are compatible. However, if my target browser supports the specific features of HTML5 and my development is limited to these supported features, HTML5 can be used.
Some people still use browsers once used by the ancient egyptians, like IE6, and they will not be able to view your pages (and specifically new styles/tags).
If you have a public website, accessable to virtually anybody, I suggest waiting for at least a couple of years before the big convert.
If, on the other hand, you have a controllable group of users, like the intranet site I'm working on, you can easily enforce the use of more modern browsers that support this, like Google Chrome, Apple Safari, Mozilla Firefox, of Internet Explorer 9 (just released).
I believe it is entirely down to who you are targeting. If you are targeting developers, Stack Overflow for example, then I think you can use the new technologies. If you really need to display a message to upgrade then I am sure developers would understand.
You should not use it for general sites for something such as a shop which has a very wide audience. This is because a lot of them would be using IE 6 - 8. The fact that no one on XP (my whole office + pretty much everyone else I know) can upgrade to IE9 which supports some features is frustrating too.
So I don't think there will be a definitive day where everyone can use it. It is just a case of looking at the market share of browsers and your target audience and deciding if it is worth giving 99% of people a better experience and ignoring the other 1%. Although I am sure those figures are completely off, it is probably a lot worse.
In conclusion, it depends on your audience and if you are willing to not support a varying number of users.