• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

HTML5 and CSS3 Techniques You Can Use Today

on

  • 5,731 views

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

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.

Statistics

Views

Total Views
5,731
Views on SlideShare
5,311
Embed Views
420

Actions

Likes
5
Downloads
122
Comments
0

6 Embeds 420

http://www.telerikwatch.com 412
http://localhost 2
http://webcache.googleusercontent.com 2
http://www.linkedin.com 2
http://translate.googleusercontent.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • HTML5 and CSS3 Techniques You Can Use TodayAs 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_SheetsIE Mac: Shipped in March 20009 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)
  • 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 shivsSupport it – Provide gracefully degraded experienceKill it – Provide message indicating no or limited support
  • http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=164506Google tool for testing Rich Snippets: http://www.google.com/webmasters/tools/richsnippetsGoogle 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-tricksImprove 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.shtmlhttp://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.svgComparison 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.aspxVendor specific prefixes: http://reference.sitepoint.com/css/vendorspecific
  • @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 (http://www.mikeindustries.com/blog/sifr/)Modern browsers finally support TTF and OTFResources: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-backgroundshttp://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=3399ccSimple 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-css3LESS site: http://lesscss.org/
  • CSS3 Animation Examples:http://webdeveloperjuice.com/demos/css/css3effects.html#secondhttp://anthonycalzadilla.com/css3-ATAT/index.htmlhttp://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.comhttp://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/

HTML5 and CSS3 Techniques You Can Use Today HTML5 and CSS3 Techniques You Can Use Today Presentation Transcript

  • Introductions
    Todd Anglin
    Chief Evangelist, Telerik
    Microsoft MVP
    ASP Insider
    President NHDNUG & O’Reilly Author
    TelerikWatch.com
    @toddanglin
  • Telerik
    Complete development toolbox provider
    www.telerik.com
  • session road map
    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
  • HTML & CSS History
    HTML5:
    • Addressing modern web applications & pains of the past
  • HTML & CSS History
    CSS3
    • Improve consistency & power of styling language
    CSS: Plagued by implementation bugs & inconsistencies
  • browser support
    Better, but not perfect
    Know your users. Know your browsers.
  • progressiveenhancementgracefuldegradation
  • HTML5 Techniques
  • 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.
  • enriching VS Experience
    Add Intellisense & Schema Validation to Visual Studio editor
    http://bit.ly/vsHTML5
    http://bit.ly/vsSVG
  • fixing IE
    Three options:
    Shiv it
    Kill it
    Target it
  • 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.
    *Need shiv to trigger styling in old IE
    Safe to use today!
  • 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!
  • 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!
  • 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-->
    varmydiv=document.getElementById('mydiv')
    //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!
  • SVG & Canvas
    Safe to use today!
  • CSS3 Techniques
  • leveling the playing field
    CSS Reset
    Browsers ship with built-in styles – zero them out!
    Enable newer features in older browsers
    http://html5reset.org
    http://html5boilerplate.com
  • Browser Prefixes
    -webkit
    -moz
    -o
    -ms
    “standard” way browsers implement custom features.
  • custom fonts
    Biggest Problem?
    Licensing!
    @font-face {
    font-family: Delicious;
    src: url('Delicious-Roman.otf') format(“opentype”);
    }
    //Usage
    h3 { font-family: Delicious, sans-serif; }
    Safe to use today!
  • Web Font Providers
    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
  • 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 corners
    border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
    Safe to use today!
  • 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!
  • 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!
  • 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!
  • Gradients
    Not CSS3!
    But useful and desirable
    Can be “shived” to support all browsers
    Safe to use today!
  • 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="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
    /*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; }
    Safe to use today!
  • 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!
  • 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;
    }
    }
  • the One-Offs
    Features waiting for friends
  • 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.
  • which HTML5/CSS3 technique will you try?
  • in the future…
    Less repetitive CSS markup
    Less “low level” JavaScript
  • Thanks! Gracias!Mersi!Blagodarya!
    telerikwatch.com
    @toddanglin
    anglin@telerik.com
    [Q & A]
  • HTML5 Resources
    See slide notes
  • 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