Looking into HTML5 + CSS3

LOOKING INTO HTML5+CSS3
CHRISTOPHER SCHMITT | http://twitter.com/teleject

THINGS ARE GOOD
BETWEEN US, XHTML, RIGHT?

I MEAN.
WE GET ALONG WELL.
AND WE BOTH LIKE STUFF.

“THE ATTEMPT TO GET THE
WORLD TO SWITCH TO XML,
INCLUDING QUOTES
AROUND ATTRIBUTE VALUES
AND SLASHES IN EMPTY TAGS
AND NAMESPACES ALL AT
ONCE DIDN'T WORK.”
-TIM BERNERS-LEE

“TAKE CARE
OF THE LUXURIES AND
THE NECESSITIES WILL TAKE
CARE OF THEMSELVES.”
-FRANK LLOYD WRIGHT

NEW HTML5 ELEMENTS
• article • ﬁgure • progress
• aside • footer • rp
• audio • header • rt
• canvas • hgroup • ruby
• command • keygen • section
• datalist • mark • source
• details • meter • time
• dialog • nav • video
• embed • output

<!DOCTYPE HTML>
<HTML LANG="EN">
<HEAD>
<META CHARSET="UTF-8">
<TITLE>BASIC HTML5 WEB DOCUMENT STRUCTURE</TITLE>
</HEAD>
<BODY>
<H1>....</H1>
<P>...</P>
</BODY>
</HTML>

<!DOCTYPE HTML>
<TITLE>HTML5</TITLE>
<P>HELLO WORLD</P>

http://validator.w3.org/check?uri=http%3A%2F%2Fjsbin.com
%2Fowata&ss=1

DIV ID=”header”
DIV ID=”nav”

DIV ID=”section”

DIV ID=”sidecolumn”
DIV ID=”article”

DIV ID=”footer”

HEADER
NAV

SECTION

ASIDE
ARTICLE

FOOTER

<BODY>
<HEADER>
<H1>HEADING </H1>
</HEADER>
<NAV>
<H3>SITE NAVIGATION</H3>
<UL>...</UL>
</NAV>
<SECTION>
<H3>WEBLOG ENTRY</H3>

<ARTICLE>
</ARTICLE

</SECTION>
<ASIDE>
<P>YOU ARE READING "CHOCOLATE RAIN", AN ENTRY POSTED ON <TIME
DATETIME="2009-03-05">5 MARCH, 2009</TIME>, TO THE <A HREF="#">MISTY
COLLECTION</A>. SEE OTHER POSTS IN <A HREF="#">THIS COLLECTION</A>.</P>
</ASIDE>
<FOOTER>
<P>...</P>
</FOOTER>
</BODY>

<SCRIPT TYPE="TEXT/JAVASCRIPT">
DOCUMENT.CREATEELEMENT('HEADER');
DOCUMENT.CREATEELEMENT('NAV');
DOCUMENT.CREATEELEMENT('SECTION');
DOCUMENT.CREATEELEMENT('ARTICLE');
DOCUMENT.CREATEELEMENT('ASIDE');
DOCUMENT.CREATEELEMENT('FOOTER');
</SCRIPT>

http://ejohn.org/blog/html5-shiv/

LESSONS LEARNED
• New HTML5 elements are treated as inline elements.

• Need to use CSS property-value display:block

• IE6
and IE7 need to be nudged to recognize HTML elements in
order to have CSS be applied

• document.createElement(‘html5element’);

• Dean Edwards IE7 script doesn’t help

• There isn’t a jQuery plugin to make it “easier”

LESSONS LEARNED

• For Firefox 2 and Camino (Gecko 1.9)

• HTML5 pages need to be served as XHTML

• Content-Type: application/xhtml+xml;

• ...Let the irony set for a bit.

<?PHP
IF ( STRPOS($_SERVER['HTTP_USER_AGENT'], 'FIREFOX/2.0') > -1)
{
HEADER("CONTENT-TYPE: APPLICATION/XHTML+XML;
CHARSET=UTF-8");
ECHO'<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0
TRANSITIONAL//EN" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/
XHTML1-TRANSITIONAL.DTD">
<HTML XMLNS="HTTP://WWW.W3.ORG/1999/XHTML"
XML:LANG="EN" LANG="EN">';
}
ELSE {
ECHO '<!DOCTYPE HTML><HTML>';
}?>

http://tr.im/h0Rj

<!DOCTYPE HTML>
<HTML LANG="EN">
<HEAD>

</HEAD>

<BODY>

<H1>VIDEO EXAMPLE</H1>

<AUDIO SRC="HTML5TEST.OGG" AUTOPLAY CONTROLS>

<A HREF="HTML5TEST.OGG">DOWNLOAD AUDIO</A>

</AUDIO>

</BODY>
</HTML>

HTML5 AUDIO

• AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY,
LOOP, CONTROLS

• If you don’t have CONTROL, player becomes transparent

• Only able to play OGG format in nightly build of Firefox.

• Could not get player to use MP3 audio

AUDIO FILE SUPPORT

Chrome 3
Firefox 3.5 Safari 4 Opera 10
Beta

Ogg Vorbis Y Y

MP3 Y Y

WAV Y Y Y

<!DOCTYPE HTML>
<HTML LANG="EN">
<HEAD>

</HEAD>

<BODY>


<AUDIO CONTROLS AUTOBUFFER>

<SOURCE SRC="HTML5AUDIO.OGG" />

<SOURCE SRC="HTML5AUDIO.MP3" />



</AUDIO>

</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML LANG="EN">
<HEAD>

</HEAD>

<BODY>


<OBJECT WIDTH="425" HEIGHT="344"><PARAM NAME="MOVIE"
VALUE="HTTP://WWW.YOUTUBE.COM/V/
4GUKSQAG5XI&HL=EN&FS=1"></PARAM><PARAM
NAME="ALLOWFULLSCREEN" VALUE="TRUE"></PARAM><PARAM
NAME="ALLOWSCRIPTACCESS" VALUE="ALWAYS"></PARAM><EMBED
SRC="HTTP://WWW.YOUTUBE.COM/V/4GUKSQAG5XI&HL=EN&FS=1"
TYPE="APPLICATION/X-SHOCKWAVE-FLASH"
ALLOWSCRIPTACCESS="ALWAYS" ALLOWFULLSCREEN="TRUE"
WIDTH="425" HEIGHT="344"></EMBED></OBJECT>

</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML LANG="EN">
<HEAD>

</HEAD>

<BODY>


<VIDEO SRC="HTML5TEST.OGG"

WIDTH="320" HEIGHT="240" CONTROLS

POSTER="HTML5TESTVIDEOPOSTER.JPG">

<A HREF="HTML5TESTVIDEO.OGG">DOWNLOAD MOVIE</A>

</VIDEO>

</BODY>
</HTML>

VIDEO DEMOS

• Personal demo

• http://tinyvid.tv/

• http://www.mozbox.org/jdll/video.xhtml

HTML5 VIDEO

• WIDTH and HEIGHT should be required, IMO, but movie plays
anyway based on the values in the video ﬁle itself.

• Video formats may have their own posterframe. The browser
should use that by default unless overridden by valid POSTER
attribute value.

• Alternative text is placed inside VIDEO element.

• If you want to give users control, use CONTROL attribute.

HTML5 VIDEO

• Video can start automatically if using the AUTOPLAY=”1”
attribute and value.

• Specprovides for LOOP, AUTOBUFFER which also take a value of
O or 1.

• Codecs support...

HTML5 VIDEO
“It would be helpful for interoperability if all browsers could
support the same codecs. However, there are no known
codecs that satisfy all the current players: we need a codec that
is known to not require per-unit or per-distributor licensing,
that is compatible with the open source development model,
that is of sufﬁcient quality as to be usable, and that is not an
additional submarine patent risk for large companies. This is an
ongoing issue and this section will be updated once more
information is available.”
- http://www.whatwg.org/specs/web-apps/current-work/
#video-and-audio-codecs-for-video-elements

VIDEO CODEC SUPPORT
Firefox 3.5 Safari iPhone Android Chrome 3

Theora
+Vorbis Y Y
+Ogg
H.264
+AAC Y Y Y
+MP4

http://diveintohtml5.org/video.html

LESSONS LEARNED
• Works in nightly builds of Firefox (3.2b) and only for OGG
format.

• Other browsers that said they supported the VIDEO format I
could not get to work on my machines.

• Used VLC to encode common movie ﬁles types to OGG

• Toget cross-browser, you will need to encode in more than one
ﬁle format. Is it really needed?

• People really, really, really want this to work.

REPLACING ABBR
• ABBRis used by screenreaders to expand abbreviations like “lbs”
or “NCAAP”

• Howeverunintended consequences occurred trying to
workaround browser bugs for other HTML elements

• What happens when a screenreaders text like this:

• “Let’sgo to <abbr class="geo"
title="30.300474;-97.747247">Austin, TX</
abbr>”
http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/

<DIV CLASS="VEVENT">
<A CLASS="URL" HREF="HTTP://WWW.WEB2CON.COM/">HTTP://
WWW.WEB2CON.COM</A>
<SPAN CLASS="SUMMARY">WEB 2.0 CONFERENCE</SPAN>:
<ABBR CLASS="DTSTART" TITLE="2007-10-05">OCTOBER 5</ABBR>-
<ABBR CLASS="DTEND" TITLE="2007-10-20">19</ABBR>,
AT THE <SPAN CLASS="LOCATION">ARGENT HOTEL, SAN FRANCISCO, CA</SPAN>
</DIV>

<DIV CLASS="VEVENT">
<A CLASS="URL" HREF="HTTP://WWW.WEB2CON.COM/">HTTP://
WWW.WEB2CON.COM</A>
<SPAN CLASS="SUMMARY">WEB 2.0 CONFERENCE</SPAN>:
<TIME CLASS="DTSTART" DATETIME="2007-10-05">OCTOBER 5</TIME>-
<TIME CLASS="DTEND" DATETIME="2007-10-20">19</TIME>,
AT THE <SPAN CLASS="LOCATION">ARGENT HOTEL, SAN FRANCISCO, CA</SPAN>
</DIV>

http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/

<CANVAS ID="MYCANVAS" WIDTH="300" HEIGHT="150">
FALLBACK CONTENT, IN CASE THE BROWSER DOES NOT SUPPORT CANVAS.
</CANVAS>

// GET THE CANVAS ELEMENT.
VAR ELEM = DOCUMENT.GETELEMENTBYID('MYCANVAS');
IF (!ELEM || !ELEM.GETCONTEXT) {
RETURN;
}

// GET THE CANVAS 2D CONTEXT.
VAR CONTEXT = ELEM.GETCONTEXT('2D');
IF (!CONTEXT) {
RETURN;
}

CONTEXT.FILLSTYLE = '#00F';
CONTEXT.STROKESTYLE = '#F00';
CONTEXT.LINEWIDTH = 4;

// DRAW A RIGHT TRIANGLE.
CONTEXT.BEGINPATH();
CONTEXT.MOVETO(10, 10);
CONTEXT.LINETO(100, 10);
CONTEXT.FILL();
CONTEXT.STROKE();
CONTEXT.CLOSEPATH();
}, FALSE);

http://ﬂickr.com/photos/dunstan/3099313036/

HTML5 AND LOCAL
DATABASE, APP CACHE,
GEOLOCATION,
YOUR PHONE

http://www.youtube.com/watch?v=VmjxmOtNZCk&fmt=18

DATABASE, APP CACHE,
GEOLOCATION LINKS
• W3C HTML5 Database Storage Specification:
http://tr.im/h13y

• W3C Geolocation API Specification:
http://tr.im/h12L

• W3C HTML5 Offline Web Applications:
http://tr.im/h12z

• Safari Dev Connection on HTML5 Offline Application Cache:
http://tr.im/h12f

• WebKit Does HTML5 Client-Side Storage:
http://tr.im/h140

“HTML 5 IS A KLUDGE.”
- BRUCE LAWSON

“NEW” “CSS3” PROPERTIES
• @font-face • stretching images
• text-shadow • rotating images
• background color opacity (RGBA) • setting gradients
• text columns • alpha transparent IMG
• rounded corners • box shadow
• multiple images on one HTML • CSS masks
element
• opacity on elements
• setting images on borders
• CSS animation

#COLUMN {
-MOZ-COLUMN-GAP: 3EM;
-MOZ-COLUMN-WIDTH: 11EM;
-WEBKIT-COLUMN-GAP: 3EM;
-WEBKIT-COLUMN-WIDTH: 11EM;
PADDING: 10PX;
}

#COLUMN {
-MOZ-COLUMN-GAP: 3EM;
-MOZ-COLUMN-WIDTH: 11EM;
-MOZ-COLUMN-RULE: 1PX SOLID #CCC;
-WEBKIT-COLUMN-GAP: 3EM;
-WEBKIT-COLUMN-WIDTH: 11EM;
-WEBKIT-COLUMN-RULE: 1PX SOLID #CCC;
PADDING: 10PX;
}

LESSONS LEARNED

• Proprietary CSS extensions in Firefox and Safari.

• JavaScriptsolution through a jQuery plugin:
http://welcome.totheinter.net/2008/07/22/multi-column-layout-
with-css-and-jquery/

#NUMBER4 {
OPACITY: .4; /* .4 = 40% TRANSPARENCY */
FILTER: ALPHA(OPACITY=40); /* 40 = 40% TRANSPARENCY */
}

LESSONS LEARNED
• Supported in Firefox 1.5+, Opera 9+, Safari 1.2+ and Chrome.

• IE5.5+ requires the use of its own alpha ﬁlter in order for the
effect to be cross-browser.

•A drawback to using the opacity ﬁlter is that the value is inherited:

• If a parent element is set to be 10% transparent, the child
elements’ transparency is also going to be 10%.

• Watch out for legibility issues within the Web page.

OPACITY
ON BACKGROUND COLORS
(RGBA)

#NUMBER4 {
BACKGROUND-COLOR: RGBA(255, 255, 0, .4);
}

#NUMBER4 {
BACKGROUND-COLOR: RGB(255, 255, 0);
BACKGROUND-COLOR: RGBA(255, 255, 0, .4);
}

LESSONS LEARNED

• Firefox 3+, Opera 10+, and Safari support RGBA

• Requires another background-color property for cross-browser
support.

• IE Support!

#NUMBER4 {
BACKGROUND-COLOR: TRANSPARENT;
FILTER:PROGID:DXIMAGETRANSFORM.MICROSOFT.GRADIENT(STARTCO
LORSTR=#66FFFF00,ENDCOLORSTR=#66FFFF00);
}

LESSONS LEARNED
• First
step is to convert the RGB value of the color to
hexadecimal. In this example, rgb(255,255,0) converts to #FFFF00.

• Next, convert the alpha transparency value to hexadecimal
string . In this example, the value is 66.

• E.g., alpha value of .3 equals 4D in hexadecimal values

• Then assemble the hexadecimal value for transparency and the
color together in one string, starting with the transparency:
#66FFFF00.

GRADIENTS,
BOX SHADOWS,
TEXT SHADOWS,
BORDER IMAGES

#HEADER .BORDER {
BORDER: 1PX SOLID #930;
-WEBKIT-BORDER-IMAGE: URL(ZOD-BOX.PNG) 1 1 1 1 STRETCH
STRETCH;
-MOZ-BORDER-IMAGE: URL(ZOD-BOX.PNG) 1 1 1 1 STRETCH STRETCH;
PADDING: 7PX;
}

#HEADER .WRAP {
COLOR: #FFF;
COLOR: RGBA(255,255,255,.9);
MIN-WIDTH: 250PX;
TEXT-SHADOW: 0 -1PX 0 RGBA(0,0,0,.8);

BOX-SHADOW: 3PX 3PX 19PX RGBA(0,0,0,.3);
-WEBKIT-BOX-SHADOW: 3PX 3PX 19PX RGBA(0,0,0,.3);
-MOZ-BOX-SHADOW: 3PX 3PX 19PX RGBA(0,0,0,.3);
BACKGROUND: #930;
BACKGROUND: -WEBKIT-GRADIENT(LINEAR, LEFT TOP, LEFT BOTTOM,
FROM(RGBA(153,51,0,.3)), TO(#6B3703), COLOR-STOP(0.5, #903000));
BACKGROUND: -MOZ-LINEAR-GRADIENT(LEFT TOP, LEFT BOTTOM,
FROM(RGBA(153,51,0,.3)), TO(#6B3703), COLOR-STOP(0.5, #903000));
PADDING: 14PX;
}

@-WEBKIT-KEYFRAMES "CLOUDS" {
FROM {
RIGHT: 0PX;
}
TO {
RIGHT: 100PX;
}
}
#CLOUDS1 {
WIDTH: 627PX;
HEIGHT: 410PX;
POSITION: ABSOLUTE;
RIGHT: -300PX;
TOP: 0;
BACKGROUND-IMAGE: URL(CLOUDS.PNG);
-WEBKIT-TRANSFORM: TRANSLATE(300PX, 0PX);
-WEBKIT-ANIMATION-NAME: "CLOUDS";
-WEBKIT-ANIMATION-DURATION: 10S;
-WEBKIT-ANIMATION-ITERATION-COUNT: 10;
-WEBKIT-ANIMATION-DIRECTION: ALTERNATE;
}

HTML5+CSS3 RESOURCES

• HTML5 Doctor
http://html5doctor.com

• “When Can I Use…”
http://a.deveria.com/caniuse/

• Comparison of Layout Engines
(HTML5)
http://en.wikipedia.org/wiki/
Comparison_of_layout_engine
s_(HTML_5)

THANK YOU!
Christopher Schmitt
schmitt@heatvision.com
http://twitter.com/teleject

Creative Commons Citations

http://www.flickr.com/photos/gurock20/459901107/
http://www.flickr.com/photos/wili/214317898/
http://www.flickr.com/photos/gadl/421838292/
http://www.flickr.com/photos/tantek/1141384818/
http://www.flickr.com/photos/bdougherty/3172618046/
http://dev.opera.com/articles/view/html-5-canvas-the-basics/

Looking into HTML5 + CSS3

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Looking into HTML5 + CSS3 (20)

More from Christopher Schmitt (20)

Recently uploaded (20)

Looking into HTML5 + CSS3

Editor's Notes