HTML5 BootcampEssential HTML, JavaScript & CSS
Todd AnglinEVP Product Strategy, Telerik
Workshop Downloads:
http://bit.ly/TaskListDemo(https://github.com/toddanglin/TaskListDemo.git)
http://bit.ly/workshoplabs
(Case sensitive)
10 %
Read
20% Hear
30% See
50% Hear + See
70% Say + Write
90% Experience
You generally remember...
EVP Product Strategy, Telerik5x Microsoft MVP, ASP Insider, O'Reilly Author
@toddanglin
5’ 9”41 (Birkenstock)
Workshop Agenda
Time Topic
8:30 AM to Noon HTML5
Noon to 1:00 PM LUNCH
1:00 PM to 4:30 PM JavaScript & CSS3
WHY + HOW
Morning Agenda
Time Topic
8:30 AM Intro to HTML5 & Fundamentals
11:00 AM HANDS ON
11:25 AM Modern HTML App Patterns Overview
Noon Lunch
HTML5 SitesHTML5 AppsHTML5 Enriched
16:32
the "plan"the
optionsHTML5
the browsers
use it today
A&Q
Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.” -Steve Jobs
April, 2010
“
16:32
16:32
Why is HTML5 #winning the web?
16:32
It's Important.
82%
It's Unifying.
It's Everywhere.
“While it continues to serve as a rough guide to many of the core features of HTML, it does not provide enough information to build implementations that interoperate with each other and, more importantly, with a critical mass of deployed content.”
-W3C on HTML416:32
HTML4 = Rough Guide
Unpredictable Browser Support
How is the web evolving?
<HTML>CSS:3;
ECMAScript();{ }“HTML5”
“Living Standard”
WebSockets FileAPI WebGL
HTML5 FormsGeolocation
Offline
Canvas Video
Audio
Canvas
Video
Geolocation
Semantic Tags
SVGWHATWG | W3C | IETF
16:32
Which browsers matter?
Know your users.Know your browsers.
of internet browses withIE, FF, Safari, Chrome, or Opera
99%
Source: comScore, Alexa, Flurry Analytics
Jun-10 Dec-10 Jun-11 Dec-110
102030405060708090
100 PC & Mobile Web BrowsingMobile Apps
64MINUTES43
MINUTES
70MINUTES
66MINUTES
74MINUTES
81MINUTES 72
MINUTES
94MINUTES
Sta
ble Canvas | Local Storage |
Microdata | Document Editing | Geolocation Semantic Tags | Video/Audio | Selectors
In P
rog
ress WebGL | WebSockets | File API | Drag-Drop
API | IndexedDB | Offline API | Web Workers | HTML5 Forms
16:32
16:32
IE9 offers support for the most relevant, real-world web patterns that developers are using today as well as the HTML5 patterns we expect to become more mainstream.”
“
Dean HachamovitchCorporate VP, IE
html5labs.interoperabilitybridges.com
ie.microsoft.com/testdrive
+Platform Previews
Inte
rnet
Exp
lore
r 6 »
Inte
rnet
Exp
lore
r 7 »
Inte
rnet
Exp
lore
r 8 »
Inte
rnet
Exp
lore
r 9 »
Win
Phon
e 7.
5»
Andro
id 4
.0 »
Andro
id 4
.3 »
Safa
ri 5.
1 »
Win
Phon
e 8
»
Opera
11.
60 »
Fire
fox
8 »
Chrom
e 17
»
Safa
ri 6.
0 »
iOS
6.0
»
Opera
12
»
Chrom
e Mob
ile »
Safa
ri 7.
0 »
iOS
7.0
»
Fire
fox
24 »
Chrom
e 22
»
Fire
fox
28 »
Chrom
e 32
»
Chrom
e 33
»0
100
200
300
400
500
600
25 26 41
138138
286287303320329337374378386389390397415430434448498505
relative HTML5 scores
IE10
IE11
In the future, browsers compete
on speed, not on features
DEMO
What is usable today?
X X X X X
X X X
X X
X X X
X X
Adoption Strategies
Lowest Common DominatorOnly use features natively available in all target browsers
16:32
X X X X X
X X X
X X
X X X
X X
Adoption Strategies
Polyfill EnrichedOnly use features either natively available OR available via JavaScript polyfill
X X
16:32
polyfill(n) poly • fill: JavaScript that implants HTML5 functionality in a browser that does not offer native support
16:32
X X X X X
X X X
X X
X X X
X X
Adoption Strategies
Alternate ExperiencesOnly use features available in target browsers AND design alternate experience for other browsers
X X
X X X
X X
16:32
progressiveenhancementgracefuldegradation
[Source: Aaron Olaf, Flickr]
16:32
[Source: Mercedes USA, http://mbusa.com/]
16:32
X X X X X
X X X
X X
X X X
X X
Adoption Strategies
Vertical TargetCreate experiences targeted at specific browsers (or classes of browsers)
X X
X X X
X X
16:32
16:32
Don't sniff browsers.(Test for features.)
modernizr
Modernizr.[featureName]
if (Modernizr.canvas) { //Use It! }
.[featureName] || .no-[featureName]
.no-canvas { //Styles }
.canvas { //Other Styles}
DEMOModernizr
<meta http-equiv="X-UA-Compatible"
content="chrome=1">
Inte
rnet
Exp
lore
r 6 »
Inte
rnet
Exp
lore
r 7 »
Inte
rnet
Exp
lore
r 8 »
Inte
rnet
Exp
lore
r 9 »
Safa
ri 5.
1 »
Inte
rnet
Exp
lore
r 10
»
Opera
11.
60 »
Fire
fox
8 »
Chrom
e 17
»
Safa
ri 6.
0 »
Opera
12
»
Chrom
e 22
»0
50100150200250300350400450500
25 26 41138
303 320 329 337 374 378 389 434
relative HTML5 scores
<HTML5>
The Basics
• <!DOCTYPE html>• 9 new “structure” tags• 16 new HTML elements• 13 new <input> types
16:32
compatible
stuff you can do todaystuff you can do tomorrow
(or today, too, if IE support is not critical)
We'll cover a lot!But not nearly everything.
semantic tagsaudio & videoHTML5 Formsgeolocationweb storagedrag & dropcanvas
offlineweb sql
indexedDBweb sockets
history apifile api
WebGLweb workersXHR2querySelectorclassListCORScryptoperformancevisibility apionline/offlinecustom protocol
typed arraysWeb Audio APIinline SVGFS APICanvas animationnotificationsorientationmicrodataflexboxmore...
For homework.
http://bit.ly/vsHTML5http://bit.ly/vsSVG
Add IntelliSense & Schema Validation
to Visual Studio 2008/2010 (pre SP1)
16:32
16:32
HTML5 Forms
Geolocation
Video
CSS3
{Web Sockets}{Storage}{IndexedDb}{Semantic Data}
16:32
semantic tags
tag: <header> <footer> <nav> <article> <hgroup>
support: IE9, FF3.5, Safari, Chrome, Opera
<body> <div id=“header”> </div> <div id=“content”> <div id=“nav”></div> </div> <div id=“footer”> </div></body>
<body> <header> </header> <section> <nav></nav> </section> <footer></footer></body>
VS.
fixing IE<head> <meta charset="utf-8" /> <title>My Weblog</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>
*Polyfill required to trigger styling in old IE
16:32
Why use it?• Accessibility*• SEO*• Code readability• Developer street cred• Why not?
16:32
semantic datadata-*
Valid approach to storing data in HTML
<!--Store values in data-* attributes--><div id="mydiv" data-key="26" data-name="My product name">...</div>
<!--Access values with JavaScript-->var key = mydiv.getAttribute("data-key") //ORvar key = mydiv.dataset.key
support: IE9, FF3.5, Safari, Chrome, Opera
Why use it?• Embed data in page
16:32
video & audioSemantic rich media
Reach more people on more devices
Container
Codec
Silverlight
FlashHTML5
MP4H.264
video for all browsers*
<video src="clip.mp4" controls type="video/mp4"><object classid="..."> <param name="flashvars" value="file=clip.mp4" /> <param name="movie" value=“player.swf" /> <embed src="player.swf” type="application/x-shockwave-flash” flashvars="file=clip.mp4" />
Your browser does not support video
</object></video>
support: IE9, FF3.6, Safari, Chrome, Opera16:32
Why use it?• Video for plug-less
mobile devices• Eliminate
dependencies on Flash/Silverlight (future proofing)
16:32
canvastag: <canvas />
<canvas id=“b" width="300" height="225"></canvas>
function draw_b() { var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d"); b_context.fillRect(50, 25, 150, 100);}
support: IE*, FF3, Safari, Chrome, Opera
fixing IE<head> <!--[if IE]> <script src="excanvas.js"></script> <![endif]--></head>
Explorercanvas
16:32
Scalable Vector
GraphicsCanvas
Bitmap-output
Good for animation
JavaScript-based
Vector-output
Good for interaction
XML-based
16:32
Why use it?
• Dashboards• Charts/Gauges• Resolution
independence
16:32
• Games• Super custom
rendering
SVG Canvas
html5 forms*
tag: time, date, search, email, etc.Web Forms 2.0 HTML5 Forms
<form><input type="email" autofocus="autofocus"
placeholder="Enter your email" /></form>
support: Safari, FF4*, Chrome, Opera
validation• HTML: Required, Type, Pattern• JS: checkValidity()• CSS: :invalid, :valid, :required
<form><input type="email" placeholder="Enter your email"
required title="Please enter a valid email address" />
<input type="submit" value="Go" /></form>
via A List Apart (bit.ly/html5validation)
16:32
16:32
iOS 7 deprecated datetime support & handles week poorly
progressive enhancement
<form name="f"> <input id="q" autofocus>
<!--Technique to support older browsers--> <script> if (!("autofocus" in document.createElement("input"))) { document.getElementById("q").focus(); } </script> <input type="submit" value="Go"></form>
16:32
“Consuming raw or undercooked meat, poultry, seafood, shellfish or eggs may
increase risk of foodborne illness.”
16:32
COOKEDRAW
html5 forms
16:32
Available heat:- Kendo UI (validation + UI)- jQuery HTML5 Form- H5F
Why use it?• Mobile input• Improved form
behavior in modern browsers
• Semantic forms• New styling options
16:32
geolocation
navigator.geolocation.getCurrentPosition(callback);
function callback(position){ var lat = position.coords.latitude; var lng = position.coords.longitude; var acc = position.coords.accuracy;}
support: IE9, Safari, FF3.5, Chrome, Opera
opt-in user feature to share physical position
COOKEDRAW
geolocation
16:32
Why use it?• Enrich apps with
location awareness• Track user position
16:32
local storagesessionStorage = per windowlocalStorage = per browser
<script>sessionStorage.setItem('value', this.value);localStorage.setItem('value', this.value);
sessionStorage.getItem(‘value’);
sessionStorage.clear();localStorage.clear();</script>
support: IE9, FF3.5, Safari, Chrome, Opera
5 MB limit
http://htmlui.com:80
protocol
host port
(+ browser mode)
COOKEDRAW
local storage
16:32
Available heat:- localstorage polyfill- amplifyJS- lawchairJS
Why use it?• Better than cookies• Simple API
16:32
drag & drop APIeasy drag & drop for any HTML element
<!-- Make an HTML element draggable --><div id=“myDiv” draggable=“true”>...</div>
//Handle the DnD events, such as Dropfunction onDrop(e){ //e.target is the current target element
if(e.stopPropigation) e.stopPropigation(); //Prevent redirect
//Do something with payload
return false;}
support: IE9, FF, Safari, Chrome, Opera
IMG
File
HTML
draggable
dragstart
drag
dragenter
dragleave
dragover
drop
dragend
Change appearance,Set payload
Change drop targetappearance
Process DnDpayload
dragstart
drop
e.dataTransfer.setData([MIME type], [payload])
e.dataTransfer.getData([MIME type])
e.dataTransfer.files; //FileList object
COOKEDRAW
drag & drop
16:32
Available heat:- Kendo UI (DnD & Upload)- jQuery UI Draggable
Why use it?• Support DnD files in
the browser• Reduce JS footprint
16:32
stuff you can do todaystuff you can do tomorrow
offlinetag: <html manifest="html5demo.manifest">MIME type: text/cache-manifest
CACHE MANIFEST# Files you want cached for your app to work offline
myLogo.jpg
//Interacting with cachewindow.applicationCache.update();alert(window.applicationCache.status);
support: FF3.5, Safari, Chrome, Opera 10.6
COOKEDRAW
offline
16:32
Why use it?• Aggressive resource
caching• Foundation for offline
16:32
web sqlapi: openDatabase
db = openDatabase("html5demos", "1.0", "HTML 5 Database API example", 200000);if (db) { db.transaction(function(tx) { tx.executeSql("CREATE TABLE IF NOT EXISTS tweets (id REAL UNIQUE, text TEXT, created_at TEXT, screen_name TEXT, mention BOOLEAN)", [], callback); });}
db.transaction(function (tx) { tx.executeSql('SELECT * FROM tweets WHERE mention = ? AND id > ? ORDER BY id DESC', [mention, latest], callbackFunc);});
support: Safari, Chrome, Opera
“This specification has reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.”
–W3C
indexedDB
JavaScript API for indexed local storage
var request = window.indexedDB.open("CandyDB", "My candy store database");
request.onsuccess = function(event) { var db = event.result; if (db.version != "1") { // User's first visit, initialize database. ... }}
support: IE9*, FF4, (Chrome)
COOKEDRAW
indexedDB
16:32
Available heat:- IDBWrapper- PouchDB- lawnchairJS
Why use it?• Browser storage of
larger datasets• Offline data• Better than local
storage for complex data operations
16:32
web socketsapi: WebSocket
ws = new WebSocket("ws://localhost:8282/test”);
ws.onopen = WSonOpen;ws.onmessage = WSonMessage;ws.onclose = WSonClose;ws.onerror = WSonError;
function WSonMessage(event) { $(“#myDiv”).html(event.data);};
support: IE9**, Safari 5, Chrome, FF4*, Opera 11*
Socket.IO
SignalR
SockJS
COOKEDRAW
web sockets
16:32
Available heat:- SignalR- Socket.IO- Sockjs
Why use it?• 2-way real-time
messaging• Replace long-polling &
interval “hacks”• Eliminate
dependencies on plug-ins
16:32
file api
access to local file system & data streaming
var file = e.dataTransfer.files[0], reader = new FileReader(); reader.onload = function (event) { var dataUrl = event.target.result;};
reader.readAsDataURL(file); .readAsBinaryString(file); .readAsText(file); .readAsArrayBuffer(file);
support: IE10, FF4, Chrome, Opera 11.1
COOKEDRAW
file api
16:32
Why use it?• Process files with fewer
server trips• Improve usability• Desktop-like
experiences• Better file upload
16:32
history api
direct access to browser history
var stateObj = { foo: "bar" };history.pushState(stateObj, "page 2", "bar.html");
support: FF4, Safari 5, Chrome, Opera 11.5
</html>
LUNCH <BR />1-Hour Pit Stop. Resume @ 1:00 PM.
Afternoon Agenda
Time Topic
1:00 PM Tips for Better JavaScript
2:45 PM Intro to CSS3 & Fundamentals
4:00 PM Final Workshop Q&A
4:30 PM Fin
HTMLApp
Patterns
You are not a web developer.
You are a web standards developer.
<HTML>CSS:3;
ECMAScript();
DEMO
In browserOut-of-browser{
}Always connectedSometimes connected{
}
Site experienceApp experience{
}
PackagedServed{
}
16:32
1. Website2. Single Page App (SPA)
3. Mix
Website
HTML
Concepts: Pages, Server-side Views, Links, Thin Client
Website:Always connected
In-browserServed
Site experience
16:32
Single Page Application (SPA)
16:32
JS
Data
Single Page Application (SPA)
JS
Data
16:32
Concepts: Web Services, Client-side, Application
SPAs provide a more fluid user
experience, similar to a "desktop"
application.
16:32
SPA:App Experience
16:32
Native Shell +SDK Proxy
NativeApp
HTML/JS/CSS App
Hybrid Approaches
16:32
JS
Data
JS
Data
SlicesofSPA
Hybrid Approaches
16:32
JS
SPAShellSPA
Website
Just because you're using web
standards, doesn't mean you're
building websites.
16:32
16:32
JAVASCRIPT!
<TODO: HAPPY PLACE IMAGE>
JAVASCRIPT.
Why JavaScript?
WHY?!
It’s the first?
It’s the best?
It’s the easiest?
It’s the fastest?
It’s everywhere.
JavaScript.
I am your father.
No, really.Brendan Eich.Netscape.
“JS had to 'look like Java' only less so, be
Java’s dumb kid brother or boy-
hostage sidekick. Plus, I had to be done
in ten days or something worse than
JS would have happened”
::::
Sept 1995Netscape
Aug 1996Microsoft
June 1997ECMAScript
//
Mar 1999XHR
Feb 2005Ajax
Aug 2001IE6
FirefoxSafari
ChromeMobile
JavaScript won by default.
If you're the last man left on earth, it doesn't matter how
ugly you are when the women come to re-populate the
planet.
Scott Koon
Can’t Beat ‘em,Join ‘em.
Modern JavaScriptFaster. Easier. Better.
Attwood’s Law:Any application that can be
written in JavaScript, will eventually be written in
JavaScript
2007
MOST COMMON PROBLEMS
1.Slow Execution2.Memory leaks3.Poor Code
Organization4.Lack of Understanding
5(ISH) TIPS
From real masters:JordanIvan
TsvetomirAtanasBurkeJohn
Brandon
TIP #1jQuery is a friend…
…that will stab you in the back.
Prove It
SUB-T
IP
1.1
CACHE OBJECTS
$("#myDiv").css("color","red");$("#myDiv").css("opacity",1);
BAD
$("#myDiv").css("color","red")
.css("opacity",1);
BETTER
var $myDiv = $("#myDiv");$myDiv.css("color","red");$myDiv.css("opacity",1);
BEST*
Prove It
SUB-T
IP
1.2
NATIVE LOOPS
$.each(arr, function (i) {i / 2;});BAD
arr.forEach(function (i) {i / 2;});BETTER
var i = 0, len = arr.length;for (i = 0; i < len; i += 1) {
i / 2;}
BEST*
Prove It
TIP #2Avoid Global Variables
They're slow & rude.
function add(num1, num2){ return num1 + num2;}
var result = add(5, 10);16:32
Prove It
var name = "Todd";function sayHello(){
alert(name);}
function sayHello(){ var name = "Todd";
alert(name);}
16:32
BAD
BETTER
Closures & Module Pattern
function doInitStuff(){ ...}
function loadSomething(){ ...}
function handleButtonClick(){ ...}
function harlemShake(){ ...}
yourFile.js
function doInitStuff(){ var user = "Todd";}
function loadSomething(){ if (user == "Todd") ...}
function handleButtonClick(){ ...}
function harlemShake(){ ...}
yourFile.js
var user = "";function doInitStuff(){
user = "Todd";}
function loadSomething(){ if (user == "Todd") ...}
function handleButtonClick(){ ...}
function harlemShake(){ ...}
yourFile.js
var [window].user = "";function [window].doInitStuff(){
user = "Todd";}
function [window].loadSomething(){ if (user == "Todd") ...}
function [window].handleButtonClick(){ ...}
function [window].harlemShake(){ ...}
yourFile.js
var app = (function(){ var _name = "Todd";
return{ sayHello: function(){
alert(_name); }
}}());
app.sayHello();
16:32
BEST(ISH)
var app = (function(){ var _name = "Todd";
return{ sayHello: function(){ alert(_name); }, sayGoodbye: function(){ alert(_name); } }}());
16:32
BEST(ISH)
Your“Public” API
SUB-T
IP
2.1 SUPER PATTERN
(function(window,$,c){ var _private = "Todd"; function privateClass(){} function myWidget(){} myWidget.doSomething = function(){};
window.myWidget = myWidget;}(window,jQuery,console));
Immediately Invoked Function Expressions (IIFE) + Global Imports + [Prototype]
Prove It
TIP #3Bind to Events & Pub/Sub
Just listen.
<button id="btn" onclick="sayHello();">Click Me</button>
$(function(){$(“#btn").on("click",sayHello);
});
16:32
BAD
BETTER
$(document).on("click","button",
sayHello);
16:32
BEST
Why?Compare
ACompare
B
function doSomthing{...doSomethingElse();
doOneMoreThing();}
16:32
BAD
function doSomething() { ... $(document).trigger("DO_SOMETHING_DONE");}
$(document).on("DO_SOMETHING_DONE", function(){ doSomethingElse(); });
16:32
BETTER
Example
function doSomething(successCallback, failCb){ //Do something async...
if(error){ failCb(); } else { successCallback(); }}
function doSomethingElse(){ doSomething(function(){...}, function()...);}16:32
ANOTHER PROBLEM
function doSomething(){ var dfd = new $.Deferred();
//Do something async, then... //dfd.resolve(); //OR //dfd.reject();
return dfd.promise(); //Returns immediately!
}
function doSomethingElse(){ doSomething().done(//Success!).fail(//Error);}16:32
ANOTHER SOLUTION
TIP #4Don't fondle the DOM.
Go with the flow.
My Awesome Page
Copyright Fo'eva
Lorem ipsumy samplish jibber jabbish text only meant to serve as a placeholder, and much like Pi, should never repeat or be read much beyond the first few characters.
function doSomething{...var $list = $("body").append("<ul>");for(var i = 0; i < 10; i++){
$list.append("<li>"+ i +"</li>") }}
16:32
BAD
function doSomething{...var $domChunk = $("<ul>");for(var i = 0; i < 10; i += 1){
$domChunk.append("<li>"+ i +"</li>"); }
$("body").append($domChunk);}
16:32
BETTER
SUB-T
IP
4.1 DOM SPEED WITH
STRINGS & INNERHTML
function doSomething{...var domString = "<ul>";for(var i = 0; i < 10; i += 1){
domString += "<li>"+ i +"</li>"; }
domString += "</ul>"$("body")[0].innerHTML = domString;
} Prove It
<script type="text/x-kendo-template" id="tmp">
<ul> #for(var i = 0; i < data.length; i
+= 1){# <li>#= data[i] #</li>
#}#</ul>
</script>
function doSomething(){var myData = [1,..,10];var template = kendo.template($
("#tmp").html());$("body").append(template(myData));
}
16:32
BEST
Prove It
TIP #5Learn a module pattern.
(Or some kind of app structure)
PERFORMANCE CONVENIENCE
A.js
B.js
Manual (index.html)
<script src="B.js"></script><script src="A.js"></script><script src="main.js"></script>
Module Loader (main.js)
require(["A","B"], function(){//Dependencies are
loaded});
1.Do a sanity check2.Don’t over optimize
USE JSLINTGuaranteed to Hurt Your Feelings™
16:32
BONUS
TIPS
MINIFY YOUR JSWords are for humans.
MASTER BROWSER DEV TOOLS
Debug JavaScript where it runs.
Debugging
console.log()
Fix IE<script type="text/javascript">
<!--Console global variable fix for IE-->
if (!this.console) { window.console = {
log: function() {} };}
</script>
16:32
Resources for Study
• Books– JavaScript: The Good Parts (Crockford)– JavaScript: The Definitive Guide
(Flanagan)– JavaScript Patterns (Stefanov)– High Performance JavaScript (Zakas)
16:32
console.clear();
JAVASCRIPT, mon.
16:32
16:32
[before CSS]
<html> <head>…</head> <body> <table> <tr><td> <font size=“3” color=“red”> <h1>Hello World!</h1> </font> </td></tr> <font color=“green”> <font face=“Tahoma”> <h2>I’m green! I think.</h2> </font> <p>Lorem ipsum</p> </font> </table> </body></html>
{HTML}
Separation of Concerns*
<html> <head>…</head> <body> <header>…</header> <article> <h1>Hello!</h1> <p>Lorem ipsum</p> </article> <nav>…</nav> <footer>…</footer> </body></html>
structure
body { color:#FFF; }
header { margin:5px; }
article { margin:5px 0; padding: 10px; background: #333;}
style
{HTML} {CSS}
16:32
CSS has been plagued with
inconsistencies & browser bugs
What's CSS3?
CSS 2.0++++Module Status
Animations WD
2D/3D Transformations WD
Selectors (Level 3) REC
Media Queries (Level 3) REC
Backgrounds & Borders (rounded corners)
CR
Text Decoration (text shadows, outline)
CR
CSS 2.1 RECWD LC CR PR REC
16:32
WD LC CR PR RE
C
CSS 2.1CSS3 ColorSelectorsMedia Queries
Backgrounds &BordersMulti-columnFlex BoxMarquee
25+ DraftsTransitionsTransformationsAnimationsGradientsCSS3 Text
16:32
Browser Prefixes
-webkit-moz-o-ms
"standard" way browsers
implement custom features.
16:32
Prefixes are going away (eventually)
16:32
RECENT NEWS
Browser "flags" will handle emerging feature
-moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px;border-radius: 5px;
-moz-box-shadow: 2px 2px 2px #333;-webkit-box-shadow: 2px 2px 2px #333;box-shadow: 2px 2px 2px #333;
-webkit-background-size: 137px 50px;-o-background-size: 137px 50px;background-size: 137px 50px;
16:32
SelectorsColorCustom FontsBorders & BackgroundsGradientsMedia QueriesAnimationsTransitionsLayouts (Grid, Flex, etc)
1. Selectors2. Custom Fonts3. Whiz Bang Styley
Whimey4. Layouts
*E[foo]E[foo="bar"]E[foo~="bar"]E[foo|="en"]E:first-childE:lang(fr)E:hoverE:focusE:disabledE::beforeE::afterE > FE + F
EE:linkE:activeE:visitedE::first-lineE::first-letterE.warningE#myidE F
E[foo^="bar"]E[foo$="bar"]E[foo*="bar"]E:rootE:nth-child(n)E:nth-last-child(n)E:nth-of-type(n)E:nth-last-of-type(n)E:last-childE:first-of-typeE:last-of-typeE:only-childE:only-of-typeE:emptyE:targetE:enabledE:checkedE:not(s)E ~ F
CSS3 Selectors• Powerful new selector options//Alternating Itemsli:nth-child(odd) { color: blue; }li:nth-child(even) { color: green; }li:nth-child(3n) { color: red; } //Every 3rd item
//First/Last Itemsli:first-of-type { color: blue; }li:not(:first-of-type):not(:last-of-type) { color: orange; } //All *but* first/last
//Enabled/Disabledinput:enabled { border: 2px solid green; }input:disabled { background-color: #BBB; }
*Use jQuery to support legacy browsers
Biggest problem with custom fonts?
16:32
Licensing.(And then file format.)
(And then performance.)(And then Comic Sans.)
Custom Fonts
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf') format(“opentype”);
}
//Usageh3 { font-family: Delicious, sans-serif; }
WebFont Providers+
WOFF
16:32
Borders, Backgrounds,
Gradients, Shadows, Text Shadows,
Colors
16:32
-moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px;border-radius: 5px;
-moz-box-shadow: 2px 2px 2px #333;-webkit-box-shadow: 2px 2px 2px #333;box-shadow: 2px 2px 2px #333;
-webkit-background-size: 137px 50px;-o-background-size: 137px 50px;background-size: 137px 50px;
16:32
Two cautions:
1. Older browsers2. Mobile
Performance
16:32
Media QueriesConditional CSS
rules/sheets based on screen properties
16:32
/*These two rules do the same thing*/@media all and (min-width:500px) { … } @media (min-width:500px) { … }
/*Multiple conditions*/@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; }}
• width/height• device-width/height• aspect-ratio• orientation• color/color-index• resolution
+
media type & logical operators
LayoutsFlex & Grid
16:32
The end of complicated float layouts.(Eventually.)
display: none;
16:32
Final Q&A
Thank You!
Your Feedback is Important
Please fill out a session evaluation using the EventBoard app.
Thank you!
Recommended
