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.
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.
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'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.
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.