Download - HTML5 in CSS3 v praksi
![Page 1: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/1.jpg)
HTML5 in
CSS3 v praksi
@krofdrakula#praksa
![Page 2: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/2.jpg)
Buzzwordi so povsod okoli nas.
HTML5 CSS3WebGL
Offline Geolocation
Slika: http://www.flickr.com/photos/theeerin/4860241134
![Page 3: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/3.jpg)
OMGZ!
Slika: http://dashtardplz.deviantart.com/
![Page 4: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/4.jpg)
Meh.
Slika: http://www.flickr.com/photos/tiffanyday/4233056466
![Page 5: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/5.jpg)
Zakaj takšen odziv?
Slika: http://www.flickr.com/photos/nettsu/791875561
![Page 6: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/6.jpg)
Kolikokrat smo
že to slišali?
„Ne, ker IE6 tega ne podpira. “
Slika: http://www.flickr.com/photos/wrong/52877262
![Page 7: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/7.jpg)
One size fits all?
Enaka uporabniška
izkušnjaza vse.
![Page 8: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/8.jpg)
Vsak brskalnik ima svoj nabor funkcij in lastnosti.
![Page 9: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/9.jpg)
Č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/
![Page 10: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/10.jpg)
Razmerje brskalnikov se je
postavilo na glavo v zadnjih
šestih letih.
IE 5
IE 6
Mozilla /
Netscape
Opera
Ostali
Januar 2004
Vir: w3schools.com
![Page 11: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/11.jpg)
Danes je ekosistem zelo raznovrsten.
IE 6
IE 7
IE 8
IE 9
Firefox
Chrome
Safari
Opera Ostali
September 2010
Vir: w3schools.com
![Page 12: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/12.jpg)
Zakaj torej ne bi izkoristili
polnega potenciala
brskalnika, ko je to možno?
Slika: http://www.flickr.com/photos/pdeperio/3891451054
![Page 13: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/13.jpg)
Prihodnost je tukaj.
Slika: http://is.gd/gpiaC
![Page 14: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/14.jpg)
80/20 pravilo ne velja več.
Zakaj bi nabor funkcij manjšine določal nabor funkcij večine brskalnikov?
![Page 16: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/16.jpg)
Še nikoli niso bile implementacije funkcij tako konsistentne.
Zakaj jih ne uporabljamo?
Slika: http://www.flickr.com/photos/baking_in_pearls/1171410778/
![Page 17: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/17.jpg)
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
![Page 18: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/18.jpg)
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, ...
![Page 19: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/19.jpg)
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
![Page 20: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/20.jpg)
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
![Page 21: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/21.jpg)
Nova paradigma:
Uporabniška izkušnja, prilagojena zmožnostim brskalnika.
Slika: http://blog.us.cision.com/wp-content/uploads/2009/04/mobile-browsing.jpg
![Page 22: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/22.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
![Page 23: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/23.jpg)
Kako pa te nove
funkcije prenesemo
na starejše
brskalnike?Slika ©Rialto Entertainment (Kate Harcourt)
![Page 24: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/24.jpg)
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Če določena funkcija ni podprta, najdemo alternativo.
![Page 25: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/25.jpg)
Kako se pa to obnese
v praksi?!
Slika: http://is.gd/gpiKe
![Page 26: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/26.jpg)
HTML5 semantika
![Page 27: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/27.jpg)
(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:
![Page 28: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/28.jpg)
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.
![Page 29: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/29.jpg)
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).
![Page 30: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/30.jpg)
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
![Page 31: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/31.jpg)
SVG
IE < 8 ne
podpira SVG.Rešitev:
http://code.google.com/p/svgweb/
svgweb
![Page 32: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/32.jpg)
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
![Page 33: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/33.jpg)
WebGL
Podpirajo samo v
najnovejših
različicah Chroma,
Safarija, Firefoxa
in N900.
Rešitev:
![Page 34: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/34.jpg)
Preden
nadaljujemo ...
... spočijmo malce oči.Sliki: http://is.gd/gpiQo in © Old Spice
![Page 35: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/35.jpg)
@font-face
Podpirajo jih vsi
sodobni brskalniki. ... tako ali
drugače.
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
![Page 36: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/36.jpg)
2D transformacije
Podprto v vseh
brskalnikih.Res!
http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/
![Page 37: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/37.jpg)
3D transfo
rmacij
e
Podprto samo v najnovejših
različicah WebKita in Firefox 4. Žal.
![Page 38: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/38.jpg)
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
![Page 39: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/39.jpg)
Media query
Podprti praktično povsod.
Razen v IE < 9.
Rešitev:
http://code.google.com/p/css3-mediaqueries-js/css3-mediaqueries-js
![Page 40: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/40.jpg)
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).
![Page 41: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/41.jpg)
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.
![Page 42: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/42.jpg)
Zaobljeni robovi in sence
Delujejo povsod.
Celo v IE 9!
Rešitev?
Horda študentov!
Slika: http://www.dukemagazine.duke.edu/alumni/dm18/sweatshop1.jpg
![Page 43: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/43.jpg)
CSS3 selektorji
Podpora zelo različna, a hitro
narašča.
IE pa rahlo zaostaja.
Rešitev:
http://selectivizr.com/selectivizr
![Page 44: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/44.jpg)
Malce zadihajmo.
Spočiti? Samo še malo!
![Page 45: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/45.jpg)
Izgubljeni?
Niste edini.
![Page 46: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/46.jpg)
Razmisliti moramo, kaj
lahko naredimo s temi
orodji.
![Page 47: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/47.jpg)
Nekaj konceptov je že zraslo okoli teh novih funkcionalnosti
Responsive Design
Mobile First
Feature Set Adaptation
![Page 48: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/48.jpg)
Eksperimentirajte.
Če deluje, uporabite.
![Page 49: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/49.jpg)
HTML5
in CSS3
Danes.
![Page 50: HTML5 in CSS3 v praksi](https://reader035.vdocuments.us/reader035/viewer/2022062514/558df8951a28ab5a348b461d/html5/thumbnails/50.jpg)
HTML5 in
CSS3 v praksi
@krofdrakula#praksa