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
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
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.
I would like to use this JS plugin to use the CSS template layout :
http://code.google.com/p/css-template-layout/
But I know that it is recommended to first have a website working without JS. So, my project consist in doing a tourism website...will I lose a lot of 'potential user' if JS is required to visit my website ?
Tkx,
About 4% of my visitors don't have javascript support includes bots though, that would explain quite a few percent. There are a few classes of browser that won't run your javascript as intended:
Screen readers/accessible browsers (like for blind people)
Mobile browsers
Console-based browsers (Used sometimes by sysadmins from servers with no gui installed)
Off-brand browsers or older browsers with buggy javascript engines
Search Engines (Google)
I don't think that many people just turn javascript off anymore. However, things like NoScript --where javascript is disabled for a site initially and must be explicitly enabled-- are becoming more popular.
The problem is more apparent on mobile browsers, but you will likely serve different content to them anyway.
I am in charge of creating plugins for all major browsers which will hijack links from specified website visited. I wonder if this can be done by any plugin. I mean if plugins has that level of control over the website visited by the browser under my plugin supervision?
When I say hijack it means, I should be able to read the anchor tag's href attribute value and to modify it accordingly. I know how to do that in Javascript and I know Google Chrome extensions are written in HTML, CSS & Javascript so this seems to be working. Will it work for IE, Firefox, Safari?
After huge research I got to know this is possible in Chrome, Firefox and IE. I am still researching for Safari.
Basically I am currently doing some research, and I am interested to find out how I could render web pages without a browser: I have some algorithms that I would like to run to calculate the visual aspect of each blocks of DOM node(s) for each page.
What you're asking for basically, is a browser rendering engine, otherwise known as a layout engine... For example, Firefox uses the Gecko layout engine to render the pages. Theoretically, you could adopt this engine for whatever project you're working on, saving you a lot of time.
The Gecko engine is used in more projects than just Firefox, and since it's open source, you could easily get the source code and try to throw it in an application.
Wikipedia has a nice list of layout engines, so there are other alternatives to Gecko, like GtkHTML.
Basically, you want to create the data structures a browser internally creates so that it knows how to render the page.
Check out the Firefox source.
I suspect it's rather complex.