HTML5 and CSS3 Techniques You Can Use Today

Introductions
Todd Anglin
Chief Evangelist, Telerik
Microsoft MVP
ASP Insider
President NHDNUG & O’Reilly Author
TelerikWatch.com
@toddanglin

Telerik
Complete development toolbox provider
www.telerik.com

session road map
Goal: Leave with at least 1
HTML5/CSS3 technique you can use today

“
While it continues to serve as a rough guide to many of the core features of HTML, it does not provide enough information to build implementations that interoperate with each other and, more importantly, with a critical mass of deployed content.”
-W3C on HTML4

HTML & CSS History
HTML5:
Addressing modern web applications & pains of the past

HTML & CSS History
CSS3
Improve consistency & power of styling language
CSS: Plagued by implementation bugs & inconsistencies

browser support
Better, but not perfect
Know your users. Know your browsers.

progressiveenhancementgracefuldegradation

HTML5 Techniques

W3C on HTML5
Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax.
Defines detailed processing models to foster interoperable implementations.
Improves markup for documents.
Introduces markup and APIs for emerging idioms, such as Web applications.

enriching VS Experience
Add Intellisense & Schema Validation to Visual Studio editor
http://bit.ly/vsHTML5
http://bit.ly/vsSVG

fixing IE
Three options:
Shiv it
Kill it
Target it

semantic tags
Tags with meaning
<body>
<div id=“header”>
</div>
<div id=“content”>
<div id=“nav”></div>
</div>
<div id=“footer”>
</div>
</body>
<body>
<header>
</header>
<section>
<nav></nav>
</section>
<footer></footer>
</body>
VS.
*Need shiv to trigger styling in old IE
Safe to use today!

rich snippets (*microdata)
Content with meaning
Machines understand more of your content

<meta name="title" content="Baroo? - cute puppies" />
<meta name="description" content="The cutest canine on the Internet!" />
<link rel="image_src" href="http://example.com/thumbnail_preview.jpg" />
<link rel="video_src" href="http://example.com/video_object.swf?id=12345"/>
<meta name="video_height" content="296" />
<meta name="video_width" content="512" />
<meta name="video_type" content="application/x-shockwave-flash" />
Safe to use today!

browser autofocus
Improved usability
Supported in Safari, Chrome, Opera (so far)
<form name="f">
<input id="q" autofocus>

<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("q").focus();
}
</script>
<input type="submit" value="Go">
</form>
Safe to use today!

custom attributes
data-*
Valid approach to storing data in HTML

<div id="mydiv" data-key="26" data-name="My product name">
This product is an extremely popular choice.
</div>

varmydiv=document.getElementById('mydiv')
//Using DOM's getAttribute() property
varkey = mydiv.getAttribute("data-key") //returns "26"
//OR Using JavaScript's dataset property**var key = mydiv.dataset.key //returns "26"
Safe to use today!

SVG & Canvas
Safe to use today!

CSS3 Techniques

leveling the playing field
CSS Reset
Browsers ship with built-in styles – zero them out!
Enable newer features in older browsers
http://html5reset.org
http://html5boilerplate.com

Browser Prefixes
-webkit
-moz
-o
-ms
“standard” way browsers implement custom features.

custom fonts
Biggest Problem?
Licensing!
@font-face {
font-family: Delicious;
src: url('Delicious-Roman.otf') format(“opentype”);
}
//Usage
h3 { font-family: Delicious, sans-serif; }
Safe to use today!

Web Font Providers
Solve the licensing problem
Host the TTF/OTF font files
Provide easy-to-use code
http://code.google.com/webfonts
http://webfonts.fonts.com
http://typekit.com/libraries

rounded corners
Easy corner control
Expect GD for older browsers (IE)
-moz-border-radius: 5px 5px 5px 5px; //Optionally ”explicit”
-webkit-border-radius: 5px;
border-radius: 5px;
//Can also control specific corners
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
Safe to use today!

drop shadows
Exactly like it sounds
box-shadow: <hShift> <vShift> <size> <color>;
-moz-box-shadow: 2px 2px2px #333;
-webkit-box-shadow: 2px 2px2px #333;
box-shadow: 2px 2px2px #333;
Safe to use today!

text shadows
Uniform across supported browsers!
text-shadow: <h offest> <v offset> <blur size> <color>;
text-shadow: 2px 2px2px #333;
//You can apply multiple shadows
text-shadow: 2px 2px2px #333, 2px 2px 3px #CCC;
Safe to use today!

Backgrounds
More options, more power
multiple backgrounds
resize backgrounds
background clipping
/*Background size*/
-webkit-background-size: 137px 50px;
-o-background-size: 137px 50px;
background-size: 137px 50px;
/*Multiple Backgrounds*/
background: url(top.gif) top left no-repeat,
url(bottom.gif) bottom left no-repeat,
url(middle.gif) left repeat-y;
/*Background origin*/
background-origin: border;
/*Other options: padding or content*/
Safe to use today!

Gradients
Not CSS3!
But useful and desirable
Can be “shived” to support all browsers
Safe to use today!

LESS for CSS
Use LESS to write less CSS
Variables, operations, mix-ins, nested rules
<link rel="stylesheet/less" href="style.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
/*Variables*/
@primaryColor: #383939;
background-color: @primaryColor;
/*Mix-ins!!*/
.roundedCorners (@radius: 12px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#page { background-color: @primaryColor; .roundedCorners; }
Safe to use today!

animating with CSS
Animate by setting CSS properties
Works when JS is disabled
#id_of_element {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
Safe to use today!

media queries
Target styles to specific devices…
And features!
/*These two rules do the same thing*/
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }
/*Multiple conditions*/
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}

the One-Offs
Features waiting for friends

Modernizr
Shiv’r + Inspector
Simple way to check feature support
Conditional JS and CSS
.multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
}
.no-multiplebgs div p {
/* optional fallback properties
for browsers that don't */
}
if (Modernizr.canvas) {
//Canvas supported
}
if (Modernizer.cssColumns){
//Columns supported
}
//Etc...
*Don’t use with IE HTML5shiv. One or the other.

which HTML5/CSS3 technique will you try?

in the future…
Less repetitive CSS markup
Less “low level” JavaScript

Thanks! Gracias!Mersi!Blagodarya!
telerikwatch.com
@toddanglin
anglin@telerik.com
[Q & A]

HTML5 Resources
See slide notes

CSS3 Resources
LESS CSS “framework” + tutorial
http://designshack.co.uk/articles/css/using-less-js-to-simplify-your-css3
LESS T4 Template from Phil Haack
http://haacked.com/archive/2009/12/02/t4-template-for-less-css.aspx
LESS VS CSS code highlighting
http://visualstudiogallery.msdn.microsoft.com/en-us/dd5635b0-3c70-484f-abcb-cbdcabaa9923

http://www.telerikwatch.com	354
http://localhost	2
http://webcache.googleusercontent.com	2
http://translate.googleusercontent.com	1

HTML5 and CSS3 Techniques You Can Use Today

by Todd Anglin

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 359

Statistics

HTML5 and CSS3 Techniques You Can Use Today Presentation Transcript