Beginner and Intermediate Guide to HTML5 / CSS3 in Drupal
This is our live blog of the session “Beginner & Intermediate Guide to HTML5 / CSS3 in Drupal” by Kendall Totten from Mediacurrent.com. It was given at Drupal on the Bayou in New Orleans this week.
Kendall introduced HTML5 and CSS3 and explained how they are related to Drupal. She gave examples of Drupal modules and themes that already allow us to use HTML5 and CSS3 in Drupal.
Introduction
Upgrading to HTML5 is as simple as:
- Changing your doctype to:<!DOCTYPE HTML>
- Reset your CSS stylesheet: http://html5doctor.com/html-5-reset-stylesheet/
A key idea of HTML5 is that we’ll move away from meaningless <div> tags to more specific tags such as <header> and <footer>. The posh word for this is semantic.
This isn’t just better for people reading our code. It’s also better for machines like search engines and mobile devices who read our code.
Practical Content Examples
<article>
<header>
<h1>This is my header</h1>
<p>By Richard Clark</p>
</header>
<p>Main text of my article</p>
</article>
We can also have <section> tags which are usefully labelled:
<article>
<header>
<h1>This is my header</h1>
<p>By Richard Clark</p>
</header>
<section id="what-are-outline">
<h2>What are document outlines?</h2>
<p>Main text/p>
</section>
<section id="outlines-in-html5">
<h2>Outlines in HTML5</h2>
<p>Main text</p>
</section>
</article>A Practical Image Example
We can also display images with more useful information:
<figure>
<img src="yay.jpg">
<fig caption>
yay!!!
</figcaption>
</figure>Microdata
<div itemscope itemtype="http://data-vocabulary.org/Event">There is a Microdata module being developed for Drupal: http://drupal.org/project/microdata.
MicroFormats
Microformats are very similar to Microdata but they drill down to specific sections on the page. For example:
<span class="street-address">265 Main Street</span>
<span class="locality">Drupaltown</span>
<span class="region">Drupal Province</span>Drupal Themes with HTML5
- Omega
- Adaptive Theme
- Genesis
- HTML5 Base
- Boron
- Zentropy
- Plink
Kendall’s favorite is Delta module. Here’s comparison from Digett.com:
HTML5 Modules
22 are already available for Drupal 7. These include:
- Video: upload and play in any format.
- HTML5 Tools: support for several HTML plugins plus support for Views.
- Aloha Editor: Provides an HTML5-friendly WYSIWYG Editor.
SVG (Scalable Vector Graphics)
New graphics file format and language, based on XML. Worth checking out SVGWOW.com. Abode Illustrator allow export to SVG.
Dealing With Internet Explorer
PIE (Progressive Internet Explorer) makes Internet Explorer 6 to 9 recognize a lot of CSS3 tags. Here’s an easy way to use it in Drupal: http://drupal.org/project/css3pie.
Media Queries
Automatically works out how wide the browser is and so tells the media on the screen how large it needs to be. Code sample:
<link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css">
<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/medium.css">
<link rel="stylesheet" media="screen and (min-width: 901px)" href="css/wide.css">CSS3 Fonts
Import fonts directly via CSS. Google has a font library available with live previews and implementation options: http://www.google.com/webfonts. This will make your site a touch slower but it much easier than older solutions.
Thank you for the thoughtful review. The main advantage of html5 video player seems to be for embedding rich media such as audio and video in modern browsers. Although, the structure elements seem to be useful. CSS3 seems to be headed in the right direction, leaving many possibilities for implementation and creativity,