HTML5 and CSS3
While XHTML with CSS is more robust than HTML alone is, it is evolving as we read. HTML5 seems to be the preferred leap for current web authors, and the W3C is focusing on standardizing it.
As of now, HTML5 and CSS3 are still in semi-development mode; the W3C Validator does validation for HTML 5, but the W3C CSS Validator is still mostly focused on CSS
2.1. In addition, not all browsers support all structural and semantic tags of HTML5, though this is changing. Internet Explorer 9 is expected to provide some support for them, and is now in beta mode. Other current version browsers (IE, Firefox, Opera, Safari, Chrome, etc.) only partly and/or experimentally support them. The consensus from various blogs and tutorial providers is that HTML5 will be widely standardized by/in 2012, and that many designers/developers are already integrating parts of it fairly consistently and pushing the envelope however they can.
These are also not likely to be recognized/used by most local employers for a minimum of 2-3 years (say 2013 or so), because employers are slow to change their IT systems, code, and products, which they have invested heavily in and usually repair and patch together until they explode. This generally means that while a designer might be ready, and employer might not use or plan to aim their web presence to the most current browsers. Therefore, HTML5 and CSS3 are still in the experimentation and leading-edge stage, where freelance designers and small studios are pushing the envelope and sharing tutorials while employers trail until they have become tried-and-true and can be supported easily with common tools.
HTML5
HTML5 has both a regular text/html serialization and an XML serialization, which is known as XHTML5. In addition to the markup language, the specification includes a number of application programming interfaces. The document object model is extended with APIs for editing, drag-and-drop, data storage and network communication.
The language is more compatible with HTML 4 and XHTML 1.x than XHTML 2.0, due to the decision to keep the existing HTML form elements and events model. It adds many new elements not found in XHTML 1.x, however, such as section and aside. (The XHT- ML 1.2 equivalent (which XHTML5 replaces) of these structural elements would be <div role=”region”> and <div role=”complementary”>.)
Useful HTML5 resources include
• HTML5 Tags: http://www.w3schools.com/html5/html5_reference.asp
• HTML5 Rocks: http://www.html5rocks.com/
HTML5 Early Adoption
You can adopt certain stable parts of HTML 5 sooner, rather than later. These won't change much as the standardization continues, and work with existing XHTML 1.0 in- formation covered in this book and in current practice. You will want to search online for free tutorials and videos to show you techniques you can use. Benefits include:
• Cleaner code.
• Additional semantics of new elements like <header>, <nav>, and <time>.
• New form input types and attributes that will take the hassle out of scripting forms.
• Staying ahead of the curve before HTML5 becomes the mainstream markup language.
You can get started with HTML5 by:
• Simplifying your doctype.
• Simplifying your character set.
• Simplifying your <script> and <style> elements.
• Using block level linking.
• Get into the habit of using HTML5 class names in your HTML4 markup.
• Working in the new form input types, since they degrade gracefully.
• Using elements such as <time> to add semantics that will be interpreted by lead- ing browsers.
• Using the <video> and <audio> elements, and then making them degrade grace- fully.
HTML5 Doctype
Should you want to get started with very basic HTML5, note the new doctype and charset requirements:
<!doctype HTML> <!-- new and simplified -->
<html> <!-- simplified -->
<head>
<meta charset=”utf-8” /> <!-- new and simplified, must be right after <head>
opening tag -->
<!--Other meta tags -->
<title>Page Title</title>
</head>
<body>
</body>
</html>
HTML5 Semantic Tags
We did make note of several HTML5 semantic and general tags in Chapter 9. These were created for HTML5 only, and will not work properly in or validate for XHTML1.0 doctypes. However, once your adopt the HTML5 doctype, you can use the XHTML1.0 as usual and integrate these as well – insofar as browsers support them. Test well, my friends!
<dialog>…</dialog>
For marking up conversations — a chat transcript, an interview, a bit dialog from a screenplay, etc. Uses the definition list parts inside the dialog wrap.
<audio>…</audio>
Allows you to define defines sound, such as music or other audio streams. You can write text between the start and end tags to indicate that older browsers not support this tag.
<video>…</video>
Allows you to define video, such as a movie clip or other video streams. You can write text between the start and end tags to indicate that older browsers not support this tag.
<canvas>…</canvas>
Used to display graphics – but only allows you to create a “container” for the graphics. You must use a script to actually paint graphics inside of the canvas tag set.
<embed>…</embed>
Defines embedded content, such as a plug-in. Note: You can NOT write text between the start and end tags.
<source>…</source>
Specifies multiple media resources on media elements, such as <audio> and <video>. The browser should choose which file (if any) it has support for. You can write text between the start and end tags to indicate that older browsers not support this tag.
<figure>…</figure>
Make image embedding more descriptive and easier to recognize, and is also used for diagrams, code snippets and other visual elements. Used when referring to an image in the body of an article, not all images in general.
<time>…</time>
Defines a time or a date, or both, in a way that works with search engine spiders as well as human readers. The datetime attribute allows you to display a nice date format inside the tag.
<a>…</a> <a href=”URL” title=”additional information”>link block</a>
The anchor element was originally an inline element – you could link a image or bit of text inline. With HTML5 you can now link a block of text so that you can have a click- able heading and image all at once, rather than having to link each line separately. This removes duplication and creates a wider hit area to click.
HTML5 Structural Tags
We also took a brief look at HTML5 structural tags in Chapter 21. We considered these if you use the standard tag names for classifying your Divs in XHTML1.0, then you can more easily transition your web page structures to these same tags in HTML5. This al- lows you to replace some of a web page's standard div class names with actual HTML structure tags:
Note that when you apply styles to the new HTML5 tags, unknown tags have no de- fault style in most browsers and are treated as inline elements. Because most of the new HTML 5 tags are structural, you want them be behave like block elements, so be sure that you include display:block; in your CSS styles for these elements.
<header>
The header tag is a container for a web page or an introductory information about a section within the web page. The <header> tag can act as your Banner segment with your typical logo/slogan that sits atop most pages. It can also act as a headline that introduces a section of the web page. If you've been using <div id=”header”> in your pages, you can replace it with the new <header> tag.
<nav>
The nav element is for navigation elements. It can be used for your site's primary navigation, and again for your page-specific navigation, when you differentiate the two uses with CS IDs. If you've been using a <div id=”nav”> tag to hold your page navigation, you can replace it with the new <nav> tag.
<section>
The section is a thematic grouping of content, usually preceded by a header tag, and followed by a footer tag. For instance, if you have been using div id=”content”, you can re- place it with the new <section> tag. However, sections can also be nested inside of each other, if needed. You'll want to look at example HTML5 websites to see what works.
<article>
The article element should wrap a block of content that forms an independent part of a document or site, like a magazine or newspaper article, a blog entry. It is not a necessary part of a standard web page, but would be good for use in blog designs and online magazine sites.
<aside>
The aside element is for content that is related to the content that forms the main textual flow of a document. Inline footnotes, pull quotes (using the <q> inside the <aside> tags), or annotations are good examples. Note: A sidebar is a not good example – you would in- stead use another <section>, and give it a class=”sidebar: for CS styling.
<footer>
The footer element can be used as a footer segment of a web page. It can, however, alsobe used as a footer piece inside an article (such as part of a blog entry).
Example use:
<!DOCTYPE html>
<html>
<head>
Chartype, title, metatags
</head>
<body>
<header><h1>Site Name</h1></header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section id=”main”><!--Giving an ID so you can use CSS to set position, etc.
-->
<h1>Content Area</h1>
<article>
<p>Main content items – text, images, links, etc.</p>
</article>
</section>
<section id=”sidebar”><!-- Giving an ID so you can use CSS to set position, etc. -->
<h3>Sidebar Area</h3>
<article>
<p>Sidebar content</p>
</article>
</section>
<footer>
<p>Footer items – copyright, disclaimer link, sitemap link, etc.</p>
</footer>
</body>
</html>
Hacking for Internet Explorer
Sections are not fully supported by all browsers, and definitely not by older browsers like Internet Explorer 6 or Firefox 2. At this time, if you need to support legacy browsers like IE, there is a fix. IE 6 parses and displays the structural tags, but it won't apply any CSS to them. The fix is to use some JavaScript in the head section of your web page by using the createElement method so IE 6 can be ‘informed' of the new tags.
<script> /*Remember that HTML5 already assumes the default script is
text/javascript*/
document.createElement(‘header’);
document.createElement(‘nav’);
document.createElement(‘section’); document.createElement(‘article’);
document.createElement(‘aside’);
document.createElement(‘footer’);
</script>
CSS 3
CSS1 and CSS2 does a lot to enhance XHTML, but it has limits which seem to require hacks to get around Internet Explorer and mobile device issues. It also has limits to styl- ing, like the need to manually style rounded corners, an inability to add shading to text or objects, and other design needs that web authors use hacks to create.
CSS3 is the next stage of CSS, and the W3C is working to make new agreements and standards that will be adopted by browsers. There is some partial support by current browsers, but it is touch-and-go. You can get current information at CSS3.com, which can lead you to tutorials and techniques.
CSS3 Early Adoption
Like for HTML5, you will want to search online for free tutorials and videos to show you new, reliable and standardized techniques you can use. A few techniques are currently available: box and text shadows, transparency, border radius, custom web fonts, showing hyperlink cues, and text wrapping.
Anticipated items include a multi column module, a template layout module, a multiple background images feature, box model handling, replaced content, new selectors and pseudo classes, and more.
Keep in mind that although CSS3 hasn't been released as a final specification by W3C, it has some limited validation available through the W3C CSS Validator. You can try to compensate by for holes creating more style sheets to work with CSS3 as well as whatever you plan to create, but this might not be an effective use of your design time this early in the game. You are a creative – you decide! A great resource is: CSS3.info: http://www. css3.info/
What’s Working?
Opacity
Opacity is a method of making elements transparent in CSS 3. It is not supported in all browsers. You can change the opacity of your elements so that they fade in and out. Here is an example of how we would add 80% opacity to a div using additional lines to sup- port IE and Mozilla Firefox versions:
div
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.80;
Multi-Column Layout
You can create multi-column layouts without having to use multiple divs. The browser interprets the properties and create the columns, giving the text a newspaper-like flow. You can define the number of columns (column-count), the width of each column (column- width) and the gap between columns (column-gap). If column-count is not set, the brows- er accommodates as many columns that fit in the available width. You need to add lines to incorporate for Safari/Chrome (-webkit), for Mozilla Firefox (-moz), etc.
.index #content div {
-webkit-column-count : 4;
-webkit-column-gap : 15px;
-moz-column-count : 4;
-moz-column-gap : 15px;}
To add a vertical separator between columns, use the column-rule property, which acts like a border property:
div column-rule: 1px solid #00000;
Word Wrap
The word-wrap property is used to prevent long words from overflowing. It can have one of two values: normal and break-word. The default normal value breaks words only at allowed break points, like hyphens. If break-word is used, a word can be broken where needed to fit the given space and prevent overflowing.
Rounded Corners
Border-radius adds curved corners to HTML elements without background images. You need to add lines to incorporate for Safari /Chrome(-webkit), for Mozilla Firefox (-moz), and Konqueror (khtml).
H1 span
color: #990000;
padding: .5em;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
Box Shadow
The box-shadow property adds shadows to HTML elements without extra markup or background images.
#shadow
-moz-box-shadow: 8px 8px 4px #777;
-webkit-box-shadow: 8px 8px 4px #777;
box-shadow: 8px 8px 4px #777;
Special Fonts
Most common fonts are used on the web because most computers have them preinstalled. With CSS3, you can use unique fonts as they can be called from an internet-enabled loca- tion such as the server your website is hosted. @font-face feature.
@font-face
font-family: Frutiger;
src: url(‘http://example.com/fonts/ Frutiger.ttf’);
h1
font-family: Frutiger;
font-size: 3em; letter-spacing: 1px; text-align: left;
Pending Items
A number of exciting CSS3 items just are not ready for primetime yet – browser support is too spotty or still nonexistent. Also, some of these might be dropped or delayed in favor of items not noted here. However, over 2011 and 2012, more of these will become standard as the browsers continue upgrading:
• Border images: defines an image to be used instead of the normal border of and element
• Column-space-distribution: describes how to distribute space between the columns if there's rest space left.
• Media Queries: You would be able to change stylesheets based on, for instance, the width and height of the viewport/device.
• Box shadow: drop shadows for boxes.
• Multiple backgrounds: allows for multiple background images on one element.
• 2D and 3DTransforms: allows you to rotate, scale or skew elements in a page to a specified angle or measurement.
• Transitions: lets you add an effect when changing from one style to another.
• Animations: lets you create simple animations with the @keyframes rule.
• User Interface: Lets you add new user interface features like resizing elements, box sizing, and outlining.
• Text-stroke, text-fill-color
• Appearance: allows you to make an element look like a standard user interface element.
• Selectors for element children, elements that have specific values, and elements in specific places.
• Color names: 130 more color names besides the core 17 (like black, white, red, etc).
• Grids: properties like columns and rows for grids.
• Linebox and Flexible boxes
• Hyperlink properties: target information for where/how new windows /tabs should be opened.
• Paged Media
• Generated Content
• Marquee
• Speech properties: audio stream styling support.
• Ruby properties: for Ruby use.
Adopting HTML5 / CSS3
We've looked at only a few parts of HTML5 and CSS3 that are in growing use. Should you use them in your design and production yet? That's a personal choice, and you need to balance the browser support, clean validation/markup, and your audience and client needs.
Clients
You need to establish if your client is ready for HTML5 and CSS3 use. For instance, many clients work through Content Management Systems that do not add these updates quickly, and your client might be one or more versions behind. As a result, using new standards can actually break existing working code and cost time, money, and audience support.
Visitors
The audience can get a lot of pros out of sites done with HTML5 and CSS3 integrations. They will have access to smoother transitions from one device to another, for instance. With proper structure and styling, websites can only get more visually appealing and well-organized so that viewability and accessibility improves.
Designers/Developers
You are a pivot in the use of HTML5. While you have to understand that a website will not be able to look the same across various browsers, you will still have more pieces to play with to innovate and organize your work. You can add more presentation, more media, more structure, and as time moves on, fewer hacks because these standards are continuously improving.
Getting Started
Wherever you are in the continuum of your training, you can get started using reliable elements HTML5 by:
• Simplifying your doctype.
• Simplifying your character set.
• Simplifying your <script> and <style> elements.
• Using block level linking.
• Get into the habit of using HTML5 structural tag names in your HTML4 markup class names.
• Working in the new form input types, since they degrade gracefully for browsers that don't yet support them.
• Using elements such as <time> to add semantics that will be interpreted by leading browsers.
• Using the <video> and <audio> elements, and then making them degrade grace- fully for browsers that don't support them.
You can also play with the aspects of CSS3 that have code that supports different browsers, like:
• Rounded corners
• Opacity
• Open source fonts
Make sure that you really understand your client's needs and capabilities, and the demo- graphics of the audience population - so you can predict which browsers they will mostly use. Know which browsers support what you want to do, so that you can avoid hacks and special code markup that won't be useful later. Then validate as much as you are able, re- view your work in the current and last version of all major browsers.