Robson Sobral

Since I can't find a way to bookmark it, I gonna only say thank you so much! Vanilla is good!

The better solution is always that one which less interfere on you solution, @massic80.

It looks like one of that weird hasLayout cases. But this is even worst because IE11 should not have a hasLayout.

But both images will still be downloaded. You don't get nothing using this. There's only disadvantages.

In this code, is better to use just one image and set its dimensions using media queries.

If the image isn't background and it need art direction, the picture element will save us, but it isn't 100% ready yet, despite the picturefill.js being available. If you can go on bleeding edge tech, go with picturefill.js and picture element. If you can't, don't make the users download two files to just use the smaller of them.

I asked because I believe this should be part of the tip. ;-)

Hi!

Why sometimes min-device-width, sometimes min-width?

Take a look at this:

<svg width="96" height="96">
    <image xlink:href="svg.svg" src="svg.png" width="96" height="96"/>
</svg>

Why not to keep both files, just like is common to do with CSS and JS? One file for development and another one, minified, for production.

Why not to use the trick mentioned by Chris Coyier of to use multiple backgrounds support?

body {
  background: url(fallback.png);
  background-image: url(image.svg), none;
}

For your cases, this appears simpler.

@arosemena, you're right about to combine inline and block sibling elements, but I don't believe that a negative margin top using pixels is a solution because the space will reappear if the user increase the font size of the browser.

There's a extra ) on your code.

I'm sorry, @steve-jansen! The comment is updated.

I believe it worth to mention that IE6 have some issues with protocol relative URLs.

Update: This is the right link

The previous one is about the server conditions that makes IE6 returns a dialog window.

And the extension to write the blog entry?

You probably don't need all this vendor prefixes anymore, except if you need to support:

• Firefox 3.6, which current version is 25;
• Opera 10. Current version is 18;
• Android Browser 2.3;

There's something I do not understand.

The trick on the absolute positioning centering technique is to use a negative margin equal to the half of the element width.

If the the element width is set on percentage, why not to use half of this percentage?

.inner-element {
    position: absolute;
    left: 50%;
    width: 32%;
    margin-left: -16% /* width/2 */;
}

I prefer use this than load a js.

@2fdevs, my friend who owns one and tested this for me said he consider it as a "mini ultra book", because isn't really "mobile". So...

Surface Pro 1 isn't considered mobile, despite the changes of screen orientation.

Chrome:
Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36

Firefox 23
Mozilla/5.0 (Windows NT 6.2; WOW64; rv:23.0) Gecko/20100101 Firefox/23.0

Internet Explorer 10
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; Touch; .NET4.0E; .NET4.0C; Tablet PC 2.0; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729)

But I don't know if we should consider Surface as a mobile or not.

I'm sorry, but I guess IE8 supports box-sizing too.

Thanks, @as32!

Please, forgive my dumb question. What is the point of the +1?

If Math.random()returns a random number between 0 and 1, in case of 1:

1 * 6 + 1

This returns 7.

@2fdevs, do you mind if I simplify your function a little bit?

return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);

Sure, @2fdevs!

Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 820)
Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; NOKIA; Lumia 800)

And you always can check this.

I tested today and it works fine on Opera Coast for iPad and Safari for iOS7, but not on InternetExplorer for Windows Phone 7.8 and 8.

Is it possible to add a compatibility table to your tip?

The bad part of this is IE7. If HTML and BODY have different sizes, IE7 goes crazy and a lot of hasLayout bugs appears.

More specific selectors are better for performance on jQuery. So, use $('tr[data-href]'), instead.

Some old versions of webkit needs a table-row element too.