Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 in CSS3 v praksi

2,867 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
  • Be the first to comment

  • Be the first to like this

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

×