Dedicated to my wife, my parents and the Internet Explorer Team
Contents Introduction
1
Why cross-browser matters
2
Rendering engines
4
Choose the right DOCTYPE
7
Compatibility modes
10
Reset the default styling
12
HTML
14
HTML 4 and modern browsers
14
HTML 5
15
CSS
47
CSS 2
48
CSS 3
65
JavaScript
91
Cross-browser frameworks
92
Mobile frameworks
94
Bugs and cross-browser issues
96
Cross-browser testing
101
Web applications
102
Desktop applications
110
Compatibility Tables Explained
117
About the author
118
1
Introduction Welcome to this book about cross-browser development. In today’s world, web designers and developers can create the most awesome websites and applications ever seen. The possibilities of current web technologies have increased to a level where it’s really hard to keep up with new developments. This book focuses on the ever-changing browser- and mobile device-market. Chrome and Firefox have switched to a rapid-release cycle which means they release new versions of their browsers month after month. Just to keep a few websites compatible will soon be a day job and a nightmare to handle. To take this fast-paced browser world into account you will find updated versions of the compatibility tables in this book at our online resources (www.crossbrowserbook.com/Knowledge). Be sure to visit these resources to get the latest browser compatibility information. With this book, I hope to make the life of some web designers and developers a little easier. Now, before we dive right into the technical details, let me tell you a quick story…
2
Why cross-browser matters In a few pages this book will be all about technical stuff: HTML, CSS, JavaScript and even the mystical DOCTYPE. But first let me tell you a quick story about what cross-browser development and testing can do for you and your business. This story is also a very good example you can use to persuade your boss that crossbrowser development and testing is important. Finally it shows that, if not done right, can cost you literally thousands of dollars (which it did me). Just over a year ago I started to sell a new software product online. A beautiful website was designed, tested and put online. Soon the sales started rolling in (OK, it was not that easy, but still…). The page was well tested to ensure correct rendering in all major browsers. But as always, changes needed to be made quickly and testing was reduced to whatever browser the developer currently used. After one of the minor changes to the sales page went live there was a sudden drop in sales. And no small one either: suddenly sales decreased by about 40%. This should not happen, and so I quickly fired up my favorite browser to test the page and checkout process. Everything looked and worked just as expected. So I concluded that competition had gone up, was running a promotion or something along those lines. After three weeks with reduced sales this email hit my inbox: Hello, Daniel, Today I finally wanted to purchase ****, but as I visited your website I could not find a way to purchase online. The pricing page looks like the attached image to me. Could you please send me a link to buy? Thanks, ****
3 Attached was this screenshot:
After a few moments staring at the screen in disbelief, I fired up Internet Explorer (not my favorite browser), navigated to the website and sure enough, the buy buttons were gone. None of the visitors using Internet Explorer were able to purchase the software. Luckily, it was an easy fix, so I got a new version of the website up within an hour. After this was done I sat back to think: I saved maybe one hour in cross-browser testing my website, but in doing so I lost about 40% of three weeks’ sales. That was quite an expensive hour. Now you see that the cost and risk of not properly cross-browser testing is high compared to the low costs of actually testing a website. In the following chapters I will show how to create crossbrowser compatible websites, what pitfalls to avoid and how to keep your sanity while doing so.
4
Rendering engines If you want to create websites that work in all major (and minor) browsers, you need to know some basic facts about how browsers are designed and developed. Strictly speaking, the term “cross-browser” is inaccurate because there is an endless supply of small and niche browsers (e.g. Wowser - www.rockmelt.com). But under the hood, all these browsers are based on just a few so-called rendering engines. The reason for this is obvious: creating a decent rendering engine is quite a challenging task! What does the rendering engine do? Mainly, it interprets HTML and CSS to draw the page onscreen. One could argue that HTML and CSS are standardized and every rendering engine that follows this standard should produce exactly the same results, right? Wrong! Did you ever read just one small part of this specification? Let me give you a quick example (About the tag): A video element is used for playing videos or movies, and audio files with captions. Content may be provided inside the video element. User agents should not show this content to the user; it is intended for older Web browsers which do not support video, so that legacy video plug-ins can be tried, or to show text to the users of these older browsers informing them of how to access the video contents. In particular, this content is not intended to address accessibility concerns. To make video content accessible to the partially sighted, the blind, the hard-of-hearing, the deaf, and those with other physical or cognitive disabilities, a variety of features are available. Captions can be provided, either embedded in the video stream or as external files using the track element. Sign-language tracks can be provided, again either embedded in the video stream or by synchronizing multiple video elements using the
5 mediagroup attribute or a MediaController object. Audio descriptions can be provided, either as a separate track embedded in the video stream, or a separate audio track in an audio element slaved to the same controller as the video element(s), or in text form using a caption file referenced using the track element and synthesized into speech by the user agent. WebVTT can also be used to provide chapter titles. For users who would rather not use a media element at all, transcripts or other textual alternatives can be provided by simply linking to them in the prose near the video element. […] After reading this (you can find the entire HTML 5 specification here: http://dev.w3.org/html5/spec/single-page.html) it seems unimaginable that two different teams of software developers would come up with the exact same implementation. This means that all rendering engines display a website differently. It’s almost impossible to create a cross-browser compatible website which is displayed pixel perfect across all rendering engines. Take, for example, this relatively simple website that looks different across Chrome, Firefox and Internet Explorer.
6 Luckily, there are only a few widely used rendering engines out there. By testing in all these rendering engines you can ensure that your website can be viewed in nearly all browsers. These rendering engines are:
WebKit WebKit is an open source rendering engine (www.webkit.org) and is free to use. You can find the WebKit rendering engine in Google Chrome (or Chromium), Safari, iOS, Android and many smaller browsers.
Gecko Mozilla develops its own rendering engine that is used mainly in the browser Firefox and the mail client Thunderbird (www. mozilla.org). The engine is open source and can be used in other browsers as well.
Trident The rendering engine Trident (sometimes called MSHTML) runs inside Microsoft Internet Explorer and Windows Phone. This rendering engine is closed source and is not often used outside of Microsoft products even though it can be embedded in other windows software.
Presto The last of the big rendering engines is called Presto and is used by the Opera browser (developed by Opera Software – www.opera.com). This rendering engine is closed source as well, and is used only by Opera and Opera mini.
7
Choose the right DOCTYPE If you read only one chapter of this book, I highly recommend this one. Choosing the right DOCTYPE for your website or web application is the most important thing to do. But first let me tell you what the DOCTYPE is all about. Nearly all modern browsers know two (or more) rendering modes: the Quirks mode and the Standards mode.
The Quirks mode In Quirks mode the browser tries to render your page based on old web standards or no standards at all. This mode is used to display old and legacy web pages and should be avoided nowadays. If the browser renders your site using this mode you will see some weird CSS and JavaScript effects as well as different (and wrong) box model calculations. This can lead to changes in layout; here is an example:
The Standards mode In Standards mode the browser renders the web page according to current web standards, or more precisely, how this particular rendering engine interprets the current web standards. You can
8 prevent many cross-browser compatibility problems by simply forcing the browser to always render using the Standards mode. Here is the previous example, now rendered in Standards mode:
How to get into Standards mode The browsers switch between Quirks and Standards mode based on the DOCTYPE (or the lack of it). Choosing the right DOCTYPE for your page is fairly easy but it needs to be done. There are two possible DOCTYPES you may want to use for your site. Remember that the DOCTYPE must be the first element on your site. If you plan on using HTML 5 features and support all the latest browsers you should use this DOCTYPE. Current and older browsers will be switched into standards mode if you start your page with this DOCTYPE. If in doubt, always choose the following DOCTYPE:
9 The next DOCTYPE triggers the Standards mode in all major browsers but it doesn’t validate new HTML 5 features (for example, using this validator: http://validator.w3.org/). If you have a valid reason to validate using HTML 4 and don’t plan to use any new feature, you can stick to the following DOCTYPE: In nearly every case it is a very bad idea not to define a DOCTYPE. Doing so will come back to haunt you if you ever plan to switch to a current DOCTYPE (and you will). If you really absolutely need to support Internet Explorer 6, you can use conditional comments (www.quirksmode.org/css/condcom.html).
10
Compatibility modes So why not just use the proper DOCTYPE and be done with it? Unfortunately, Internet Explorer knows more than Standards and Quirks mode. It is capable of simulating older Internet Explorer versions! These so-called compatibility modes were introduced in Internet Explorer 8 to ensure that older sites (which were often optimized for Internet Explorer 7) could still be viewed correctly. Internet Explorer tries to toggle the correct compatibility mode based on the DOCTYPE of your page and the user settings. But fortunately, Microsoft also created a tag to control in which compatibility mode a page gets rendered. The compatibility mode is available for Internet Explorer 7, 8, 9 and 10. So you have four different tag options:
This tag (or a similar HTTP header) tells the Internet Explorer to render with the most current engine version available on the local machine. Moreover, the user is not allowed to pick a different version by hand. This means if a user visits your page using Internet Explorer 8, it will use the Internet Explorer 8 rendering engine; if a user visits using Internet Explorer 10, it will use the Internet Explorer 10 rendering engine; and so on…
This tag (or a similar HTTP header) tells Internet Explorer to render using the Internet Explorer 9 rendering engine. If this page is visited using an older Internet Explorer version, it will fall back to its highest rendering engine.
11
This tag (or a similar HTTP header) tells the Internet Explorer to render using the Internet Explorer 8 rendering engine.
This tag (or a similar HTTP header) tells the Internet Explorer to render using the Internet Explorer 7 rendering engine.
What compatibility mode should I use? I recommend using the tag for the latest Internet Explorer rendering engine available (while you were developing the page). This way you get the same rendering regardless of new versions that Microsoft may or may not release, which could otherwise break the layout or functionality of your site. Of course you should always try to test and update your sites as soon as possible.
12
Reset the default styling Now that you know the right DOCTYPE and compatibility mode for your page, we can move on to the browsers different default CSS styling. Yes, that’s right: every major browser comes with a different build-in default styling. As an example, let’s create a simple paragraph tag and compare the rendering in different browsers:
As you can clearly see, the rendering is different in all browsers. We did not apply any CSS of our own, so what we see here is the different default CSS that the browser applies to any element. Of course that’s a rather simplified example. In practice, these default styles get applied to nearly all HTML elements you insert in your page. This is, of course, not really what we want. If possible every browser should render our page the same way, not like some browser vendor thinks is best. To get there we need to override the default styling for every element using our own default styling on which we’ll base the actual page layout.
13 I will not get into the boring details on how to do this yourself because somebody has already done this work for you. Simply download one of the following reset or normalize style sheets and include them in your site’s tag. Please make sure that the style sheet gets included before all other style sheets. Some reset and normalize style sheets: • http://meyerweb.com/eric/tools/css/reset/ • http://yuilibrary.com/yui/docs/cssreset/ • http://www.cssreset.com/scripts/html5-doctor-css-resetstylesheet/ • http://necolas.github.com/normalize.css/ After adding a reset or normalize style sheet to our example, it looks much more consistent across all major browsers. Please bear in mind that font rendering always slightly differs between rendering engines and operating systems.
This gives us a consistent enough environment on which we can build our cross-browser compatible website. Including a reset style sheet in every page should get a mandatory step for you.
14
HTML Now we’ve set the basics like DOCTYPE, compatibility mode and CSS reset, we can dive right into the actual page coding. First let’s take a look at HTML 4 and HTML 5 and how the different browsers handle these.
HTML 4 and modern browsers Great news if you don’t need to support Internet Explorer 6 anymore. Every major browser (starting with Internet Explorer 7) supports all HTML 4 tags without any compatibility problems.
Do I need Internet Explorer 6 support? This is a question only your users can answer for you, but I’ll try to give you some things to consider. If possible take a detailed look at your site statistics, customers or user base. In most cases you won’t find many cases of significant Internet Explorer 6 usage anymore. Moreover, big companies like Google, Facebook and Twitter dropped their support for Internet Explorer 6 a while ago, and even Microsoft discourages the usage (http://www.ie6countdown.com/). Nevertheless, Internet Explorer 6 still plays a role in some corporate environments or china and you may need to support it. If you go for Internet Explorer 6 support, please keep in mind that this closes the door for the usage of the many new HTML 5 features.
15
HTML 5 HTML 5 introduces many great new features into the HTML standard. As the time of writing the HTML 5 specification is still not finalized, but all major browser vendors have already started to implement many of these features. In the following I’ll describe the newest features that browsers already support, and how you get support ready in older browsers starting with Internet Explorer 7. As mentioned earlier, you will be hard-pressed to get these features going in Internet Explorer 6. Please remember that this book has no auto-update function, so be sure to check our online resource at www.crossbrowserbook. com/Knowledge to get the latest information about browser support. Moreover, you can include the great library Modernizr (http://modernizr.com) in your page; it detects all HTML 5 features you can use in the current browser. Of course HTML 5 contains many more features, elements and attributes than are described here. You could fill a book just about HTML 5 (Further reading: http://diveintohtml5.info, http://www. abookapart.com/products/html5-for-web-designers).
16
Multimedia and Drawing There are quite a few multimedia and drawing capabilities available in HTML 5. You can play sound and videos without the need for any additional plugin. Moreover you can show vector images and draw on a canvas using JavaScript.
The tag is one of the great new features included in HTML 5. It allows for native supported sound or audio streams to the user without the use of any plug-in (like Flash). You can use the tag like this:
Browsers that support this tag display a media player control so the user can start, stop and resume the audio playback. Of course these media player controls does not have a consistent look across all the major browsers.
Moreover, not every browser supports the same audio formats. Because of this you can add more than one source tag inside the tag.
17 The browser will automatically select the audio source it supports (if any). Here are the audio formats currently supported across the different browsers:
9+ MP3, AAC
3.5+ 3+ MP3, MP3, OGG OGG, WAV, AAC
3.1+ MP3 AAC, WAV
10+ OGG WAV
2.3+ MP3, AAC WAV
4.0+ MP3, AAC, WAV
7.5+ MP3, AAC
7.0+ MP3, AAC, WAV
Unfortunately, the browsers Internet Explorer 7 and 8 don’t support this tag out-of-the-box, so you will need to provide a fallback solution for these browsers. The simplest fallback would be a link to download the file manually. This link will not be visible in browsers that support the tag. Not audio playback support, please download the file here.
To get tag support for older Internet Explorer versions you can use the following: jPlayer (http://github.com/happyworm/jPlayer) uses Flash to simulate the audio tag for older Internet Explorer versions. audio.js (http://kolber.github.com/audiojs) uses Flash to simulate the audio tag for older Internet Explorer versions. SoundManager2 (http://www.schillmania.com/projects/soundmanager2/) uses a flash fallback
18 The tag introduced in HTML 5 can be used to directly embed video content without the need of an additional plug-in. You can use the tag like this:
Browsers supporting the tag will now display media player controls to control the video playback. Like the tag, the different browsers display this media player different:
19
Again, the format support differs between the browsers:
9+ MP4
3.5+ 3+ WebM, MP4, OGG WebM, OGG
3.1+ MP4
10+ WebM OGG
2.2+ MP4
3.2+ MP4
7.5+ MP4
7.0+ MP4
To provide a fallback for older browsers like Internet Explorer 6, 7 and 8 you can provide a download link: Not video playback support. Please download the video.
To get video support in older Internet Explorer versions you can use the following: html5media (http://html5media.info/) uses Flash to simulate the and tag for older Internet Explorer versions.
20 mediaelementsjs (http://mediaelementjs.com/) uses Flash and Silverlight to emulate the and tag for older Internet Explorer versions. videojs (http://videojs.com/) uses Flash as a fallback solution
The tag provides script access to a resolution-dependent bitmap canvas. This canvas can be used to render graphs, game graphics or other visual images on the fly (using JavaScript). You can use the tag like this: Your browser does not support the HTML 5 canvas tag. var canvas = document.getElementById("canvas"); var drawingContext = canvas.getContext("2d"); drawingContext.fillStyle="#000000"; drawingContext.fillRect(0,0,200,100);
This code will draw a rectangle (200x100 pixel) filled with black color. Luckily, the drawing is consistent across all supporting browsers. These are:
9+
1.5+
1+
2+
9+
2.1+
3.2+
7.5+
7.0+
21 To get canvas support in older Internet Explorer versions you can use the following: FlashCanvas (http://flashcanvas.net/) simulates the tag in older Internet Explorer versions using Flash and JavaScript. explorercanvas (http://code.google.com/p/explorercanvas/) simulates the tag in older Internet Explorer versions using JavaScript and VML. fxCanvas (http://code.google.com/p/fxcanvas/) simulates the tag using flash
The tag can be used to create scalable vector graphics directly in HTML or an external resource. These graphics don’t lose quality if they get scaled or zoomed. A quick example:
This code will result in a browser drawing the following (odd) graphic:
22 Currently most modern browsers support the tag:
9+
1.5+
1+
3+
8+
3.0+
3.2+
7.0+
7.0+
To get support in older browsers you can use the following Scripts: websvg (http://code.google.com/p/svgweb/) uses JavaScript to simulate if needed Raphaeljs (http://raphaeljs.com/) uses JavaScript to simulate if needed Ample SDK (http://www.amplesdk.com/examples/markup/svg/) is an open-source GUI Framework SIE (http://sie.sourceforge.jp/) emulates svg using VML Dojo Toolkit (http://livedocs.dojotoolkit.org/) includes fallback via VML, Canvas, Silverlight and Flash
23
Web Applications With HTML 5 it got much easier to create full featured web applications. Features like geolocation, web storage, web workers and many more allow for feature rich web applications directly run by the browser.
Application Cache With the use of the HTML 5 application cache it’s easy to get your web application to work offline. This can be accomplished by creating a cache manifest file. In this file you can specific resources the browser should download and use in case your application is running offline. An example of this manifest file you look like this: CACHE MANIFEST /style.css /logo.png /application.js NETWORK: login.asp FALLBACK: /html/ /offlinemode.html
To get this working you need to specify this manifest file in the main page of your application.
All major browsers starting with Internet Explorer 10 support this:
10+
3.5+
4+
4+
10+
2.1+
3.2+
8.0+
7.0+
24 Currently there is no polyfill available to get this functionality working in older browsers. You can find a unfinished implementation using Google Gears here: http://code.google.com/p/html5gears/.
File API One major shortcoming of web applications is working with files on the client side. Uploading and manipulating files was often only possible by using plug-ins like flash. The File API enables you to simply manipulate files in the browser and enhance the file upload user experience. A quick file upload example could look like this: function startRead() { var file = document.getElementById('fl').files[0]; getAsText(file); } function getAsText(readFile) { var reader = new FileReader(); reader.readAsText(readFile, "UTF-16"); reader.onprogress = updateProgress; reader.onload = loaded; reader.onerror = errorHandler; } function updateProgress(event) { if (event.lengthComputable) { var loaded = (event.loaded / event.total); if (loaded F and E + F This selector matches all immediate children of the specified element. Internet Explorer 7 Will not parse this selector correctly if there is a comment between selector and the next simple selector. /* This will not work in IE 7 */ a>div /* comment */ #test { background-color: #ffffff; } /* This will not work */ a+div /* comment */ #test { background-color: #ffffff; } /* This will work */ a+div #test { background-color: #ffffff; }
53 Units and @-Rules CSS 2 defines a wide range of units, values and @-Rules. In the following sections you will learn which of these are supported by the different browsers. Let’s start with the basic units that are supported by all major browsers including Internet Explorer 7 and newer: em, ex, in, cm, mm, pt, pc, px and %. You will see in the following sections how the @-Rules support differs across browsers.
@charset This @-Rule can specify a character encoding for any external style sheet. It has to be specified in the first line of any file. If you define the charset using quotes then it will work in all major browsers: @charset "ISO-8859-15";
@font-face This @-Rule can be used to integrate a custom font. It’s currently supported by every major browser, but Internet Explorer 7 and 8 only support Embedded OpenType Font files (EOT):
@import Using this @-Rule you can import another style sheet into the current one. This must be specified prior to any style rules. This rule is not supported in older Internet Explorer versions (7 and 8):
9+
1.5+
3+
4+
9+
2.1+
2.0+
7.0+
7.0+
54 @media Using this @-Rule you can target a style sheet at special media types like screen or print. It does work in all major browsers if you don’t omit the media type.
7+
1.5+
3+
4+
9+
2.1+
2.0+
7.0+
7.0+
@page This @-Rule can be used to define margins for print. You can, for example, define different left- and right-hand margins for printing double-sided pages. This @-Rule is supported by most browsers:
9+
1.5+
3+
4+
9+
2.1+
2.0+
7.0+
7.0+
Properties In CSS properties can be used to define rules that apply to a set of elements on any HTML page. CSS 2 defines a big chunk of properties to manipulate the appearance of elements. Unfortunately, not every browser handles these properties as specified by the standard. In the following sections you will learn which CSS 2 properties can be a big headache when used in your websites and web applications. Please note that those properties not listed in this chapter are supported in all major browsers starting with Internet Explorer 7.
55 Box properties border-color, border-style and border-width These properties can be used to set the border appearance. Internet Explorer 7 • The background does not expand to the elements border. That means the background will not be visible between the dots of a dotted border. • Does not support hidden or inherit as values. • If the border of one or more sides (not all four) is set to 1px and dotted then Internet Explorer 7 will draw dashed instead of dotted. /* The left border will be dashed instead of dotted */ div { border: 1px dotted red; border-left: 1px dotted blue; } /* The border will be correctly dotted */ div { border: 1px dotted red; border-left: 2px dotted blue; }
Internet Explorer 8 • Elements that have a defined color do not inherit the border-color of their ancestors even if correctly defined. • 1px dashed borders will not be displayed correctly until any element on the page gets keyboard focus.
56 margin, margin-left, margin-top, margin-right, margin-bottom The margin properties define the whitespace around an element. They will be placed outside the element. Internet Explorer 7 • Does not collapse margins correctly. • Does not support the inherit value. Internet Explorer 8 • Does not take the computed margin value into account if the inherit value is used. max-height This property can be used to define the maximum content height for an element. An element will not be extended beyond maxheight. Internet Explorer 7 Does not support hidden or inherit as values. Internet Explorer 8 If an element has overflow:scroll defined, the max-height property will be treated as height. /* This will not work correctly */ div { overflow: scroll; max-height: 500px; } /* This will work correctly */ div { max-height: 500px; }
57 min-width This property can be used to define the minimum content width for an element. An element will not shrink beyond the min-width. Internet Explorer 7 • Does not support inherit as value. • Treats min-width as width on input elements. You can set overflow:visible as a workaround. max-width This property can be used to define the maximum content width for an element. An element will not be extended beyond the maxwidth. Internet Explorer 7 Does not support inherit as value. Internet Explorer 8 If the max-width value toggles content overflow, Internet Explorer 8 will ignore max-width. outline-color, outline-style, outline-width These properties let you define an outline around an element. Like border, you can set a color, style and width. Internet Explorer 7 Does not support outline. Internet Explorer 8 Does not position the outline right if the element is positioned inline.
58 padding-top, padding-bottom These properties can be used to define padding around the content of an element. The padding will be drawn inside the border of the element. Internet Explorer 7 Does not support the inherit value. Internet Explorer 8 If an element has a defined padding-top or padding-bottom using percentage values and a margin, it will not calculate the padding correctly. /* This will not work correctly for the p element */ div { margin-top: 5px; } p { padding-top: 15%; } /* This will work correctly for the p element */ div { margin-top: 5px; } p { padding-top: 5px; }
Layout properties clear This property can be used to clear an element’s floating sides. Internet Explorer 7 If the element is floating in the opposite direction, Internet Explorer 7 will ignore this property.
59 display This property is used to set which type of box (based on the CSS box model) an element generates. Internet Explorer 7 • Does not support inline-table, run-in, table, table-caption, table-cell, table-column, table-column-group, table-row and table-row-group. • Only supports inline-block for naturally inline elements. • Does not support inherit. float This property can be used to set whether an element (or box) should float in any direction. Internet Explorer 7 Does not support the inherit value. Internet Explorer 8 Does not correctly compute the width of a floated parent element if the child elements do not have any height specified. visibility This property can be used to control the visibility of an element. Internet Explorer 7 • Does not support the inherit and collapse values. • Children of a hidden element cannot be made visible. Internet Explorer 8 Does not correctly compute the width of a floated parent element if the child elements do not have any height specified.
60 z-index This property lets you set the stacking order of elements (z-index: 1 gets stacked on z-index: 0). Internet Explorer 7 • Treats the value auto as zero. • Does not support the value inherit. Internet Explorer 8 Parses decimal values as z-index even though this should not work based on the CSS 2 standard.
List properties list-style-type This property can be used to specify the list marker. There can be bullets, or numeric or alphabetic systems. Internet Explorer 6 and 7 • The values armenian, decimal-leading-zero, georgian, lower-latin, upper-latin and lower-greek are not supported. • The list marker will not be shown if the list item is floating • Does not support the value inherit. Internet Explorer 8 Does not render disc correctly if used with MS Sans Serif font. list-style-image This property can be used to specify an image that should be used as list marker. Internet Explorer 6 and 7 • The list marker will not be shown if the list item is floating. • Does not support the value inherit.
61 Internet Explorer 8 The page will crash if list-style-image is used with the universal selector. /* crashes Internet Explorer 8 */ * { list-style-image: url("/images/test.png"); }
Box properties border-collapse This property can be used to specify the border model to be used for a table element. Internet Explorer 6 and 7 • Does not support the inherit value. • The value collapse will not override cellspacing even though it should. border-spacing This property sets the spacing between two table cells borders. This property cannot be used in combination with the bordercollapse property. Internet Explorer 6 and 7 The property is not supported. caption-side This property defines the vertical position of a table’s caption box. Internet Explorer 6 and 7 The property is not supported.
62 empty-cells This property can be used to control how table cells without visible content should be rendered. The possible values are hide, show and inherit. Internet Explorer 6 and 7 The property is not supported
Background properties background-repeat This property can be used to control whether the background image of an element should be repeated if the element is bigger than the image. Internet Explorer 6 and 7 Do not support the inherit value. Internet Explorer 8 If the background image is an animated and transparent GIF, the transparent color will be replaced by the color black if this background image gets repeated.
Text properties text-shadow This property can be used to control the shadow effect that can be attached to a text element. This property was extended in the CSS 3 specification. Internet Explorer 6, 7 and 8 This property is not supported.
63 Other properties white-space This property can be used to control the handling of whitespaces inside an element. Possible values are normal, nowrap, pre, pre-line, inherit and pre-wrap. Internet Explorer 6 and 7 • The values pre-line and pre-wrap are not supported. • The white-space property does not behave correctly when used on textarea elements. • The value inherit is not supported. content This property can be used to add generated content to the document. This content will be visible but will not affect the DOM. Internet Explorer 6 and 7 This property is not supported. counter-increment This property can be used to increment counter variables. Internet Explorer 6 and 7 This property is not supported. counter-reset This property can be used to create and reset different counters. Internet Explorer 6 and 7 This property is not supported.
64 orphans This property can be used to specify the lines of text that remain on the previous page if an element is split over two pages. Internet Explorer 6, 7, Firefox, Chrome and Safari This property is not supported. quotes This property can be used to specify the character that is used for quotes in generated content. Internet Explorer 6 and 7 This property is not supported. widows This property can be used to specify the lines of text that are moved to the next page if an element is split over two pages. Internet Explorer 6, 7, Firefox, Chrome and Safari This property is not supported.
65
CSS 3 The CSS 3 standard is currently a work-in-progress standard. Nevertheless, all major browser vendors have already started to implement many of the new CSS 3 features. Unlike the CSS 2 features, the older browsers (Internet Explorer 7 and 8) don’t support many of these new features. As always, updated compatibility information is available at http://www.crossbrowserbook. com/Knowledge.
Selectors Great news here! All major browsers starting with Internet Explorer 9 already support each and every new CSS 3 selector. If you don’t target older browsers, you can happily skip this section. Otherwise, you can either simulate most of the selectors using the script selectivizr (http://selectivizr.com/) or use only selectors that are supported by all target browsers. In the following sections you will learn which selectors you can use for which browsers. Selectors that are not mentioned in the following are supported by all major browsers including Internet Explorer 7, 8 and 9.
E[attr^=val], E[attr$=val], E[attr*=val] These attribute selectors enhance the CSS 2 attribute selector abilities. These selectors enable you to match starting (^=), ending ($=) or containing (*=) attribute values. Internet Explorer 7 Not supported! Internet Explorer 8 These selectors will not match colspan or rowspan attribute values correctly.
66 E~F This selector matches elements that are siblings of the defined element. They don’t have to be direct siblings (like in E>F or E+F). Internet Explorer 7 Will not parse this selector correctly if there is a comment between selector and the next simple selector. /* This will not work */ a~div /* comment */ #test { background-color: #ffffff; } /* This will work */ a~div #test { background-color: #ffffff; }
Internet Explorer 8 The selector will not match more than 298 child elements.
Units and @-Rules CSS 3 defines two more @-Rules and a few new units. In the following sections you will learn which of these are supported by the different browsers. Let’s start with a quick overview of the new units and their browser support.
67
ch
9+
-
-
-
-
-
-
-
-
deg
9+
3.6+
2+
4+
-
4.0+
3.1+
7.5+
10.0+
dpcm
10+
3.5+
18+
5.1+
9.5+
4.0+
3.1+
7.5+
10.0+
dpi
10+
3.5+
18+
5.1+
9.5+
4.0+
3.1+
7.5+
10.0+
grad
9+
3.6+
2+
4+
12+
4.0+
3.1+
7.5+
10.0+
Hz
-
-
-
-
-
-
-
-
-
kHz
-
-
-
-
-
-
-
-
-
ms
9+
4+
11+
3.2+
10+
4.0+
3.1+
7.5+
10.0+
rad
9+
3.6+
2+
4+
12+
4.0+
3.1+
7.5+
10.0+
rem
9+
3.6+
4+
5.1+
11+
4.1+
3.1+
7.5+
10.0+
s
9+
4+
11+
3.2+
10+
4.0+
3.1+
7.5+
10.0+
turn
9+
13+
-
-
-
-
-
7.5+
-
vm
9+
-
-
-
-
-
-
7.5+
-
vh
9+
-
-
-
-
-
-
7.5+
-
@keyframes This @-Rule can be used to define animations. It is supported in many modern browsers using different prefixes:
10+
16+
11+ 5+ webkit webkit
12+
4.0+ 3.1+ webkit webkit
-
10.0+ webkit
@namespace This @-Rule can define a namespace and alias for the current style sheet. It must be placed after @charset and @import but prior to any CSS rules. This @-Rule is not supported in older browser versions:
9+
15+
11+
5+
11+
2.2+
4.0+
-
10.0+
68 Properties CSS 3 introduces a wide array of new properties to change the appearance of a website. As with HTML 5, not all browsers support each and every one of the new CSS 3 properties. In the following sections you will learn which browsers supports what properties out-of-the-box and how you can get some of these to work in older browsers like Internet Explorer 7 or 8.
Animation properties animation The new CSS 3 animation property allows for animations specified directly in CSS rather than through JavaScript. The animation property can be used as a shorthand property for the following properties that define an animation. The syntax for a complete animation can look like this (more information on the properties follows): animation: name duration timing delay iterations direction fillmode;
A real-world example would look something like the following: animation: blink 2s linear 1.5s infinite normal none;
On its own this animation will not be rendered. You’ll need to define one or more key frames to tell the browser which CSS properties of the target element it should manipulate. To complete the above blinking animation key frames need to be defined: @keyframes blink { 0% { background-color: red; } 50% { background-color: green; } }
69 The great news is that the current versions of all major browsers do support the animation property or their browser vendorspecific implementation. The full support table is as follows:
10+
16+
12+ 4+ webkit webkit
12+ o
4.0+ 3.2+ webkit webkit
-
7.0+ webkit
The only possible solution you can use to get some of these animation effects in older Internet Explorer versions is the script cssSandpaper (http://www.useragentman.com/blog/2010/04/05/ cross-browser-animated-css-transforms-even-in-ie/). animation-name This property can be used to specify a name for the animation. This name must be used in the key frames definition to match animation to key frames. This property is mandatory. animation-duration This property defines the duration of the animation. It can be defined as a positive number followed by a time-based unit like seconds or milliseconds. This property is mandatory. animation-duration: 5s; /* runs 5 seconds */ animation-duration: 10ms; /* runs 10 milliseconds */
animation-timing-function Every animation can contain a timing function to describe how the animation should proceed over time. It will be applied to every key frame. Possible values are ease, ease-out, ease-in and ease-in-out. Moreover it’s possible to specify step values. This property is optional.
70 animation-timing-function: ease-in; animation-timing-function: step(1, end);
animation-delay An animation can start playing immediately or after some delay. This value can, like animation-duration, be set to a number value followed by a time-based unit. In this case 0 and a negative value are allowed. This property is optional. animation-delay: 1.5s; /* starts after 1.5s delay */ animation-delay: -2s; /* starts 2s into animation */
animation-iteration-count This property defines the iteration count of the animation. You can define an animation to run infinite or for one or more iterations. This property is optional. /* animation will run 9 iterations */ animation-iteration-count: 9; /* animation runs forever */ animation-iteration-count: infinite;
animation-direction You can use this property to define the direction of an animation. Possible values are normal and alternate. The animation direction is based on all key frames. So if alternate is specified every second iteration of the animation will be played in reverse order. This property is optional. animation-fill-mode The last of the animation properties is used to define the fill mode for an animation. Possible values are none, forwards, backwards and both. If set to forwards, the last key frame remains after the end of the animation; otherwise the original state of the
71 element will be restored. Backwards means the first key frame is shown (during a possible delay) instead of the original state of the element. Both combines the two options. This property is optional.
Box properties border-image The new CSS 3 border-image property can be used to define borders based on a single image file. If you want to use this property on an element, the border property has to be set. The general usage would be: border-image: imageURL draw-size / border-width style;
A quick example: border-image: url('test/image.png') 3 / 2px round;
Possible values for the style property are stretch, round and repeat. Almost all the current versions of major browsers support this property.
-
15+ moz
7+
5+ webkit
11+ o
2.1+ 3.2+ webkit webkit
-
7.0+ webkit
To get this property supported in Internet Explorer you can use the script CSS3 PIE (http://css3pie.com), which enables support for many CSS 3 features in Internet Explorer. border-radius This new CSS 3 property can be used to create rounded corners for any element that has a background or border. The general usage is:
72 border-radius: horizontal-radius / vertical-radius;
A quick example: .testdiv { border:3px solid red; background:green; padding:10px; width:200px; border-radius:25px / 15px }
This will result in the (oddly shaped) border as seen below:
This property is widely supported by all major browsers including Internet Explorer 9.
9+
4+
4+
5+
11+ o
2.2+
4.0+ webkit
-
7.0+ webkit
To get this property supported in Internet Explorer 7 and 8 you can use the script CSS3 PIE (http://css3pie.com), which enables support for many CSS 3 features in Internet Explorer.
Text and font properties text-overflow This property can be used to control how text that is longer than the containing area should be handled. Possible values are clip (text gets hidden), ellipsis (text will be clipped and end with …) and ellipsis-word. The following figures highlight the differences:
73 text-overflow: clip;
text-overflow: ellipsis;
This property is supported by all major browsers starting with Internet Explorer 9.
9+
7+
1+
5+
12+
2.1+
3.2+
-
7.0+
word-wrap This property can be used to set whether words that are longer than their containing element should be wrapped. Possible values are normal (word will overflow the container) and breakword (word will be broken across two lines if necessary). word-wrap: normal;
74 word-wrap: break-word;
Just like the text-overflow property, this property is supported by all major browsers starting with Internet Explorer 9.
9+
3.5+
1+
5+
12+
2.1+
3.2+
7.5+
7.0+
Background and color properties background The new CSS 3 specification allows for multiple background including images, colors and gradients. You can use the background property to stack backgrounds on top of each other. A quick example: background: url('test/image.png'), url('test/image2. png') #383838;
This will stack image.png on top of image2.png on top of the standard background color #383838. Starting with Internet Explorer 9, every modern browser supports this new property.
75
9+
3.6+
1+
4+
10+
2.1+
3.2+
7.5+
7.0+
To get this property supported in Internet Explorer 7 and 8 you can use one of the following scripts: CSS 3 Pie (http://css3pie.com) cssSandpaper (http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/) background-clip This property can be used to specify the visible range of any background, including images, colors and gradients. Possible values are border-box, padding-box and content-box. The values determinate which element the background is clipped to. You can use this property like this: background-clip: content-box;
All major browsers support this property.
9+
4+
1+
3+
12+
2.1+
3.2+
7.5+
7.0+
Currently, no script is available to get this working in older Internet Explorer versions. background-origin This property can be used to set the position of any background image(s). The possible values are border-box, padding-box and content-box. The values determinate which element the background image is clipped to. The property can be used like this:
76 background-origin: padding-box;
Starting with Internet Explorer 9, every major browser supports this property.
9+
4+
1+
4+
10+
2.1+
3.2+
7.5+
7.0+
Currently, no script is available to get this working in older Internet Explorer versions. background-size The property background-size can be used to resize the background image(s) defined for any element. The general usage is: background-size: 110px 50%;
The above example would set the width to 110px and the height to 50%. Starting with Internet Explorer 9, all major browsers support this feature.
9+
3.6+
3+
4.1+
10+
2.1+
3.2+
7.5+
7.0+
Currently, no script is available to get this working in older Internet Explorer versions. opacity This new property can set the transparency of an element. Possible values are between 0 (fully transparent) and 1 (solid). The syntax is:
77 opacity: 0.2; /* 20% transparency */
Starting with Internet Explorer 9, all major browsers support this property.
9+
1+
1+
3+
9+
2.1+
3.2+
7.5+
7.0+
To get this property supported in Internet Explorer 7 and 8 you can use these scripts: CSS3 Pie (http://css3pie.com) cssSandpaper (http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/)
Gradient properties linear-gradient To create transitions between one color and another you can use the new CSS 3 value linear-gradient. This can be used in a background property (and nowhere else). To define a lineargradient you simply assign colors separated by commas. background: lineargradient(startingpoint, color1 colorstop(s), color2);
For example, the simple linear-gradient: background: linear-gradient(left, green, red);
Will result in a background like this:
78
And another, more complex example: background: lineargradient(top, green, blue 30%, yellow 70%, red);
This powerful and handy property is available starting with Internet Explorer 10.
10+
16+
10+ 5.1+ webkit webkit
12+ o
4.0+ 5.0+ webkit webkit
7.5+
10.0+ webkit
79 To get this property supported in Internet Explorer 7, 8 and 9 you can use this script: CSS3 Pie (http://css3pie.com) enables support for many CSS 3 features in Internet Explorer. radial-gradient Another gradient format is the radial-gradient. The syntax for this gradient is a little more complicated: background: radial-gradient(center, shape size, color1, colorstop, stopposition, color2);
The center of the gradient can be set using pixel values starting at the top left of the containing box. The gradient can have different shapes; possible values are circle and ellipse. The size of the gradient can be defined using the values closest-side, farthest-side, closest-corner and farthest-corner. Here are some quick examples: background: radial-gradient(20px 40px, circle closestside, red, green);
80 background: radial-gradient(20px 40px, ellipse farthestside, red, green);
background: radial-gradient(20px 40px, circle closestcorner, red, green);
81 background: radial-gradient(20px 40px, ellipse farthestcorner, red, green);
The radial-gradient is available starting with Internet Explorer 10.
10+
16+
3+ 4+ webkit webkit
11+ o
4.0+ 5.0+ webkit webkit
7.5+
10.0+ webkit
Currently, no script is available to get radial-gradient working in older Internet Explorer versions. repeating-linear-gradient This property works just like the regular linear-gradient but it repeats the colors infinitely in all directions. If we change the above linear-gradient examples, it will look like this: background: repeating-lineargradient(left, green 20%, red 30%);
Will result in a background like this:
82
And another, more complex example: background: repeating-lineargradient(top, green, blue 30%, yellow 50%, red 65%);
This powerful and handy property is available starting with Internet Explorer 10.
10+
16+
10+ 5.1+ webkit webkit
11+ o
4.0+ 5.0+ webkit webkit
7.5+
10.0+ webkit
Currently, no script is available to get repeating-linear-gradient working in older Internet Explorer versions.
83 repeating-radial-gradient This property works just like the regular radial-gradient, but it will repeat the gradient inside the element. The following examples show you the difference: background: repeating-radialgradient(20px 40px, circle closest-side, red, green);
background: repeating-radialgradient(20px 40px, ellipse farthest-side, red, green);
84 This powerful and handy property is available starting with Internet Explorer 10.
10+
16+
10+ 5.1+ webkit webkit
12+ o
4.0+ 5.0+ webkit webkit
7.5+
10.0+ webkit
Currently, no script is available to get repeating-linear-gradient working in older Internet Explorer versions.
Shadow properties box-shadow This property can give any box element one or more shadows. The syntax for this property is: box-shadow: inside? x-offset y-offset blur spread color;
And an example could looks like this: box-shadow: 4px 4px 16px black;
Starting with Internet Explorer 9, all major browsers support this property.
9+
4+
10+
5.1+
10+
4.0+
5.0+
7.5+
10.0+
85 To get this property supported in Internet Explorer 6, 7 and 8 you can use this script: CSS3 Pie (http://css3pie.com) enables support for many CSS 3 features in Internet Explorer. text-shadow Just like box-shadow, this property can be used to assign a shadow to any text. The syntax is somewhat similar to box-shadow: text-shadow: x-offset y-offset blur color;
A quick example shows how this could look: text-shadow: 2px 2px 8px black;
This property is available starting with Internet Explorer 10.
10+
3.5+
2+
3+
9+
2.1+
3.2+
-
10.0+
There is a jQuery plug-in available to simulate this property in Internet Explorer 8 and below. You can find it here: https://github. com/heygrady/textshadow. Another option would be to use shadow filters: http://msdn.microsoft.com/en-us/library/ms533086%28VS.85%29.aspx.
86 Transform properties rotate The rotate value can be used to rotate different elements. The syntax for this value is quite simple: transform: rotate(55deg);
This will rotate the targeted element by 55 degrees clockwise. A negative value would rotate the targeted element counter-clockwise. transform: rotate(-55deg);
All major browsers starting with Internet Explorer 10 support this property.
87
10+
16+
11+ 3.1+ webkit webkit
12+
2.1+ 3.2+ webkit webkit
7.5+
7.0+ webkit
To get this property in older Internet Explorer (including IE 6) versions you can use cssSandpaper (http://www.useragentman. com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/) or Transformie (https://github.com/pbakaus/transformie). scale The scale value can be used to scale elements up or down. The syntax for this value is quite simple: transform: scale(2);
88 transform: scale(2, 1.5);
All major browsers starting with Internet Explorer 10 support this property.
10+
16+
12+ 3.1+ webkit webkit
12+
2.1+ 3.2+ webkit webkit
7.5+
7.0+ webkit
To get this property in older Internet Explorer (including IE 6) versions you can use cssSandpaper (http://www.useragentman. com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/) or Transformie (https://github.com/pbakaus/transformie).
89 skew The skew value can be used to tilt elements. The syntax for this value is quite simple: transform: skewX(55deg);
This will skew the element horizontally. To get a vertical skew you can use something like this: transform: skewY(55deg);
90 All major browsers starting with Internet Explorer 10 support this property.
10+
16+
12+ 3.0+ webkit webkit
12+
2.1+ 3.2+ webkit webkit
7.5+
7.0+ webkit
To get this property in older Internet Explorer (including IE 6) versions you can use cssSandpaper (http://www.useragentman. com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/) or Transformie (https://github.com/pbakaus/transformie). translate The translate value can be used to move elements. Although you can get the same effect using margin or positioning, this value is preferred for animations. The syntax is: transform: translate(50px, 30px);
This will move the element 50 pixels to the right and 30 to the bottom. Negative values are supported. All major browsers starting with Internet Explorer 10 support this property.
10+
16+
12+ 3.0+ webkit webkit
12+
2.1+ 3.2+ webkit webkit
7.5+
7.0+ webkit
To get this property in older Internet Explorer (including IE 6) versions you can use cssSandpaper (http://www.useragentman. com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/) or Transformie (https://github.com/pbakaus/transformie).
91
JavaScript JavaScript is the most used scripting language for dynamic and interactive web content. Unlike Flash and Silverlight, the user does not need to install any additional plug-ins to use a JavaScriptenabled website. Today most of your website visitors will use a browser that supports JavaScript natively. But this native support of JavaScript comes at a cost. Like the rendering engines every major JavaScript engine handles JavaScript differently. This is less noticeable than HTML and CSS differences, but browser incompatibilities in JavaScript do exist. In this section you will learn what JavaScript code does not work across all major browsers, how to overcome these incompatibilities and which JavaScript Frameworks can help you in creating cross-browser compatible JavaScript code. Let me tell you that there is a big step you can take to avoid nearly all JavaScript cross-browser issues: Select a cross-browser framework and use it as much as possible. Many months of work went into hiding all the browser incompatibilities from the JavaScript developers. Only if you absolutely have to write your own JavaScript code you should do so!
92
Cross-browser frameworks Don’t want to do the heavy cross-browser lifting? The following JavaScript frameworks will provide you with cross-browser tested ways to accomplish various tasks without the need to create any browser detection code yourself.
jQuery jQuery is a JavaScript framework that is used by many, many web developers around the globe. It tries to simplify DOM manipulation, event handling, animations, AJAX calls and more. Because it’s wrapped into its own JavaScript functions, it can handle crossbrowser compatibility issues for you, without you even noticing the differences under the hood. You can find and download jQuery free of charge at their homepage: http://jquery.com/. Of course jQuery has extensive documentation and many books have been written about learning and using jQuery, so I will not try to teach you jQuery here. Let me just give you a quick example of how jQuery code can look: $("p.neat").addClass("ohmy").show("slow");
This short snippet will select all tags that have the class attribute defined as “neat” and will add the CSS class “ohmy” to them. After this it will play a slow animation to bring these elements into view. Just imagine how much JavaScript code would be necessary to recreate this functionality across all major browsers including Internet Explorer 6. jQuery supports Internet Explorer 6+, Firefox 10+, Safari 5.0+, Chrome and Opera. It has hundreds of available plug-ins to extend its functionality. Use it to greatly reduce your cross-browser compatibility issues.
93 Prototype Another great JavaScript framework is Prototype (http://www.prototypejs.org/). It works in a somewhat similar way to jQuery and focuses on DOM manipulation, AJAX and JSON. Of course it works across all major browsers without any work at your end. You can download it, free of charge, from http://www.prototypejs.org/. Again, I will not rewrite the Prototype documentation here (you can find a good start here http://www.prototypejs.org/learn), but give you a quick code example of how Prototype code can look: $('comments').addClassName('active').show();
This short snippet will add the CSS class named “active” to the element with the ID “comments” and then show the element. With just this one line of code you can achieve this functionality across all major browsers! Prototype supports Internet Explorer 6+, Firefox 1.5+, Safari 2+, Chrome and Opera. Use it to greatly reduce your cross-browser compatibility issues.
MooTools The third JavaScript framework I would like to show you is called MooTools. It focuses more on object orientation, DOM manipulation, events and AJAX. You can download it, free of charge, at http://mootools.net. MooTools provides great documentation (http://mootools.net/ docs) and a lot of interactive demos (http://mootools.net/demos/) that you should check out to get a feeling for working with it. Like the other two JavaScript frameworks, it supports all major browsers like Internet Explorer 6+, Chrome, Firefox, Safari and Opera.
94
Mobile frameworks Aside from these cross-browser framework there are a few JavaScript Frameworks specialized in mobile development. Again these frameworks take away many cross-device problems like different touch events and browser detection.
jQuery Mobile jQuery mobile is a JavaScript framework optimized for the usage on mobile devices. It is based on jQuery and jQuery UI (http:// jqueryui.com/) and enables you to quickly build touch ready user interfaces which work on all major devices. You can download jQuery mobile on their homepage http://jquerymobile.com/ and it supports a wide range of devices including iOS, Android, BlackBerry and Windows Phone.
95 jQuery Touch jQuery touch is another mobile JavaScript framework build on top of jQuery. This framework is tailored towards iOS and Android devices by using native animations, scrolling, zoom and swipe detection. You can download jQuery Touch on their homepage http://www. jqtouch.com/, it currently supports iOS and Android devices.
96
Bugs and cross-browser issues Sometimes you just need to implement native JavaScript yourself and cannot rely on a framework. If this is the case you should absolutely read this section first. It will teach you common bugs and cross-browser issues that some browsers introduce to JavaScript functions and events.
getElementById You can use this JavaScript function to retrieve a DOM object that can be identified by the ID attribute. The ID attribute should be distinct so the function should only return 0 or 1 object. But some browsers do not support this function correctly. Internet Explorer 6 and 7 The Internet Explorer versions 6 and 7 will not only search using the ID attribute but also using the Name attribute. This behavior is incorrect and was corrected in Internet Explorer 8+. A quick example: function GetId() { var vDiv = document.getElementById("oDiv1"); return vDiv.innerHTML; } Div#1 Div#2
97 Event.target Many JavaScript events make the events target node available in the event handler function. According to the specification, the target should be added to the event.target property. But older Internet Explorer versions do not get this right. Internet Explorer 6, 7 and 8 The Internet Explorer versions 6, 7 and 8 will not create an event. target property. Instead the targeted node will be made available using the event.srcElement property. A quick example: function imageClicked(event) { /* this will be undefined in IE 6, 7 and 8 */ var clickedElement = event.target; /* this will work in IE but fail in other browsers */ var clickedElement2 = event.srcElement;
Getting and setting attributes If you want to modify the HTML attributes of any DOM element you can use the JavaScript functions getAttribute and setAttribute. But if you want to get or set the style attribute older Internet Explorer versions need special treatment. Internet Explorer 6, 7 and 8 The Internet Explorer versions 6, 7 and 8 will not modify the style HTML attribute if you use setAttribute(“style”). You need to use the attribute cssText instead. A quick example:
98 function setNewStyle(style, node) { /* this will not work IE 6, 7 and 8 */ node.setAttribute("style","height:24px;"); /* this will work in IE 6, 7 and 8 */ node.setAttribute("cssText", "height:24px;"); /* In IE 6, 7 and 8 you can also do this */ node.cssText = "height:24px";
The Internet Explorer versions 6, 7 and 8 will not return the style HTML attribute if you use getAttribute(“style”). You need to use the attribute cssText instead. A quick example: function getNewStyle(style, element) { /* this will not work IE 6, 7 and 8 */ return element.getAttribute("style"); /* this will work in IE 6, 7 and 8 */ return element.getAttribute("cssText"); /* In IE 6, 7 and 8 you can also do this */ return element.cssText;
The Internet Explorer versions 6, 7 and 8 will return the style HTML attribute in all uppercase if you use getAttribute(“cssText”).
The contextmenu event The event contextmenu should be fired if the user opens the contextmenu for any given element (a text input field, for example). Internet Explorer 6 and 7 The Internet Explorer versions 6 and 7 don’t fire the contextmenu event.
99 Internet Explorer 8 If a contextmenu eventhandler is defined on any DOM element, Internet Explorer 8 will no longer show the default context menu.
The loaded event The loaded event should be fired if any resource is finished loading. Nearly all browsers get this right; only a minor glitch is integrated in older Internet Explorer versions. Internet Explorer 6, 7 and 8 The Internet Explorer versions 6, 7 and 8 will not fire the loaded event if a style sheet has finished loading.
The mousewheel event The mousewheel event should always be fired if the mousewheel is used inside an element. Nearly all browsers get this right; only one major glitch was integrated in older Internet Explorer versions. Internet Explorer 6, 7 and 8 The Internet Explorer versions 6, 7 and 8 will fire the mousewheel event but they do not scroll the element if a mousewheel event handler is attached.
The hashchanged event The hashchanged event should always be fired if the part of the URL after the hash has been changed. All major browsers fire this event correctly, but all Internet Explorer versions behave differently than other browsers. Internet Explorer 6 – 10 The Internet Explorer interprets the value after the hash as case sensitive while other major browsers interpret it as case insensitive.
100 The focusin and focusout event The focusin and focusout events should be fired before and after an element get’s keyboard focus. Currently only Firefox does not support them. Firefox Firefox does not support this event.
101
Cross-browser testing If you have read this far, you should be aware of the fact that while there is a standard for HTML, CSS and JavaScript, the way different browsers handle and render websites is not identical. I hate to say this, but it is highly unlikely that this will change in the foreseeable future. So you will need to make sure that your website works across multiple browsers, operating systems, mobile devices, game consoles and modern TV sets. In the good (?) old days you would just load your website on as many operating systems and browsers as possible. But this is a rather resource- and time-consuming way of doing cross-browser testing. Fortunately more efficient ways to cross-browser test have emerged in the form of web applications and desktop applications, both free and commercial. In the following sections you will learn which services exist. Of course the best service for you depends on your needs, so please try yourself!
102
Web applications Testing your website using a web application gives you many advantages like platform independents and access anytime / anywhere. In the following I’ll describe the (in my opinion) best web applications to cross-browser and cross-device test any website.
Browsershots.org Browsershots (http://www.browsershots.org) is the oldest and most known cross-browser testing service. It’s dead simple to use and moreover it’s completely free. You simple enter the URL you want to test, select some or all browsers and wait until Browsershots has processed your request.
Browsershots will load up the websites in all selected browsers and create a screenshot for you to inspect.
103
Depending on the current load it can take between a few minutes and a few hours until all screenshots get generated. Browsershots is not able to test websites that are hosted on your local machine and the available browsers do not include mobile devices.
104 Browserling.com Unlike Browsershots, the web application Browserling (http:// www.browserling.com) brings an interactive browser session into your browser (that sounds way more complicated than it is). First you enter a URL and select a browser:
After this Browserling will open a remote session in your browser (no Flash or plug-in required) that gives you full control over the selected browser.
105
Now you can fully test your website in the selected browser, including any interactive elements. Moreover, you can test websites hosted on your local machine (using SSH tunneling). Browserling supports all major browsers but does not include testing on mobile devices.
106 BrowserStack.com The web application BrowserStack (http://www.browserstack. com) brings interactive testing to your browser. It works in a similar way to Browserling. First you need to select an operating system and browser you want to test.
After this BrowserStack opens a session in the selected operating system and browser. You are then able to interactively test your website using this browser.
107
Currently BrowserStack supports testing of locally hosted websites and many mobile emulators. It requires Flash and is not able to provide you with automatically created screenshots.
108 CrossBrowserTesting.com This service (http://www.crossbrowsertesting.com) sounds and works like Browsershots and Browserling combined. You can create a series of screenshots for your website including all major browsers and some mobile devices.
You can inspect the screenshots as you see fit and launch an interactive session for any of the browsers and mobile devices if needed. To use the interactive sessions Flash is required.
109
CrossBrowserTesting.com includes some mobile devices, and currently the testing of local websites is in beta state. If you contact
[email protected] and mention that you are a reader of this book you’ll get a credit card free trial account including two hours of testing.
110
Desktop applications Testing across multiple browsers on your local machine comes in handy if you need to test security-sensitive websites or need a faster testing experience. There are few desktop applications to cross-browser test websites worth mentioning here.
111 IETester As the name implies, IETester is a desktop application that lets you test your website on various Internet Explorer versions. It currently supports all Internet Explorer versions starting at IE 5.5 and going all the way up to IE 10. After installing the free application, you can open different tabs showing the rendering using different Internet Explorer versions. Unfortunately, IETester is somewhat unstable to use.
IETester supports testing of local websites but does not include any other browser than Internet Explorer versions. It can be found here: http://www.my-debugbar.com/wiki/IETester/HomePage.
112 Multi-Browser Viewer The standalone desktop tool Multi-Browser Viewer (http://www. multibrowserviewer.com) combines screenshots and interactive testing like CrossBrowserTesting.com does. It comes with a set of browsers and mobile device simulators that you can be used to test interactive elements of a webpage (including locally hosted pages).
This functionality is supplemented by a web service which can take screenshots for a larger set of browsers, just like, for example, Browsershots does.
113
This screenshots can only be taken for websites that are not hosted on your local machine. Moreover Multi-Browser Viewer now has support for the Selenium which brings the possibility of automated screenshots and tests to your local machine. If you follow this link (https://www.paypal.com/cgi-bin/ webscr?cmd=_s-xclick&hosted_button_id=72DJPUR5UQHVE) you can purchase Multi-Browser Viewer at a 10% discount.
114 BrowseEmAll The desktop tool BrowseEmAll brings different browsers and mobile simulators to your desktop. These can be used to interactively test your website (even if hosted locally).
Moreover, it contains a cross-browser reporting feature that can analyze any website for cross-browser related issues. This crossbrowser reporting is created on the local machine and includes screenshots and possible HTML or CSS cross-browser compatibility issues.
115
If you follow this link (https://sites.fastspring.com/browseemall/ instant/browseemallprofessional?coupon=CrossBrowserHandb ook) you can purchase BrowseEmAll Professional at a 15% discount. Full disclosure: The author of this book is also the creator of BrowseEmAll!
116 Summary The chart below shows the features and pricing for the discussed cross-browser testing services: Name
Price
BrowserShots.org
Screen shots
Interactive
Local
Mobile
Free, Prior- Yes ity $29.95/ month
No
No
No
Browserling.com
Pricing No starts at $20/month
Yes
Yes
No
BrowserStack.com
Pricing No start at $19/month
Yes
Yes
Yes
CrossPricing BrowserT- start at esting.com $29.95/ month
Yes
Yes
Beta
Yes
IETester
Free
No
Yes
Yes
No
MultiBrowser Viewer
Pricing start at $149.95/ license
Yes (remotely)
Yes
Yes
Yes
BrowseEmAll
Pricing starts at $49/license
Yes (locally)
Yes
Yes
Yes
117
Compatibility Tables Explained In this book (and in the knowledgebase) you can find many compatibility tables. Here I’ll explain how to read them. In the first row of every compatibility table you find the symbols representing the different browsers. We have:
Internet Explorer
Firefox
Chrome
Safari
Android
iOS
Windows Phone
BlackBerry
Opera
In the second row you can find the lowest browser version which supports this feature. In the third row you can find possible prefixes you need to apply to this feature for any specific browser. A quick example:
9+ -ms This example means: The feature is supported by Internet Explorer 9 and every newer Internet Explorer version. You need to use the prefix –ms for this feature to work.
118
About the author Daniel Herken has been a contract software developer in Germany for the past few years, specializing in cross-browser and cross-device web application development. His company, BrowseEmAll, created a cross-browser testing tool to help him and his fellow developers test websites and web applications. In this book he describes his knowledge gained from hundreds of hours searching and fixing cross-browser compatibility problems. Daniel currently lives in Munich and loves to chat about browsers, mobile devices and web development. Send him a quick mail if you like:
[email protected].
