IE11 Things I Had to Learn

I've dealt with several quirks of the new version of IE in the last couple days. Here's what I've uncovered:

First, in IE11, you can setup a standard anchor tag to open up an app. This will try to load it side-by-side with IE, but typically it will navigate you to a blank window in IE11, which is not ideal experience. To launch an app directly into a side-by-side window without this problem, use a hidden iframe (0x0) and set it as your app link's target. such as "<a href='skype:5555555' target='helper'>Call us</a>"

The reason is that the app loading apparently needs an window to run its launch command in. Since the window will have no content (it's all in the app), you'll get the blank window. But if you use a hidden target in the web page, only this will get the blank window, which is hidden, leaving your webpage uneffected.

The second thing I dealt with was automatic Skpe links. The new feature in IE11 is that phone numbers (plain text) will turn into automatic Skpe links. Not a bad idea, but the browser decides to style these links for you. Without your permission or control.

I had to maintain the links' functionality, but also keep the original styling. Well, you can't just write CSS. It automatically underlines, changes the color, and removes the custom font. 

Working with this, I discovered that IE11 will attempt to match the color of the link based upon its background with a couple standard defaults. EXCEPT if you have an image background, then it will let you control the color. So you'll have to force one - either with transparent background applied or some solid color background. Unless of course, you have a background image already.

The underlining (even using !important inline) won't go away. The hack here is pretty simple - set a height on the element and overflow-y to hidden. Adjust the height until the underline goes away. It's typically 1px away from actually trimming your text. You'll have to adjust a few positioning components to realign things. 

I couldn't figure out a workaround for the font, but it will respect serif/sans-serif. 

That's it so far. The first issue is not necessarily a problem. The ability to quickly open apps especially things like Bing Maps is pretty cool and fast, but I just wish that I could've found documentation or an example someplace to get this behavior. 

The second issue however is crap. There is no point that a browser should be given the right to restyle a page. The standard for phone numbers thus far has been to create "tel" hrefs. Those are in fact ignored by the Skype linker, meaning, if you want to give users the option for your site, you have to have 2 layouts. And one of those will not let you style it. 

I know it's intended for convenience, but some numbers I may not want highlighted. In fact, that was the only information I could find on this subject - to simply eliminate it. Well, if you're in the middle ground, you have this struggle, which isn't empowering. It's now a quirk, alongside all our other fun tidbits with the legacy browsers.