New browsers introduce new ways of thinking. IE10 is no different. There are compatibility concerns to make your site look awesome everywhere. So where do you start to learn about this stuff? How about right here!
Compat Inspector
Compat Inspector is a JavaScript-based testing tool that analyzes your site while it runs. Compat Inspector watches for patterns of interaction known to cause issues and reports them automatically. This allows you to identify problems quickly without first memorizing a bunch of documentation. See this page to learn how to use it.
To help demonstrate Compat Inspector, known compatibility patterns have been introduced into the tooltip script used for this page. Use Compat Inspector to learn about the issues present in the tooltips above. Just click on the Compat Inspector widget in the upper right-hand corner of the page to get started.
For a given reported issue, check the "Verify" checkbox and refresh the page to temporarily simulate the expected behavior. Focus on one issue at a time. Although you can "Verify" multiple issues at once, typically only one represents the root cause of the problem. Continue this process until the tooltips start working correctly. After that, take a look at the patched version of the tooltip script.
Touch Input for IE10 and Metro style Apps
The Web is more interactive, fun, and immersive when sites work well with new input devices and touch screens. The Windows Developer Preview introduces support for handling touch and pen input in your sites and apps. Developers can now ensure their sites work well with touch and build powerful new experiences that make the most of advanced input such as multi-touch and gestures. You can see this in action on the IE Test Drive site in the new and updated demos Touch Effects, Lasso Birds, and Flying Images.
Internet Explorer 10 Compatibility Cookbook
The Internet Explorer 10 Compatibility Cookbook is designed to help you understand changes in Internet Explorer 10 that might impact applications that you developed for earlier versions of Windows Internet Explorer. Many changes help Internet Explorer comply with broader industry standards, and other changes improve performance and reliability.
The Internet Explorer 10 Compatibility Cookbook includes information about changes to features, identifies features that are deprecated or removed, and describes general tools and guidance. New topics will be added to this section as features are modified and as user feedback identifies areas where more information is needed.
No Browser Left Behind: An HTML5 Adoption Strategy
There’s a lot to be excited about with HTML5. With new markup, CSS capabilities and JavaScript APIs, the scope of what’s possible on the Web is growing by leaps and bounds. Add to that the steady one-upmanship among browser vendors, and the list of exciting features expands almost daily. From nightly builds to dev channel releases and regular platform previews, browsers are changing fast and Web developers everywhere are going along for the exhilarating ride.
But as much as the development and browser communities are pushing the HTML5 hype up to a fever pitch, the vast majority of people on the Web aren’t using the brand-new browsers and versions that we are. If you’re a Web developer in a large development shop or an enterprise with a large user base, you probably already know this. Even if you’re working with a small shop or startup providing some service via the Web, you probably spend a lot of time making sure your site caters to as many browsers and browser versions as possible.
Internet Explorer 10 Guide for Developers
The Internet Explorer 10 Guide for Developers provides a look at the developer features included in Internet Explorer 10, as well as the latest HTML5, JavaScript, and Cascading Style Sheets, Level 3 (CSS3) features available to developers of Windows Store apps using JavaScript for Windows 8. By using the documentation and samples in this guide, developers and designers can take full advantage of these new features.
iOS to IE10 Metro: Building Cross-Browser Plugin-Free Experiences
I’ve had the good fortune of working with my friend Jonathan Sampson recently on figuring out how to help developers build plugin-free experiences. With IE10 Metro going plugin-free, it’s incredibly important to document steps to help developers provide their users with great experiences without the need for proprietary 3rd party add-ons.
If you’ve built a plug-in-free browsing experience for the iPad, a few changes will make it ready for the new IE10 plug-in-free experience on Windows 8. As more browsers adopt the plug-in-free approach, now is a good time to start thinking about it. I’ll show you how to do this in a few steps below by writing code that works well in all modern browsers.
Fix Common IE Problems: Update your Docmode for Web Standards
Document compatibility defines how a browser renders your website. The more specific you are at telling the browser what to expect, the better the experience for your users. When using web standards like HTML5, start by explicitly declaring the HTML5 document type:
<!DOCTYPE html>This markup triggers standards mode in Internet Explorer 9 and 10. And it also works well in Chrome and Firefox.
Browsing Without Plug-ins
Because more and more browsing takes place on an ever wider variety of devices, and browsers on them, more and more consumers are browsing without plug-ins. Delivering a great site experience to consumers who browse the Web plug-in free is important work that sites must do to reach the widest audience. With HTML5, modern browsers and sites can deliver a great consumer experience even without plug-ins.
“Plug-in” refers broadly to browser extensions that run native client code using low-level browser interfaces. For example, here is a basic description of Webkit’s approach; the IE equivalents are ActiveX controls and Browser Helper Objects. Web sites use a wide variety of plug-ins; Adobe Flash is one of the most common.