Your SlideShare is downloading. ×
HTML5 and CSS3 Techniques You Can Use Today
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 and CSS3 Techniques You Can Use Today


Published on

Published in: Technology, Design

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • 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, 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 are demonstrated with special attention to cross-browser support and tips for supporting older browsers
  • 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.
  • Mac: Shipped in March 2000First browser to 100% support CSS: IE on Mac!9 style sheet languages proposed in early 90sLanguages:1996:JavaScript Style Sheets (JSSS) – Netscape1994: Cascading HTML Style Sheets (CHSS)1994: Stream-based Style Sheet Proposal (SSP)
  • WHATWG FAQs on Living Standard:
  • What is the IE strategy for HTML5/CSS3?
  • On Microsoft’s strategy/approach to HTML5:
  • CSS3’s evolutionary approachMicrosoft is focusing primarily on adding product support at the Candidate Recommendation stageReview status of various CSS3 proposed specs:
  • Microsoft Extensions: specific prefixes:
  • -Show example of browser prefixes in action
  • CSS3’s evolutionary approachMicrosoft is focusing primarily on adding product support at the Candidate Recommendation stageReview status of various CSS3 proposed specs:
  • This is not a question with a single correct answer. It all depends on your audience and strategy.There are several general strategies for defining what is “usable” today.
  • Useful for adding HTML5 to both older browsers + new browsers that do not have a specific HTML5 feature
  • Strategy: Design for lowest common denominator, Enrich/Enhance as more capabilities are availableImage Source:
  • Strategy: Design for best case scenario (premium features), and gracefully remove features as resources are not availableImage Source:
  • HTML5 & CSS3 in VS2010 SP1: in VS2008:
  • IE: choices: Hack it – Force features with JS shivsSupport it – Provide gracefully degraded experienceKill it – Provide message indicating no or limited support
  • http://www.modernizr.com now ships with ASP.NET MVC 3
  • lat, long, acc are guranteed. Other values might be available, including altitude, altitudeAccuracy, heading, speedCan force maximum age for cached geolocation objectsCan handle errors and make repeat location calls using navigatior.geolocation.watchPosition(successCallback, errorCallback, {maximumAge:time})Google Maps API v3 Reference: to use on all apps that are free to consumers – no API keys needed)
  • for older browsers:
  • for other HTML5 features:
  • tool for testing Rich Snippets: 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) video discovery: very popular emerging microformat: Open Graph (by Facebook)
  • articles:Great comparison: (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: Bridge for IE: canvas example: 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.
  • methods of access:- Via Attributes ( “dataset” (plug-in required today:
  • @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5IE relied on proprietary Embedded Open Type (.eot)Old school solutions involved things like sIFR ( browsers finally support TTF and OTF + Most support new WOFF (exception is Safari)Resources:
  • Making fonts compatible with IE requires some work-around:\\Discussion of WOFF:
  • Fix “bleeding” in Webkit with: -webkit-background-clip: padding-box;
  • Not supported in IE9
  • Relatively new CSS standard defining Gradients: FROM: visual CSS gradient generator: Visual gradient creator: explanation: 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: site:
  • Not currently supported in IE9CSS3 Animation Examples:
  • Great resourcefor checking mobile support:
  • Transcript

    • 1. HTML5 and CSS3 Techniques You Can Use TodayDEV334
      Todd Anglin
      Chief Evangelist
    • 2. Introductions
      Todd Anglin
      Chief Evangelist, Telerik
      Microsoft MVP
      ASP Insider
      President NHDNUG & O’Reilly Author
    • 3. Development Tools
      Agile Planning
    • 4. Session Road Map
      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. HTML4 = Rough Guide
      Unpredictable Browser Support
    • 7. HTML & CSS History
      Addressing modern web applications & pains of the past
    • 8. HTML & CSS History
      CSS: Plagued by implementation bugs & inconsistencies
      Improve consistency & power of styling language
    • 9. How is the web evolving?
    • 10. {
    • 11. “Living Standard”
      Canvas Video
      HTML5 Forms
      WHATWG | W3C | IETF
    • 12. Stable
      Canvas | Local Storage |Microdata| Document Editing |Geolocation| Semantic Tags | Video/Audio | Selectors
      In Progress
      WebGL | WebSockets | File API | Drag-Drop API | IndexDB | Offline API | Web Workers | HTML5 Forms
    • 13.
    • 14. 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
    • 15.
      Platform Previews
    • 16. CSS 2.1
      CSS Color
      CSS 2
      Backgrounds &
      Media Queries
      25+ Drafts
      CSS3 Text
    • 17. -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;
    • 18. Browser Prefixes
      “standard” way browsers implement experimental features
    • 19. Browser Prefixes
    • 20. WD
    • 21. What is usable today?
    • 22. Adoption Strategies
      Lowest Common Dominator
      Only use features natively available in all target browsers
    • 23. Adoption Strategies
      Only use features either natively available OR available via JavaScript polyfill
      X X
    • 24. polyfill
      (n) poly • fill: JavaScript that implants HTML5 functionality in a browser that does not offer native support
    • 25. 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
    • 26. progressiveenhancementgracefuldegradation
    • 27. [Source: Aaron Olaf, Flickr]
    • 28. [Source: Mercedes USA,]
    • 29. Adoption Strategies
      Vertical Target
      Create experiences targeted at specific browsers (or classes of browsers)
      X X
      X X X
      X X
    • 30. Real World Browser Support
      Better, but not perfect
      Know your users. Know your browsers.
    • 31. HTML5 Techniques
      You can use today
    • 32. 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.
    • 33. Enriching VS Experience
      Add IntelliSense & Schema Validation to
      Visual Studio 2008/2010 (pre SP1) editor
    • 34. Older Browsers
    • 35. 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
      *Don’t use with IE HTML5shiv. One or the other.
    • 36. DEMO
      Polyfilling & Older Browsers
      with Modernizr
    • 37. Semantic Tags
      Tags with meaning
      <div id=“header”>
      <div id=“content”>
      <div id=“nav”></div>
      <div id=“footer”>
      *Need polyfill to trigger styling in old IE
      Safe to use today!
    • 38. Video & Audio
      Semantic rich media
      Reach more people on more devices
      Safe to use today!
    • 39. Geolocation
      Usable on modern browsers + mobile
      Requires plug-in for older browsers
      function callback(position){
      varlat = position.coords.latitude;
      varlng = position.coords.longitude;
      varacc = position.coords.accuracy;
      Safe to use today!
    • 40. Local Storage
      Usable in modern browsers
      sessionStorage.setItem('value', this.value);
      localStorage.setItem('value', this.value);
      sessionStorage = per window
      localStorage = per browser
      5 MB limit
    • 41. HTML5 Forms
      Improved usability
      Uneven support across browsers
      <form name="f">
      <input id="q" autofocus>
      <!--Technique to support older browsers-->
      if (!("autofocus" in document.createElement("input"))) {
      <input type="submit" value="Go">
      Safe to use today!
    • 42. Rich Snippets (*microdata)
      Content with meaning
      Machines understand more of your content
      <div itemscopeitemtype="">
      <time itemprop="startDate"
      Oct 15, 7:00PM
      <time itemprop="endDate"
      Oct 15, 9:00PM
      <span itemprop="geo" itemscope
      <meta itemprop="latitude" content="37.774929" />
      <meta itemprop="longitude" content="-122.419416" />
      Safe to use today!
    • 43. SVG & Canvas
      Safe to use today!
    • 44. Canvas for IE6/7/8
      Many polyfills for older browsers
      JavaScript or Flash based
      Better Perf
    • 45. Custom Attributes
      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.
      <!--Access values with JavaScript-->
      //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!
    • 46. CSS3 Techniques
      You can use today
    • 47. Leveling the Playing Field
      CSS Reset
      Browsers ship with built-in styles – zero them out!
      Enable newer features in older browsers
    • 48. 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
      input:enabled { border: 2px solid green; }
      input:disabled{ background-color: #BBB; }
      *Use jQuery to support legacy browsers
    • 49. CSS3 Color
      HSL and RGB
      Support for new color models + alpha channels
      background:hsla(165, 100%, 50%, 1.0);
      background:rgba(153, 134, 117, 0.2);
    • 50. Custom Fonts
      Biggest Problem?
      @font-face {
      font-family: Delicious;
      src: url('Delicious-Roman.otf') format(“opentype”);
      h3 { font-family: Delicious, sans-serif; }
    • 51. Web Font Providers
      Solve the licensing problem
      Host the WOFF/TTF/OTF font files
      Provide easy-to-use code
    • 52. 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;
      background-size: 150px 50px;
      *Use CSS3 PIE to support legacy IE browsers
    • 53. 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!
    • 54. 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!
    • 55. 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!
    • 56. Gradients
      Emerging CSS standard
      But useful and desirable
      Can be “shived” to support all browsers
    • 57. 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;
    • 58. 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=""></script>
      @primaryColor: #383939;
      background-color: @primaryColor;
      .roundedCorners (@radius: 12px) {
      -moz-border-radius: @radius;
      -webkit-border-radius: @radius;
      border-radius: @radius;
      #page { background-color: @primaryColor; .roundedCorners; }
      Safe to use today!
    • 59. 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!
    • 60. Tomorrow Land (aka Mobile)
    • 61. which HTML5/CSS3 technique will you try?
    • 62.
      @toddanglin + @htmlui