After trying to figure out why my favicon was not showing across various browsers (except Safari), but replaced by a gray globe, I found the following discussions:
http://support.mozilla.org/en-US/questions/923022
It seems this is now normal either for websites that do not supply identity information or when one's connection to a website is not encrypted.
Even the major websites don't show favicons.
Is this a problem with me or are we not seeing favicons in the URL address bar as commonly as we used to?
I believe favicons today are even more popular than in the past.
Part of the issue I believe you are running into is how favicons are displayed. It isn't that they are less popular, but the location or how they are displayed may have changed.
Here is the rundown on where they are displayed.
Address Bar: Firefox v1 - 12, IE 7+, Opera v7 - 12 and Safari
Address bar drop down list: Firefox
Links bar: Firefox, Chrome, IE 5+, Opera 7+
Bookmarks: Firefox, Chrome, IE 7+, Opera 7+, Safari
Tabs: Firefox, Chrome, IE 7+, Opera 7+
Drag to Desktop: Firefox, Chrome, IE 5+, Opera 7+
(List from Wikipedia)
You also have to consider that favicons are now playing a larger role because of mobile devices. When someone bookmarks or pins a site to their screen it will use the favicon. I find that having favicons set for mobile are great because it shows a logo or icon vs seeing the page crammed into a small icon on the screen.
Bottom line: Favicons are not going anywhere and I highly recommend programming them for both desktops and mobile devices.
Related
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
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.}
It's seems like all major browsers (ie, firefox, safari, chrome) support animated gifs. Though I've been reading that IE might not be faithful to high frame rates. Who doesn't support animated GIFs? Iphone safari seems to just fine. What about other mobile browsers?
Lynx, for example.
Or any other non-graphical browser will likely also have problems.
Source: see this browser support matrix for GIF (and other image formats).
I have used Firefox, Chrome and now Opera. Everytime when I switch browsers, I find that some of the websites don't display or display incorrectly i.e. in terms of box alignments etc.
I have never understood why does this happen. Which property differs in all the browsers that leads to this issue?
Each of those browsers uses a different rendering engine (Firefox -> Gecko; Chrome, Safari -> WebKit; Opera -> Presto), and each rendering engine has different rules about how the markup is displayed and which default attributes are used.
However, if your site is designed properly, these three browsers should have little trouble displaying the correct layout. It's the Internet Explorer's Trident engine that many people have trouble with.
See the Wikipedia articles on Web browser engines and comparisons amongst them for HTML and CSS
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!