Html5 & less css

Html5 & less css
HTML5, CSS3 & LESS CSS Crash course
HTML5  Builds on 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:
HTML5 PAGE LAYOUT Aids accessibility for disabled, partially sighted etc via assistive technologies – supports ARIA (Accessible Rich Internet Applications).
HTML 5 CODE SIMPLER THAN HTML4 <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
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
 <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
SOME HTML4 ELEMENTS REMOVED  <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
NEW ATTRIBUTES FOR EXISTING TAGS  E.g. a sample of those for form input elements:  Autocomplete  Autofocus  Placeholder  Max  Min  required
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/
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
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:
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); }); });
HTML5 OFFLINE WEB APPLICATIONS  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>
 Sample cache manifest file CACHE MANIFEST NETWORK: /tracking.cgi CACHE: /clock.css /clock.js /clock-face.jpg
CSS3  Intertwined with HTML5  Many new features  E.g.  Rounded corners  CSS animations  Text and box shadows  Again watch out for browser support
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
 Instant HTML5 template 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
POLYFILLS  Modernizr automatically 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
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
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
LESS Mixins
NESTED RULES
FUNCTIONS
CRUNCH – COMPILER FOR LESS Compiles LESS into minified CSS
FINAL THOUGHTS OF CHAIRMAN 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
BEDTIME BROWSING  http://lesscss.org/  http://html5boilerplate.com/  http://crunchapp.net/  http://necolas.github.io/normalize.css/  http://modernizr.com/
SOME WELL KNOWN HTML5 SITES  http://beta.theexpressiveweb.com/  http://grischek.com/  http://jamfactory.com.au/40years/  https://twitter.com/

Html5 & less css

Check these out next

Html5 & less css

Recomendados

Más contenido relacionado

Presentaciones para ti(20)

Destacado(20)

Similar a Html5 & less css(20)

Último(20)

Html5 & less css