html5 and css3 techniques you can use today
DESCRIPTION
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.TRANSCRIPT
![Page 1: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/1.jpg)
![Page 2: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/2.jpg)
Introductions
Todd AnglinChief Evangelist, TelerikMicrosoft MVPASP InsiderPresident NHDNUG & O’Reilly Author
@toddanglin
TelerikWatch.com
![Page 3: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/3.jpg)
Telerik
• 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
![Page 4: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/4.jpg)
session road map
HTML5 Techniques
CSS3 Techniques
Practical Tips
Goal: Leave with at least 1 HTML5/CSS3 technique you can use today
![Page 5: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/5.jpg)
“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
![Page 6: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/6.jpg)
HTML & CSS History1991
• 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
![Page 7: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/7.jpg)
HTML & CSS History
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
![Page 8: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/8.jpg)
browser support
• 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.
![Page 9: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/9.jpg)
progressiveenhancementgracefuldegradation
![Page 10: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/10.jpg)
![Page 11: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/11.jpg)
![Page 12: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/12.jpg)
HTML5 TECHNIQUES
![Page 13: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/13.jpg)
W3C on HTML5
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.
![Page 14: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/14.jpg)
enriching VS Experience
http://bit.ly/vsHTML5http://bit.ly/vsSVG
Add Intellisense & Schema Validation to Visual Studio editor
![Page 15: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/15.jpg)
fixing IE
• Three options:–Shiv it–Kill it–Target it
![Page 16: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/16.jpg)
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.
Safe to use today!
*Need shiv to trigger styling in old IE
![Page 17: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/17.jpg)
rich snippets (*microdata)
• 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" />
Safe to use today!
![Page 18: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/18.jpg)
browser autofocus
• 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>
Safe to use today!
![Page 19: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/19.jpg)
custom attributes
• 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() propertyvar key = mydiv.getAttribute("data-key") //returns "26" //OR Using JavaScript's dataset property**var key = mydiv.dataset.key //returns "26"
Safe to use today!
![Page 20: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/20.jpg)
SVG & Canvas
Scalable Vector Graphics Canvas
Bitmap-output
Good for animation
JavaScript-based
Vector-output
Good for interaction
XML-based
Safe to use today!
![Page 21: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/21.jpg)
CSS3 TECHNIQUES
![Page 22: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/22.jpg)
leveling the playing field
• CSS Reset– Browsers ship with built-in styles – zero them out!– Enable newer features in older browsers
http://html5reset.orghttp://html5boilerplate.com
![Page 23: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/23.jpg)
Browser Prefixes
• -webkit• -moz• -o• -ms “standard” way
browsers implement custom features.
![Page 24: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/24.jpg)
custom fonts
• Biggest Problem?– Licensing!
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf') format(“opentype”);
}
//Usageh3 { font-family: Delicious, sans-serif; }
Safe to use today!
![Page 25: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/25.jpg)
Web Font Providers
• Solve the licensing problem• Host the TTF/OTF font files• Provide easy-to-use code
http://code.google.com/webfontshttp://webfonts.fonts.comhttp://typekit.com/libraries
![Page 26: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/26.jpg)
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 cornersborder-bottom-left-radius:0px;border-bottom-right-radius:0px;
Safe to use today!
![Page 27: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/27.jpg)
drop shadows
• 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;
Safe to use today!
![Page 28: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/28.jpg)
text shadows
• Uniform across supported browsers!– text-shadow: <h offest> <v offset> <blur size> <color>;
text-shadow: 2px 2px 2px #333;
//You can apply multiple shadowstext-shadow: 2px 2px 2px #333, 2px 2px 3px #CCC;
Safe to use today!
![Page 29: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/29.jpg)
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!
![Page 30: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/30.jpg)
Gradients• Not CSS3!– But useful and desirable– Can be “shived” to support all browsers
Safe to use today!
![Page 31: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/31.jpg)
LESS for CSS• 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>
Safe to use today!
![Page 32: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/32.jpg)
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!
![Page 33: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/33.jpg)
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; }}
![Page 34: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/34.jpg)
the One-Offs
• Features waiting for friendsWebKit
• Reflections (-webkit-box-reflect)
• 3D Transforms (-webkit-perspective)
Mozilla• <Nothing
notable?>
IE (9)• Hardware
rendering!
![Page 35: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/35.jpg)
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.
![Page 36: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/36.jpg)
which HTML5/CSS3 technique will you try?
![Page 38: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/38.jpg)
HTML5 Resources
• See slide notes
![Page 39: HTML5 and CSS3 Techniques You Can Use Today](https://reader036.vdocuments.mx/reader036/viewer/2022070315/55514f9ab4c905bd1c8b562e/html5/thumbnails/39.jpg)
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