Recently, I have been building a website for someone and am getting irritated with some browsers rendering the website one way and other browsers rendering another way. I decided to look into why this is and discovered that the issue likely lies in the HTML engine beneath the browsers. For example, Chrome and Opera (along with most, if not all, Chromium browsers) use the Blink engine, which is a fork of the WebKit engine (which descended from the KHTML engine). Safari uses WebKit. Internet Explorer uses the Trident browser; and Edge uses the fork of Trident known as EdgeHTML. Netscape and FireFox use (or used, in Netscape's case, considering the browser is discontinued) the Gecko engine.
Considering all of this, is it possible to apply CSS to specific engines rather than browsers? Or is this already being done when we try to use browser-specific CSS? Was the point of the user agent string to do this (which apparently was messed up by the developers wanting to imitate other browsers)?
Note, I would think from comparing how these engines are related that there are 3 main engines: KHTML-based, Trident-based, and Gecko. So I am guessing that the answers on this question will give at least three different methods (one for each of the main engines).
Even if it was possible (using vendor prefixes) it could be a pain to maintain the code base. I suggest you to reset or normalize.
My reset is a merging of reset and normalize.
You can use vendor prefixes, even target some of them via suppot queries with vendor prefixes, such as
#supports (-webkit-appearance:none) {}
Browserhacks has a great collection of approaches for that.
That being said, you really, really shouldn't. It will be a nightmare to maintain.
Browser differences are caused by:
1) Different user-agent styles (default browser rules); Normalise or reset will take care of that for you.
2) Some experimental features that might be available just to some browser, or be different between them, normally addressed by vender prefixes; Autoprefixer such as Prefix Free or Post CSS's Autoprefixer deal with that perfectly fine.
3) Different features; knowing what you can and can't do on each will take you a long way, and whenever you find a limitation, make sure to use fallbacks or even polyfills.
99.999% can be achieved with normalise, an autoprefixer, and a decent understanding of browser features and fallbacks.
Remember your projects should work fine on all browsers (or as many as you can, no one expects to support IE6 on 2018..) but it can look and have a better experience on some / most. That's what progressive enhancement and graceful degradation are for.
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
I know there are programs like dreamweaver but none of them has significant success when it comes to creating automatic cross browser compatible html and css codes.
I was wondering, is there a framework or program that i can use for creating more cross browser compatible HTML and CSS layout ?
Currently, i am using a virtual windows xp version running on vmware to check how web pages looks in IE6, and manually using Chrome, Firefox, Opera and Safari.
What you want doesn't really exist as many have said. I do try to safe myself most of the hassle you describe by consciously using only things that have proven to be widely supported and with which I have good experiences.
The perfect solution doesn't exist but here are a few things to consider that could make your life easier:
Use a css reset so all default browser styles are gone.
Force yourself to write HTML that validates against a doctype. Personally I use only
XHTML 1.1 (which is very strict) but gives high compatibility in most browsers.
Use only fonts that are common and widely supported.
Limit your use of javascript to the absolutely necessary, and use jQuery where you can, as it will "often iron out differences for you". (suggested by Andrew Barber)
This way you'll end up with web sites that have a very high chance to be cross browser compatible
There is no reliable, broadly applicable solution to this beyond testing, testing, testing. The issues are so complex that it's essentially impossible to build a tool that could do this for anything close to every possible difference between the browsers.
Incidentally; there is a tool called IETester that you can use to be able to run multiple, previous versions of IE.
EDIT: You (motto) and others have noted issues with IETester. While I have not experienced issues with it myself, that could very well be because I have simply not used it to help me with layouts that use things which happen to be buggy in IETester.
Comments below note that the Developer Toolbar in IE9 permits us to use the IE7/IE8 rendering engines. I would guess this to be a more reliable way to test layouts for those browsers, and I plan to begin using that instead, myself.
I will then likely keep using IETester just for assuring basic usability for IE6.
Is there any single framework with which I can build a css3, html5 website that is compatible for all browsers including IE7 and later? Can http://html5boilerplate.com/ boilerplate help me in this?
You will never get the IE7 or IE8 rendering engine to achieve full compatibility with HTML5, CSS3, and other modern technologies. They are simply not capable of it.
However there are some hacks, tools and plugins which can get you part of the way.
Tools like Modernizr will help you by allowing you to detect which features are supported, to give your site a chance to work around it.
jQuery is a great library anyway, but is particularly good in this context because it abstracts a lot of browser differences away from the developer. Some things are easy in most browsers but a real pain in IE; jQuery takes a lot of that kind of stuff and makes it easy regardless.
Dean Edwards' IE7.js and Selectivzr are both Javascript libraries that give IE support for lots of the CSS selectors which were missing in older versions. This allows you to write your stylesheets without worrying so much about what IE supports. (IE7.js also fixes a number of IE's other glitches and missing features too)
CSS3Pie is a hack for IE that adds support for CSS border-radius, gradients and box-shadow.
There are in fact a whole load of hacks along these lines, all aimed at adding features to older versions of IE which it is missing. Modernizr's website has a big list of them here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
However there is one big caveat to all of this. Speed. IE<=8 is a slow browser. It has a slow Javascript engine. Virtually all of these hacks are javascript based. You might get away with running a few of them on any given site, but trying to use enough of them to give IE anything like full support for HTML5 and CSS3 will slow the browser down to the point of being unusable.
There is one other angle to approach this question though, and that's Google's Frame plugin for IE. This basically installs the entire Google Chrome browser engine into IE. The user is still running the IE shell, but the web page is rendered as it would be in an up-to-date version of Chrome.
This sounds great, but of course it isn't perfect. The main down-side of it is that the end user has to install it manually onto their computer, which means that you as a web developer have no real control over whether it's there or not. So its not something you can just add to your site and expect everything to magically work.
Finally, you may also be interested in CanIUse.com, which gives browser support tables for various features, allowing you to see at a glance what is and what isn't supported in various versions of each browser.
HTML 5 is more an umbrella term for a variety of technologies than any one thing or framework. Really, any implementation you do should degrade gracefully-- and that is what makes the site browser compatible. Detect what the browser supports, and then have alternatives that are legacy friendly.
Check out: http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/
And: http://diveintohtml5.ep.io/detect.html
Good luck.
Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
MS is including it in the ASP.net MVC template projects
html5boilerplate won't help you.
As others have said html5 and css3 are very broad terms, there's no framework that implements all of the features provided by both of these. In fact they are not equally supported in browsers that say that they support them. And more, even W3C guys (who write the specs for html5 and css3) are not yet established on what features they will include or what steps will be required to implement them. You get the idea...
But.. if you narrow your requirements to some specific features, like video, audio tags, canvas drawing, nifty css effects, File API, or others, you CAN find frameworks that implement (or try to mimic) them with available technologies in cross-browser manner (more or less).
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 have started using Safari as a baseline for all of my web development projects, then using workarounds where appropriate for issues with other (mostly older) browsers. As far as I understand, Webkit is the most standards compliant layout engine available right now (am I wrong?), and it appears to be "leading the pack," so to speak, with HTML5/CSS3 support.
So I'm wondering what I'm missing (if anything), as long as i implement graceful degradation/progressive enhancement why shouldn't Webkit be used as a baseline? Does webkit have any serious design flaws that I'm not aware of?
WebKit is certainly very good at marketing, but Gecko, Presto (Opera) and WebKit really aren't too far apart in standards support. Nowadays, even IE is getting pretty good, though they have several years of doing nothing to compensate for.
I would suggest using the relevant standards as a baseline, and use several browsers during development, so as not to focus yourself on WebKit-specific features too much.
If you are designing for HTML5 you may want to use this site (http://www.html5test.com/) and compare various browsers, and decide which one has the features you want to use, or best supports it, then have graceful degradation for other browsers.
If you want Acid3 compliance, then do the same with this site: http://www.webstandards.org/action/acid3/
My baseline tends to be Firefox, but that is because I am trying to use the latest version of Javascript, but it depends on what you are trying to use, and what you are willing to try to work around.
There are other tests, for various standards, so determine which ones are most important, and that will help you determine the baseline to use.