Downloaded 19 times
![db.readTransaction(function (t) {
t.executeSql('SELECT title, author FROM docs WHERE
id=?', [id], function (t, data) {
report(data.rows[0].title, data.rows[0].author);
});
});](https://image.slidesharecdn.com/zhqhof2yra2etmfnatan-signature-874d14ea637433077ba72a2816af27649180945e4c66dbc29bfb60f5de28f465-poli-141029122208-conversion-gate01/85/Html5-less-css-12-320.jpg)
![db.readTransaction(function (t) {
t.executeSql('SELECT title, author FROM docs WHERE
id=?', [id], function (t, data) {
report(data.rows[0].title, data.rows[0].author);
});
});](https://image.slidesharecdn.com/zhqhof2yra2etmfnatan-signature-874d14ea637433077ba72a2816af27649180945e4c66dbc29bfb60f5de28f465-poli-141029122208-conversion-gate01/75/Html5-less-css-12-2048.jpg)
Uploaded byGraham Johnson
Html5 & less css
The document provides an overview of HTML5, CSS3, and LESS CSS. It describes new HTML5 elements like <canvas>, <audio>, <video>, and attributes for existing tags. CSS3 features covered include rounded corners, animations, and media queries. LESS CSS allows snippets to be reused through mixins and nested rules. The document recommends tools like Modernizr, polyfills, and Crunch to compile LESS into CSS.
More Related Content
Html5 & less css
- 1. HTML5, CSS3 &LESS CSS Crash course
- 2. HTML5 Buildson HTML4 Work began in 2006 Still not fully W3C ratified – candidate status Includes many old favourites e.g. <p></p> <div></div> etc Adds new page layout elements designed to help accessibility:
- 3. HTML5 PAGE LAYOUT Aids accessibility for disabled, partially sighted etc via assistive technologies – supports ARIA (Accessible Rich Internet Applications).
- 4. HTML 5 CODESIMPLER THAN HTML4 <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
- 5. NEW HTML5 ELEMENTS <canvas> – native in-browser 2D drawing usually by javascript (bad news for Adobe Flash) <audio> - sound content <video> - video content <source> - multiple media elements <embed> - embed a plugin <datalist> - form list from external source <output> - result from in-form calculation
- 6. <progress> -progress bar <time> - form date time <figure> - self contained content <mark> - marked highlighted text <keygen> - for secure forms Many more new tags – above are just a few examples
- 7. SOME HTML4 ELEMENTSREMOVED <applet> - bye bye Java applets <frame> - good riddance <frameset> - ditto <font> - use css instead Most browsers will still render these tags but they are not supposed to be used Many other tags removed
- 8. NEW ATTRIBUTES FOREXISTING TAGS E.g. a sample of those for form input elements: Autocomplete Autofocus Placeholder Max Min required
- 9. A WARNING Major HTML features such as <header> are supported in all modern browsers Before using more esoteric HTML5 feature make sure it is supported by target browsers…. more to come http://fmbip.com/litmus/
- 10. HTML5 WEB STORAGE Better than cookies Stored in browser Local Storage - No expiration date Session Storage – Stored for session Beware – malware is misusing, some mobile malware installs ‘local storage’ user cannot get rid of
- 11. LOCAL SQL DATABASE Uses local SQL dB often free SQLLite dB Firefox opposed and will not support IE does not support W3C API for javascript queries to dB Place SQL directly into javascript E.g. executeSQL() method:
- 12. db.readTransaction(function (t) { t.executeSql('SELECT title, author FROM docs WHERE id=?', [id], function (t, data) { report(data.rows[0].title, data.rows[0].author); }); });
- 13. HTML5 OFFLINE WEBAPPLICATIONS Designed to be used offline (what?) Download content when user is online for browsing and use when offline Uses HTML5 cache manifest <!DOCTYPE html> <html manifest="/cache.manifest"> <body> ... </body> </html>
- 14. Sample cachemanifest file CACHE MANIFEST NETWORK: /tracking.cgi CACHE: /clock.css /clock.js /clock-face.jpg
- 15. CSS3 Intertwinedwith HTML5 Many new features E.g. Rounded corners CSS animations Text and box shadows Again watch out for browser support
- 16. CSS3 MEDIA QUERIES Media query is CSS3 which checks browser resolution and applies css if resolution meets criteria e.g.: @media screen and (max-width: 600px) { .class { background: #ccc; } } @media screen and (min-width: 900px) { .class { background: #666; } } Very important in mobile development
- 17. Instant HTML5template with good practices Well tried and tested Designed to work with JQuery Uses normalize.css Makes browsers render html5 consistently Corrects common bugs Modernizr.js Detects HTML5 and CSS3 browser capabilities
- 18. POLYFILLS Modernizrautomatically enables html5 layout elements in IE6/7/8 For other incompatibilities you must use polyfills – there are plenty available on web Each polyfill slows down the page load so use with caution Polyfills do javascript emulation of features like geolocation on older browsers
- 19. Modernizr.load({ test: Modernizr.geolocation,yep : 'geo.js', nope: 'geo-polyfill.js' }); Above modernizr code checks for geolocation and loads different javascripts depending on support status Polyfills for modernizr are a cottage industry with lots available
- 20. LESS CSS On big apps the css to produce the same effect can be repeated many times e.g. green button with round corners CSS often breaks the DRY principle LESS enables snippets of CSS to be reused LESS can either be interpreted at runtime or there is an Adobe AIR app called Crunch to ‘compile’ to CSS
- 21.
- 22.
- 23.
- 24. CRUNCH – COMPILERFOR LESS Compiles LESS into minified CSS
- 25. FINAL THOUGHTS OFCHAIRMAN GRAHAM Use minified CSS & JS for mobile Several online minifiers Also can combine CSS and JS – quicker to load one combined script than several smaller ones
- 26. BEDTIME BROWSING http://lesscss.org/ http://html5boilerplate.com/ http://crunchapp.net/ http://necolas.github.io/normalize.css/ http://modernizr.com/
- 27. SOME WELL KNOWNHTML5 SITES http://beta.theexpressiveweb.com/ http://grischek.com/ http://jamfactory.com.au/40years/ https://twitter.com/