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

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Html5 & less css

Similar to Html5 & less css (20)

Recently uploaded

Recently uploaded (20)

Html5 & less css