For my responsive site I need to support IE9 meaning that I cant use felxbox yet. However ive got a breakpoint at 500px targeting phones. Is it safe to use flexbox within this media query? The mobile browser support seems good.
This is a new site so I dont have any existing analytics data to make this decision with.
It's safe to use Flexbox at any breakpoint with supported browsers, as long as you use all the necessary old prefixes, please do. Android & iPhone browsers that don't support flexBox are essentially dead.*
*Except that Opera Mini doesn't (quite yet) have FlexBox support in 2014, and is used by 250 million users, which is a higher market share than IE9 on older Windows Phones 7. Probably a dying breed at this point, IE 9 Mobile now only account for 0.29% of the mobile market. However having a table fallback solution to a Flexbox layout is still rather important, especially if your site cater to the Asian or African continents or Eastern Europe for Opera Mini, or if still need to target IE8 or IE9 users.
Know that technically you can use Flexbox with a IE8-9 compatibility fallback using table + table cel/row. It depends on your context, and as to which Flexbox features are being used... If you don't use flexWrap nor reordering, a table fallback should work reasonably well on IE8-9, even on mobile.
Here is an example production site I did using flexBox + table fallbacks, working in IE8+, Opera 11 and Opera Mini (Presto). Opera Mini gives a rather crappy layout, but at least it's mobile compatible.
Update: Opera Mini servers now support Flexbox at Opera Presto 2.12 levels which is unprefixed.
Not perfectly safe, no. There are some situations where a desktop or notebook browser might be smaller than 500px wide.
One suggestion could be to use IE conditional statement to include the appropriate CSS, but this approach might fail in IE10 as IE conditional include support is removed.
The safest bet is to use feature detection library like moderniser and then write your css accordingly.
If IE9 and mobile browser class is added to the body by moderniser you can write your media query accordingly to apply felxbox styles only when the browser is not IE desktop and have fallback css acoordingly
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 have a website that doesn't work in IE8, due to a ton of issues.
Apparently, some people don't understand. There is no way my site will ever work natively in IE8.
MY GAME WILL NEVER WORK NATIVELY IN IE VERSION EIGHT.
As a workaround, I want to place a Java applet on it that simulates a browser. This way, people - 25.8% of people - can see my site in IE8 by viewing the site through the applet.
Basically, it would work something like the emulator at http://www.opera.com/developer/tools/mini/ - except not Opera Mini.
Thus: Are there any emulators that I can put on my site that emulate other browsers? They could be JS/HTML5, Java, Flash, whatever.
{Opera Mini doesn't work with my site - so unfortunately this otherwise perfect example from Opera doesn't work, but any of the current versions of the Big 5 (IE, Chrome, FF, Opera, Safari) would work with my site flawlessly.}
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 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!
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.