HTML5 and CSS3 Techniques You Can Use Today

HTML5 and CSS3 Techniques You Can Use TodayDEV334
Todd Anglin
Chief Evangelist
Telerik

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

Development Tools
Agile Planning
Testing

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

HTML4 = Rough Guide
Unpredictable Browser Support

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

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

How is the web evolving?

{
}
<HTML>
CSS:3;
EMCAScript();
“HTML5”

“Living Standard”
Offline
Canvas Video
Audio
WebSocketsFileAPI
WebGL
HTML5 Forms
Geolocation
WHATWG | W3C | IETF

IE9 offers support for the most relevant, real-world web patterns that developers are using today as well as the HTML5 patterns we expect to become more mainstream.”
“
-Dean Hachamovitch
Corporate VP, IE

html5labs.interoperabilitybridges.com
+
Platform Previews
ie.microsoft.com/testdrive

CSS 2.1
Selectors
CSS Color
CSS 2
Backgrounds &
Borders
Media Queries
Multi-column
25+ Drafts
Transitions
Transformations
Animations
Gradients
CSS3 Text

-moz-border-radius: 5px 5px5px5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 2px 2px2px #333;
-webkit-box-shadow: 2px 2px2px #333;
box-shadow: 2px 2px2px #333;
-webkit-background-size: 137px 50px;
-o-background-size: 137px 50px;
background-size: 137px 50px;

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

Browser Prefixes
15

WD
LC
CR
PR
RE

What is usable today?

Adoption Strategies
Lowest Common Dominator
Only use features natively available in all target browsers

Adoption Strategies
PolyfillEnriched
Only use features either natively available OR available via JavaScript polyfill
X X

polyfill
(n) poly • fill: JavaScript that implants HTML5 functionality in a browser that does not offer native support

Adoption Strategies
Alternate Experiences
Only use features available in target browsers AND design alternate experience for other browsers
X X
X X X
X X

progressiveenhancementgracefuldegradation

[Source: Aaron Olaf, Flickr]

[Source: Mercedes USA, http://mbusa.com/]

Adoption Strategies
Vertical Target
Create experiences targeted at specific browsers (or classes of browsers)
X X
X X X
X X

Real World Browser Support
Better, but not perfect
Know your users. Know your browsers.

HTML5 Techniques
You can use today

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 2008/2010 (pre SP1) editor
http://bit.ly/vsHTML5
http://bit.ly/vsSVG

Older Browsers

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.

DEMO
Polyfilling & Older Browsers
with Modernizr

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 polyfill to trigger styling in old IE
Safe to use today!

Video & Audio
Semantic rich media
Reach more people on more devices
Container
MP4
H.264
Codec
Safe to use today!

Geolocation
Usable on modern browsers + mobile
Requires plug-in for older browsers
navigator.geolocation.getCurrentPosition(callback);
function callback(position){
varlat = position.coords.latitude;
varlng = position.coords.longitude;
varacc = position.coords.accuracy;
}
Safe to use today!

Local Storage
Usable in modern browsers
sessionStorage.setItem('value', this.value);
localStorage.setItem('value', this.value);
sessionStorage.getItem(‘value’);
sessionStorage.clear();
localStorage.clear();
sessionStorage = per window
localStorage = per browser
5 MB limit

HTML5 Forms
Improved usability
Uneven support across browsers
<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!

Rich Snippets (*microdata)
Content with meaning
Machines understand more of your content
<div itemscopeitemtype="http://data-vocabulary.org/Event">
<time itemprop="startDate"
datetime="2015-10-15T19:00-08:00">
Oct 15, 7:00PM
</time>—
<time itemprop="endDate"
datetime="2015-10-15T19:00-08:00">
Oct 15, 9:00PM
</time>
<span itemprop="geo" itemscope
itemtype="http://data-vocabulary.org/Geo">
<meta itemprop="latitude" content="37.774929" />
<meta itemprop="longitude" content="-122.419416" />
</span>
...
</div>
Safe to use today!

SVG & Canvas
Safe to use today!

Canvas for IE6/7/8
Many polyfills for older browsers
JavaScript or Flash based
Better Perf

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!

CSS3 Techniques
You can use today

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

CSS3 Selectors
Powerful new selector options
//Alternating Items
li:nth-child(odd) { color: blue; }
li:nth-child(even) { color: green; }
li:nth-child(3n) { color: red; } //Every 3rd item
//First/Last Items
li:first-of-type { color: blue; }
li:not(:first-of-type):not(:last-of-type) { color: orange; } //All *but* first/last
//Enabled/Disabled
input:enabled { border: 2px solid green; }
input:disabled{ background-color: #BBB; }
*Use jQuery to support legacy browsers

CSS3 Color
HSL and RGB
Support for new color models + alpha channels
//HSL
background:hsl(320,100%,25%);
//HSLa
background:hsla(165, 100%, 50%, 1.0);
//RGB
background:rgb(155,100,100);
//RGBa
background:rgba(153, 134, 117, 0.2);

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

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

Borders & Backgrounds
Rounded corners, drop shadows, multi-backgrounds
Expect GD for older browsers
//Rounded Corners (Size)
border-radius: 5px;
//Drop shadow (hShift vShift Size Color)
box-shadow: 2px 2px 5px #333;
//Background control
background: url(top.gif) top left no-repeat,url(bottom.gif) bottom left no-repeat;
*Use CSS3 PIE to support legacy IE browsers

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;
/*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
Emerging CSS standard
But useful and desirable
Can be “shived” to support all browsers

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;
}
}

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!

Tomorrow Land (aka Mobile)

which HTML5/CSS3 technique will you try?

anglin@telerik.com
@toddanglin + @htmlui

http://www.telerikwatch.com	1004
http://feeds.feedburner.com	66
http://paper.li	36
url_unknown	34
http://www.newsblur.com	2

HTML5 and CSS3 Techniques You Can Use Today

by Todd Anglin on Jul 11, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 1,142

Statistics

HTML5 and CSS3 Techniques You Can Use Today — Presentation Transcript