CSS3 Gradient Backgrounds and Controlling Their Height

Let’s assume you want to create a gradient background that starts at the top of the page and finishes at the bottom of your page header, i.e. is 100px tall. You can do this with a combination of CSS3 rules and avoid those ugly background images.

Continue Reading CSS3 Gradient Backgrounds and Controlling Their Height

Cross-browser HTML5 video tag with fallback for Flash users

Apple’s lack of support for Flash on the iPhone and iPad has forced people to reconsider the value of HTML5 and its video tag. It’s no longer something to put off until the future. However, adding HTML5 video support to your site AND continue to provide a Flash option for older browsers (I.E.) is not as simple as you might expect.

While the video tag has been standardized, there is a lack of consensus for supporting the codecs used to package the videos for distribution and playback. Some browsers are supporting the OGV format, some support the more popular but licensed mp4 format. Others, such as Chrome, will support both. To make it even more exciting, there is a new version under development to make a truly open-sourced format: WebM.

This means your video tag needs to define multiple movie sources to make it playable on all browsers. It sounds complicated because it is. Luckily, Kroc Camen has written a great article and code pattern for adding a cross-browser video tag with fallback to Flash for the older browsers: Video for Everybody!.

The article is full of great advice from a programmer that has learned the stuff the hard way. Here’s an explanation of how you’ll need to adjust your htaccess file.

Ensure your server is using the correct mime-types. Firefox will not
play the OGG video if the mime-type is wrong. Place these lines in your .htaccess
file to send the correct mime-types to browsers

AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm .webm

Video for Everybody! – Kroc Camen

Related Resources

YUI 3.0 Gallery now includes modernizr functionality

Yahoo! User Interface Library (YUI)Are you working on an HTML5 project and using the latest YUI library from Yahoo? If so, you’ll be happy to know that you can use the modernizr functionality within the YUI3 code.

This extension was added to the YUI Gallery by Pradhap Natarajan: Modernizr (gallery-modernizr).

This is a wrapper for Modernizr library that is used to detect support for many HTML5 & CSS3 features on a browser. More documentation here – http://www.modernizr.com/docs/ Please note that the module does not add the Modernizr object to the global namespace. Instead it will be local to the YUI instance.

Modernizr YUI Library

Modernizr was created to make HTML5 development consistent. It gives hooks for JS and CSS to support the advanced features.

Related articles by Zemanta

Dive into HTML5 should be everyone’s intro to the standard

I just found out about the Dive Into HTML5 tutorial. It’s downright amazing. I wish all specs were so carefully described. Don’t miss the first chapter on the history of standards creation. It gives you a good understanding of why the HTML standards are quirky and why HTML5 is progressing the way it is.

I especially like the way they test your browser for its ability to handle the various components you are reading about. Take an hour or so to go through this tutorial. It’s the best read you’ll have for the week.

Another good tutorial is The Best HTML5 Slides Ever, but you’ll need to view it in Safari. It doesn’t work well in the standard Firefox and forget about IE.

Related articles by Zemanta

HTML5 Helpful Links

I’m starting to hack away at HTML5 and I’m finding that I need to start bookmarking more and more pages. There are lots of good resources out there. Here are a few:

Related articles by Zemanta