I'm unsure which browser is the best for a web development. I know that Firefox is the most favoured for the common but it also does tolerate programming failures, so it is not 100% strict.
With what browser should I develop my website to have the best result on all other browsers, so I don't have to fix too much in the CSS?
From personal experience.
I use chrome. For me 100% fine on chrome is like 70% on IE, so I switch between the two a lot.
Chrome 100% = 98% FF , 99.9% Safari and 70% IE.
This is what I've noticed from my experience.
I personally use Chrome, as its built-in developer tools work great, and it has the widest HTML5 support. However, that's not necessarily a good thing because even if your website works 100% with the better browsers, it will probably break with IE.
If you need your website to work with IE, you should constantly test with it. Use the lowest common denominator.
At this point, all of the major browsers implement a lot of CSS3 features a little differently (box-shadow vs -moz-box-shadow vs -webkit-box-shadow for instance). Honestly, your best bet is to use IE, Opera, Firefox and Chrome (I'm pretty sure Safari and Chrome both run off of webkit, so they should be the same). As for what to use as your primary browser, it all depends on what you're looking for really. I enjoy using Chrome, but others swear by Firefox (I find it too clunky).
Now as for older browser support, well that's just an entirely different discussion ;)
Simple answer, all the major ones.
When you develop for the web it's best to think from the view point of the user viewing the site. The main issue is that each browser will render a webpage a little different and that is the main problem you need to solve.
To help with this issue, you'll need to work with some cross-browser rending web-apps such as http://browsershots.org/
To more directly answer your question, I'd go with Chrome with Firebug. Asides from that, you should be able to create CSS browser-compliant sites with practice.
Good luck!
Develop in the browser of YOUR choice with the best development tools for YOU (e.g. Firebug, FirePHP in FF or the Developer Tools for Chrome). Try to use standard, crossbrowser compatible framworks for JS, CSS and available templates for HTML like "Boilerplate" HTML 5. And then test everything continously on the mainstream browsers (IE, FF, Chrome, Opera, Safari).
This way you won't waste your time afterwards fixing browser specific bugs...
I prefer using Firefox, simply because there are so many useful tools for it - Firebug, Web Developer's Toolbar and so on - but really it doesn't matter as long as it's not Internet Explorer.
This is because IE has so many quirks that it's best to get it right in all other browsers, then worry about adding workarounds or other fixes to make it look right in IE (getting things right in IE can take a very long time).
Related
I just wanted to get people's take on using the IE7 compatibility meta tag in IE8 to render pages via IE7 rather than IE8?
This topic doesn't seem to have been mentioned for a while, but with the relatively recent news that Microsoft will be implementing automatic updates for IE, this means that IE7 will be phased out soon.
Is it a really really bad move to use the IE7 compatibility tag in a site NOW? The reason being? rounded corners. I have a site which heavily depends on rounded corners, and so rather than using loads of Png's specific for IE, i would love to implement the DD_roundies technique, which seems to only work effectively in IE7, not IE8. (using parallels anyway, which i don't 100% trust).
What are your thoughts people?
Is it a really really bad move to use the IE7 compatibility tag in a site NOW?
Yes, it means your code is broken. Rather than using compatibility hacks, you should fix your code. It's a bug that it ever worked correctly in the first place.
Also, it's worth noting that the compatibility mode switch is there for the user, not for the programmer. The programmer has control over her code, and she can test and fix it to make sure that it works properly. The user can't do this, so he has to resort to hacks like compatibility mode.
...with the relatively recent news that Microsoft will be implementing automatic updates for IE, this means that IE7 will be phased out soon.
IE 7 has already been phased out. Automatic updates may help prod some users into making the leap, but there's no guarantee that it will make a difference for everyone. If you must target the broadest possible base, you'll still need to support IE 7 for a while longer.
And even if IE 7 does go away, IE 8 isn't going to go away for quite a while longer, considering that IE 9 is not supported on Windows XP. You'll need to make your code work in IE 8 then, so why not do it now?
Using IE7 mode means your code is broken. It will be harder to make it work in standard browsers, and of course as time goes on it will just get worse.
DD_Roundies is unsupported by its author and is considered dead. Leave it that way.
Use a more modern library for rounded corners, like CSS 3 Pie
I am redesigning a website and finding problems with small rendering differences between IE FF and Chrome. Am using CSS and . Is there any way to avoid these differences?
Also, even when I fix the diffences, FF still ocassionally renders incorrectly on some computers. It doesn't appear to be resolution related but only ocurrs on laptops with 15" screens or smaller.
Any ideas or input welcome as I would prefer not to have these differences in the first place to avoid having to make numerous tweaks to fix. Thanks
Different browsers, and different versions of browsers render HTML and CSS differently.
There is no one way to create a web page that will make it look the same in all browsers.
You simply must pick a subset of browsers you wish to support (such as IE6+, FF3.5+, Chrome 9+) and make them look as good as possible in those browsers.
You will never get it exactly the same in all browsers.
Webkit is an awful renderer in my opinion. As a web designer/developer, I take into account how my design looks at every magnification. Webkit handles this extremely poorly. Margins, padding, and borders all get rendered extremely poorly across various magnifications and there is no CSS you can use that is "cross-zoom" compliant in WebKit. Zoom in and out of any webpage in IE, Firefox, Opera and it is consistent. Take a look at this site, for instance:
http://development.mminc.co/davidphotos/
Try using the carousel at the bottom at different magnifications in IE or Firefox. Works fine, right? Now try the same thing in Chrome or Safari. BOOM! A developer's nightmare! Please, if anyone knows of any tricks of the trade to get Webkit to behave with something that even Trident is able to successfully do I'd like to hear it. I've heard of a jQuery zoom plugin, but that is sort of a last resort. I've looked everywhere for the issue but no one even mentions Webkit zoom issues. It's like it's taboo or something. Personally I think it's one of the biggest blunders of the modern browser era, especially when such a (otherwise) great browser like Chrome is giving me more trouble with presentation issues than IE7.
EDIT: I feel I should be more general and use an example where it is obvious only HTML and CSS are implemented.
http://www.gamespot.com/
Webkit forces a line-break with the top menu w/ zoom tests, but other browsers don't. It is a major issue with the engine and if there are any concrete solutions I'd like to hear them. If there isn't then I think this issue should be addressed and resolved immediately; it is an eyesore to users and a nightmare for developers. The fact that it isn't addressed anywhere on the net is troublesome.
This isn't answering how to fix WebKit zoom issues in general, but it should help with your specific problem.
You're using jCarousel.
Even the simple demo shows the same problems you describe.
So, that plugin is simply broken when it comes to zooming with WebKit browsers.
You could either ask the author of the plugin for advice, or find a different carousel plugin.
For instance, this one doesn't seem to have any problems when you zoom in using a WebKit browser:
http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm (look at the "dispItems" demo)
Hopefully now I'm posting the right question :)
In web application I'm using devexpress toolkit, and have the right (correct) result in IE only (using also some java-script), on clicking event for example is working in chrome and safari, but in Firefox and Opera not :(
The grid view are not showed properly in division in any other browser, except IE!
Have you got any idea where I'm missing something ?
You are most likely using non-standard features that are only supported in IE (and perhaps a few more, depending on the feature).
If the page only displays as intended in IE, the code is incorrect and relies on non-standard features or rendering errors in IE. IE has several rendering errors that no other browser has, which makes it less suitable as the first stop for testing. If you build a page for IE, it's almost a guarantee for it not to work in any other browser.
To make the page render correctly in all browsers, you need to first make it work in a browser that follows the standards more closely, like Firefox. Trying to get other browsers to emulate the same rendering errors that IE has would be very time consuming, and doesn't give a robust result.
You might need some extra tweaks to make it render correctly in IE, but this can usually be accomplished in a standards compliant way, for example by setting a specific size on certain elements.
Mine is solved by that...
Devexpress Gridview properly Rendering problem for browsers
I'm having major rendering issues in Safari with the web application I'm working on. Most of the design is done with divs using absolute positioning. This renders fine on Internet Explorer, Firefox, Chrome, Opera, Netscape, and konqueror. In Safari, it's just a jumbled mess.
Does Safari lack support for absolute positioning of div elements?
What is the best way to trouble shoot and find out what is going on with the safari browser?
UPDATE: I'd like to note I did find the issue, and I would like to thank everyone that gave suggestions. It was the WebKit's "Inspect Element" that gave the most useful information. It appears that their were conflicts with inline styles and styles from the CSS. While safari grabed the styles from the .css file, the rest of the browsers were using the inline styles. i was able to see those conflicts with the information in the tool that was suggested.
The problem may lie somewhere in your JavaScript; one of the most noticeable things about Safari is that it likes to stop executing JavaScript after any errors.
CSS is likely not the issue, since Safari has better standards and CSS support than any other browser out there (alright, I said it.)
Use the built-in Web Inspector in a recent nightly build of WebKit to track down your issues.
1. Safari's support?
Safari is actually a decent browser. If it has its flaws, they aren't any worse than those of any other browser, and they aren't of the class of the old IE browsers, which had very serious problems and lacked even basic support for web standards. To answer you question specifically, yes, it does support absolute positioning.
Safari can certainly render modern X/HTML CSS designs, and since your audience is largely using Safari anyway, you may as well forget the notion of dismissing the browser. It's a good browser, and in any case we're powerless to change it. We simply need to take care of these bugs, whatever they are.
2. How to go about debugging?
Without having a specific example, it's not something anyone can really help you to do. It seems fair to say that you're having some issues controlling css-based layouts. You may have some invalid markup, which in some cases could produce the kind of extreme browser-specific abnormalities you've described.
Start with the basics. Validate your markup and CSS.
Markup Validator
CSS Validator
Make sure you're rendering in standards mode.
Seek out answers to specific questions
If everything validates and you're still having problems, you'll have to track them down one by one. Even if you rebuild the page, piece by piece in Safari in order to see where things begin to unwind, it will be worth it to do. If during this process you really don't understand why a certain behavior exists, you'll at least have a specific question that you can use to poke around for answers. It may be answered already on SO, and if it isn't, you can ask it.