The IE Mobile team for Windows Phone 7 has announced some updates to the browser that makes the rendering engine more compatible with mark-up designed for webkit-based browsers.
Specifically they added support for the -webkit-text-size-adjust CSS selector. This selector allows web designers to control how text on the Web page is scaled to increase readability for the user.
IE Mobile already includes the -ms-text-size-adjust CSS selector, which is of course less widely supported on the web.
Web developers can set the value of the selector to "none", "auto", or a percentage value.
- "none": turns off text size adjustment. For example, html { -ms-text-size-adjust:none } turns off text adjustment for the entire page.
- "auto": sets the text size adjustment to the automatic setting
- percentage: use the specified percentage value to adjust text size. For example, .title { -ms-text-size-adjust: 150% } will adjust the text size for elements that are assigned the "title" CSS class.
They have also added new scripting functions which such as:
- getElementsByClassName(name): given the class specified by name, returns all of the elements or sub-elements within the scope of this function call
- querySelector(selector): given the selector, returns the first element within the sub-tree of the scope of this function call that matches the selector
- querySelectorAll(selector): given the selector, returns all elements within the sub-tree of the scope of this function call that match the selector
Better compatibility with webkit browsers promise better access to websites designed for the iPhone and Android, which often resemble phone applications rather than web pages.
Read more about the updates at the IEMobile blog here.
Update:
The IE Team has now changed their mind, citing community feedback.
Yesterday, we posted a blog entry that detailed some upcoming JavaScript and CSS support enhancements that we are planning on making to the IE Mobile browser for Windows Phone 7. One of these changes, support for -webkit-text-size-adjust, stirred up a bit of controversy that caused us to stop and think further on the issue.
Our original intent in adding support for this WebKit-specific property was to make Web developers’ lives a bit easier by not having to add yet another vendor-prefixed CSS property to their pages to control how text was scaled. Even more specifically, we intuited that the most common use case for this property was to explicitly set it to “none†in order to tell the browser not to scale a particular section of text.
For example, if you have a picture in your page with an associated caption, you would use this property to prevent the browser from scaling the text, which would cause it to remain on a single line, reflecting the original intent of the designer, as in the following example:
After hearing the community’s feedback on this issue (and a couple of face-palms when we realized the broader implications of implementing other browser vendors’ CSS properties), we’ve decided that it’s best to only implement the -ms- prefixed version and not the -webkit- one.
We thank all of the passionate Web contributors who weighed in on the issue, and we’re looking forward to building a great mobile Web browser that all developers can develop for with clarity and certainty.
Specific issues associated with supporting the tags of other browsers would have been unpredictable behaviour for web designers who code pages for specific rendering engines, something which the IE team had clearly not taken into account.
Thanks GP007 for the tip.