Your SlideShare is downloading. ×
0
@krofdrakula#praksa
IE 5
IE 6
Mozilla /
Netscape
Opera
Ostali
IE 6
IE 7
IE 8
IE 9
Firefox
Chrome
Safari
Opera
Ostali
Poenostavljen
DOCTYPE
<!DOCTYPE html>
Semantika
<article>, <section>, <header>, <footer>, <nav>, <aside>,
<figure>, <figca...
Web fonts @font-face
2D in 3D
transformacije
translate(), scale(), rotate(), skew()
translate3d(), scale3d(), rotate3d(), ...
Geolokacija getCurrentPosition(), watchPosition(), GUI
Offline <html manifest="">, Caching API, Events
Web Workers window....
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
(function() {
var e = "section,article,header,footer".split(",");
for(var i = 0; i < e.length; i++) {
document.createEleme...
Ročno kloniranje
poddrevesa.
Na žalost.
Uporaba dodatenga class="..." atributa
v kombinaciji z JS zaznavo (za IE).
<audio>
<!-- Flash ali Silverlight fallback -->
</audio>
Uporabi eno izmed Javascript
knjižnic za alternativno
implementac...
http://code.google.com/p/svgweb/
svgweb
http://code.google.com/p/explorercanvas/
excanvas
http://flashcanvas.net/
FlashCanvas
silverlight bridge
http://goo.gl/tDij
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/
Uporaba ene izmed Javascript knjižnic za
emulacijo tranzicij in animacij.*
* Scripting CSS3 properties, CSS Sandpaper, Tra...
http://code.google.com/p/css3-mediaqueries-js/
css3-mediaqueries-js
* ...če izvzamemo IE < 9.
Če uporabljamo samo 2
plasti, lahko uporabimo
filter CSS atribut.
Za več ozadij potrebujemo
več ...
Za barvo ozadja lahko
uporabimo filter CSS
atribut; za barvo teksta pa
ni rešitve.
http://selectivizr.com/
selectivizr
@krofdrakula#praksa
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
HTML5 in CSS3 v praksi
Upcoming SlideShare
Loading in...5
×

HTML5 in CSS3 v praksi

2,076

Published on

Slide deck z mojega predavanja na #h5c3 o praktični izkušnji implementacije HTML5 in CSS3 na današnji zbirki brskalnikov, podprto z mnogo linki do rešitev, in nekaj provokativne filozofije o pristopu k oblikovanju uporabniške izkušnje.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,076
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 in CSS3 v praksi"

  1. 1. @krofdrakula#praksa
  2. 2. IE 5 IE 6 Mozilla / Netscape Opera Ostali
  3. 3. IE 6 IE 7 IE 8 IE 9 Firefox Chrome Safari Opera Ostali
  4. 4. 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
  5. 5. 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, ...
  6. 6. 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
  7. 7. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  8. 8. (function() { var e = "section,article,header,footer".split(","); for(var i = 0; i < e.length; i++) { document.createElement(e[i]); } })();
  9. 9. Ročno kloniranje poddrevesa. Na žalost.
  10. 10. Uporaba dodatenga class="..." atributa v kombinaciji z JS zaznavo (za IE).
  11. 11. <audio> <!-- Flash ali Silverlight fallback --> </audio> 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
  12. 12. http://code.google.com/p/svgweb/ svgweb
  13. 13. http://code.google.com/p/explorercanvas/ excanvas http://flashcanvas.net/ FlashCanvas silverlight bridge http://goo.gl/tDij
  14. 14. http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
  15. 15. http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/
  16. 16. Uporaba ene izmed Javascript knjižnic za emulacijo tranzicij in animacij.* * Scripting CSS3 properties, CSS Sandpaper, Transformie
  17. 17. http://code.google.com/p/css3-mediaqueries-js/ css3-mediaqueries-js
  18. 18. * ...če izvzamemo IE < 9. Č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).
  19. 19. Za barvo ozadja lahko uporabimo filter CSS atribut; za barvo teksta pa ni rešitve.
  20. 20. http://selectivizr.com/ selectivizr
  21. 21. @krofdrakula#praksa
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×