After all the latest news and talk about HTML5, I would like to know whether I can use HTML5 to create a website as of now. I mean, some features are supported by few browsers, while few features are not yet supported. So is it possible to create a full-fledged website at the current state?
The question is not whether you can create a full-fledged website, but whether you need its functionality to be identical in all browsers. The answer to the former question is yes. The answer to the latter question is still no.
I built a site in 100% semantic HTML5, tested only in Firefox, Chrome and Safari. When I was done, I added these three scripts and loaded it up in IE6 and IE7 - looked pixel-perfect! ok, perfect is an exaggeration. It doesn't look exactly the same, but it looks fine e.g. no broken layout parts, everything is legible and functional.
HTML5 Shiv script - Add HTML5 element support
ExplorerCanvas - Add <canvas> support
IE PNG Fix (IE6 only) - Add transparent PNG support
YMMV but these will almost certainly get you at least 90% of the way.
As with all new technologies make sure your website degrades gracefully.
So don't use the new <canvas> tag as the main part of your website, but you can provide a little widget or something(which is not necessary or part of the main content) which uses it.
Or if you use the <video> tag make sure that you have a backup Flash way of viewing the video as well(especially since the codecs supported by <video> is completely fragmented at the moment!)
Make sure that people on older/IE browsers can still see what your site is about and ensure it looks decent to them. I have to do the same thing with the CSS3 features that I make use of in my work.
I would say check your stats first..how many users are still on internet explorer and how important are those users to you. In other words if 80% of your users use a browser that doesn't support HTML5 then I would say don't do it
You sure can. I could write all the things you can do with HTML5 now, however I'll just link to a great article posted at http://html5doctor.com.
http://html5doctor.com/how-to-use-html5-in-your-client-work-right-now/
Charlie yes it's possible, but like you said some features are supported by most modern browsers, although not all of the features are supported at the moment . Take a look here: http://html5demos.com/
Related
I'm really confused about flexbox. Is this good idea to use it for modern browsers? I'v heard that I should not use it for whole page layout but I dont know why. And where is good idea to use it and where not?
I'd say no if you need Internet Explorer support.
For Edge and other browsers i'd recommend using it ... See CanIUse for supported browsers.
If you do need older browser support, rather go with some css grid framework or include lower IE specific styles using conditional includes or take a modernizr-like approach.
Plenty of crossbrowser and browser-specific solutions to your problem ... you have too choose, can't say more since this is a very broad question which can trigger various types of responses depending on people's experience and personal taste.
One of my development teams have written a couple CSS files that work flawlessly with IE. However, the UI is all messed up when rendered on other browsers.
Is there a tool that can take these CSS files and convert them into cross browser version? Unfortunately, these CSS files are too large and the expertise desirable to cook cross browser CSS and test it is lacking in the team at present.
The most recent versions of all prominent browsers need to be supported.
No, because that would require a tool to understand your design intent and then fix it. If it was so easy to create cross browser compatible css by just using a magic tool we would all be using it.
Usually I see this done the other way around. Get it to work in all browsers and then hack in fixes to IE. My guess is that a few simple simple things are grossly affecting the layout. I would fix it for a more standards compliant browser like Firefox and then hack in fixes to old versions of IE as necessary.
You might want to try Prefixr. It did help me with some CrossBrowser issues, but I programmed for Chrome. Don't know how great the compatibility is the other way around.
Is there a way to make sure your CSS is cross-browser capable?
I tend to work with strict doctypes, which solves a lot of problems.
Study http://www.quirksmode.org/ by Peter-Paul Koch
I refer to this site all the time.
However, as Ernest Friedman-Hill wisely pointed out, testing...
No, not absolutely sure, unfortunately. Testing, testing, and more testing is the only solution.
Here are a few tips:
Try not to use CSS3 (yet).
Don't use browser specific selectors, such as ones prefixed by -moz- or -webkit-
Use a CSS reset, like http://meyerweb.com/eric/tools/css/reset/
There are a few ways to do that.
First you will want to check on a few browsers when you are done with your website. Some good options to do that is Adobe Browser application, another is browsershots.com and you can find others.
Another great rule of thumb is to use an established framework that is already cross-browser (my favorite being 52framework at http://52framework.com ).
And honestly after years of writing CSS it seems that you will just get use to writing the best possible CSS and you will have cross-browser code of the get go.
There really is no sure way to write perfect CSS first time around (there are validators out there that can help a little, Dreamweaver has a specific tool that will validate code and CSS and let you know if its capable or not.
Good luck!
Your best option is to test in each of the browsers you want to support. If you don't have access to all the browsers there are for-pay web sites that will take screen shots of your site using different browsers:
http://browsershots.org/
Did you mean "capable" or "compatible"?
Anyway, I always use the W3C CSS Validation Service. It checks your CSS to make sure it is valid. After passing this validator, chances are your CSS is cross-browser compatible. But I would recommend also manually inspecting your CSS in different browsers. Do check out http://www.css3.info/ for details on how different browsers implement different features of CSS 3.
I would also recommend you install the Web Developer Toolbar if you're planning on doing heavy web development. Great tool for Firefox and Chrome.
Firefox's Latest version
IE7
IE6
IE 8
Which browser we should use to see HTML css rendering for always and why?
Edit:
My question is not on which browsers should i test site before go live. i will try to test on all possible.
My question is which browser should i choose during layout development process and why?
because while development it's not possible to see every step in all browser it will waste time. after making a layout we can test in all but during development one browser would be better.
Uhh... every one of them?
I personally develop with Firefox 3.6 for convenience and the availability of Firebug, header sniffers and other tools. I try to test in all the browsers you mention before anything goes out for anybody to see (a client for example). But I don't think there is a real "best" choice here because in the end, you will need to test for every browser you need to support anyway.
Use the most up-to-date css compliant browser with a good debugging tool e.g. Firefox 3.6 and the Firebug plug-in.
Then check in the other browsers you want to support for your users and backwards correct any errors.
Do not attempt to make the site look EXACTLY the same in all browsers, you will be wasting your time.
As long as the effect is similar in older/other browsers (for example you could use border-radius for Firefox/WebKit browsers and this will degrade nicely for browsers that don't support border-radius) and the site is usable and fulfills it's purpose, then your ok
DONT WASTE TONS OF TIME ON IE6. Use a conditional commented stylesheet and just get it usable...
In the head of the document
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IE6.css"/>
<![endif]-->
It all depends on your target user group.
If you're working for customer that uses IE6, you will have to test for it. Sad, I know.
If you're designing a site for general public, then test for current versions of major browsers. Firefox, IE, Opera, Safari and Chrome(?).
Also: develop according to standards then fix whatever does not work in one browser or another. Not that you develop for IE, then trying to fix everything that suddenly falls apart on all other browsers.
During developing NOT testing I use this combo :
firefox
firebug extension
webdeveloper extension
live http headers extension
Give it a try, you won't regret it, you can make changes to your css IN BROWSER and then change your code (No more refresh needed for that one annoying one pixel offset), check to see where is the fault interface or code logic and plenty more.(Page Speed & YSlow to analize your page speed etc.)
I whole-heartedly agree with Pekka.
I develop everything within Firefox and use the excellent addons available during development (Firebug / Web Developer Toolbar / etc).
A suggestion would be to test often in other browsers as well....I would recommend every time you go to take a little break check it out in the other browsers to see if there are any issues, and then make a note to fix them and allow your website to be rendered properly in all browsers.
You really don't want to exclude any user based on his/her browser preference, so make sure
it works across the board!
edit
Also a good point from one of the other users...IE6 is in the process of being phased out, however if you are looking to have any users in a corporate environment you don't want to exclude testing this either!
You need to test your css in all the major browsers, that includes IE (6, 7 and 8), Firefox, Chrome and even Safari and Opera.
You can probably get away with just using the latest versions of Firefox, Chrome etc. as they auto-update and so users are less likely to be using older version (though it's not unknown).
IE is a problem because so many users - particularly corporate users - are running older versions.
Choose one, it doesn't really matter which as long as it has good development tool support, to develop in and get the site looking good in that. Then test in the others. Which order you do this and how much effort you want to expend will depend totally on your target audience. From my experience Firefox with Firebug and even (dare I say it) IE8 with it's built in developer tools are good choices. The advantage here is that you'll cover the majority of users with these. However as the browser market is getting more fragmented you will need to test in others.
This is an interesting question, I'm going to assume that you have a process that means that first you develop your page and then you do cross browser testing to make sure it works everywhere - so the question then becomes which one is going to get you to the best starting point for getting to working "everywhere" (definition of which will depend somewhat on your target audience).
This used to be easy - according to my (then) staff Firefox had good standards support and the best tools - so get it right in firefox first then adapt to cope with everything else, now its a lot less clear as IE8 has a very decent set of dev tools (and is better behaved than its predecessors) and Chrome is now getting into the act - again with a good set of tools and extensions.
My gut feeling is probably Firefox, Chrome, IE8 in that order - but I'm not doing anywhere near enough CSS work to assert that that's right.
You develop in Firefox (you have firebug to adjust things), you test in safari/chrome & opera (all of them is ok with standards so you have low chances to have bugs in those) and you debug in IE. Because is impossible to have a fully functional in ALL browser from one try :D
I use my main browser (Chrome) for basic progress, and frequently check all other browsers for bugs and layout problems.
I think If we choose firefox and IE 6.0 both for website design, the site will be look almost same for all browsers, because rest of IE 6 & 7 all browsers' HTML rendering pattern is almost same. So If we make css from start considering firefox and IE 6.0, bugs would be in less numbers and In this way we can make all browser compatible website.
Please give me feedback
I do it in ie6, the most primitive browser which is still in use.
I think any thing that will work on ie6 will work on any browser.
I am trying to figure out the most efficient way to ensure cross-browser compatibility. I have done a bit of research and learned a few interesting things such as the fact that Mozilla/Firefox can't handle a class that has a name starting with a number. Is there a way to make a CSS work for any browser or is it better to just develop multiple CSS and add code to choose which to use based on the browser being used?
You might consider using a CSS Framework such as Blueprint. It includes a CSS reset that should help.
Also, you might want to look at Yahoo's CSS reset
An aside to clarify a point:
... I have done a bit of research and learned a few interesting things such as the fact that Mozilla/Firefox can't handle a class that has a name starting with a number....
Sorry, but that's not a Mozilla limitation, it's in the CSS spec: class names must not start with a number. Any browser that allows them to isn't enforcing the rules properly.
Answered here on StackOverFlow. The relevant part of the spec is at http://www.w3.org/TR/CSS21/syndata.html#characters (see the 2nd paragraph).
To answer your question: There is no way to make a page using just one universal css and have it displayed equally in all browsers, unless you only use an extremely small sub-set of all available css (selectors, values, etc.).
The way I work is:
Use a css reset
Develop for a browser that adheres to the standards pretty well (Firefox, Chrome, Safari, Opera)
Patch things up for IE using conditional comments (because you'll probably need things that don't validate)
A good starting point would be to use CSS reset such as: http://developer.yahoo.com/yui/reset/
Your goal should be CSS that works on all browsers. If you start out with a CSS file per browser, where do you stop? Mobile Safari? Flock? Konqueror? Every version of every supported browser?
Eventually, you might need to compromise, but you can cross that road when you get there.
Regardless of your infrastructure/framework/etc you should test your code on all major browsers. If possible avoid using style sheets for browser specific problems. Browsers will change and adapt which means you might get stuck having to update a bunch of websites when new browsers come out.
CSS is a fickle beast and I haven't found any solution that covers all the quirks except for a lot of due-diligence and testing.
You might use a framework that does this for you, such as GWT, but keep in mind that you will still have some issues.