$('input, select, textarea').focus(function(){
$('meta[name=viewport]').attr('content','width=device-width,initial-scale=1,maximum-scale=1.0');
});
$('input, select, textarea').blur(function(){
$('meta[name=viewport]').attr('content','width=device-width,initial-scale=1,maximum-scale=10');
});

Notice the tiny difference between focus and blur: onfocus you set the maximum-scale to 1 and onblur it’s set to 10. You shouldn’t use the code above, Wilfred Nas and Mathias Bynens optimized it in the comments to this snippet:

var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' + (event.type == 'blur' ? 10 : 1));
});

The browser starts zooming in but immediately zooms out again when the elements gets focus. I like that.

Prevent iOs from zooming onfocus is a post from: Nerd

• Opera Next can be run at the same time as the regular Opera
• Firefox has an Aurora version (far future, unstable) and a beta version (more stable). You can run them alongside with the help of the ProfileManager
• Chrome has some Canary Builds which can be run alongside your regular Chrome.
• Internet Explorer Test Drive versions are released on a regular basis and can run next to IE9 (on Windows 7 only)

Developer builds is a post from: Nerd

Today I talked about this idea while I was giving a workshop. From that moment on Roy Tomeij, who was attending, was more silent than usual. Ten minutes later he interrupted me with this masterpiece. Ladies and gentleman, I present you the Adaptive CSS Zen Garden. Resize your browser window at your own risk!

The Adaptive CSS Zen Garden is a post from: Nerd

Serve your default stylesheet to all browsers except IE8 and lower. To those “browsers” you serve Andy Clarke’s universal ie6 css in a conditional comment. Then with the help of a simple javascript you immediately replace this css file with your default css file. Now those unlucky visitors will at least see a nicely styled easy to read minimal site. (View source on this page to see how it works)

I couldn’t think of a way to replace the fallback css before it gets loaded so the only negative side effect of this technique is that it uses an extra http request. I think it’s worth it: for me this JavaScript dependency was the only thing that kept me from using HTML5 elements.

Another HTML5 fallback strategy for IE is a post from: Nerd

It turns out that some input types are somehow replaced by images and the text you enter on your keyboard is added to a div with a script. Since no input element gets focus the keyboard on touch devices will not be visible and at least on my iPad you cannot even paste text. Maybe you could write another very complex script to emulate this behaviour but, less silly, why wouldn’t you just use some regular input types instead. You can actually style those using css, you really don’t need any images to do that.

Same with scrolling. All browsers on all devices since the early nineties can scroll a page, why would you want to write a script to emulate scrolling? This whole script is probably only there to be able to style the scrollbar and make it look the same in all browsers. The unfortunate side effect is that scrolling doesn’t work anymore on my touch devices. Now another complex script needs to be written in order to solve this issue, an issue that really shouldn’t exist in the first place. Really, nobody will complain if a scrollbar looks exactly the same as it does on every single page on the internet. But people will complain if they see something that resembles a scrollbar but doesn’t do anything.

The advice here is very simple: don’t try to fix things that work, you’ll break it.

I won’t complain about the silly loading bar you get to see for ten seconds before you get to see the actual data although I just cannot understand why it has to take that long. And I should complain about the incredible messy HTML, an unbelievable pile of inline style cruft, but I wouldn’t know where to start, this just looks like some sort of randomly generated vomit. I should definitely complain about the fact that I cannot use this site with my keyboard instead (or alongside with) my mouse but I already wasted enough time on this app. I surely should complain about the fact that the simple data the app provides is not accessible when JavaScript is turned of.

This app is actually so bad that I won’t link to it. (And i will never link to the crazy Web Framework that generated this dump and is responsible for some of these nice looking cruft machines that pop up all over the place. Please drink espresso, build grown up websites and leave the milk for the babies).

Design for users first, not just for good looks is a post from: Nerd

Sure this technique is not as flexible as the css3 notation, every change to the design of the gradient means firing up a pixel editor, building the new png, saving it, turning it in to a data-uri and copy pasting that code to your stylesheet. But if you’re sure about your gradient this is a fine way to build simple scalable gradients. I’m sure that with some clever slicing and tiling and with the help of multiple backgrounds more complex gradients are possible.

Now, browser support. This works in all modern browsers but it doesn’t work in older browsers like camino 1.6 and all versions of IE before version 9. If you agree that websites don’t have to look exactly the same in every browser you can easily hide the png for these browsers by setting its background-position-x to something negative and its background-repeat to no-repeat.

Scalable gradients without the performance issues is a post from: Nerd

I started looking for the exact negative right margin to add to every element in order to eliminate the whitespace. I couldn’t find it. Margin-right: -.3em; came very close but in some browsers it was -.268em and in others even less. There was no exact unit. After chatting with @kuvos I realized I was using the wrong font. So I tried Courier New.

To keep a long story short, the white space with Courier New is exactly 0.6em in all browsers. See the original test page and a simple layout test page and please test them in all your browsers.

Bugs and shortcomings

• The biggest bug, or flaw, of course is that Courier New is not installed on all operating systems. On my Kubuntu VM all test pages look horrible. Workaround seems to be to add ‘DejaVu Sans Mono’ to the font-stack which luckily has the same white space.
• This doesn’t work with some font-sizes since browsers have to round to a pixel. Choose an easy to use base font-size where 0.6em is equal to an exact amount of pixels for your layout to avoid this bug.
• I know that in IE8 with the original test there’s some kind of moiré effect going on. That doesn’t seem to happen with the layout page.
• Opera 10.5b on my Mac seems to consider the whitespace non-existent and renders the simple test page as if it’s a single word without spaces, so the elements don’t wrap. I think that’s a bug. But it’s actually a good test to check if the number is exact (-:
• IE7 and lower don’t understand display:inline-block; See the simple workarounds in the test pages.

Eliminating whitespace after display:inline-block elements is a post from: Nerd

<img src="image.png" alt="">

There are two exceptions.

1. The image is a link
2. Without the image the content would be incomplete

The first exception is easy. If an image is a link there must be an alt text and that text should describe the link, not the image (just like good link text).

The second one is easy too. If the content on the page can’t be understood without the image the image must have an alt text that describes what’s on this image. The alt-text should be a logical addition to the rest of the content. If you replace the image with the alt text it should still make sense. If it doesn’t rewrite it or remove it.

Please see the WHATWG for a more detailed and complete explanation of the art of good alt text

How to use the alt attribute (or alt text) is a post from: Nerd

Here’s the code. As always, suggestions are welcome.
javascript:(function(){
var%20a=document.getElementsByTagName('*');
l=a.length;
while(l--){ a[l].style.color='#666';a[l].style.background='#f5f5f5';}
document.getElementsByTagName('body')[0].style.background='#ebebeb';
})();

A bookmarklet for my wife is a post from: Nerd

This is the code

javascript:(function(){var%20a=document.getElementsByTagName('img');l=a.length;
while(l--){if(a[l].src=='http://l.yimg.com/g/images/spaceball.gif'){
a[l].style.display='none'}}})();
void((function()%7Bvar%20e=document.createElement('script');
e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://ffffound.com/bookmarklet.js');
document.body.appendChild(e)%7D)());

If you have any suggestions or additions for this code please let me know.
I only tested it on Firefox and Safari. It should work on other browsers. If not, let me know.

A Ffffound bookmarklet for Flickr is a post from: Nerd