I have just started web development after a few years. Mostly in the past I would specify a style-sheet dedicated to IE6. Now, Chrome and Safari seem to be rendering elements better, over FireFox.
What is standard procedure for external style-sheets these days? IE6 (STILL?) - IE8? FF even?
It would be greatly appreciated if anyone has advice specifically catered to marketplace development, ie XHTML / Wordpress development.
There is no specified number of stylesheets. Usually it is one for IE and one for rest of the browsers. Note that there exist solutions such as ie7.js or CSS3 Pie to make IE behave like standard-compliant browser.
I personally use 2 stylesheets. One core one, and one for IE6.
Most of the modern browsers simply ignore anything that they don't support, and dont have quite the sheer number of behaviours that require hacks.
Given that a stylesheet isn't required at all, the answer is none. I would still say you need only 1 though. (If you've created your css properly and used a proper doctype). Technically you shouldn't need to have browser specific styles at all. And for the few times you might, you can use Star Hacks for IE...
I think question you're asking relates back to the much bigger topic of how best to handle cross-browser issues.
It's a wide and varied topic, but to help you with you're specific question about CSS branching (forking)... you may be interested in the following article from "A List Apart"
"Stop Forking with CSS3" http://www.alistapart.com/articles/stop-forking-with-css3/
Cheers.
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 features can I use in HTML5 and CSS3 without thinking too much about IE6 and similar? What features should I avoid?
What features can I use in HTML5 and CSS3 without thinking too much about IE6 and similar?
Define "too much". Anything that is in HTML 4 and CSS 1 makes for a very safe baseline…
On a more practical note caniuse will tell you when support for a particular feature has been added. You then need to decide if it will degrade cleanly or not.
That said, don't go looking HTML 5 / CSS 3 / etc features to use. If you have a problem, look for a solution. Don't look for a solution and then try a find a problem to solve with it.
http://www.caniuse.com/ is a great resource when you have a particular feature in mind to use - but are but sure the of browser compatibility.
In addition, many HTML5/CSS3 features have additional links with further information available on Can I Use.
Paul Irish has an awesome commented HTML5 Boilerplate.
From "Why it is awesome":
Cross-browser compatible (IE6, yeah we got that.) HTML5 ready. Use the
new tags with certainty.
Open this website in IE6 and find out: http://html5test.com/
(I don't have IE6 installed so I can not check it for you atm)
You also might wanna have a look at: HTML5 Cross Browser Polyfills.
I guess you have to avoid many things :-)
I would start by avoiding:
- Drag and Drop API,
- File API
Quirksmode has always done me well.
I think you should be a little more specific in your question - I don't worry about IE compatibility so I would say use them All. However I know that view is not shared by all, So i think a better answer would be use them all until you run into one that explicitly is not compatible with your target browsers / os
Once you start to see problems then work on correcting them.
I will say it once again - put together a specific list of supported browsers / os and you will be much much better off (hint - don't support < IE9 if you want to use the majority of these features)
The HTML5 doctype (<!doctype html>) works just fine in IE 6 (in as much as it puts IE 6 into standards mode).
Aside from that, I think pretty much nothing new in HTML5 or CSS3 (apart from #font-face) is supported in IE 6, so you’ll have to at least decide whether the experience in IE 6 is good enough. Usefully though, the new features generally don’t have any negative effect in IE 6.
For example, the new <input> types like <input type="date"> will render just like <input type="text"> in IE 6. So you’ll have to decide whether just having a simple text input is fine for IE 6 users, or whether you need to provide date-picking functionality using JavaScript.
This is pretty much the question with all HTML5/CSS3 features — can users of older browsers do without them, or do you need to add an alternative implementation?
The main exception is new tags in HTML5 — Internet Explorer 6 won’t let you style tags that it doesn’t know about, unless you create an instance of that tag using JavaScript. (The same is true of the HTML 4 tag <abbr>, because IE for some reason doesn’t know about that either.)
I have a site, here, that I'm working on which uses some html5 and css3 elements which obviously do not load correctly on certain browsers and i have a few questions about what I can do and I don't have much experience with any codes like php or javascript. these questions are kind of a mess as well - I've been searching all over not really sure of what I should be looking for.
How would I go about creating a popup based on which browser is being used, if possible?
I understand that I can use conditional comments for IE but IE is not the only unsupported browser. Is there a way to activate certain elements, or div's depending on the browser?
How would I go about creating a version of the site that would be shown instead of the unsupported version?
Is there a better way to do this?
These questions may not be the right ones - if not and you know an answer to the question I'm looking for, please, go for it! Thanks!
There are a few tools I would recommend:
Modernizr
Feature detection, allowing you to target features in CSS and JS. It doesn't add features, just lets you test for them.
Includes HTML5shiv functionality Also does a lot more – if you don't use the other features, then don't use it, it does slow down page loads, but is worth it if you need it!
HTML5shiv
Very small, allows you to use html5 elements in IE, nothing else.
CSS3PIE
Lets you use border-radius, gradients and box shadow in older versions of IE. Also can allow PNGs in IE 6. Adds a noticeable delay to page load.
ie7.js (and ie9.js)
Gives you many CSS3 selectors, min and max width, multiple classes and fixed positioning. Also can have a png fix if you like. Doesn't seem to slow things down much.
You can use the moderizer script to bridge the gap for html markup.
I wouldn't really worry about CSS3 working or not in IE. If you have a supported browser you get an enhanced user experience and if you don't you would just get a normal one.
Are there any good notes and guidelines that one should think about when developing sites that must support Internet Explorer 6?
I'm not looking for explanations of the abundance of bugs that we have all learned by now. I need some general informations on, e.g., elements that one should prefer for certain tasks, things that simply does not work in IE6, CSS tips, etc.
here are the biggies i can think of right now:
No Alpha Transparent PNG Support
No Hover States except for the <a > tag
CSS floats behaving unexpectedly.
Can't use max/min width/height.
The Box-model conflict (padding is not added to the width of elements).
sometimes doubles margins.
IE6 doesn't support position: fixed.
...and i'm starting to get depressed so i'll stop here.
I'm fortunate in that I don't have to support IE6 any more. However it is a recent memory, so you have my sympathies.
Go to Quirksmode.org. This is an excellent resource for finding out what features various browsers support. (seeing all the red in the IE6 column will depress you though!)
If you plan to do any scripting at all, use jQuery rather than trying to work with plain Javascript: jQuery makes considerable efforts to be cross-browser compatible, even in IE6. It isn't 100%, but it makes a pretty good go at it, and give you features that would otherwise be completely impossible in IE6.
The following tools will make your life easier:
Dean Edwards' ie7.js - a JS library aimed at making IE6 more compatible with standards (he's also written "ie8.js" and "ie9.js" which extend the original ie7.js to add more features missing in various versions of IE)
Modernizr - a JS/CSS library aimed at helping you work around incompatibilities in old browsers.
IEPNGHack - allows you to use PNG graphics with transparency in IE6.
Whatever:Hover - allows you to use the :hover CSS style with any element type (IE6 normally only allows :hover for <a> tags).
CSS3Pie - a library aimed at giving IE6/7/8 some modern CSS3 features, including border radius.
There's probably more, but that should give you a start.
One thing to make clear to your employer though is that as long as they insist on using or supporting IE6, you will be unable to produce a modern feature-rich web site. There are limits to how good you'll be able to make it, even with all those hacks. Plus it'll be slow: IE6 is painfully slow at the best of times, and all those hacks will only make it slower.
Best of luck.
While simply saying "Don't Support IE6!" might sound real nice and easy to those who do not have to deal with reality, it remains a fact that many web developers/designers simply have no control whatsoever over that decision.
With that said, obviously the ideal would be "don't support ie6".
If you must support it, how much you have to support it depends on why you must; Is it because your web app is for a company which has many IE6 installations that it knows it won't be upgrading any time soon at all, or is it just for a client who wants to maintain 'support' for every possible user out there? Or is it something in between?
Generally speaking, I aim for "functional, non-totally-ugly, but certainly not pixel-perfect" appearance on IE6. I use IETester to check all versions of IE (differences abound between IE7 and IE8, for instance), so I include IE6 too, and just worry about making things look mostly functional for them.
For my clients, that has been sufficient. A couple have asked about IE6 support, and I have been able to show them that 1) the set of general users on the Internet who still use it is relatively small and 2) those users probably see so many glitches everywhere on the web anyway, they probably do not notice them anymore. I know that #2 probably sounds extremely dismissive, but I have plenty of anecdotal evidence that backs it up.
The basic idea comes down to; how much time will you really spend tweaking a site to make it perfect for an old, long-since-unsupported browser which use keeps going down more each day, when you could just make it acceptably functional, and then devote the rest of your time to more modern browsers.
But again, the extent to which you can take that route depends on how important IE6 support is to those who employ you, and why it is that important to them.
but anyway, IETester is a definite recommendation for testing it:
http://www.my-debugbar.com/wiki/IETester/HomePage
Poor you having to support IE6, we've all been there I guess...
Unfortunately I cannot point you to some general guidelines, besides the KISS principle (keep it simple stupid). Just stick to CSS 2.1 and don't use any fancy new technologies such as HTML5. Also don't even think of using any kind of special CSS selectors like blabla > blabla.
Let me point you to some sites which might help you in your endeavor:
CSS contents and browser compability (good overview of what to do and not to do with CSS)
ie6fixer (you actually WANT to use opacity, transparent png's? this tool will help you)
universal-ie6-css (good starting point for your custom css)
Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs (fixing the shortcomings the manual way)
For testing I recommend setting up a small virtual machine (I'd suggest using windows xp) with IE6 running. Testing tools like IETester may use the engine of the particular browser, but I have had differences between a full blown IE6 and the IETester tools - oh also there is instant virtualization with Spoon.net browser sandboxes (they had to remove IE, because MS said so...).
I am aware that there are probably other questions regarding this topic. I guess that every web developer goes through this with IE.
My problem:
I am developing a web-based application fully based on Javascript. I am a Mac user. I was really happy that everything worked great in Safari, Firefox and Opera. I then asked a friend with Windows to check it with Internet Explorer, and things don't work as well. My application is very sensitive to the HTML standards.
The main problem is the CSS layout. The JavaScript itself seems to be working properly thanks to jQuery for portability.
My question:
How do you deal with Internet Explorer? Should I create a new CSS that is only loaded on Internet Explorer? Should I create a new version of the application only for Internet Explorer? How do you normally handle this? The application is pretty big both in feature design and in layout design.
Edit:
Using the CSS reset as suggested by Nosredna, already removed almost half of the problems. I guess it really is a good practice. I noticed that SO also uses it.
Do you specify a valid doctype? You can get Internet Explorer to be a bit more compliant by switching it into standards mode. http://msdn.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic2
Do you use a browser reset CSS file? That can help bring the versions together. http://meyerweb.com/eric/tools/css/reset/
Be aware of IE's CSS bugs: http://www.positioniseverything.net/explorer.html
For the skeleton of your layout, consider using markup that is known to work, such as http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts or http://960.gs/ for liquid or fixed layouts, respectively.
Keep up with JavaScript differences between browsers. jQuery handles some of them, but not all of them. http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/
Yeah, IE is a pain. If you want it to work in IE, you really want to test in IE every couple days. You don't want to save the pain for the end--you want to handle the nightmares one at a time.
By the way, if you think IE is a pain, try looking at your page with a mobile phone. The other day I went to REI.com with an iPhone and the middle fifth or more of the screen was taken up by a bunch of garbled markup that rendered as text.
Conditional comments.
<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->
<!--[if !IE]-->
<link rel="stylesheet" href="normal.css">
<!--[endif]-->
In the IE files, you can use #import to import normal.css, and then override the styles as necessary.
First and foremost, I don't wait until the project is done to consider browser compatibility.
Most of the time for CSS issues there are ways to do things that don't require browser-specific stylesheets to be loaded, so I try to use those solutions wherever possible. For example - if most of your issues are related to box model problems, things like using nested divs in place of padding can help to make sure everything looks correct without the need for separate stylesheets and templates for different browsers.
Browser reset to start. Level the playing field as much as possible and do away with browser defaults. Build your CSS from the ground up. (See: http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/)
Test early and often across all major browsers during development.
Try to accomplish as much as possible without browser specific hacks. Sometimes you'll need to work in some browser-specific CSS but it should validate (use the W3C Validation tool). Sometimes though there's just nothing for it but a conditional (and maybe even some JavaScript), e.g. fix for transparent PNGs in IE6 (See: http://nettuts.com/videos/screencasts/5-easy-ways-to-tackle-ie6s-transparency-issues/).
If you cannot run IE on one of your development machines, try http://browsershots.org. At least you can get some feedback this way.
Use a debug.css that highlights or outlines divs and other elements. Toss this into your HTML head if needed during development. This can be a huge help.
Use "developer toolbars" where available (IE, Firefox).
EXPECT THAT IE IS GOING TO BE A PAIN, and TEST IN 6, 7 and 8.
Have fun!
Here is how I try to reduce the pain of dealing with IE:
Use a reset.css - Yahoo! YUI Reset or Eric Meyer's Reset CSS
Be careful with floats, clears - they typically cause a lot of cursing.
Be aware of hasLayout bugs in IE, typically adding a zoom: 1 or height attributes helps fix this. Read On Having Layout.
Get the layout working in Firefox, Safari, Chrome, etc while keeping IE about 80% of the way there.
Implement a IE6.css style and an IE7.css style if needed using conditional comments.
Beer, Liquor or other adult beverages.
First, read On Having Layout, which explains how the IE rendering engine works internally. IE's rendering engine is from before CSS. It doesn't properly distinguish between inline and block elements like you'd expect. Instead, in IE an element hasLayout. Or not. This is the source of 99% of IE CSS bugs. So, read that article a couple of times.
As for fixes, I usually use conditional comments. Several reasons:
They are future proof, as opposed to CSS hacks. What if IE9 fixes the hack but not the bug you're using it to solve?
It's valid (X)HTML (conditional comments are just plain comments to everyone else)
It doesn't require javascript. You'd be amazed how many people have javascript turned off.
One remark about conditional comments: Never use an open ended match. That is, never do something like:
<!--[if IE]> <load css> <![endif]-->
<!--[if gte IE 7]> <load css> <![endif]-->
The reason is the same as hacks: make it future proof. What if the next version of IE fixes the bug and you don't need the fixes anymore? Or worse, the "fix" now actually messes up your layout in the new IE version? It's usually best to assume that the next version of IE has fixed the bug that you are working around. I have written a little bit about that back when IE 8 was on the horizon.
I think it would be okay to write a specific css file for IE. I know it is a pain, but because of some possitioning issues, IE6 looks different than all other browswers.
Use this line for your newly created css file:
<!--[if ie6]><link rel="stylesheet" type="text/css" media="screen" href="ie6_style.css" /><![endif]-->
With IE getting around 65% of the traffic, I don't think you can think of it as an after-thought.
Overall, I try to do as much as I can without making a separate CSS file for IE. I'll use come conditional formatting to target it specifically if needed. Overall though, at most you might need to do an IE only stylesheet to get it to work.
Just be sure that you are testing with the proper versions of IE for your audience, as IE 6, 7, and 8 are quite sommon.
As a last resort, when tweaking the CSS just won't fix things, I like to use Rafael Lima's CSS selector script. While it depends on JavaScript (most sites I build do anyway), it provides a convenient way to tweak CSS for different browsers and versions without separate stylesheets.
You can have :
.someClass {
margin-left:1px
}
.ie6.someclass {
margin-left:2px
}
<script>
if (internetExplorer) {
window.location = "http://getfirefox.com";
}
</script>
Keep the markup as simple as possible. Make small changes. Test every change.
I delete it
I would think that developing a new CSS File for use in IE would be considerably easier then re-writing your application, but I don't know what scale and scope your application has that would even render doing that a considerable option. I guess it can depend on what versions of IE you're looking to support.
We're at a point now that most users should have completely migrated away from IE6. IE7 is still a hassle, but nowhere near as bad as 6 was. With my projects, the default setup I sell is IE7 compatibility with code to direct users of IE6 and below to upgrade. If a client wants me to incorporate IE6 compatibility into a site, I typically increase the quoted price by 50% because of how awful of a headache is is to support the browser and how much extra visual code has to be written to make it work.
I know that this may fall into the 'too little, too late' category. That said, I would investing in VMWare or Parallels and create a Windows VM w/ IE6.
As you are developing, you should incrementally check your progress in the browsers that you care about.
That said, with an existing application, I would first make sure that my HTML was valid (there are a variety of validation services at your disposal) then, depending on the layout, I was section-by-section try to get the layout right, using comments to 'hide' the sections that you are not actively working on.
I usually do everything I can to avoid having to create a separate CSS file. There are a lot of CSS & HTML tricks & tips out there that should allow you to make it work in IE6 & up, as well as every other common browser. It just takes time to figure it all out. Unfortunately, sometimes with complicated layouts it can take a lot of time especially when you don't test it as you go.
I let others solve the problems for me. I use Yahoo's excellent CSS files included in their YUI library. They have one file to remove existing formatting for existing labels (e.g. H1 in IE does not look like H1 in Firefox), they have another to give me a default set of formatting that does look the same across browsers, they have yet another to standardize font sizes, and most important of all of them is their grid file. It gives me the ability to build hierarchical formatting of regions and sub-regions on the page very quickly and easily and I know it will work on any major modern browser (Yahoo tests the heck out of it to make sure it does).
It may not be the perfect solution, but it has been more than sufficient for my needs.
I had the same issue in my dev: IE6, FFetc + LAMP + custom MVC, based on Rasmus Lerdorf's article way back when he suggested noMVC-kind of like handle it using includes for headers, footers and the sort. I coded CSS, got stuck with FF not rendering it nicely. I had to go revise my CSS knowledge - I found that a single CSS implementation can render correctly in std. compliant mode(FF) and IE6. I liked that. I was happy with handling any changes using a single CSS file. My advice:
I know you have a Mac, go garage sale-ing (newspapers will tell you where they are), get an old PC for $10 (so far I've found plenty). This'll give you an opportunity to test out IE6 early, while you're at it get a KVM switch as well to access the machine when you need to.
One of the things I've gotten addicted to is IE6's setting - Disable all ActiveX scripts - makes browsing the web without ads a blast, anyways - test out your app with & without activeX settings, and see how well your site does. This has literally saved me hours of 'painful' moments folks above me have mentioned prior.
You prolly know how to test out FF/Opera/Safari with&without scripting
Finally - regardless of how heavy Javascripting your site uses, make sure without scripting the core features (which I'm sure you have lot's of) load properly.
I'm no expert, but sure hope my comments help you out a bit.
Cheery-O
I make sure my websites work natively and perfectly in ie9 , and work in ie8(possibly with features missing).
I prompt everyone that uses an older version to get chrome frame.
I never waste my time for ie7 and older, because using a 6 year old browser is pathetic, and should not be encouraged.
As nosredna said, use a valid doctype (see http://www.alistapart.com/articles/doctype/)
Then check your web site in the w3c validator (http://validator.w3.org/). If it shows no errors (or just a few), then IE should render it correctly.
I wouldn't put much effort in making it compatible with IE6, and just accept the fact that a website can look different in various browsers.