I just found out about the Yahoo UI Reset CSS tool/file and I'm using it on my website.
On my machine I have Internet Explorer 7 and Firefox 3.01 and my webpage looks the same on these two browsers. A friend is using Internet Explorer 6 and the page is completely a mess.
I have two questions:
Am I that poor/stupid in writing CSS?
How can I test my webpage using different browsers on my machine?
Just because your website looks terrible in Internet Explorer 6 does not mean you are terrible at CSS. There are several documented bugs in Internet Explorer's rendering engine in regards to CSS. Web designers and developers have been struggling with these bugs for years. Several well known websites like Digg and YouTube are no longer going to support IE6.
You have several options to test your website in multiple browsers. The easiest way is to install all the browsers you want to test against on a local machine. There are 5 major browsers, and they all require different methods to install multiple versions.
Microsoft Internet Explorer
If you are using Windows XP, you can use Multiple IEs to install Internet Explorer versions 3, 4.01, 5, 5.5 and 6.
If you are using Windows Vista or Windows 7 (or Windows XP for that matter) you can download virtual machine images from Microsoft that contain a fully licensed Windows operating system with Internet Explorer. These virtual machine images expire every 90 to 120 days. They offer the following images:
Windows XP SP3 with IE6
Windows XP SP3 with IE7
Windows XP SP3 with IE8
Windows Vista with IE7
Windows Vista with IE8
These images can all be used with the free Virtual PC 2007.
Mozilla Firefox
You can install multiple versions of Firefox on the same operating system, but it is highly advised that you create a new profile for each version you are going to install. You can use the steps outlined on Rob Cherny's blog to set this up (the article is referring to Firefox 2, but it works for Firefox 3 and 3.5 too). Alternatively, you can use MultiFirefox.
Google Chrome
There really isn't an easy way to run multiple versions of Google Chrome on the same machine. Chrome installations are user account-specific, and standalone versions of Chrome have been made available (see question 3785991), so you can create a new Windows/Mac user account for each old version of Chrome you want to test.
However, the fact that updates are applied automatically and silently means that you really shouldn't worry to much about designing your website for older versions of Chrome. If this is unacceptable, you will need to use multiple user accounts, or virtual images as advised for Internet Explorer previously.
Apple Safari
Safari is similar to Google Chrome in that there isn't an easy way to run multiple versions on the same machine. Michel Fortin has an article that details how to get multiple versions running on Mac OS X. You can refer to this Stack Overflow question for the lowdown on Windows. Virtual images, again, seem to be the only way to go.
Opera
You can install older versions of Opera without issue, so long as they are installed to different directories.
If you are not particular about testing in your machine, you could try https://browsershots.org or https://blisk.io. These are free and provide screenshots of your site in various browsers on Linux/Windows/Mac OS/BSD.
A reset CSS--of which YUI's is only one example--aim to remove browser differences in default CSS properties for HTML elements, like some browsers will have a default 8 pixel padding on the html element (it was a surprise to me to find the html element was even styled when I first found out).
Your IE6 issues are entirely separate to that. Without examples of the site itself it's impossible to say why this might be but the obvious guess is that you're relying on reasonably advanced CSS features (eg a > b selectors, :hover on non-anchors, certain positioning schemes and so on).
For IE you can use this tool (Multiple IE) to test your website in old versions.
For the Reset CSS i redirect you to this question.
For testing various IE versions I use ietester
It allows different ie versions in each browser tab and it's free.
The purpose of it is that HTML(edit: the browsers have predefined properties for the elements.ty Zack) has some predefined properties for its elements like the built-in padding/margin for the paragraph element. The point of using the reset cheat sheet is to start with default values that are equal for all elements : size, margin, padding etc.
I use the reset file in my project but not in its original form. You should decide which elements in the sheet to use and you can always assign other default values for the tags there.
edit: You can test your web-page by installing most of the browsers available. Here is the latest statistics representing the usage of browsers.
My advice is to use Mozilla as your 1st choice testing browser and every now and then test the page on other browsers: IE6, IE7, IE8, Opera, Chrome and Safari (at least).
Here is a reference to a discussion about multiple IEs on one PC.
Best of luck!
Related
It seems every resource regarding things like CSS3 and HTML5 nag me about particular things not being implemented in older browsers, and hacky workarounds. Really who uses IE 9 or 10 anymore anyway? IE11 is out, Edge is default on W10, and I assume most / all people use it. To me it seems to make the most sense to simply make the page render properly on the latest Chrome (what I use), Firefox, Edge, and Safari..
Ughhh apple. My understanding is that the Windows version of Safari is very outdated and trying to get a (questionably obtained) image of macOS working in a VM has been unsuccessful. I'm not spending a dime for any Apple products just to test my site on their browser. So what can I do in order to test how my site will work in it?
Regarding your question...
Who uses IE 9 or 10 anymore anyway?
Typically, people with older Windows systems. This is important for your website based on whether or not IE 9/10 users will be accessing the website that is being supported. (A review of your website's web logs can shed light on this.) If your website is an internal intranet site, then an organization's IT department may dictate the browsers that users can use. However, large eCommerce websites will often support older browsers out of fear of losing customers to rivals.
Regarding your second question...
How do I go about ensuring the site is functional and looks reasonably
good on apple products conveniently, without any apple products while
on a minimal budget?
Without actual Apple products, something that emulates these displays is needed. One option is the "Inspect" option with the Chrome browser. (Display your website on Chrome, right-click, select "Inspect".) Inspect allows you to choose between a Desktop or Mobile display. With a Mobile display, you also have the option of selecting several Apple displays (e.g. iPhone, iPad, etc.). This is probably the next best thing to having the actual Apple device and its display for website testing.
I got this job which I have to create a promotional website for a prefecture and they are asking me to list the minimum system requirements a user must fulfill to access this website. I am not sure on how to make this list. The website will have two versions: one very simple for older browsers and computers, and another one responsive. The idea is to maintain everything very simple, without any animation or something that would be difficult to run on older browsers.
What do you guys think would be a safe way to describe the minimum system/browsers version for using a website like this?
Thank you very much!
Most web development companies set a minimum level of browser support, not so much system specifications. My development company specifies the most recent two versions of Internet Explorer, FireFox, Safari and Chrome. If they need to support older browsers, I would set the minimum to IE8 and maybe 10 previous versions of FireFox, Chrome and Safari.
Also, you should use something like the HTML5 boilerplate and feature detection in the site. That way you can build one website that satisfies all of the requirements. Building two separate sites becomes a nightmare when it comes to future updates.
As we all know that Microsoft and Mozilla had released the latest browsers IE9 and Firefox 4 recently, and I want to use them in our projects/sites, but I don't know what's the risk if I upgrade them, which means I'm not sure our sites can be shown correct or not on these latest browsers, if someone can give me some advices on this issue will be helpful, thanks.
When you say that you "want to use them in [your] projects/sites", am I correct in believing that you want your sites to test well against them?
If so, then I humbly submit that's the wrong way to look at it. The greater danger is in NOT supporting the new browsers, because your visitors will be using them, regardless of your decision. Therefore, you MUST test your sites against them, because if your site breaks, then your visitors won't return. (If these are completely internal visitors, like for an intranet, then you block your staff from being able to stay current with other current web applications.)
The real question is whether you want to keep supporting older browsers. For now, that's required, too. You must build your sites in such a way that they work correctly in ALL relevant browsers. IE7 is still used by a lot of people, so you might continue supporting it (for now). IE8 is a must, as is Firefox 3, Chrome 10.0, and Safari. (I don't know the current Safari.)
Many websites publish statistics on the commonly used browsers. It's your decision how low of a percentage you want to support. Personally, I would support any browser having market share above 10%, unless you're a VERY highly trafficked site, in which case, I MIGHT support any browser above 2%.
If you're concerned about how you can continue testing against older browsers, then Internet Explorer has a "Developer Tools (F12)" feature that allows you to change your rendering to match older versions. I don't know about other browsers, but I think you can have both Firefox 3 & Firefox 4 installed on the same machine. Until you have a way to continue testing Firefox 3, do not install Firefox 4, at least until it surpasses Firefox 3 in use.
I know, some people will say "IE 6 must die"; others will think this is a subjective/non-programming related question. But I'm desperate and did not know where else to ask.
I have an application and need to decide if i want to support IE 6 or not, so i wanted to test how it looks, what is failing or not failing. If the problems could be solved fast I would love to know its not a problem, if the problems are very big i would like to redirect the user to a page explaining that IE 6 is not supported.
So i need to be able to see the page in IE 6, I just installed a windows XP virtual machine and got IE 7 installed, can't find a way to downgrade to IE 6! So is there any "portable" version of IE 6 that i can run easily? An emulator? Something?
You could try IE Tester. It allows you to test using the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5
Depending on the Service Pack of XP you may not be able to rollback to IE6.
The best way to test would be to use the Microsoft VHD images here under Virtual PC:
http://www.microsoft.com/Downloads/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en
Mac OS http://www.microsoft.com/mac/downloads.mspx?pid=Mactopia_VPC&fid=BB545A70-CC7F-4902-B7B1-8E9D4ED665D2
Windows OS http://www.microsoft.com/downloads/details.aspx?FamilyId=04D26402-3199-48A3-AFA2-2DC0B40A73B6&displaylang=en
This should all cost you nothing.
Whilst I've upvoted and commented on "Nissan Fan", I have found BrowserShots http://www.browsershots.org/ to be quite good for previewing in multiple browsers (not just IE) and http://www.crossbrowsertesting.com/ quite good for remote testing.
We use a standalone IE6 but when you go into the About section it appears as IE7. So I'd avoid that route if I'm honest.
My advice would be set up another virtual pc (Its only going to be for a browser, nothing intensive) just for IE6.
I would attempt to find a XP Service Pack 1 CD, and install that in a VMWare instance. You can safely move up to SP2 or SP3 without upgrading IE.
I test it exactly the same way I test for Netscape 2.0 -- I don't.
There is no excuse for anyone to be running that outdate piece of crap.
What these companies need is a few support calls that end with "We are no longer able to support IE 6" and provide a list of companies that are also phasing out IE 6 support.
If Youtube can no longer support IE 6, with all of Google's resources behind it, then why should I?
The best thing that could happen would be for Google to put up an error page saying
"You appear to be using IE 6.
Unfortunately, we are unable to
provide search results to IE 6
clients"
On linux you can use ies4linux.
Have you heard of Microsoft Expression Web SuperPreview ?
SuperPreview as a tool allows you to compare different rendering engines in a single unified interface. Simple clicks gives you comparisons between Internet Explorer 6, the native version of Internet Explorer installed, other browsers you may have installed locally – Firefox 3.5, Safari 3, Safari 4 – and even an bitmap images of website prototypes.
You can download the beta from here.
Docker's suggestion's great!
When I was testing in IE 6 I used another machine.
If you've installed IE7 and you want to test in IE6, you'll have to first uninstall IE7. When you unistal IE7 it will automatically roll you back to IE6.
There's no way to have both on the same machine (I found out the hard way) and that's why Docker's suggestion of setting up another virtual pc is so great.
-Frinny
When you are working on a new website, what combinations of browsers and operating systems do you target, and at what priorities? Do you find targeting a few specific combinations (and ignoring the rest) better than trying to strive to make them all work as intended?
Common browsers:
Firefox (1.5, 2, 3)
Internet Explorer (6, 7, 8-beta)
Opera
Chrome
Common operating systems:
Windows (XP, Vista)
Mac OSX
Linux
Unix
Mainly I just target browsers as the sites I've built don't really depend on anything OS specific. As mentioned above, YAHOO's graded browser support guide is a good starting point on determining which browsers yous should/could support. And Yahoo's User Interface library (CSS+JavaScript) helps massively in achieving this.
But when developing sites I primarily do it on Firefox2 as it has the best web developing tools (firebug + wed developer toolkit). Then I also test my sites with Opera 9.5 as it's my browser of choice for browsing. I've previously lost all hope on supporting IE6 at any reasonable level so these days I just inform my users to upgrade to IE7 which is almost capable of displaying sites similarly to FF2/3+Chrome+Opera.
FF3 and Chrome are so new at the moment that I tend to ignore them, but I must say: They're friggin fast! My javascript/css heavy sites are noticeably faster with them.
I'm doing:
Firefox 2 and up
IE 7 and up
Konquorer or Safari (or maybe now Chrome)
Yahoo's graded browser support is a good guide:
It depends on your audience. If you are heavy on tech users, you may have 50% of you users as Firefox. If you have lots of mom and dads, you will probably have 75-80% of your users being IE 6 or 7. You probably need to get a alhpa/beta out with Google analytics so you can get a measure of your audience.
Where I work, we target
Firefox 2 and 3 on Windows
Firefox 2 and 3 on Mac
Safari on Windows and Mac
IE 6 and 7
We are not specifically targeting any Linux browsers, but if they work in the list above, there's a good chance they work everywhere. We are also testing against Google's Chrome browser on Windows now.
I just figured out this week that if you bend a little and figure out how to validate your HTML you're much more likely not to have to care about cross browser stuff.
Oh yeah, except Javascript.
I get it working in Firefox first, that's what the boss uses. Opera last, that's what Bob uses. Har Har, just kidding Bob.
But even so, you can never be safe because the minutia of browser incompatibility and the fact that 90% of the people you ask can't really tell you which browser they're using.
Can you click help and about? (Pause) No? Oh, that right you're using IE7
And even that old standby doesn't work anymore.
My advice is to lock down IE, like it's a terminal server, and try navigating your website. If you can click on everything and read everything then you're in the clear.
If you use sIFR and someone calls you telling you you're logo is upside down, it's time to prioritize and worry about compatibility again, otherwise IE and FF and you're good to go.
Target none. Test against many.
Where I work, we test the following (in this order of priority, based on data from google analytics), all on Windows:
IE 7
IE 6
Firefox 3
Firefox 2
Safari 3
We don't bother with Opera or older versions of browsers since the percentage of users is very small, however we do our best to code everything to standards, so there shouldn't be any big issues.
Of course, like Milhous said, it depends on your particular audience. YMMV.
The standard suite I'm used to is:
IE6 (win)
IE7 (win)
Firefox 1.5+ (win/mac)
Safari 2+ (win/mac)
Opera 9+ (win/mac)
Chrome (so far, if it clears Safari 3.0 on win, it seems to clear Chrome, too)
You could also generically claim support for IE6/7, Gecko, and WebKit... and it covers everything listed here but Opera, plus a few not listed. It's just a lot harder to test just the rendering engine and not the specific differences in browser versions and feel comfortable with the results.
I agree you should try and make it work in all, but if it is a new site I would seriously consider dropping support for IE6. From a development perspective it will save you hours of hair pulling if you don't need to support it.
You'll have to weigh this against your intended audience and whether you are willing to lose some customers that won't be willing (or able) to upgrade their browser.