Internet Explorer 11: The First Web Developer Review

25. June 2013 14:31 by Daniel Herken
                Yesterday Microsoft released the first beta of the next Windows 8 generation: Windows 8.1. Part of this beta release is the new Internet Explorer 11 which is especially interesting for web designers and developers around the world. In this post you'll learn which new Web Standards and features Internet Explorer 11 supports and we'll take a look at the improved developer tools (finally!).  Compatibility Changes Before we enter the big changes let me quickly show some web development relevant changes made to the general browser behavior.  New User Agent String Of course the Internet Explorer 11 User Agent String has been changed. The new User Agent String is: Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko   In direct comparison the Internet Explorer 10 User Agent String is: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)   The new User Agent String is more consistent with other browsers which should be a good thing.  Web Standards Currently Firefox and Chrome are raising the bar for web standards compatibility month after month. If Microsoft want's to keep up they will need to make quite a few improvements in this area. Let's start out with a browser comparison:  Browser Acid3 HTML5test.com CSS4 Selectors Internet Explorer 11  100/100  355+6/500  75% Internet Explorer 10  100/100  320+6/500  75% Chrome 27  100/100  463+13/500  83% Firefox 22  100/100  395+14/500  79%   So clearly we can see a step forward in the new Internet Explorer 11. But still we are nowhere near the level of Firefox or Google Chrome. That's sad because many people still use whatever IE version comes with the operating system as there main browser. Regardless Internet Explorer 11 brings some new feature to the table which will gain a wider adoption once the browser is released.  So What's new? The most important new features in Internet Explorer 11 are: WebGL                                   With Internet Explorer 11 WebGL lands in the last of the major browsers. As WebGL enables developers to create dynamic 2D and 3D graphics, games and content we'll see more usage of this great feature in the future. Of course the WebGL implementations by Microsoft has some specialties which are documented quite well in the developer guide. You can try this out for yourself using the examples at IEWebGL.com. Mutation Observer The Mutation Observers, as specified in the W3C DOM4 specification, can be used to replace property change events. These observers provide a way to declare which DOM manipulations you want to monitor and be notified of changes after script execution but before a new frame is rendered and displayed. The observers can be used like this: var observer = new MutationObserver(mutationCallback); observer.observe(targetObject, {    attributes: true,   attributeFilter: ["name", "id"],   attributeOldValue: true,   childList: true }); You can find more information and source code examples at MSDN. Device Orientation Support Internet Explorer 11 implements a new JavaScript event which is mainly useful for mobile devices and tablets, the deviceorientation event. This event get's fired whenever the device detects a change in orientation (the user changes the orientation of the physical device). This event can be found on the window object. More information are available in the specification. Canvas enhancements Internet Explorer 11 includes 3 new features for the Canvas element: msImageSmoothingEnabled, even-odd Fill rule and dashed lines. The msImageSmoothingElabled property can turn off bilinear scaling and activate nearest-neighbor scaling. This is especially useful for game sprites which will appear sharper scaled that way. You can clearly see the differences (bilinear scaling on the left, nearest-neighbor scaling to the right).           The even-odd filling rule can be used to fill shapes created by a path. This way you can fill the even parts and let out the odd parts of a shape. Maybe a picture makes it more clear?                   The last new canvas features are dashed lines which does what you might expect it to do, it draws dashed lines. You can use setLineDash, getLineDash and lineDashOffset to create the lines. You can find more details and code examples on MSDN. Enhanced HTML 5 Video support More features have been added to the HTML 5 video playback including Dynamic TextTracks, Encrypted Media Extensions, Fullscreen API, Simple Delivery Profile, Streaming XHR cache control and Media Source Extensions. You can find out anything you want about these features at the IE 11 Developer Guide. Embedding custom non-visible data Support for custom data attributes and the property dataset have been added. This means you can use the data- prefix to add any custom data to the DOM. This data can later be used inside JavaScript code. A simple example: <div id="test-data" data-my-custom-data="Here could be your custom data"></div> <script type="javascript/script">    function ReadWriteCustomData(newData) {       var mydata = document.getElementById('test-data').dataset.mycustomdata;       document.getElementById('test-data').dataset.mycustomdata = newData;   } </script> Flexible box layout The CSS flexbox layout was already introduced in Internet Explorer 10 using the Microsoft vendor prefix ms-. In Internet Explorer 11 this prefix has been removed for most properties and values. Moreover the shorthand property flex has been added. A list of all changed properties can be found at MSDN. Developer Tools The developer tools in Internet Explorer 11 have final been rebuild and are now a decent competition for Chrome and Firebug. Especially the UI Responsiveness tool comes in rather handy. Some of the new features are:  Console In the new console window you can see errors, warnings and other messages including debug output. Just like in Chrome or Firefox you can also inspect and run JavaScript code in the console. Measure UI Responsiveness Using the UI Responsiveness tool you can profile any website and identify bottlenecks and what processes takes more time than they should. It is especially useful to optimize JavaScript driven UI's and web applications.    Memory Analysis This tool can track the memory usage of any website over it's lifetime. Aside from a timeline of overall memory usage you can create snapshots for a specific point in time. Unfortunately I could not get the snapshots to work on my test machine.      Autocompletion In the new console and DOM explorer the developer tools provide you with auto completion whenever you to type in HTML, CSS or JavaScript.  GPS emulation No more pain while testing any websites GPS functionality. Using the new emulation tool you can simulate different GPS position to simplify the testing workflow. It is really great!        All new features are described in depth in the developer documentation on MSDN. Conclusion All in all I'd say that Internet Explorer 11 is another step in the right direction. Especially I like the new developer tools which are way more usable than the old ones ever where. In regard to standards compatibility and browser features Microsoft widens the gap between Internet Explorer and other browser like Chrome and Firefox. This will slow down the process of new feature adoption inside the development community because nearly no one can simply ignore Internet Explorer users altogether. Let's hope that Microsoft will release new IE versions independently of Windows in the future to speed up the development process and release cycles.  Sources / More Information Introducing IE 11 IE 11 Developer Guide Microsoft IE Testdrive

Does W3C Validation Still Matter?

6. November 2012 14:26 by Daniel Herken
Recently I put the final touches to my latest web project an decided it would be fun to know where it is in terms of W3C validation. So I submitted the page to the W3C Validator and sure enough it did find 5 errors and 5 warnings. After investigation I did not end up fixing any of the errors or warnings because that would not benefit any of the website users but the question remains; Does W3C Validation still matter? The W3C Validator For those of you who are not familiar with W3C validation, it’s simply a set of standards for determining whether an HTML webpage is properly written or not. For example, if you are creating a table and you want to specify the “width” attribute, you can either specify it as a separate tag within your table definition or you can specify an inline “style” tag containing the width instead. W3C recommends the latter instead of the former. The question is, how important is W3C validation when you design your website, and how much time should you spend ensuring that your code is compliant? Looking at the big guys The fact of the matter is that many websites in today’s world don’t care too much about W3C validation. We can take a hint from some of the largest sites – like Google, Facebook, and Reddit. After all, they are supposed to represent the “best in class” design techniques and we can learn a lot about the current state of the web by examining how they implement their own designs. The simple truth is that none of the above sites are 100% W3C compliant. There is no doubt that they have the resources to make them so – it’s just that they don’t think it’s worth it beyond a certain point. So where does that leave the rest of us who’re regular developers and designers?           Web standards are important! For what it’s worth, I think that the mere existence of HTML standards is extremely useful. The rules may be observed more in the breach, but at least they are there. We have some benchmark to compare to. Even if most websites do not validate completely, at least we have a consensus about how it “should” be in an ideal world.There are many benefits to having some sort of ideal. They make things easier for cross browser testing tools which will almost always have utilities to go through your code and tell you whether there are any issues. The easiest would be W3C validation also this is, of course, browser independent. If you get into the habit of trying to write HTML that complies with W3C standards, any errors that you receive will highlight the most egregious faults with your code. You will have an easier time correcting mistakes if there are fewer “red lines” rather than many. Easier cross-browser compatibility Secondly, validated HTML design is most likely to find the greatest amount of acceptance if you are keen on ensuring that your web application renders perfectly in every single browser. There are exceptions to this of course, but by and large it’s a good habit to keep your code as close to the W3C standards as possible without expending too much effort on the process.The bottom line is that even though most modern browsers and most websites do not strictly adhere to W3C valid code, the fact that a certain standard exists makes it easier for regular programmers like us. It ensures that no given browser is able to dominate the world of web standards by implementing its own unique HTML rules. And that is good for the entire web. Cross-browser reporting Did you know? BrowseEmAll can analyze your HTML and CSS to find browser specific issues. In lack of a better name (and imagination) we call it cross-browser report. Would like to see an example? Like what you see? Download and try BrowseEmAll today! Download BrowseEmAll14-Day Free Trial

Get your website Internet Explorer 10 ready

20. August 2012 15:51 by Daniel Herken
As you've surely already heard, the new Windows 8 will be out in October 2012. Microsoft has included lots of new features and bug fixes in this Windows version, including a new Internet Explorer version, version 10. Now every designer, developer and website owner has to make sure that their website will be displayed correctly using the new Internet Explorer. In this post I would like to point out some resources that will help you to get your website IE 10 ready.  Please keep in mind that currently Internet Explorer 10 is available on Windows 8 so make sure to install the release preview to test properly. Internet Explorer Compatibility Modes First you should find out in which mode Internet Explorer will show your page. To do this simply open your website using Internet Explorer and press F12 to open the Developer Tools.           Make sure that the browser mode and the document mode match your current Internet Explorer version. If not, please make sure you use the correct DOCTYPE (How to choose the right DOCTYPE) and the X-UA-Compatibility meta tag is set correctly (What is that?). Internet Explorer 10 Compat Inspector Microsoft has created a little JavaScript snippet to help you to detect compatibility issues for the new Internet Explorer. It's called Compat Inspector and you can get it for free! It's dead simple to use; just add this JavaScript to your page (you need to add it before all other scripts): <script src="http://ie.microsoft.com/TestDrive/HTML5/CompatInspector/inspector.js"></script> Now if you open the page this script adds a little widget to the top right of your page.          To get more details simply click this widget.                     This gives you a good place to start debugging website bugs.  Internet Explorer 10 Developer Guide Microsoft also created a detailed Guide for Developers which gives an overview of all the new features included in Internet Explorer 10. Please note that you cannot use any of these features if your Document Mode is set to Internet Explorer 9 or below. Make sure you didn't break anything After you've corrected every bug in Internet Explorer 10 you need to perform one last (but important) step. Fire up your cross-browser testing solution and iterate through all browsers to make sure you did not break anything. If, for example, you did edit DOCTYPE and X-UA-Compatibility meta tags take extra time to test all of the old Internet Explorer versions you want to support. Don't have any handy method to test all these browsers? Try the 30-Day free Trial of BrowseEmAll: Download BrowseEmAll14-Day Free Trial

Weekly cross-browser resources #1

7. June 2012 17:04 by Daniel Herken
This week I would like to suggest five resources which will make your cross-browser development much easier! Let's just dive right in: Cross-browser of HTML 5 Forms, even in older browsers Every website uses forms one way or the other. HTML 5 gives developers the ability to build great looking and easy to use forms without the hassle of older times. But do you still need to support older browsers? Maybe Internet Explorer 7 or (oh my goodness) Internet Explorer 6? You would need to rebuild everything HTML 5 has to offer from scratch by using JavaScript...  Someone has already done this for you! Introducing HTML5Forms.js which makes all the great HTML 5 forms stuff available in older browser! Great stuff like: Validation as you type   and custom error messages           And it's easy to use! Head over to useragentman.com for more information and the download! Riloadr: A cross-browser responsive image loader Don't want to wait for high-res images to load on your small screen only to get them sized down? Meet Riloadr, a responsive image loader which promises cross-browser compatibility out of the box. Deliver different images depending on the user's resolution!                         Want to see some demos? Header over here. More information? Read the docs or visit github to get your copy now! Animate.css: Cross-browser animations Some animations can make a website or application so much better. But you'll need some heavy (JavaScript) lifting to make even small animations happen across many browsers. Animate.css tries to make this a little easier for web developers.  You can make elements bounce or shake, let them flip or fade just as you see fit.  Words cannot describe how easy this solution is! Visit Animate.css and give it a try! Kango: Cross-browser extension Framework Did you ever try to create a browser extension? Or a browser extension for all the different browsers your customers use? I can tell you it's not fun. You'll get different code-bases and need to implement the same feature again and again and again. Moreover you need to keep your extension up to date as browsers get updated more and more quickly.               KangoExtensions tries to help you out here. Develop a browser extension across all major browsers using only JavaScript! One code base, easy to use and cheaper to develop. If you do browser extensions, head over to Kango and give it a try! Jash: JavaScript debugging cross-browser If you ever need to debug your JavaScript code to find this obscure bug which will only show in this browser your really fast out of luck. Not every browser comes with developer tools to help you out. Now you could just add some alert statement to your code but that sort of annoyes every visitor if you debug a live page! Jash can help you out here. It creates a debugging window inside your browser. There you can inspect the DOM, JavaScript objects and debug scripts! And you don't need to change a single line of code. Bookmark this helpful little tool now: Jash Did you find some of this resources helpful? Let's discuss in the comments!

6 Steps to reach cross-browser compatibility

24. April 2012 19:05 by Daniel Herken
In this article I want to point out the 6 essential steps to reach cross-browser compatibility while not wasting more time than necessary. Ideally, you would cross-browser test your website periodically while developing it. However, you can still follow these steps to test your existing website. Step 1: Decide what Browsers you want to support If at all possible, decide beforehand which browsers and mobile devices you want to support. It’s much more expensive and time consuming to rework the page than take cross-browser compatibility issues into account from the very beginning. Just imagine your client requesting Internet Explorer 6 support after you spent 6 months developing the next Web 2.0 Ajax and HTML web application.  Step 2: Decide on a minimal resolution Once you have decided on a browser and mobile device pool you want to support you need to take into account what resolutions are available to your potential customers and visitors. If you want to serve every possible device your site needs to adjust to the screen resolution on the different devices. If you cannot decide this easily you should consider building different sites based on whether your visitors are using mobile or desktop devices. A badly designed website on a mobile device could still be a pain to use.  If you don't want to settle on a resolution you can create a responsive design. This design will adjust based on the users screen size using media queries. Step 3: Reach full functionality in one major browser This may sound obvious but you should get your page (or the current feature) ready in one browser first. My personal favorite is still Firefox (using the plug-in firebug) but Chrome or Safari is a valid choice as well.  Once your page runs smoothly in your favorite development browsers you can move on to step 4. Step 4: Create a cross-browser compatibility report To save time loading up your website in all major browsers you should consider using a service or tool to do the heavy lifting. If your page is already available online you can simply use www.cross-browser-validator.com to create a cross-browser compatibility report. Otherwise you can test locally hosted sites (or pure HTML files) using www.browseemall.com. You can view an example here. Step 5: Check the screenshots in the report Regardless of how you get your cross-browser compatibility report, once you have hands on it you can just do a quick check of the included screenshots. Write up all browsers that have visible compatibility issues to fix. Once you have this (hopefully small) list choose one of these to fix. Don’t try to fix all of the issues in one run.  Step 6: Use the HTML and CSS breakdown to fix issues Now take a closer look at the corresponding part of the cross-browser compatibility report. You’ll most likely find some HTML and CSS you used which this browser does not support. Some of these are relevant to your visual problems, some aren’t. Try to fix these problems one by one and test every change individually to make sure you don’t break anything in all the other browsers. If your page works in the selected browser (and you didn’t break anything) go back to step 4 and repeat until you can cross off all of the browsers on your list.  Need to do a lot of cross-browser testing? Try the 30-Day Free Trial of BrowseEmAll! Download BrowseEmAll14-Day Free Trial

Better than comparing screenshots: The cross-browser validator

23. April 2012 22:00 by Daniel Herken
How do you test your website across all the major browsers available? The most common approach is to compare screenshots by using one service or the other (most famous www.browsershots.org). But the real fun starts where there are cross-browser compatibility issues. Imagine you developed a new awesome website using Firefox (because of that cool debugging tool Firebug). And now all you want to do is a quick check for cross-browser compatibility. So you enter the URL to browsershots and hopefully open up the Internet Explorer images. Of course you'll spot differences or bugs in one or more browsers.  Now what? Try and error? Now you need to fix your site (mostly CSS) to get it working across different browsers. But how and what? Did you memorize all the compatibility tables or do you make educated guesses on what to change where? One should think that after such a long time of building websites someone would have created a tool which does this hard work for you.  Let me do this for you! If you are tired of researching whether a CSS attribute or HTML tag is available in all the different browsers, I have a great message for you: We built a free online tool that helps you with that! Just enter your URL and I tell you which HTML and CSS you you should rather not have used. You do this by hand? Of course not! I would be swamped to the end of days if I would do this manually. And it can take up an awful lot of time. So let me introduce our new cross-browser validator to you, which hopefully will do (most) of your cross-browser work for you. Give it a try right now, it's free (as in free beer). I'll wait here... http://cross-browser-validator.com/ How does this work?  Back already? Did it work for you? Now I would really like to tell you how we invented this and it's awesome and all, but that's not entirely true. We just grabbed our cross-browser testing tool BrowseEmAll (which happens to include this exact report) and put it online for everybody to use.   But what about.... Please tell me what you would like to see included in the cross-browser validator in the comments or via email. And don't forget to share the cross-browser validator if you know anyone who could save some time using it!  

The cross-browser compatibility guide - CSS rules across browsers

27. March 2012 12:18 by Daniel Herken
Welcome to the third part of the cross-browser compatibility guide. You can find the directory here. CSS rules across browsers CSS 2 and 3 know many style rules which you can use to separate the styling and markup of your website. Unfortunately, not every rule can be recognized in every browser. So again we'll need some big tables to figure out what to use and when. At-Rules Rule IE 6 IE 7 IE 8 IE 9 Firefox Chrome Safari Opera @charset Yes Yes Yes Yes Yes Yes Yes Yes @import Yes Yes Yes Yes Yes Yes Yes Yes @media Yes Yes Yes Yes Yes Yes Yes Yes @page Partial Partial Yes Yes No Yes Yes Yes @font-face Yes Yes Yes Yes Yes Yes Yes Yes @namespace No No No Yes Yes Yes Yes Yes @keyframes No No No No No No No No Values and Units In many cases CSS rules need values and / or units. And of course there are cross-browser issues. Value / Unit IE 6 IE 7 IE 8 IE 9 Firefox Chrome Safari Opera inherit No No Yes Yes Yes Yes Yes Yes initial No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No attr() No No Yes Yes Partial Yes Yes Yes calc() No No No Yes Yes No No No counter() No No Yes Yes Yes Yes (-webkit) Yes (-webkit) No url() Yes Yes Yes Yes Yes Yes Yes Yes rgba(r,g,b,a) No No No Yes Yes Yes Yes Yes hsl(h,s,l) No No No Yes Yes Yes Yes Yes hsla(h,s,l,a) No No No Yes Yes Yes Yes Yes currentColor No No No Yes Yes Yes Yes Yes transparent Partial Yes Yes Yes Yes Yes Yes Yes % Yes Yes Yes Yes Yes Yes Yes Yes ch No No No Yes Yes No No No cm Yes Yes Yes Yes Yes Yes Yes Yes deg No No No Yes Yes Yes Yes No dpcm No No No No Yes Yes Yes Yes dpi No No No No Yes Yes Yes Yes em Yes Yes Yes Yes Yes Yes Yes Yes ex Yes Yes Yes Yes Yes Yes Yes Yes gd No No No No No No No No grad No No No Yes Yes Yes Yes No Hz No No No No No No No No in Yes Yes Yes Yes Yes Yes Yes Yes kHz No No No No No No No No mm Yes Yes Yes Yes Yes Yes Yes Yes ms No No No Yes Yes Yes Yes Yes pc Yes Yes Yes Yes Yes Yes Yes Yes px Yes Yes Yes Yes Yes Yes Yes Yes pt Yes Yes Yes Yes Yes Yes Yes Yes rad No No No Yes Yes Yes Yes Yes rem No No No Yes Yes Yes Yes Yes s No No No Yes Yes Yes Yes Yes turn No No No Yes No No No No vh No No No Yes No No No No vm No No No Yes No No No No vw No No No Yes No No No No image() No No No No No No No No linear-gradient() No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No radial-gradient() No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No repeating-linear-gradient() No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No repeating-radial-gradient() No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No CSS Properties Properties are the major part of style sheets. Again, not every property can be used across different browsers. Property IE 6 IE 7 IE 8 IE 9 Firefox Chrome Safari Opera animation No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o) animation-delay No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o) animation-direction No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o) animation-duration No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o) animation-fill-mode No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o) animation-iteration-count No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o) animation-name No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o) animation-play-state No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o) animation-timing-function No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o) appearance No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o) background Yes Yes Yes Yes Yes Yes Yes Yes background-attachment Partial Yes Yes Yes Yes Yes Yes Yes background-clip No No No Yes Yes Yes Yes Yes background-color Yes Yes Yes Yes Yes Yes Yes Yes background-image Yes Yes Yes Yes Yes Yes Yes Yes background-origin No No No Yes Yes Yes Yes Yes background-position Partial Partial Yes Yes Yes Yes Yes Yes background-repeat Yes Yes Yes Yes Yes Yes Yes Yes background-size No No No Yes Yes Yes Yes Yes border Yes Yes Yes Yes Yes Yes Yes Yes border-bottom Yes Yes Yes Yes Yes Yes Yes Yes border-bottom-color Yes Yes Yes Yes Yes Yes Yes Yes border-bottom-left-radius No No No Yes Yes Yes Yes Yes border-bottom-right-radius No No No Yes Yes Yes Yes Yes border-bottom-style Yes Yes Yes Yes Yes Yes Yes Yes border-bottom-width Yes Yes Yes Yes Yes Yes Yes Yes border-collapse Partial Partial Yes Yes Yes Yes Yes Yes border-color Yes Yes Yes Yes Yes Yes Yes Yes border-image No No No No No Yes Yes Yes border-image-outset No No No No No No No No border-image-repeat No No No No No No No No border-image-slice No No No No No No No No border-image-source No No No No No No No No border-image-width No No No No No No No No border-left Yes Yes Yes Yes Yes Yes Yes Yes border-left-color Yes Yes Yes Yes Yes Yes Yes Yes border-left-style Yes Yes Yes Yes Yes Yes Yes Yes border-left-with Yes Yes Yes Yes Yes Yes Yes Yes border-radius No No No No Yes Yes Yes Yes border-right Yes Yes Yes Yes Yes Yes Yes Yes border-right-color Yes Yes Yes Yes Yes Yes Yes Yes border-right-style Yes Yes Yes Yes Yes Yes Yes Yes border-right-width Yes Yes Yes Yes Yes Yes Yes Yes border-spacing No No Yes Yes Yes Yes Yes Yes border-style Partial Partial Yes Yes Yes Yes Yes Yes border-top Yes Yes Yes Yes Yes Yes Yes Yes border-top-color Yes Yes Yes Yes Yes Yes Yes Yes border-top-left-radius No No No No Yes Yes Yes Yes border-top-right-radius No No No No Yes Yes Yes Yes border-top-style Yes Yes Yes Yes Yes Yes Yes Yes border-top-width Yes Yes Yes Yes Yes Yes Yes Yes border-width Yes Yes Yes Yes Yes Yes Yes Yes box-align No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No box-decoration-break No No No No No No No No box-direction No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No box-flex No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No box-flex-group No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No box-lines No No No No No No No No box-ordinal-group No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No box-orient No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o) box-pack No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No box-shadow No No No Yes Yes Yes Yes Yes box-sizing No No Yes Yes Yes (-moz) Yes Yes Yes caption-side No No Yes Yes Yes Yes Yes Yes clear Yes Yes Yes Yes Yes Yes Yes Yes clip Yes Yes Yes Yes Yes Yes Yes Yes color No No No No Yes Yes Yes Yes column-count No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes (-o) column-fill No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No column-gap No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No column-rule No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No column-rule-color No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No column-rule-style No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No column-rule-width No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No column-span No No No No No Yes (-webkit) Yes (-webkit) Yes column-width No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes columns No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes content No No Yes Yes Yes Yes Yes Yes counter-increment No No Yes Yes Yes Yes Yes Yes counter-reset No No Yes Yes Yes Yes Yes Yes cursor Yes Yes Yes Yes Yes Yes Yes Yes direction Yes Yes Yes Yes Yes Yes Yes Yes display Partial Partial Yes Yes Yes Yes Yes Yes empty-cells No Partial Yes Yes Yes Yes Yes Yes float Yes Yes Yes Yes Yes Yes Yes Yes font Yes Yes Yes Yes Yes Yes Yes Yes font-family Yes Yes Yes Yes Yes Yes Yes Yes font-size Yes Yes Yes Yes Yes Yes Yes Yes font-size-adjust No No No No Yes Yes Yes Yes font-stretch No No No Yes Yes Yes Yes Yes font-style Yes Yes Yes Yes Yes Yes Yes Yes font-variant Yes Yes Yes Yes Yes Yes Yes Yes font-weight Partial Partial Yes Yes Yes Yes Yes Yes height Yes Yes Yes Yes Yes Yes Yes Yes left Partial Partial Yes Yes Yes Yes Yes Yes letter-spacing Yes Yes Yes Yes Yes Yes Yes Yes line-height Yes Yes Yes Yes Yes Yes Yes Yes list-style Yes Yes Yes Yes Yes Yes Yes Yes list-style-image Yes Yes Yes Yes Yes Yes Yes Yes list-style-position Yes Yes Yes Yes Yes Yes Yes Yes list-style-type No Yes Yes Yes Yes Yes Yes Yes margin Yes Yes Yes Yes Yes Yes Yes Yes margin-bottom Yes Yes Yes Yes Yes Yes Yes Yes margin-left Yes Yes Yes Yes Yes Yes Yes Yes margin-right Yes Yes Yes Yes Yes Yes Yes Yes margin-top Yes Yes Yes Yes Yes Yes Yes Yes max-height No Yes Yes Yes Yes Yes Yes Yes max-width No Yes Yes Yes Yes Yes Yes Yes min-height No Yes Yes Yes Yes Yes Yes Yes opacity No No No No Yes Yes Yes Yes orphans No No Yes Yes No No No No outline No No Yes Yes Yes Yes Yes Yes outline-color No No Yes Yes Yes Yes Yes Yes outline-offset No No No No Yes Yes Yes Yes outline-style No No Yes Yes Yes Yes Yes Yes outline-width No No Yes Yes Yes Yes Yes Yes overflow Partial Yes Yes Yes Yes Yes Yes Yes overflow-x Partial Yes Yes Yes Yes Yes Yes Yes overflow-y Partial Yes Yes Yes Yes Yes Yes Yes padding Yes Yes Yes Yes Yes Yes Yes Yes padding-bottom Yes Yes Yes Yes Yes Yes Yes Yes padding-left Yes Yes Yes Yes Yes Yes Yes Yes padding-right Yes Yes Yes Yes Yes Yes Yes Yes padding-top Yes Yes Yes Yes Yes Yes Yes Yes page-break-after Yes Yes Yes Yes No No No Yes page-break-before Yes Yes Yes Yes No No No Yes page-break-inside No No Yes Yes No No No Yes position Partial Yes Yes Yes Yes Yes Yes Yes quotes No No Yes Yes Yes Yes Yes Yes resize No No No No Yes Yes Yes Yes right Partial Partial Yes Yes Yes Yes Yes Yes table-layout Yes Yes Yes Yes Yes Yes Yes Yes text-align Yes Yes Yes Yes Yes Yes Yes Yes text-align-last Partial Partial Partial Partial Yes (-moz) Yes (-webkit) Yes (-webkit) Yes text-decoration Yes Yes Yes Yes Yes Yes Yes Yes text-decoration-color No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes text-decoration-line No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes text-decoration-skip No No No No No No No No text-decoration-style No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) No text-indent Yes Yes Yes Yes Yes Yes Yes Yes text-shadow No No No No Yes Yes Yes Yes text-transform Yes Yes Yes Yes Yes Yes Yes Yes top Partial Partial Yes Yes Yes Yes Yes Yes transform No No No Yes (-ms) Yes (-moz) Yes (-webkit) Yes (-webkit) Yes transform-origin No No No Yes (-ms) Yes (-moz) Yes (-webkit) Yes (-webkit) Yes transition No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes transition-delay No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes transition-duration No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes transition-property No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes transition-timing-function No No No No Yes (-moz) Yes (-webkit) Yes (-webkit) Yes unicode-bidi Yes Yes Yes Yes Yes Yes Yes Yes vertical-align Yes Yes Yes Yes Yes Yes Yes Yes visibility Yes Yes Yes Yes Yes Yes Yes Yes white-space Partial Partial Yes Yes Yes Yes Yes Yes widows No No Yes Yes No No No No width Yes Yes Yes Yes Yes Yes Yes Yes word-break Partial Partial Partial Partial No Yes Yes No word-spacing Partial Partial Yes Yes Yes Yes Yes Yes word-wrap Yes Yes Yes Yes Yes Yes Yes Yes z-index Partial Partial Yes Yes Yes Yes Yes Yes   As you can see CSS is far from being cross-browser compatible. You need to be careful which selectors, units and properties you use.

The cross-browser compatibility guide - CSS selectors browser support

16. March 2012 10:33 by Daniel Herken
Welcome to the third part of the cross-browser compatibility guide. You can find the directory here.  CSS selectors browser support In this post I would like to show which CSS selectors are supported in the different browsers. CSS 2 Selectors Today all current versions of major browser support every CSS 2 Selector. But if you want to target older Browsers you may want to avoid some of those.  Selector IE 6 IE 7 IE 8 IE 9 Firefox Chrome Safari Opera E:active Partly Partly Yes Yes Yes Yes Yes Yes E:hover Partly Partly Yes Yes Yes Yes Yes Yes E:focus No No Yes Yes Yes Yes Yes Yes E:before No No Yes Yes Yes Yes Yes Yes E:after No No Yes Yes Yes Yes Yes Yes * Yes Yes Yes Yes Yes Yes Yes Yes E Yes Yes Yes Yes Yes Yes Yes Yes .class Partly Yes Yes Yes Yes Yes Yes Yes #id Yes Yes Yes Yes Yes Yes Yes Yes E F Yes Yes Yes Yes Yes Yes Yes Yes E > F No Yes Yes Yes Yes Yes Yes Yes E + F No Yes Yes Yes Yes Yes Yes Yes E[attr] No Partly Yes Yes Yes Yes Yes Yes E[attr=val] No Yes Yes Yes Yes Yes Yes Yes E[attr~=val] No Partly  Yes Yes Yes Yes Yes Yes E[attr|=val] No Partly Yes Yes Yes Yes Yes Yes :first-child No Partly Yes Yes Yes Yes Yes Yes :lang() No No Yes Yes Yes Yes Yes Yes :first-letter Yes Yes Yes Yes Yes Yes Yes Yes :first-line Yes Yes Yes Yes Yes Yes Yes Yes   CSS 3 Selectors With all the new shiny CSS 3 selectors available things tend to get tricky. Every modern browser supports all of them, but if you need to support older versions of Internet Explorer you are generally out of luck. And many Windows user cannot upgrade event if they would like to.  Selector IE 6 IE 7 IE 8 IE 9 Firefox Chrome Safari Opera E[attr^=val] No No   Yes Yes  Yes   Yes   Yes   Yes   E[attr$=val] No No   Yes Yes Yes   Yes Yes   Yes   E[attr*=val] No   No   Yes  Yes   Yes   Yes   Yes   Yes   E ~ F No   Yes Yes  Yes   Yes   Yes   Yes   Yes   :root No   No   No   Yes   Yes   Yes   Yes   Yes   :last-child No   No   No   Yes   Yes   Yes   Yes   Yes   :only-child No   No   No   Yes   Yes   Yes   Yes   Yes   :nth-child() No   No   No   Yes   Yes   Yes   Yes   Yes   :nth-last-child() No   No   No   Yes   Yes   Yes   Yes   Yes   :first-of-type No   No   No   Yes   Yes   Yes   Yes   Yes   :last-of-type No No   No   Yes   Yes   Yes   Yes   Yes   :only-of-type No   No   No   Yes   Yes   Yes   Yes   Yes   :nth-of-type() No   No   No   Yes   Yes   Yes   Yes   Yes   :nth-last-of-type()  No   No   No   Yes   Yes   Yes   Yes   Yes   :empty No   No   No   Yes   Yes   Yes   Yes   Yes   :not() No   No   No   Yes   Yes   Yes   Yes Yes   :target No   No   No   Yes   Yes   Yes   Yes   Yes   :enabled No   No   No   Yes   Yes   Yes   Yes   Yes   :disabled No   No   No   Yes   Yes   Yes   Yes   Yes   :checked No   No   No   Yes   Yes   Yes   Yes   Yes     How to get CSS 3 Selector support in IE 6, 7 and 8 Want to use the new CSS 3 selectors but need to support older Internet Explorer versions? Try Selectivizr to emulate the new selectors in older browsers.

The cross-browser compatibility guide - Which HTML-Tags to avoid

9. March 2012 11:14 by Daniel Herken
Welcome to the second part of the cross-browser compatibility guide. You can find the directory here.  Which HTML-Tags to avoid In this post I would like to point out some (valid) HTML-Tags to avoid while building a cross-browser web site or web application. HTML 4 Every major browser supports all necessary HTML 4 Tags. Only developers targeting Internet Explorer 6 should take a look at the following link. Everyone else can move on to HTML 5. Internet Explorer 6 and HTML 4 HTML 5 Even if the HTML 5 standard is not yet ready, many features are already implemented in the various browsers. In the following I will describe some new HTML tags already supported in many browsers. canvas The canvas element provides scripts with a resolution dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly. These browsers have native support for the canvas element: Internet Explorer 9 Firefox (3.6 and newer) Chrome (16 and newer) Safari (5 and newer) Opera (11 and newer) iOs (3.2 and newer) Android (2.1 and newer) You need additional scripts for these browsers: Internet Explorer 8 - Download Internet Explorer 7 - Download video The video element is used for playing videos or movies (or audio files with captions) directly inside the browser. With this element the use of plug-ins like Flash are no longer required. YouTube already uses the video element. Unfortunately, you'll have to implement a fallback for Internet Explorer 8 and below. These browsers have native support for the video element: Internet Explorer 9 Firefox (3.6 and newer) Chrome (16 and newer) Safari (5 and newer) iOs (3.2 and newer) Android (2.3 and newer) audio The audio element is used for playing audio files and stream natively in the browser. This element is mostly used for embedded podcasts these days. Internet Explorer 8 and below don't support this. These browsers have native support for the audio element: Internet Explorer 9 Firefox (3.6 and newer) Chrome (16 and newer) Safari (5 and newer) Opera (11 and newer) iOs (4 and newer) Android (2.3 and newer) semantic elements There are many new semantic elements in HTML 5. These include section, article, aside, hgroup, header, footer, nav, figure and figcaption. These browsers have native support for these elements: Internet Explorer 9 Firefox (4 and newer) Chrome (16 and newer) Safari (5 and newer) Opera (11 and newer) iOs (4 and newer) Android (2.3 and newer) You need additional scripts for these browsers: Internet Explorer 8 - Workaround Internet Explorer 7 - Workaround So what to avoid? There are many great new features hidden in HTML 5 to lighten the lifes of web developers. Unfortunately, all Windows XP users are stuck on Internet Explorer 8 which is not aware of any new feature, though you can enable some through scripting. As long as Microsoft doesn't release Internet Explorer 9 to Windows XP users (they won't) you'll have to avoid all these great new HTML 5 features or at least plan some fall through for these older browsers. Just be aware that there are still many Windows XP users out there which are not able to update their browsers. A recent statistic of the operating systems in use shows this: Source: http://gs.statcounter.com

The cross-browser compatibility guide - How to choose the right DOCTYPE

5. March 2012 21:44 by Daniel Herken
Welcome to the first part of the cross-browser compatibility guide. You can find the directory here.  The DOCTYPE comes first The first element in every of your HTML pages should always be the DOCTYPE declaration. There are various DOCTYPES out there, but most of them are obsolete today. An example of the current HTML5 DOCTPYE: <!DOCTYPE html> and an older HTML 4 DOCTYPE: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” http://www.w3.org/TR/html4/strict.dtd> Why bother? Nearly all modern browsers know two (or more) rendering modes: Standards and Quirks mode. The DOCTYPE helps the browser to decide which rendering mode to use.  The Quirks mode In Quirksmode the browser tries to render your page based on old web standards or no standards at all. The Quirks mode is used to display old and legacy web pages and should be avoided nowadays. If the browser renders in Quirks mode you will see some weird CSS and JavaScript effects as well as different (and wrong) BOX-Model calculations. The Standards mode In standards mode the browser renders the web page according to current web standards. You can prevent many cross-browser compatibility problems by simply enabling the standards mode in all browsers.  How to get into Standards mode The browser switches between quirks and standards mode based on (or the lack of) the DOCTYPE. To choose the right DOCTYPE for your page or application can be tricky but I’ll try to explain how you get there. <!DOCTYPE html> This is the current HTML5 DOCTYPE. If you want to support all the latest browsers and need to use HTML5 features (like <video>, <audio> and <canvas>) you should use this DOCTYPE.  <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” http://www.w3.org/TR/html4/struct.dtd> This DOCTYPE triggers the standards mode in all browsers but doesn’t validate new HTML5 features. If you have a valid reason to validate with HTML 4 and don’t plan to use any new feature you can stick to this DOCTYPE. No DOCTYPE In nearly every case this is a very bad idea. This will always come back to hunt you (or your coworkers) if you ever plan to switch to a current DOCTYPE (and you will). If you really need to support Internet Explorer 6 there is the possibility to use conditional comments.  The Internet Explorer compatibility modes So why not just use the HTML 5 DOCTYPE and be done with it? Unfortunately, the Internet Explorer knows more than standards and quirks mode. The Internet Explorer is capable of simulating older versions (also known as compatibility modes). You can toggle these modes by using an X-UA-Compatible HTTP header or meta tag. If you don’t, Internet Explorer 8 and 9 let the user drop there and render to Internet Explorer 7 mode - even if you have declared a proper DOCTYPE. And believe me: The users will blame your web page, not their browser. Which X-UA-Compatible header/meta tag? There are 3 possibilities: <meta http-equiv=”X-UA-Compatible” content=”IE=Edge”> This meta tag (or similar HTTP header) tells the Internet Explorer to render with the most current engine. Moreover, the user is not allowed to pick an older version.  <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE8”> This meta tag (or similar HTTP header) renders the page in Internet Explorer 8 mode. <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7”> This meta tag (or similar HTTP header) renders the page in Internet Explorer 7 mode. Now tell me: What should I use? If you are building a new website I would strongly recommend the use of the current HTML5 DOCTYPE <!DOCTYPE html> and the meta tag  <meta http-equiv=”X-UA-Compatible” content=”IE=Edge”> to toggle the standards mode in every browser. If you have control over the hosting environment you should use the HTTP header instead of the meta tag (the meta tag will not validate as HTML 5 and thus your page will fail validation if you include it).