Your SlideShare is downloading. ×
HTML5 in CSS3 v praksi
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 in CSS3 v praksi

2,062
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 …

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,062
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×