Refresher HTML(5) and CSS(3) - CC FE & UX

HTML & CSS
Opfrissen van HTML & CSS
Wat is nieuw in HTML5 & CSS3

Competence Center Front-end & UX
Jan De Wilde
Front-end ontwikkelaar

CSS | Intro
CSS = Cascading Style Sheet
Inline, interne en externe stylesheets
Selectors: .ordina-competence-center .is-de-max { font-weight: bold; }
Gebruik een CSS Reset
Vendor prefixes: -webkit-, -moz-
Vb. -webkit-border-radius: 10px

CSS | Aanroepen
Inline
<div style=”font-weight:bold;”></div>
Intern in head
<head>
<style type=”text/css”>
.ordina-competence-center .is-de-max { font-weight: bold; }
</style>
</head>
Extern in head
<link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” />

CSS | Box model
Ieder element = doos
Omringd door padding, border en marge
Bij normaal gedrag tellen we alles op bij
het element
IE box model bug (<= IE6): padding en
border worden opgenomen in het
element waardoor de doos kleiner is

CSS | Box model
Alles optellen bij inhoud:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
box-model.html

CSS | Positionering
Algemeen
Positionering: left, top, right, bottom
positionering: static (standaard)
z-index: elementen sorteren
position: relative;
Blijft op zijn plaats binnen de parent
position: absolute;
Zweeft boven de pagina
Binnen de grenzen van de parent (parent op position: relative; plaatsen!)
Parent met allemaal absoluut gepositioneerde elementen klapt toe!

CSS | Positionering
position: fixed;
Zweeft boven de pagina
Parent is altijd body
positionering.html

CSS | Pseudo elementen
:active
:hover
:visited
:first-child
:last-child
:before
:after
:first-letter
:first-line
:focus
:link

CSS | Pseudo elementen - voorbeeld
@media print {
a[href]:after {
content: " (" attr(href) ") ";
}
}

CSS | float en clear
Float
Links of rechts floaten
Elementen die na een float element komen zullen wrappen rond dit element
Clear
Elementen na een float kan je clearen
Geef aan aan welke kant float elementen niet toegelaten zijn
De waarde kan zijn: left, right, both
float-clear.html

CSS | De clearfix hack
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
clearfix.html

Inline
Naast elkaar
Hebben voor en achter het element geen line break
Block
Onder elkaar
Hebben voor en achter het element een line break
Nemen by default de volledige breedte van de parent in
Inline-Block
Maakt block elementen inline
De block karakteristieken blijven behouden
CSS | inline, block, inline-block?

CSS | Elementen centreren
Via margin
margin: 0 auto;
width: value; of max-width: value;
max-width zorgt ervoor dat er flexibel kan geschaald worden
Via absolute positionering
position: absolute;
left: 50%;
margin-left: -value / 2;
width: value;
centreer.html

CSS3
Animaties en transities
Waarden berekenen met calc()
Meer geavanceerde selectors
Gegenereerde inhoud en counters
Gradients
Webfonts
Border Radius
Box Shadow
Box Sizing
Border images
Media queries
Meerdere achtergronden
CSS Columns
CSS 3D Transforms
Flexbox
…

Border radius
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
of:
-webkit-border-top-left-radius: 12px;
-moz-border-radius-topleft: 12px;
border-top-left-radius: 12px;
CSS3 | Border radius & box shadow
Box shadow
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
1. Horizontale offset
2. Verticale offset
3. Blur radius
4. Reikwijdte
5. Kleur

CSS3 | Animatie
-webkit-animation: orbit 2s linear infinite;
animation: orbit 2s linear infinite;
1. Animatie naam
2. Duur animatie
3. Type animatie
4. Aantal herhalingen
@-webkit-keyframes orbit {
from {
-webkit-transform:rotate(0deg);}
to {
-webkit-transform:rotate(360deg);
}
}
@keyframes orbit {
from {
transform:rotate(0deg);
// Future chrome support
}
to {
transform:rotate(360deg);
// Future chrome support
}
}
animatie.html

CSS3 | Transitie
transition: background-position 0.8s ease 1s;
1. CSS Property
2. Duur transitie
3. Type transitie
4. Delay
transitie.html

CSS3 | Webfonts
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix')
format('embedded-opentype'),
/* IE6-IE8 */
url('webfont.woff') format('woff'),
/* Modern Browsers */
url('webfont.ttf') format('truetype'),
/* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg');
/* Legacy iOS */
}
@font-face geeft de mogelijkheid om fonts die
normaal enkel in design gebruikt werden, online te
gaan gebruiken
Rekening houden met rechten
Verschillende platformen: Google Fonts, Typekit,
Fontdeck, ...
Verschillende extensies: eot, woff, ttf en svg

CSS3 | Media queries
Responsive
Toestel en scherm afhankelijke stijlen
Meta viewport tag
Ondersteuning is groot
Fallback voor IE8 en lager voorzien:
Respond.js
Ga voor mobile first!
Zelf schrijven of framework gebruiken
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
@media only screen and (min-width: 480px) {
...styles for 480px and up go here
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
media-queries.html

Grid
Nog volledig in opbouw
Heel weinig ondersteuning
Specifiek om grid systems te bouwen
Ter vervanging van float en inline-block
Flexbox
Flexible box
Momenteel een W3C Candidate
Recommendation
Geschikt voor de grote lijnen van een
applicatie of interface
Nog niet overal ondersteuning
CSS3 | Flexbox & Grid

HTML5
Niet zomaar nieuwe syntax
Het is een specificatie
Een verzameling van features (ook JS)
Nieuwe features (vb. <video>) maken
gebruik van een DOM API
Je hoeft niets weg te gooien
Bestaande applicaties of websites
upgraden
Meerdere h1’s op één pagina! www.html5rocks.com
www.diveintohtml5.info

HTML5 | Starten
Geen complexe doctype syntax meer: <!DOCTYPE html>
Nieuwe elementen: <header>, <nav>, <section>, <article>, <aside>, <footer>
… en nog veel meer
<hgroup> element niet meer in gebruik
Nieuwe features: Geolocatie, Localstorage, Canvas, Video, Native formulier
validatie (input types)
Fallback (polyfill) voorzien voor IE versies lager dan 9: html5shim

HTML5 | Stukje geschiedenis
Voor HTML5 overmatig gebruik van <div>: divitis
Structuur door middel van ID’s en klasses
<div id=”header”>
<div id=”nav”></div>
</div>
<div id=”content”></div>
<div id=”footer”></div>
Niet zichtbaar voor browsers,
zoekmachines en screen readers
Slechts één h1 per pagina

HTML5 | Nieuwe elementen
Gebruik van minder div’s
Betere leesbaarheid:
Voor ontwikkelaar
Voor browsers, zoekmachines, screen readers, …
Onze pagina kan er nu zo gaan uitzien:
<header>
<nav></nav>
</header>
<section></section>
<footer></footer>

HTML5 | Nieuwe elementen
<header>
<nav>
<section>
<article>
<aside>
<footer>

HTML5 | Role attribuut
Via het role attribuut kan je aan een element meegeven waarvoor dit dient.
Als we onze code van daarnet nemen:
<header>
<nav role=”navigation”></nav>
</header>
<section role=”main”></section>
<footer></footer>
En zo zijn er nog veel meer mogelijk opties.

HTML5 | Input types
Automatische validatie
Nieuw gedrag (datepicker, range,
…)
Keyboard past zich aan
Nog beperkte support
▪ search
▪ email
▪ url
▪ tel
▪ number
▪ range
▪ date
▪ month
▪ week
▪ time
▪ datetime
▪ datetime-local
▪ color

HTML5 | Placeholder text
Extra hulp bij invullen veld
IE10+
Attribuut placeholder
<form>
<input name="q" placeholder="Go to a Website">
<input type="submit" value="Search">
</form>

HTML5 | Features detecteren
Features detecteren cruciaal
Betere gebruikerservaring
Progressive enhancement
Betere ervaring voor wie bepaalde features ondersteund
Eventueel zelfs kijken naar de beschikbare bandbreedte
Oplossing: Modernizr

Voorbeeld met canvas:
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}
HTML5 | Features detecteren

HTML5 | Geolocatie getCurrentPosition
Locatie delen
Gebruiker moet bevestigen
Kan fout gaan: error detectie
Lager dan IE9 geen support
Twee types locatiebepaling
Driehoeksmeting
Via GPS (meer verbruik)
Manuele polling
navigator.geolocation.getCurrentPosition(
show_map,
handle_error
)
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
// let's show a map or do something
interesting!
}
function handle_error(err) {
if (err.code == 1) {
// how about no!
}
}

HTML5 | Geolocatie watchPosition
Locatie continue updaten
Zelfde format als getCurrentPosition
succes function
error function
Toestel zal polling bepalen aan de
hand van beweging
navigator.geolocation.watchPosition(
show_map,
handle_error
)
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
// let's show a map or do something
interesting!
}
function handle_error(err) {
if (err.code == 1) {
// how about no!
}
}

HTML5 | Geolocatie positionoptions object
Drie properties
enableHighAccuracy
timeout
maximumAge
navigator.geolocation.getCurrentPosition(
success_calback,
error_callback,
positionoptions_object
)
Voorbeeld positionoptions object:
{
enableHighAccuracy: true,
timeout: 4000,
maximumAge: 70000
}
geolocatie.html

HTML5 | Geolocatie - geoPosition.js
Geolocatie API is niet uniform
W3C Geolocation API
IP Geolocation Services
API’s of mobile platforms
Fallback voor:
IE 6, 7, 8
Blackberry
Palm OS

HTML5 | Localstorage (Web Storage)
Cookies
Iedere HTTP request data
Traag / Trager
Geen encryptie (tenzij alles SSL)
4 KB data
Weinig opslag
Localstorage
Op client niveau
Veel storage
Blijft bestaan na page refresh
Geen server interventie
Key, value pairs

Specs
Key, value pairs (JSON)
Opslag adhv key naam
Data ophalen via die naam
Data = types ondersteund door JS
Data opgeslagen als string
Data ophalen evt parser gebruiken
Set / Get
localStorage.setItem(‘bar’, foo);
var bar = localStorage.getItem(‘bar’);
of
localStorage.setItem[‘bar’] = foo;
var bar = localStorage.getItem[‘bar’];
localstorage.html

Limitaties
Gemiddeld 5 MB
Is suggestie in de spec
QUOTA_EXCEEDED_ERR wanneer over limiet
Niet mogelijk meer ruimte te vragen

Leesvoer
HTML
● HTML5 Rocks: http://www.html5rocks.com
● Dive Into HTML5: http://diveintohtml5.info/
● WTF, HTML and CSS?: http://wtfhtmlcss.com/
CSS
● Magic of CSS: http://adamschwartz.co/magic-of-css/
● CSS Diner: Where we feast on CSS Selectors: http://flukeout.github.io/
Responsive design
● Grid: http://www.adamkaplan.me/grid/
● Responsive web design, HiDPI displays and the transition period: http://www.slideshare.net/jandewilde/responsive-web-design-
hidpi-displays-and-the-transition-period
● This Is Responsive: http://bradfrost.github.io/this-is-responsive/
● Twitter Bootstrap (check demo's, docs): http://getbootstrap.com/
● Zurb Foundation (check demo's, docs): http://foundation.zurb.com/

Refresher HTML(5) and CSS(3) - CC FE & UX

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (10)

Destaque

Destaque (20)

Semelhante a Refresher HTML(5) and CSS(3) - CC FE & UX

Semelhante a Refresher HTML(5) and CSS(3) - CC FE & UX (20)

Mais de JWORKS powered by Ordina

Mais de JWORKS powered by Ordina (20)

Refresher HTML(5) and CSS(3) - CC FE & UX