WebKit optimized web site in IE10 compatible optimal solution

Article Introduction: This guide covers the most common adaptation scenarios that you can use to optimize your site for WebKit in IE10 and other compatible standard browsers. If you have other tips that are not covered in this article, please share them in the comments section below.

IE10 's broad support for HTML5 ensures that your site works better than ever in Windows Phone 8. Before, in order to support iOS or Android you might be targeting webkit as a specialized optimization. Now you can optimize the site for Webkit can also easily fit the IE10. This means that you will maintain less code and that you can give your customers a better experience. Even more gratifying is that these changes will make your site more in line with HTML5 standards.

This guide provides a range of tips, best practices, and code examples to help you easily adapt to IE10 for webkit optimized sites. This guide has been generated by our team working with a number of popular web sites to fit their WebKit optimized site to IE10.

First step: Detect IE10 on Windows Phone 8

Whether you are in the client or the server running User-agent (collectively known as UA) detection, the first thing to do is to update your detection code, the IE10 and based on WebKit browser equal treatment. This is a basic condition for starting to adjust your code to support IE10. We've released some best practices on how to use UA to detect IE10, but here's the IE10 UA string we'd like to get:

After the UA is processed, if differences between WebKit and IE10 still exist and affect your site, you can try feature detection or other best practices for cross-browser, rather than UA detection. It is particularly important to use HTML5 video instead of flash based video in IE10 on Windows Phone 8.

As part of the first step, you should also update all Third-party libraries, such as jquery Mobile, or other third-party services, to ensure that you get their latest support for browsers. For example, if you use typekit(a Web site that provides online font libraries), you'll need to redistribute your custom font kits , or you'll use Ooyala for your video. (a cross-platform video player solution), then you need to update to their latest player .

Step Two: Ensure standard mode

The next step is to make sure that IE10 will render your site in the most standard mode . aspx. Using standard mode provides maximum support for the latest standards, such as html5,css3,svg and so on. On the contrary, some old patterns, such as "weird Mode" (quirks modes), support backward compatibility only. For most Web sites, they don't have to do anything, because the default is Standard mode. The easiest way to do this is to include HTML5 doctypeat the top of each page:

As long as the doctype of HTML 4.0+ and XHTML 1.0+ do not specify "transitional", they are also used by default in standard mode rendering.

If you are testing your Web page on a local area network (or localhost), you will need to temporarily enforce the standard mode, because the IE network (intranet) uses backward compatibility mode by default. You can add the following tags to the tab of the page to force IE to use standard mode or to add an equivalent HTTP header:

You can delete this tag when you have completed the development and deployed the site to the Internet, because it is no longer needed now.

Here are some scenarios where you should be as careful as possible because they will let your site lose Standard mode:

• Do not include DOCTYPE declarations, but use the HTML5 doctype mentioned above.
• Do not specify a "tansitional" doctype, delete the word trasitional, or simply use the HTML5 doctype.
• Instead of using a x-ua-compatible header with Ie=9 (or earlier) to force the use of the specific IE mode, specify Ie=edge or remove x-ua-compatible headers completely, and use HTML5 doctype.

Step three: Updates to CSS and Dom APIs

Now it's time to get ready to update your code. The simplest update is to add a compatible standard (no prefix) or a Microsoft prefix (microsoft-prefixed) version of the code for WebKit-written CSS and JavaScript. Perhaps you've known some of the best practices before, and have already included a lot of prefixes in your code. But in addition, you have some other CSS and JS need to readjust.

No Prefix property

The first thing we want to see is a set of prefix attributes. These CSS or DOM properties were initially prefixed with the WebKit prefix ("-webkit"), but in IE10 and other browsers, the format of the prefix was used. Fixing these properties is easy, you just have to copy one line and remove the "-webkit" prefix. Adding such a line of prefix properties can also support browsers that are not webkit kernels.

Note that these apply to CSS properties and equivalent JavaScript calls, such as:

The following is a common WebKit CSS attribute and a list of standard (no prefix) formats that are supported by the IE10. Each property has an equivalent style attribute that can be accessed by JavaScript. For example, Border-radius in CSS can be accessed through the Object.style.borderRadius of JavaScript.

Other properties that are not commonly used also support the prefix format, such as CSS multiple-column layouts .

Have prefix attribute

The following attributes, which use the WebKit prefix, are also supported in IE10, except for Microsoft's prefix ("-ms"), since the corresponding standards for the consortium have not yet developed to the point where the prefix is not available. You can learn more about Microsoft's progress in this area. Note that when you add a "-ms" prefix, you also have the option of adding an prefix version for forward compatibility.

Gradient

The syntax for gradients has changed in the process of standardizing CSS. In particular, the gradient type (for example, linear (linear) or radial (radial)) has been moved to the position of the property name, and there is a difference in how you specify the direction and color of the gradient. To get a more complete picture of IE10 support for the gradient syntax, see gradients (Windows). aspx. For example:

Direction of elastic Box layout

The syntax for setting the direction of the elastic box layout has changed in IE10. To learn about the elastic box layout syntax supported by IE10, see the Flex box ("Flexbox") layout (Windows). aspx. For example:

Border of a picture hyperlink

If a picture is used as a hyperlink, ie, by default, adds a blue highlighted border to the image to emphasize that it is a hyperlink; WebKit does not. An easy way to do this is to use the following CSS to indicate that the picture as a hyperlink does not have a border:

a img {   

Border picture

IE10 currently does not support Border-image. To keep your page layout, we recommend that you specify Boder-style as solid so that you can keep the width of the border, the inner margin (padding), and the outer margin (margin) unchanged. (If IE cannot find the type of border it supports, he ignores those values.) e.g.

Step Fourth: Update touch and pointer (pointer) events

WebKit and IE10 are different in their handling of touch events. The WebKit-supported touch interface is separated from the mouse processing, while the IE10 touches (touch), the mouse (mouse), and the stylus (stylus) is encapsulated into a separate interface (pointer (pointer)) respectively. The pointer event model has also been submitted as a standard to the Working Group on pointer Events in the consortium. Although the interface is different, the event model is usually the same, so adding support for pointer events requires only a few changes to the code.

Monitor pointer events

The pointer API uses the standard "Down,move,up" event model. As a result, it is easy to have existing event listeners take effect on pointer events as well.

Handling Pointer Events

If all events are handled by the same listener, such as the "EventHandlerName" mentioned in the previous example, you need to detach them from the event type to a separate handler. This can easily be mapped to an existing event handler:

Detecting the main contact point

As mentioned earlier, the pointer event model triggers a separate event for each contact point. So, if you just want to handle the primary contact (such as the single drag case), you need to filter out the touch point of the non-primary contact by using the following statement before "move" and "Up":

Retrieving coordinates

Because the pointer event model triggers a separate event for each contact, there is no need to retrieve a specific index from a series of touches. You can get the coordinates directly using the Pagex and Pagey in the event object. And it's easy to incorporate it into existing code:

Working with mouse input

The IE10 model has an advantage that mouse input is handled as the same event! Therefore, when the mouse is over an area, IE10 triggers a "move" event. In this case, you only want to handle the mouse down and move events. You can use the following http://msdn.microsoft.com/en-us/library/windows/apps/hh466130.aspxpointertype property to detect the move event before it is started:

if (window.navigator.msPointerEnabled && ((event.pointerType == event.MSPOINTER_TYPE_TOUCH && event.buttons != 1)  

Turn off default touch behavior

The IE10 pointer event model requires you to explicitly indicate which areas on the page are to be processed with custom gestures (using the code you just added) and which are to be handled with the default gestures (finger to page). You can add-ms-touch-action attributes to the elements to select the default gesture processing for them. For example:

In addition to none of this attribute value, IE10 on Windows Phone 8 also supports Pan-x and Pan-y property values that specify whether the browser should handle horizontal or vertical gestures by default, while JavaScript handles other gestures.

Step 5th: Dealing with non-standard behavior

The last category of updates does not have relevant criteria in the WebKit, and thus the processing of the IE10 is different. However, in all of these cases, the WebKit and IE solutions can coexist without any conflict.

Disable link highlighting

Some mobile browsers, including Safari on iOS and IE on Windows Phone, display a translucent, highlighted background when the hyperlink element is touched (tap) to give the user an additional feedback. However, many Web sites want to disable this default behavior to better control the look and feel of their site.

Note that the msapplication-tap-highlight tag is on the page

The label can only appear once, and it acts on the entire page. This tag only works on the IE10 of Mobile (Windows Phone) and does not have any effect on the desktop version (Windows) IE10 (in my test, adding this disable highlighting tag in Microsoft's surface RT does not work, Does not disable semi-transparent backgrounds when hyperlinks are clicked.

Disable local style for Drop-down lists

WebKit's proprietary CSS property "-webkit-appearance" can change the appearance of controls to make them look more like local controls. In many cases, this is how IE10 is handled by default, so it does not need to specify a style specifically.

However, a specific, commonly used scenario is to use "-web-appearance" to disable the Drop-down arrows that appear in the element, and then let it display a custom appearance, such as a background image. A text-indent value is usually set after the drop-down arrow is removed, so that the text in the Drop-down list item is not exposed on the page. (However, it will display a pop-up control when we click on the screen). The following is how you can achieve the same effect in IE10: Summary This guide covers the most common adaptation scenarios that you can use to optimize your site for WebKit in IE10 and other compatible standard browsers. If you have other tips that are not covered in this article, please share them in the comments section below. In many cases, the actual code changes on your site are small, depending on the features used in the site and the best practices that you have applied in your code. So, get started, and let Windows Phone 8 users experience the best sites.