Post on 02-Jul-2015
description
HTML5, CSS3 & LESS CSSCrash 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/