Joined October 2013

Robson Sobral

designer at ofício::design
São Paulo, Brazil

Posted to Smooth Scrolling without jQuery over 1 year ago

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

Posted to Reseting pointer-events on IE11 over 1 year ago

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. ;-)


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"/>
Posted to Saving better SVG files over 1 year ago

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.

Posted to Remove extra space below images over 1 year ago

@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.

Posted to MySQL: Using IF in a WHERE clause over 1 year ago

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.

Posted to Sublime Text - Another theme... Again over 1 year ago

And the extension to write the blog entry?

Posted to Perfect full page background-image over 1 year ago

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.

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.

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?

Posted to Using body as a container over 1 year ago

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

Posted to Linking entire table rows over 1 year ago

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

Posted to Not Sure the Size? Table It over 1 year ago

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

98 Karma
16,826 Total ProTip Views