SlideShare a Scribd company logo
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
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
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
<!--Facebook Share Microformat for video-->
<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>
<!--Technique to support older browsers-->
<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
<!--Store values in data-* attributes-->
<div id="mydiv" data-key="26" data-name="My product name">
This product is an extremely popular choice.
</div>
<!--Access values with JavaScript-->
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
HTML5 and CSS3 Techniques You Can Use Today
• 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
• See slide notes
• 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

More Related Content

What's hot

Best Friend || Worst Enemy: WordPress Multisite
Best Friend || Worst Enemy: WordPress MultisiteBest Friend || Worst Enemy: WordPress Multisite
Best Friend || Worst Enemy: WordPress Multisite
Taylor McCaslin
 
Introducing MongoBase
Introducing MongoBaseIntroducing MongoBase
Introducing MongoBase
r1dotmy
 
Understanding WordPress Multisite
Understanding WordPress MultisiteUnderstanding WordPress Multisite
Understanding WordPress Multisite
Ryan Imel
 
WordPress Server Security
WordPress Server SecurityWordPress Server Security
WordPress Server Security
Peter Baylies
 
Speed up Your Joomla Site for Ultimate Performance
Speed up Your Joomla Site for Ultimate PerformanceSpeed up Your Joomla Site for Ultimate Performance
Speed up Your Joomla Site for Ultimate Performance
JoomlaDay Australia
 
Squeeze Maximum Performance From Your Joomla Website
Squeeze Maximum Performance From Your Joomla WebsiteSqueeze Maximum Performance From Your Joomla Website
Squeeze Maximum Performance From Your Joomla Website
SiteGround.com
 
I Can Haz More Performanz?
I Can Haz More Performanz?I Can Haz More Performanz?
I Can Haz More Performanz?
Andy Melichar
 
Speeding Up WordPress sites
Speeding Up WordPress sitesSpeeding Up WordPress sites
Speeding Up WordPress sites
Jason Yingling
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build them
Dick Olsson
 
Responsive content
Responsive contentResponsive content
Responsive content
honzie
 
Optimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get thereOptimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get there
Stephen Bell
 
ClubAJAX Basics - Server Communication
ClubAJAX Basics - Server CommunicationClubAJAX Basics - Server Communication
ClubAJAX Basics - Server Communication
Mike Wilcox
 
Word press development for non developers
Word press development for non developers Word press development for non developers
Word press development for non developers
Jessica C. Gardner
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Adam Dunford
 
HyperDB, MySQL Performance, & Flavors of MySQL
HyperDB, MySQL Performance, & Flavors of MySQLHyperDB, MySQL Performance, & Flavors of MySQL
HyperDB, MySQL Performance, & Flavors of MySQL
Evan Volgas
 
Word Press As A Cms
Word Press As A CmsWord Press As A Cms
Word Press As A Cms
Justin Sisley
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSS
Todd Anglin
 
High Performance WordPress
High Performance WordPressHigh Performance WordPress
High Performance WordPress
vnsavage
 
WordPress Structure and Best Practices
WordPress Structure and Best PracticesWordPress Structure and Best Practices
WordPress Structure and Best Practices
markparolisi
 
No more “cowboy coding”
No more “cowboy coding”No more “cowboy coding”
No more “cowboy coding”
Jim True
 

What's hot (20)

Best Friend || Worst Enemy: WordPress Multisite
Best Friend || Worst Enemy: WordPress MultisiteBest Friend || Worst Enemy: WordPress Multisite
Best Friend || Worst Enemy: WordPress Multisite
 
Introducing MongoBase
Introducing MongoBaseIntroducing MongoBase
Introducing MongoBase
 
Understanding WordPress Multisite
Understanding WordPress MultisiteUnderstanding WordPress Multisite
Understanding WordPress Multisite
 
WordPress Server Security
WordPress Server SecurityWordPress Server Security
WordPress Server Security
 
Speed up Your Joomla Site for Ultimate Performance
Speed up Your Joomla Site for Ultimate PerformanceSpeed up Your Joomla Site for Ultimate Performance
Speed up Your Joomla Site for Ultimate Performance
 
Squeeze Maximum Performance From Your Joomla Website
Squeeze Maximum Performance From Your Joomla WebsiteSqueeze Maximum Performance From Your Joomla Website
Squeeze Maximum Performance From Your Joomla Website
 
I Can Haz More Performanz?
I Can Haz More Performanz?I Can Haz More Performanz?
I Can Haz More Performanz?
 
Speeding Up WordPress sites
Speeding Up WordPress sitesSpeeding Up WordPress sites
Speeding Up WordPress sites
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build them
 
Responsive content
Responsive contentResponsive content
Responsive content
 
Optimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get thereOptimizing Your WordPress Site: Why speed matters, and how to get there
Optimizing Your WordPress Site: Why speed matters, and how to get there
 
ClubAJAX Basics - Server Communication
ClubAJAX Basics - Server CommunicationClubAJAX Basics - Server Communication
ClubAJAX Basics - Server Communication
 
Word press development for non developers
Word press development for non developers Word press development for non developers
Word press development for non developers
 
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
Does This Theme Make My Website Look Fat? (Wordcamp SLC 2013)
 
HyperDB, MySQL Performance, & Flavors of MySQL
HyperDB, MySQL Performance, & Flavors of MySQLHyperDB, MySQL Performance, & Flavors of MySQL
HyperDB, MySQL Performance, & Flavors of MySQL
 
Word Press As A Cms
Word Press As A CmsWord Press As A Cms
Word Press As A Cms
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSS
 
High Performance WordPress
High Performance WordPressHigh Performance WordPress
High Performance WordPress
 
WordPress Structure and Best Practices
WordPress Structure and Best PracticesWordPress Structure and Best Practices
WordPress Structure and Best Practices
 
No more “cowboy coding”
No more “cowboy coding”No more “cowboy coding”
No more “cowboy coding”
 

Viewers also liked

Chocolate Cream Frosting
Chocolate Cream FrostingChocolate Cream Frosting
Chocolate Cream Frosting
sh0rty08
 
Sugerencias de organización para el día de la convivencia escolar 22 abril
Sugerencias de organización para el  día de la convivencia escolar 22 abrilSugerencias de organización para el  día de la convivencia escolar 22 abril
Sugerencias de organización para el día de la convivencia escolar 22 abril
mrfmarcela
 
NWAB2BOnline Media
NWAB2BOnline MediaNWAB2BOnline Media
NWAB2BOnline Media
guest693dac
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Todd Anglin
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
Todd Anglin
 
Presentasi Pelayanan prima
Presentasi Pelayanan primaPresentasi Pelayanan prima
Presentasi Pelayanan prima
krisna ristanti
 

Viewers also liked (6)

Chocolate Cream Frosting
Chocolate Cream FrostingChocolate Cream Frosting
Chocolate Cream Frosting
 
Sugerencias de organización para el día de la convivencia escolar 22 abril
Sugerencias de organización para el  día de la convivencia escolar 22 abrilSugerencias de organización para el  día de la convivencia escolar 22 abril
Sugerencias de organización para el día de la convivencia escolar 22 abril
 
NWAB2BOnline Media
NWAB2BOnline MediaNWAB2BOnline Media
NWAB2BOnline Media
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
 
Presentasi Pelayanan prima
Presentasi Pelayanan primaPresentasi Pelayanan prima
Presentasi Pelayanan prima
 

Similar to HTML5 and CSS3 Techniques You Can Use Today

Developing Your Ultimate Package
Developing Your Ultimate PackageDeveloping Your Ultimate Package
Developing Your Ultimate Package
Simon Collison
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
Marcelio Leal
 
Responsive design
Responsive designResponsive design
Responsive design
John Doxaras
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
Michael Enslow
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
Joe Seifi
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
Todd Anglin
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
Christopher Schmitt
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
Dave Ross
 
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
Patrick Lauke
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
Timothy Fisher
 
HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010
Patrick Lauke
 
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Patrick Lauke
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
Tadpole Collective
 
Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 ExperimentsSpeak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experiments
guestd427df
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Sadaaki HIRAI
 
Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
Graham Johnson
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
Christopher Schmitt
 
Mobile Websites tips and tricks @HeartAndSole
Mobile Websites tips and tricks @HeartAndSoleMobile Websites tips and tricks @HeartAndSole
Mobile Websites tips and tricks @HeartAndSole
fakedarren
 
Disruptive code
Disruptive codeDisruptive code
Disruptive code
brucelawson
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
Darren Wood
 

Similar to HTML5 and CSS3 Techniques You Can Use Today (20)

Developing Your Ultimate Package
Developing Your Ultimate PackageDeveloping Your Ultimate Package
Developing Your Ultimate Package
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 
Responsive design
Responsive designResponsive design
Responsive design
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5The Rich Standard: Getting Familiar with HTML5
The Rich Standard: Getting Familiar with HTML5
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
 
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
HTML5 and friends - JISC CETIS Conference 2010 Nottingham 15.11.2010
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010HTML5 and friends - standards>next Manchester 24.11.2010
HTML5 and friends - standards>next Manchester 24.11.2010
 
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
Brave new world of HTML5 - WebTech 2010 Milano 09.11.2010
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 
Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 ExperimentsSpeak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experiments
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
Html5 & less css
Html5 & less cssHtml5 & less css
Html5 & less css
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
 
Mobile Websites tips and tricks @HeartAndSole
Mobile Websites tips and tricks @HeartAndSoleMobile Websites tips and tricks @HeartAndSole
Mobile Websites tips and tricks @HeartAndSole
 
Disruptive code
Disruptive codeDisruptive code
Disruptive code
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
 

More from Todd Anglin

NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularNativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
Todd Anglin
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
Todd Anglin
 
Making HTML5 Work Everywhere
Making HTML5 Work EverywhereMaking HTML5 Work Everywhere
Making HTML5 Work Everywhere
Todd Anglin
 
Developing a Modern Mobile App Strategy
Developing a Modern Mobile App StrategyDeveloping a Modern Mobile App Strategy
Developing a Modern Mobile App Strategy
Todd Anglin
 
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
Todd Anglin
 
HTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input ValidationHTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input Validation
Todd Anglin
 
5 Tips for Better JavaScript
5 Tips for Better JavaScript5 Tips for Better JavaScript
5 Tips for Better JavaScript
Todd Anglin
 
50in50: Resources for HTML5, CSS3, & JavaScript Developers
50in50: Resources for HTML5, CSS3, & JavaScript Developers50in50: Resources for HTML5, CSS3, & JavaScript Developers
50in50: Resources for HTML5, CSS3, & JavaScript Developers
Todd Anglin
 
Using HTML5 to Build Mobile Apps
Using HTML5 to Build Mobile AppsUsing HTML5 to Build Mobile Apps
Using HTML5 to Build Mobile Apps
Todd Anglin
 
HTML5 for Tablets and Mobile
HTML5 for Tablets and MobileHTML5 for Tablets and Mobile
HTML5 for Tablets and Mobile
Todd Anglin
 
Building RESTful Applications with OData
Building RESTful Applications with ODataBuilding RESTful Applications with OData
Building RESTful Applications with OData
Todd Anglin
 
Building a Testable Data Access Layer
Building a Testable Data Access LayerBuilding a Testable Data Access Layer
Building a Testable Data Access Layer
Todd Anglin
 
What’s New in ASP.NET 4
What’s New in ASP.NET 4What’s New in ASP.NET 4
What’s New in ASP.NET 4
Todd Anglin
 

More from Todd Anglin (13)

NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularNativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
NativeScript: Cross-Platform Mobile Apps with JavaScript and Angular
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
 
Making HTML5 Work Everywhere
Making HTML5 Work EverywhereMaking HTML5 Work Everywhere
Making HTML5 Work Everywhere
 
Developing a Modern Mobile App Strategy
Developing a Modern Mobile App StrategyDeveloping a Modern Mobile App Strategy
Developing a Modern Mobile App Strategy
 
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
 
HTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input ValidationHTML5 Mullet: Forms & Input Validation
HTML5 Mullet: Forms & Input Validation
 
5 Tips for Better JavaScript
5 Tips for Better JavaScript5 Tips for Better JavaScript
5 Tips for Better JavaScript
 
50in50: Resources for HTML5, CSS3, & JavaScript Developers
50in50: Resources for HTML5, CSS3, & JavaScript Developers50in50: Resources for HTML5, CSS3, & JavaScript Developers
50in50: Resources for HTML5, CSS3, & JavaScript Developers
 
Using HTML5 to Build Mobile Apps
Using HTML5 to Build Mobile AppsUsing HTML5 to Build Mobile Apps
Using HTML5 to Build Mobile Apps
 
HTML5 for Tablets and Mobile
HTML5 for Tablets and MobileHTML5 for Tablets and Mobile
HTML5 for Tablets and Mobile
 
Building RESTful Applications with OData
Building RESTful Applications with ODataBuilding RESTful Applications with OData
Building RESTful Applications with OData
 
Building a Testable Data Access Layer
Building a Testable Data Access LayerBuilding a Testable Data Access Layer
Building a Testable Data Access Layer
 
What’s New in ASP.NET 4
What’s New in ASP.NET 4What’s New in ASP.NET 4
What’s New in ASP.NET 4
 

Recently uploaded

Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
aakash malhotra
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
moinahousna
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
aslasdfmkhan4750
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Figma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdfFigma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdf
Management Institute of Skills Development
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
Anant Gupta
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Zilliz
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
shanihomely
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
Axel Rennoch
 

Recently uploaded (20)

Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
 
CiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.pptCiscoIconsLibrary cours de réseau VLAN.ppt
CiscoIconsLibrary cours de réseau VLAN.ppt
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Figma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdfFigma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdf
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
 

HTML5 and CSS3 Techniques You Can Use Today

  • 2. Todd Anglin Chief Evangelist, Telerik Microsoft MVP ASP Insider President NHDNUG & O’Reilly Author @toddanglin TelerikWatch.com
  • 3. • 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
  • 4. HTML5 Techniques CSS3 Techniques Practical Tips Goal: Leave with at least 1 HTML5/CSS3 technique you can use today
  • 5. “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
  • 6. 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
  • 7. 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
  • 8. • 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.
  • 13. 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.
  • 14. http://bit.ly/vsHTML5 http://bit.ly/vsSVG Add Intellisense & Schema Validation to Visual Studio editor
  • 15. • Three options: –Shiv it –Kill it –Target it
  • 16. • 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
  • 17. • Content with meaning – Machines understand more of your content <!--Facebook Share Microformat for video--> <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" />
  • 18. • Improved usability – Supported in Safari, Chrome, Opera (so far) <form name="f"> <input id="q" autofocus> <!--Technique to support older browsers--> <script> if (!("autofocus" in document.createElement("input"))) { document.getElementById("q").focus(); } </script> <input type="submit" value="Go"> </form>
  • 19. • data-* – Valid approach to storing data in HTML <!--Store values in data-* attributes--> <div id="mydiv" data-key="26" data-name="My product name"> This product is an extremely popular choice. </div> <!--Access values with JavaScript--> 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"
  • 22. • CSS Reset – Browsers ship with built-in styles – zero them out! – Enable newer features in older browsers http://html5reset.org http://html5boilerplate.com
  • 24. • Biggest Problem? – Licensing! @font-face { font-family: Delicious; src: url('Delicious-Roman.otf') format(“opentype”); } //Usage h3 { font-family: Delicious, sans-serif; }
  • 25. • 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
  • 26. • 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;
  • 27. • 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;
  • 28. • 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;
  • 29. • 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*/
  • 30. • Not CSS3! – But useful and desirable – Can be “shived” to support all browsers
  • 31. • 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>
  • 32. • 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; }
  • 33. • 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; } }
  • 34. • Features waiting for friends WebKit • Reflections (- webkit-box- reflect) • 3D Transforms (- webkit- perspective) Mozilla • <Nothing notable?> IE (9) • Hardware rendering!
  • 35. • 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.
  • 36. which HTML5/CSS3 technique will you try?
  • 37. Thanks! Gracias! Mersi! Blagodarya! @toddanglin telerikwatch.com anglin@telerik.com
  • 38. • See slide notes
  • 39. • 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

Editor's Notes

  1. HTML5 and CSS3 Techniques You Can Use Today As more browsers deliver rich support for the next generation of standards-based web development, new techniques are enabling web developers to design with unprecedented levels of control. In this session, you’ll learn practical HTML5 and CSS3 techniques that you can use in any web project today. Learn how to easily add drop shadows to HTML objects, how to quickly create rounded corners, how to use custom fonts, and even how to animate with CSS. All techniques will be demonstrated with special attention to cross-browser support and tips for supporting older browsers.
  2. http://dev.w3.org/html5/html4-differences/ Goes on to say: The same goes for XHTML1, which defines an XML serialization for HTML4, and DOM Level 2 HTML, which defines JavaScript APIs for both HTML and XHTML. HTML5 will replace these documents.
  3. http://en.wikipedia.org/wiki/HTML
  4. http://en.wikipedia.org/wiki/Cascading_Style_Sheets IE Mac: Shipped in March 2000 9 style sheet languages proposed in early 90s Languages: 1996: JavaScript Style Sheets (JSSS) – Netscape 1994: Cascading HTML Style Sheets (CHSS) 1994: Stream-based Style Sheet Proposal (SSP)
  5. http://dev.w3.org/html5/html4-differences/
  6. http://code.google.com/p/ie7-js/ Testing IE: http://spoon.net/browsers/ Three choices: Hack it – Force features with JS shivs Support it – Provide gracefully degraded experience Kill it – Provide message indicating no or limited support
  7. http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=164506 Google tool for testing Rich Snippets: http://www.google.com/webmasters/tools/richsnippets Google will not show content from hidden div's in Rich Snippets. Currently, review sites and social networking/people profile sites are eligible. We plan to expand Rich Snippets to other types of content in the future. (Sept 2010) http://knol.google.com/k/google-rich-snippets-tips-and-tricks Improve video discovery: http://googlewebmastercentral.blogspot.com/2009/09/supporting-facebook-share-and-rdfa-for.html
  8. http://diveintohtml5.org/forms.html
  9. http://www.javascriptkit.com/dhtmltutors/customattributes.shtml http://html5doctor.com/html5-custom-data-attributes/ Two methods of access: - Via Attributes (http://api.jquery.com/category/attributes/) Via “dataset” (plug-in required today: http://www.orangesoda.net/jquery.dataset.html)
  10. http://upload.wikimedia.org/wikipedia/en/d/d0/Chrome_Logo.svg Comparison articles: Great comparison: http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/ http://blogs.sitepoint.com/2010/07/06/canvas-vs-svg-how-to-choose/ (IDEA: progressive enhancement techniques — for example, IE8 and earlier versions show a table of data whereas supported browsers show an animated pie chart.) SVG Bridge for all browsers: http://raphaeljs.com/ CANVAS Bridge for IE: http://code.google.com/p/explorercanvas/ (Pointless canvas example: http://paulirish.com/2010/high-res-browser-icons/) SVG is DOM-based. All elements exist in DOM. Thus, you can attach event handlers. CON: Many objects can hurt perf. CANVAS is PIXEL-based. All elements rendered quickly, but not part of DOM. CON: Harder to interact.
  11. http://www.impressivewebs.com/css3-click-chart/
  12. http://html5reset.org/ http://meyerweb.com/eric/tools/css/reset/ http://html5doctor.com/html-5-reset-stylesheet/ http://html5boilerplate.com/
  13. Microsoft Extensions: http://blogs.msdn.com/b/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx Vendor specific prefixes: http://reference.sitepoint.com/css/vendorspecific
  14. @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5 IE relied on proprietary Embedded Open Type (.eot) Old school solutions involved things like sIFR (http://www.mikeindustries.com/blog/sifr/) Modern browsers finally support TTF and OTF Resources: http://www.css3.info/preview/web-fonts-with-font-face/ http://www.alistapart.com/articles/cssatten
  15. Making fonts compatible with IE requires some work-around: http://randsco.com/index.php/2009/07/04/p680
  16. Fix “bleeding” in Webkit with: -webkit-background-clip: padding-box; http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
  17. http://designshack.co.uk/articles/introduction-to-css3-part-6-backgrounds http://www.css3.info/preview/background-origin-and-background-clip/
  18. IMAGES FROM: http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/ Great visual CSS gradient generator: http://www.display-inline.fr/projects/css-gradient/#startType=hex&startValue=aaeeff&endType=hex&endValue=3399cc Simple Visual gradient creator: http://gradients.glrzad.com/ Good explanation: http://www.dynamicdrive.com/style/csslibrary/item/css3_linear_gradients/ background: black; background: -moz-linear-gradient(top, black, white); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(black), to(white)); /*You can also make gradient stops*/ -moz-linear-gradient( top, rgb(214,24,166) 0%, rgb(255,51,200) 50%, rgb(255,77,240) 87% )
  19. Great tutorial: http://designshack.co.uk/articles/css/using-less-js-to-simplify-your-css3 LESS site: http://lesscss.org/
  20. CSS3 Animation Examples: http://webdeveloperjuice.com/demos/css/css3effects.html#second http://anthonycalzadilla.com/css3-ATAT/index.html http://www.optimum7.com/css3-man/animation.html
  21. http://www.webdesignerwall.com/tutorials/css3-media-queries/ http://www.w3.org/TR/css3-mediaqueries/
  22. Full list of -moz extensions: https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
  23. http://www.modernizr.com http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/