Todd Anglin
Chief Evangelist, Telerik
Microsoft MVP
ASP Insider
President NHDNUG & O’Reilly Author
@toddanglin
TelerikWatc...
• Complete development
toolbox provider
UI
• ASP.NET
• MVC
• WinForms
• Silverlight
• WPF
Tools
• Reporting
• ORM
• JustCo...
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...
1991
• HTML
Tags
1995
• HTML 2
• Later: File
uploads,
tables
1997 (Jan)
• HTML 3.2
(W3C)
1997 (Dec)
• HTML 4
• Strict,
Tra...
1996
• CSS v1
• IE3: First
implementation
• IE Mac: First
100% support
1997
• CSS v2
• Still ZERO 100%
implementations
200...
• Better, but not perfect
Feature Check
• CanIUse.com
• BrowserScope.org
• Html5Test.com
Equalizers
• Html5Reset.org
• Htm...
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 proce...
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...
• Content with meaning
– Machines understand more of your content
<!--Facebook Share Microformat for video-->
<meta name="...
• Improved usability
– Supported in Safari, Chrome, Opera (so far)
<form name="f">
<input id="q" autofocus>
<!--Technique ...
• data-*
– Valid approach to storing data in HTML
<!--Store values in data-* attributes-->
<div id="mydiv" data-key="26" d...
Scalable Vector
Graphics
Canvas
Bitmap-
output
Good for
animation
JavaScript-
based
Vector-output
Good for
interaction
XML...
• CSS Reset
– Browsers ship with built-in styles – zero them out!
– Enable newer features in older browsers
http://html5re...
•-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”);
}...
• Solve the licensing problem
• Host the TTF/OTF font files
• Provide easy-to-use code
http://code.google.com/webfonts
htt...
• Easy corner control
– Expect GD for older browsers (IE)
-moz-border-radius: 5px 5px 5px 5px; //Optionally ”explicit”
-we...
• Exactly like it sounds
– box-shadow: <hShift> <vShift> <size> <color>;
-moz-box-shadow: 2px 2px 2px #333;
-webkit-box-sh...
• Uniform across supported browsers!
– text-shadow: <h offest> <v offset> <blur size> <color>;
text-shadow: 2px 2px 2px #3...
• More options, more power
– multiple backgrounds
– resize backgrounds
– background clipping
/*Background size*/
-webkit-b...
• 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;
backgrou...
• Animate by setting CSS properties
– Works when JS is disabled
#id_of_element {
-webkit-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...
• Features waiting for friends
WebKit
• Reflections (-
webkit-box-
reflect)
• 3D Transforms (-
webkit-
perspective)
Mozill...
• Shiv’r + Inspector
– Simple way to check feature support
– Conditional JS and CSS
.multiplebgs div p {
/* properties for...
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 T...
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
Upcoming SlideShare
Loading in...5
×

HTML5 and CSS3 Techniques You Can Use Today

5,824
-1

Published on

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.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,824
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
146
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • 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.
  • 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.
  • http://en.wikipedia.org/wiki/HTML
  • 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)
  • http://dev.w3.org/html5/html4-differences/
  • 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
  • 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
  • http://diveintohtml5.org/forms.html
  • 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)
  • 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.
  • http://www.impressivewebs.com/css3-click-chart/
  • http://html5reset.org/
    http://meyerweb.com/eric/tools/css/reset/

    http://html5doctor.com/html-5-reset-stylesheet/

    http://html5boilerplate.com/
  • 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
  • @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
  • Making fonts compatible with IE requires some work-around:
    http://randsco.com/index.php/2009/07/04/p680
  • Fix “bleeding” in Webkit with: -webkit-background-clip: padding-box;
    http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
  • http://designshack.co.uk/articles/introduction-to-css3-part-6-backgrounds

    http://www.css3.info/preview/background-origin-and-background-clip/
  • 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%
    )
  • Great tutorial: http://designshack.co.uk/articles/css/using-less-js-to-simplify-your-css3

    LESS site: http://lesscss.org/
  • 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
  • http://www.webdesignerwall.com/tutorials/css3-media-queries/

    http://www.w3.org/TR/css3-mediaqueries/
  • Full list of -moz extensions: https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

  • http://www.modernizr.com

    http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/
  • HTML5 and CSS3 Techniques You Can Use Today

    1. 1. Todd Anglin Chief Evangelist, Telerik Microsoft MVP ASP Insider President NHDNUG & O’Reilly Author @toddanglin TelerikWatch.com
    2. 2. • 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
    3. 3. HTML5 Techniques CSS3 Techniques Practical Tips Goal: Leave with at least 1 HTML5/CSS3 technique you can use today
    4. 4. “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
    5. 5. 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
    6. 6. 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
    7. 7. • 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.
    8. 8. progressive enhancement graceful degradation
    9. 9. 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.
    10. 10. http://bit.ly/vsHTML5 http://bit.ly/vsSVG Add Intellisense & Schema Validation to Visual Studio editor
    11. 11. • Three options: –Shiv it –Kill it –Target it
    12. 12. • 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
    13. 13. • 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" />
    14. 14. • 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>
    15. 15. • 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"
    16. 16. Scalable Vector Graphics Canvas Bitmap- output Good for animation JavaScript- based Vector-output Good for interaction XML-based
    17. 17. • CSS Reset – Browsers ship with built-in styles – zero them out! – Enable newer features in older browsers http://html5reset.org http://html5boilerplate.com
    18. 18. •-webkit •-moz •-o •-ms “standard” way browsers implement custom features.
    19. 19. • Biggest Problem? – Licensing! @font-face { font-family: Delicious; src: url('Delicious-Roman.otf') format(“opentype”); } //Usage h3 { font-family: Delicious, sans-serif; }
    20. 20. • 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
    21. 21. • 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;
    22. 22. • 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;
    23. 23. • 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;
    24. 24. • 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*/
    25. 25. • Not CSS3! – But useful and desirable – Can be “shived” to support all browsers
    26. 26. • 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>
    27. 27. • 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; }
    28. 28. • 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; } }
    29. 29. • Features waiting for friends WebKit • Reflections (- webkit-box- reflect) • 3D Transforms (- webkit- perspective) Mozilla • <Nothing notable?> IE (9) • Hardware rendering!
    30. 30. • 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.
    31. 31. which HTML5/CSS3 technique will you try?
    32. 32. Thanks! Gracias! Mersi! Blagodarya! @toddanglin telerikwatch.com anglin@telerik.com
    33. 33. • See slide notes
    34. 34. • 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×