HTML5 and CSS3 Techniques You Can Use Today

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

• Complete development
toolbox provider
UI
• ASP.NET
• MVC
• WinForms
• Silverlight
• WPF
Tools
• Reporting
• ORM
• JustCode
• CMS
Testing
• WebUI
Test Studio
• JustMock
Project
• TeamPulse
• TFS WIM
• TFS PD
www.telerik.com

HTML5 Techniques
CSS3 Techniques
Practical Tips
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

1991
• HTML
Tags
1995
• HTML 2
• Later: File
uploads,
tables
1997 (Jan)
• HTML 3.2
(W3C)
1997 (Dec)
• HTML 4
• Strict,
Trans,
Frameset
• 1999:
4.01
HTML5:
• Addressing modern web applications & pains of the past

1996
• CSS v1
• IE3: First
implementation
• IE Mac: First
100% support
1997
• CSS v2
• Still ZERO 100%
implementations
2007
• CSS v2.1
• Fixed errors in 2.0
spec
CSS: Plagued by implementation bugs & inconsistencies
CSS3
• Improve consistency & power of styling language

• Better, but not perfect
Feature Check
• CanIUse.com
• BrowserScope.org
• Html5Test.com
Equalizers
• Html5Reset.org
• Html5Boilerplate.com
• jQuery
Hacks
• JavaScript helpers
• “Downlevel”
experiences
Know your users. Know your browsers.

progressive
enhancement
graceful
degradation

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

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

• Three options:
–Shiv it
–Kill it
–Target it

• 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

• 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" />

• 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>

• 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>

var mydiv=document.getElementById('mydiv')
//Using DOM's getAttribute() property
var key = mydiv.getAttribute("data-key") //returns "26"
//OR Using JavaScript's dataset property**
var key = mydiv.dataset.key //returns "26"

Scalable Vector
Graphics
Canvas
Bitmap-
output
Good for
animation
JavaScript-
based
Vector-output
Good for
interaction
XML-based

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

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

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

• 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

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

• Exactly like it sounds
– box-shadow: <hShift> <vShift> <size> <color>;
-moz-box-shadow: 2px 2px 2px #333;
-webkit-box-shadow: 2px 2px 2px #333;
box-shadow: 2px 2px 2px #333;

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

• 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*/

• Not CSS3!
– But useful and desirable
– Can be “shived” to support all browsers

• Use LESS to write less CSS
– Variables, operations, mix-ins, nested rules
/*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; }
<link rel="stylesheet/less" href="style.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

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

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

• Features waiting for friends
WebKit
• Reflections (-
webkit-box-
reflect)
• 3D Transforms (-
webkit-
perspective)
Mozilla
• <Nothing
notable?>
IE (9)
• Hardware
rendering!

• 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?

Thanks! Gracias! Mersi! Blagodarya!
@toddanglin
telerikwatch.com
anglin@telerik.com

• 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

HTML5 and CSS3 Techniques You Can Use Today

More Related Content

What's hot

Viewers also liked

Similar to HTML5 and CSS3 Techniques You Can Use Today

More from Todd Anglin

Recently uploaded

HTML5 and CSS3 Techniques You Can Use Today

Editor's Notes