Ease into HTML5 and CSS3
0 likes2,534 views
The document discusses the advancements in HTML5 and CSS3, including new semantic and multimedia tags, JavaScript APIs, and features for improved web design and user experience. It highlights the importance of browser compatibility, the usage of data attributes, and offers tips for CSS3 design elements and transitions while emphasizing fallback strategies for older browsers. Additionally, it addresses the potential challenges with video licensing and performance issues associated with CSS3 techniques.
Ease into HTML5 and CSS3
- 1. Easing Into HTML5 and CSS3 Brian Moon dealnews.com Who attended the HTML5 and Javascript @brianlmoon tutorial yesterday? http://brian.moonspot.net/
- 2. What is in HTML5? • New Semantic Tags • <article>, <header>, <footer>, etc. • New Multimedia Tags • <canvas>, <video>, <audio>, etc. • New Javascript APIs • data- attributes • HTML5 Forms
- 3. What is in CSS3? • New Properties • New Selectors • Device dependent Media Queries
- 4. What is not HTML5 nor CSS3? • SVG - been around, browsers just got better • Geo-Location - Separate W3C spec from HTML5
- 5. Who uses your site? • Are the tech savvy? • Are they sensitive to change? • Are they in China? (Lots of IE6 still) • All Mobile?
- 6. dealnews browsers IE6 0.30% IE7 4.19% IE8 11.91% 22% IE9+ FF3.5+ Chrome Safari 78% 3.1+ Modern Browsers Other
- 7. Our design goals • Identical UI and UX on modern browsers • Fully functional and usable on IE8, IE7 and Opera • Page should render and users should be able to click things in IE6
- 8. First Step All browsers process pages with this doctype in standards mode.
- 9. http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx <!DOCTYPE html> <html> <head> <title>Title</title> Semantic Tags </head> <body> <header> <hgroup> <h1>Header in h1</h1> <h2>Subheader in h2</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Menu Option 1</a></li> <li><a href="#">Menu Option 2</a></li> <li><a href="#">Menu Option 3</a></li> </ul> </nav> <section> <article> <header> <h1>Article #1</h1> </header> <section> This is the first article. This is <mark>highlighted</mark>. </section> </article> <article> <header> <h1>Article #2</h1> </header> <section> This is the second article. These articles could be blog posts, etc. </section> </article> </section>
- 10. Semantic Tags • Older browsers don’t treat these as block elements • CSS can fix it in some browsers • Javascript (HTML Shiv) required in older IE versions • Good semantic HTML4 markup and Microformats already recognized by scrapers • Would use in new projects.YMMV on ROI for converting well done HTML
- 11. data attributes problem • Unknown attributes are ignored by browsers, but the pages don’t validate. • Hacks exist where classes are used (e.g. class=”artid-574244”)
- 12. data- attributes <div class="art body" data-artid="574244"> • Allows you to store data as an attribute that is ignored by the browser • Any attribute prefixed with data- is ignored by the browser (as all unknown attributes are) and are treated as valid HTML5. • Use element.getAttribute(“data-artid”); to get the data • Use it now. Works in all browsers.
- 13. Video & Audio • Well documented licensing war • Great idea, caught up in licensing issues • May have to store your media in more than one format • Javascript libraries exist to help with fallback • Have used it via JS libs. Eases the pain. Falls back to Flash.
- 14. Canvas • Graphics via markup/JS • Not generally lighter weight than images, so not a replacement for static images • Great for graphs and such • Many, many javascript libraries to help build graphs via Canvas. • Used for internal reporting where we dictate browser versions. Publicly,YMMV. Wanna waste time? http://canvasrider.com/
- 15. New JS APIs • Web Performance - neat • Local Storage - requires user prompt • Web Workers (IE10) • Web Sockets - very new, has issues • You really need a good use case for these
- 16. HTML5 Forms <input name=”email” type=”email”> <input name=”url” type=”url”> <input name=”name” type=”text” required> <input name=”search” type=”text” placeholder=”Search”>
- 17. HTML5 Forms • Reduce custom validation Javascript • You can query if a field is valid with checkValidity(). • Custom validation possible via event handlers • Requires IE10 =( • Some javascript libs can close the gap.
- 18. CSS3
- 19. Eye Candy • border-radius (i.e. rounded corners) • box-shadow • gradient backgrounds • multiple backgrounds • transforms • transitions
- 20. Use with fallback • border-radius • box-shadow • gradient backgrounds • multiple backgrounds • Make sure the design holds up to your standard on browsers that don’t support these
- 21. Example FF12 IE8
- 22. Example 2 IE9 FF12 IE7 IE8
- 23. Gnarly CSS .cta { display: inline-block; vertical-align: bottom; -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5); -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5); box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5); border-width: 0px; border-style: none; border-color: rgba(0,0,0,0); cursor: pointer; font-weight: bold; text-align: center; text-decoration: none; /* The is for the most commonly used design */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 0 12px; font: bold 12px arial,helvetica,clean,sans-serif; line-height: 20px; color: white; background: #6ecb12; /* Old browsers */ background: -moz-linear-gradient(top, rgba(118,215,24,1) 19%, rgba(88,168,11,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(19%,rgba(118,215,24,1)), color-stop(100%,rgba(88,168,11,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(118,215,24,1) 19%, rgba(88,168,11,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(118,215,24,1) 19%,rgba(88,168,11,1) 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, rgba(118,215,24,1) 19%,rgba(88,168,11,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(118,215,24,1) 19%,rgba(88,168,11,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76d718', endColorstr='#58a80b',GradientType=0 ); /* IE6-9 */ }
- 24. CSS3 Tools • http://css3generator.com/ • http://border-radius.com/ • http://www.colorzilla.com/gradient-editor/
- 25. Transitions • Replaces javascript for some types of animations • CSS language to define how an element changes from one state to another • Should be treated as optional and have a fall back or the page should work without them • Can be taxing on the browser
- 27. Transforms • CSS language for scaling and rotating elements • Mixed with transistions, animation can be achieved. • May require browser specific tweaking or even non-standard CSS for IE. • Can confuse the box model and page flow
- 28. Example The labels are rotated 90 degrees, but as you can see, Firebug things the element is in a different place than where it appears when drawn.
- 29. Transforms .accordion .panel-label { -moz-transform-origin: 100% 0; -moz-transform: rotate(-90deg); -webkit-transform-origin: 100% 0; -webkit-transform: rotate(-90deg); -o-transform-origin: 100% 0; -o-transform: rotate(-90deg); transform-origin: 100% 0; transform: rotate(-90deg); position: absolute; top: 0; white-space:nowrap; text-align: right; /* MSIE < 10 */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)9; left: 0px9; }
- 30. Eye Candy Issues • All of these techniques can be taxing on the browser and or device. • Excessive use of gradients and transforms can cause major browser lag • Many require browser prefixes (-moz or -webkit) or IE specific syntax (filter)
- 31. Selectors tr:nth-child(2n+1) /* every odd row of an table */ tr:nth-child(odd) /* same */ tr:nth-child(2n+0) /* every even row of an table */ tr:nth-child(even) /* same */ tr:nth-last-child(-n+2) /* the two last rows of an table */ a:first-child /* a is first child of any element */ Also: :first-of-type :only-child :only-of-type :empty Browser performance may suffer using these on large, complex documents. Only use these when you can’t control the markup.
- 32. How Selectors Work This is not CSS3, but just general knowledge you need • CSS is parsed and ALL rules are evaluated. More rules, more work for the browser • Rules are evaluated right to left • “.foo a” matches ALL a tags in the document and walks up the DOM to decide if they have a .foo parent.
- 33. Media Queries @media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { body { background: #ccc; } } • Allow you to specify different CSS for different device specifications • You can use these now to help with mobile design and usability. Those devices support it, older browsers ignore it.
- 34. Experiment Firefox IE6 http://brian.moonspot.net/experimenting-with-html5
- 35. Conclusion • Understand your audience • HTML5 Doctype works for HTML4, try it • Use HTML5 semantic tags to fix bad HTML or on new projects • Video is not the Flash killer we all hoped for. But, it does have its uses. • HTML5 Forms have great potential, but still a nice to have for now.
- 36. Conclusion • CSS3 eye candy is a great extra bit for users that can see it. Be sure you are happy with the fallback for others. • New CSS3 selectors are powerful, but good markup with classes is still better • CSS media queries are very helpful for formatting your pages on smaller screens and are supported on those platforms