Tag Archive for html5

Overriding the Default Search Form

WordPress LogoI’m working on building an HTML5 WordPress theme that I’ll use as a foundation for all my projects. I’m sort of taking the shoot-first, ask-questions-later approach. That is, I’m using as much HTML5 goodness as I can, and I’ll deal with backwards compatibility later. So, I wanted to use a proper HTML5 search input.

In order to override the default search form, all you have to do is create a file called searchform.php in the root of your theme’s directory. WordPress will pick this up and use it. For reference, my form looks like this:

<form role="search" method="get" id="searchform" action="<?php bloginfo( 'wpurl' ); ?>">
<div>
<input type="search" value="" name="s" id="s" results="5" autosave="gg_search" placeholder="Search..." />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

Displaying HTML5 Elements Correctly with Modernizr

I just figured out how to get this site with all of its HTML5 goodness to display properly* in IE < 9 and FF < 4.  It seems that in browsers that support the new elements, they set them to display:block, but in browsers that don’t support them – where Modernizr adds them as a shiv – this property is not set, so must be set manually.

So, without further ado, just add this to the top of your stylesheet:

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}

* properly = better. Obviously not “properly” since these browsers still don’t support the CSS3 goodness in use, but at least it doesn’t look like a pile of gecko poo now :)

Increasing Chrome’s Offline Application Cache Storage Limit

HTML5 Powered with Offline & Storage(or Developing a Cross-Platform HTML5 Offline App – Part 3)

In Part 1 I discussed offline storage limits between the various browsers. Since then, Firefox 4 has come out of beta, IE9 has been released, and numerous other changes in the browser landscape have occurred.

Unfortunately I don’t have access to a Windows Vista/7 box, so I have no idea (in practice) what the IE9 AppCache storage limit is. But I will update this when I’m able to do some testing.  I also don’t really know about Chrome on Android as the only testing I can do is with the emulator, and it seems to crash on me a lot.

There don’t appear to be any changes in Safari or Firefox on the desktop.  However in this article I will outline a method to provide “unlimited” storage in Chrome on the desktop. In a follow-up article I will discuss a method to get around the 10MB limit in Safari on iOS.

Maximum z-Index and YouTube Overlapping

For reference (yours and mine) the maximum allowed z-index is 2147483647.  That is, 27 – 1, the highest single byte signed int. Don’t ask me where I found that value (I don’t really remember)… but I did a lot of research and figuring when I was writing my Chrome Status Bar extension as I really hated when some site’s bottom toolbar overlapped it.

Please though, if you do use this number, only use it for browser extensions, and not on your website itself. Browser extensions should always take precedence over the site content, so you don’t want your site to be arm wrestling with the browser for top spot.

Note however that this does not seem to have any affect on embedded YouTube videos, which will still overlap it.  To get around that, add the wmode=”opaque” value to the <embed> tag:

<embed
	type="application/x-shockwave-flash"
	width="425"
	height="344"
	src="http://www.youtube.com/v/zrqRcMRuhUM?hl=en&amp;fs=1"
	allowscriptaccess="always"
	allowfullscreen="true"
	wmode="opaque">

And voila! YouTube videos now roll underneath other site content instead of above it.