- Know your enemy: browser types
- Choose the modern DOCTYPE
A regular web-site should look equally good in all of them.
Know your enemy: browser types
- Firefox and other less known browsers which use an open-source engine called Gecko.
- Opera uses it’s closed source engine called Presto.
- Internet Explorer uses the closed-source engine called Trident. The engine is old and terrifying in IE6, IE7, but upgraded in IE8 and upgraded to much better standards compliance in IE9.
The terms Gecko, V8, Webkit are widely used in professional talks. Trident, Presto are less used.
Sometimes, the cross-browser development becomes complicated, so browsers are graded according to the level of support from A to C.
- A. Latest Firefox, IE, Safari/Chrome
- Supported ideally.
- B. Opera, less recent major browsers
- Supported well enough, but minor drawbacks in look and feel are possible.
- C. Old major browsers
- Only the core functionality of the site is supported.
- D. Very old. Text browsers.
- Not supported. If it works, it works. If it doesn’t, no one cares.
The grading above is an example from real life.
Choose the modern DOCTYPE
As you probably already know from HTML, there are two main rendering modes: Standards Mode and Quirks mode. Actually, there is a third mode called Almost Standards Mode, all of them described well in Wikipedia quirks mode page.
Browser chooses the mode according to
DOCTYPE header of HTML.
For modern sites there is a good DOCTYPE:
This DOCTYPE make modern browsers render in Standards Mode and older ones in Almost Standards Mode (which is the maximum they can do).
Also, styles can be applied differently, for example Internet Explorer 7+ in standards-compliant mode (strict !DOCTYPE), can apply the
:hover pseudo-class to any element (as it should), while in a non-strict mode it can only apply :hover to links.
Not using correct DOCTYPE will cost you time debugging.
<!DOCTYPE HTML> is ok.
Manuals and how to search in them
Another one is documentation center of Mozilla Developer Network.
I use the following method of search. When I need to find “RegExp” in Mozilla documentation, I just type ”RegExp MDC” in google.
When I want to check MSDN, then “RegExp msdn”. Sometimes it helps to add additional “jscript” term: ”RegExp msdn jscript”.
MDN is usually good for general and firefox-specific information, while MSDN helps to deal with IE-specific features.
There are many cross-browser incompatibilities in frontend-programming. When you come across them, http://www.quirksmode.org/ may be a help.
It contains information about lots of incompatibilities. Also, there is a combo to search it. Try entering ”quirksmode onkeypress” in google for instance.
The ECMAScript specification
The title “ECMAScript” was choosen to keep the specification independent from trademark owners.
The language specification tells a lot about how it works, but it is an advanced source of information.
Today we live in a time of changes. The modern standard is ECMA-262 5th edition (or just ES5), but browsers are in the process of implementing it.
The old standard is ECMA 262 3rd edition (ES3). It is supported by all major browsers.
When you want to learn how the language works in-depth, there’s more perspective in reading ES5, but remember that many features are not implemented yet. You can find a list of supported browsers/features at http://kangax.github.com/es5-compat-table/.
The browser stuff is described by a family of HTML5 standards.
The official W3.org DOM specifications are large, but extremely valuable. Use them as a reference.
The searching combo ”something site:w3.org” helps for DOM and Events-related questions.
The only problem with W3 is that it describes how it should be, not how it is.
Please write your general coding tips in comments.