HTML5 in CSS3 v praksi

2,261 views
2,125 views

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,261
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×