HTML5 in CSS3 v praksi

HTML5 in CSS3 v praksi
@krofdrakula
#praksa

HTML5
CSS3
WebGL
Offline
Geolocation
Buzzwordi so povsod okoli nas.
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

„Ne, ker IE6 tega ne podpira. “
Kolikokrat smo že to slišali?
Slika: http://www.flickr.com/photos/wrong/52877262

Enaka uporabniška izkušnjaza vse.
One size fits all?

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.
Januar 2004
Vir: w3schools.com

Danes je ekosistem zelo raznovrsten.
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?

Podpora standardov se izboljšuje iz dneva v dan.
Vir: html5readiness.com

Še nikoli niso bile implementacije funkcij tako konsistentne.
Zakaj jih ne uporabljamo?
Slika: http://www.flickr.com/photos/baking_in_pearls/1171410778/

Dodatne funkcije (niso del HTML5 ali CSS3!)

Okay... But does it runLinux 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)

Če določena funkcija ni podprta, najdemo alternativo.
http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Kako se pa to obnese
v praksi?!
Slika: http://is.gd/gpiKe

HTML5 semantika

Problemi z IE6-8
Prikaže vsebino značke, a ne oblikuje neznanega elementa.
Rešitev:
(function() {
var e = "section,article,header,footer".split(",");
for(var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
})();

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 kloniranje
poddrevesa.
Na žalost.

Novi tipi <input> značke
CSS engine v IE vedno zazna neznani tip polja kot [type=text], ne glede na vrednost atributa.
Če brskalnik ne podpira določenega tipa vnosnega polja, le-ta postane type="text".
Rešitev?
Uporaba dodatenga class="..." atributa
v kombinaciji z JS zaznavo (za IE).

HTML5 <audio> in <video>
Rešitev:
Brskalnik ne podpira teh dveh značk.
<audio>

</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
Rešitev:
IE < 8 ne podpira SVG.
svgweb
http://code.google.com/p/svgweb/

Canvas
Rešitev:
IE < 8 ne podpira <canvas> elementa.
excanvas
http://code.google.com/p/explorercanvas/
FlashCanvas
http://flashcanvas.net/
silverlight bridge
http://goo.gl/tDij

WebGL
Podpirajo samo v najnovejših različicah Chroma, Safarija, Firefoxain N900.
Rešitev:

Predennadaljujemo ...
... 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 transformacije
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:
css3-mediaqueries-js
http://code.google.com/p/css3-mediaqueries-js/

Večplastna ozadja in prelivi
Podprto povsod.*
Rešitev?
Če uporabljamo samo 2 plasti, lahko uporabimo filter CSS atribut.
* ...če izvzamemo IE < 9.
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:
selectivizr
http://selectivizr.com/

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.

HTML5in CSS3
Danes.

HTML5 in CSS3 v praksi
@krofdrakula
#praksa

http://gregag	219
http://gregag.com	211
http://lanyrd.com	37
http://www.gregag.com	3
http://paper.li	1
https://lanyrd.com	1

HTML5 in CSS3 v praksi

by krofdrakula on Oct 29, 2010

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 472

Statistics

HTML5 in CSS3 v praksi Presentation Transcript