Post on 27-Jun-2015
description
HTML5 in
CSS3 v praksi
@krofdrakula#praksa
Buzzwordi so povsod okoli nas.
HTML5 CSS3WebGL
Offline Geolocation
Slika: http://www.flickr.com/photos/theeerin/4860241134
OMGZ!
Slika: http://dashtardplz.deviantart.com/
Meh.
Slika: http://www.flickr.com/photos/tiffanyday/4233056466
Zakaj takšen odziv?
Slika: http://www.flickr.com/photos/nettsu/791875561
Kolikokrat smo
že to slišali?
„Ne, ker IE6 tega ne podpira. “
Slika: http://www.flickr.com/photos/wrong/52877262
One size fits all?
Enaka uporabniška
izkušnjaza vse.
Vsak brskalnik ima svoj nabor funkcij in lastnosti.
Če lastnost ni podprta povsod,
potem je ne smemo uporabiti
nikjer.
Ali je to pošteno do vseh?
Slika: http://www.flickr.com/photos/tatraskoda/3677449835/
Razmerje brskalnikov se je
postavilo na glavo v zadnjih
šestih letih.
IE 5
IE 6
Mozilla /
Netscape
Opera
Ostali
Januar 2004
Vir: w3schools.com
Danes je ekosistem zelo raznovrsten.
IE 6
IE 7
IE 8
IE 9
Firefox
Chrome
Safari
Opera Ostali
September 2010
Vir: w3schools.com
Zakaj torej ne bi izkoristili
polnega potenciala
brskalnika, ko je to možno?
Slika: http://www.flickr.com/photos/pdeperio/3891451054
Prihodnost je tukaj.
Slika: http://is.gd/gpiaC
80/20 pravilo ne velja več.
Zakaj bi nabor funkcij manjšine določal nabor funkcij večine brskalnikov?
Še nikoli niso bile implementacije funkcij tako konsistentne.
Zakaj jih ne uporabljamo?
Slika: http://www.flickr.com/photos/baking_in_pearls/1171410778/
HTML5
Poenostavljen DOCTYPE <!DOCTYPE html>
Semantika <article>, <section>, <header>, <footer>, <nav>, <aside>, <figure>, <figcaption>, <mark>, <summary>
Obrazci type="search|number|range|color|tel|url|email,...", client-side validacija, autofocus, placeholder
Multimedia <audio>, <video>, Audio & Video API
Grafika SVG, Canvas, WebGL
CSS3
Web fonts @font-face
2D in 3D transformacije
translate(), scale(), rotate(), skew()translate3d(), scale3d(), rotate3d(), perspective, matrix3d()
Media queries @media ... { ... }
Večplastna ozadja in prelivi
background: url(), url(), url(), ...linear-gradient(), radial-gradient(), ...
HSLA in RGBA barve color: hsla(0-255, 0-255, 0-255, 0-1)color: rgba(0-255, 0-255, 0-255, 0-1)
Zaobljeni robovi in sence box-shadow, text-shadow, border-radius
Selektorji[attr^=val], [attr$=val], [attr*=val], :nth-child(), :nth-last-child(), :nth-of-type(), :last-child, :first-of-type(), :empty, :target, :enabled, :disabled, :not(), E~F, ...
Dodatne funkcije (niso del HTML5 ali CSS3!)
Geolokacija getCurrentPosition(), watchPosition(), GUI
Offline <html manifest="">, Caching API, Events
Web Workers window.Worker
Web Sockets window.WebSocket
X-doc messaging window.postMessage()
Web Storage window.localStorage
Web SQL window.openDatabase()
History API window.history
ContentEditable .isContentEditable()
Drag-and-drop .draggable
Okay... But does it run
Linux in IE?
* Yes. But that's not the point.
Slika: http://wallpaper-s.org/15__Western_Screech_Owl,_Montana.htm
Nova paradigma:
Uporabniška izkušnja, prilagojena zmožnostim brskalnika.
Slika: http://blog.us.cision.com/wp-content/uploads/2009/04/mobile-browsing.jpg
Začnemo z najboljšim ...
... in se prilagodimo vsem ostalim nižje na lestvici.Slika: http://www.cyclingweekly.co.uk/imageBank/r/RICCO%20WINS.jpg
Kako pa te nove
funkcije prenesemo
na starejše
brskalnike?Slika ©Rialto Entertainment (Kate Harcourt)
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Če določena funkcija ni podprta, najdemo alternativo.
Kako se pa to obnese
v praksi?!
Slika: http://is.gd/gpiKe
HTML5 semantika
(function() { var e = "section,article,header,footer".split(","); for(var i = 0; i < e.length; i++) { document.createElement(e[i]); }})();
Problemi z IE6-8
Prikaže vsebino
značke, a ne oblikuje
neznanega elementa.
Rešitev:
IE < 9 ne klonira hčerinskih
elementov
Če želimo v dokumentu klonirati HTML5 element in celotno poddrevo,
IE ignorira vse potomce tega
elementa.
Rešitev?
Ročno kloniranjepoddrevesa.
Na žalost.
Novi tipi <input> značke
Če brskalnik ne
podpira
določenega tipa
vnosnega polja,
le-ta postane
type="text".
CSS engine v IE vedno zazna neznani tip polja kot [type=text], ne glede na vrednost atributa.
Rešitev? Uporaba dodatenga class="..." atributav kombinaciji z JS zaznavo (za IE).
HTML5 <audio> in <video>
Brskalnik ne podpira teh dveh značk.
Rešitev:<audio> <!-- Flash ali Silverlight fallback --></audio>
... ali:Uporabi eno izmed Javascript
knjižnic za alternativno implementacijo.*
* npr. http://mediaelementjs.com/; uporablja Flash ali Silverlight kot nadomestek. Dostop do audio API: dynamicaudio.js
SVG
IE < 8 ne
podpira SVG.Rešitev:
http://code.google.com/p/svgweb/
svgweb
Canvas
IE < 8 ne
podpira
<canvas>
elementa.
Rešitev:
http://code.google.com/p/explorercanvas/excanvas
http://flashcanvas.net/FlashCanvas
silverlight bridgehttp://goo.gl/tDij
WebGL
Podpirajo samo v
najnovejših
različicah Chroma,
Safarija, Firefoxa
in N900.
Rešitev:
Preden
nadaljujemo ...
... spočijmo malce oči.Sliki: http://is.gd/gpiQo in © Old Spice
@font-face
Podpirajo jih vsi
sodobni brskalniki. ... tako ali
drugače.
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
2D transformacije
Podprto v vseh
brskalnikih.Res!
http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/
3D transfo
rmacij
e
Podprto samo v najnovejših
različicah WebKita in Firefox 4. Žal.
Tranzicije (in animacije)
Tranzicije so podprte v Firefoxu, Chromu,
Safariju in Operi.
Animacije so podprte samo v Safariju 5.
Rešitev:Uporaba ene izmed Javascript knjižnic za
emulacijo tranzicij in animacij.*
* Scripting CSS3 properties, CSS Sandpaper, Transformie
Media query
Podprti praktično povsod.
Razen v IE < 9.
Rešitev:
http://code.google.com/p/css3-mediaqueries-js/css3-mediaqueries-js
Večplastna ozadja in prelivi
Podprto povsod.*
* ...če izvzamemo IE < 9.
Rešitev?
Če uporabljamo samo 2 plasti, lahko uporabimo
filter CSS atribut.
Za več ozadij potrebujemo več gnezdenih HTML
elementov (velja tudi za druge, starejše brskalnike).
HSLA in RGBA barve
RGBA podprte
povsod, HSLA tudi.
Z izjemo IE.
Rešitev?Za barvo ozadja lahko uporabimo filter CSS
atribut; za barvo teksta pa ni rešitve.
Zaobljeni robovi in sence
Delujejo povsod.
Celo v IE 9!
Rešitev?
Horda študentov!
Slika: http://www.dukemagazine.duke.edu/alumni/dm18/sweatshop1.jpg
CSS3 selektorji
Podpora zelo različna, a hitro
narašča.
IE pa rahlo zaostaja.
Rešitev:
http://selectivizr.com/selectivizr
Malce zadihajmo.
Spočiti? Samo še malo!
Izgubljeni?
Niste edini.
Razmisliti moramo, kaj
lahko naredimo s temi
orodji.
Nekaj konceptov je že zraslo okoli teh novih funkcionalnosti
Responsive Design
Mobile First
Feature Set Adaptation
Eksperimentirajte.
Če deluje, uporabite.
HTML5
in CSS3
Danes.
HTML5 in
CSS3 v praksi
@krofdrakula#praksa