Modernizr—browseru, identificiraj se!

Uvod u feature detection u browserima i korištenje Modernizra za implementaciju predstavljenih principa :)

Introduction to feature detection in browsers and using Modernizr to harness that power :)

In Croatian language.

Transcript

1. Browseru—identi ciraj se! Ivan Nikolić @niksy
2. Detekcija browsera ye olden days
3. JS !"#$%&!'(")*%+,(-,#$./0!1/,)'+2-('31(.,$4$45 $$$$%%$6/7'/0!$.(8,)$9/$&!'(")*$:)'!-.!:( ;
4. JS !"#$%&!'(")*%+,(-,#$./0!1/,)'+2-('31(.,$4$45 $$$$%%$6/7'/0!$.(8,)$9/$&!'(")*$:)'!-.!:( ;
5. Detekcija browsera new kid on the block } MOGUĆNOSTI
6. tko si ti? možeš li ti to i to? VS
7. Ovo je web.
8. Ovo će biti web.
10. Nastao 2009. godine
11. Nastao 2009. godine Faruk Ateş i Paul Irish
12. Nastao 2009. godine Faruk Ateş i Paul Irish Open Source App of the Year 2010. i 2011.
13. Nastao 2009. godine Faruk Ateş i Paul Irish Open Source App of the Year 2010. i 2011. Preko 60 testova
14. Nastao 2009. godine Faruk Ateş i Paul Irish Open Source App of the Year 2010. i 2011. Preko 60 testova 2 pjesme u čast
    
16. Kako Modernizr funkcionira?
17. HTML <=>)?,@7($A,BCD <A,BC$?C/--EF!"#$%FD <A(/>D $$$$<-?'!7,$-'?EFB)>('.!9'+G-FD<%-?'!7,D <%A(/>D <H)>@D<%H)>@D <%A,BCD
18. HTML <=>)?,@7($A,BCD <A,BC$?C/--EF.)IG-FD <A(/>D $$$$&%'()*+,%('-./"01(!)2(3$%.4&5%'()*+4 <%A(/>D <H)>@D<%H)>@D <%A,BCD
19. HTML <=>)?,@7($A,BCD &6+/7,'78%%-.$%,!"#+"9'6,:";%680"<,'%%+(8!%="(/%.4 <A(/>D $$$$<-?'!7,$-'?EFB)>('.!9'+G-FD<%-?'!7,D +++ JS J)>('.!9'+,)2?A$%%$"/C-( J)>('.!9'+H)*-A/>)K$%%$,'2( J)>('.!9'+?--,'/.-")'B-$%%$,'2(
20. CSS 3!"#+"9'6$+?).,')C-$5 $$$$%L$7'!:/M!$H2,,).($9/$-C!>(-A)K$L% ; 3+"9'6$+?).,')C-$5 $$$$%L$-/:'!G$H2,,).($!$:)'!-,!$7'-,(=$L% ;
21. JS !"#$>"01(!)2(3+"9'6$45 $$$$%%$NH('I?))C$!.,('/:?!G/= ;$(C-($5 $$$$%%$OP$"/CCH/?: ;
22. CSS +H)*$5 $$$$H/?:1')2.>I?)C)'Q'1H/#RSRSRS+T4U ; 3!"#(?:8$+H)*$5 $$$$H/?:1')2.>I!B/1(Q2'C#,'/.-7/'(.,IHC/?:+7.14U $$$$%L$7('")'B/.?($&VW$L% ;
23. API
24. JS >"01(!)2(3800@1%+AB:";%)2)!?BS$"2.?,!).#45 $$$$%%$C)1!:/$9/$,(-,!'/.G( ;4U addTest()
25. JS J)>('.!9'+/>>V(-,#XH)*-!9!.1XS$"2.?,!).#45 $$$$'(,2'.$>"01(!)2(3+1%+C77D("*%AB:";E)2)!?BFG,%%$,'2( ;4U testProp() i testAllProps()
26. JS >"01(!)2(3*(1=);10AB:";E)2)!?BFG$%%$J)9Y)*P!9!.1 pre xed()
27. JS >"01(!)2(3+1%+E+H71%#XZB)>('.!9'$5$K!>,AQ[R7*U$;XS "2.?,!).#$(C(BS$'2C($45 $$$$J)>('.!9'+/>>V(-,#XK!>,AXS $$$$(C(B+)""-(,W!>,A$EE$[R4U$%%$,'2( ;4U testStyles()
28. JS >"01(!)2(368%IJ1!+#X'(-!9(XS$K!.>)K4U$%%$,'2( hasEvent()
29. JS >"01(!)2(3/K#X).C@$-?'((.$/.>$#$B/*IK!>,AQ\]^7*$4X4U mq()
30. JS >"01(!)2(3L*(1=);1%U$%%$7)7!-$7'("!:-/ >"01(!)2(3L0"/D(1=);1%U$%%$7)7!-$_`J$7'("!:-/ _pre xes i _domPre xes
31. Opcionalni moduli
32. html5shiv.js
33. html5shiv.js respond.js
34. html5shiv.js respond.js yepnope.js
35. JS >"01(!)2(37"80#5 $$$$,(-,Q$J)>('.!9'+,)2?AS $$$$@(7Q$-K!7(+G-S $$$$.)7(Q$-277)',I,)2?A+G-$%%$G%:S$)0)$.($7)-,)G!$Q4 ;4U
36. JS >"01(!)2(37"80#5 $$$$,(-,Q$J)>('.!9'+0!>()S $$$$.)7(Q$a$X"C/-AI"/CCH/?:+G-XS$X7C/@('+-K"X$b ;4U
37. HORORI PO DETEKCIJI http://j.mp/LWdtyU
38. pointer-events kon ikti sa SVG standardom
39. pointer-events kon ikti sa SVG standardom position: xed; još uvijek bez bullet proof rješenja
40. pointer-events kon ikti sa SVG standardom position: xed; još uvijek bez bullet proof rješenja Touch eventovi lažne pozitivne vrijednosti
41. pointer-events kon ikti sa SVG standardom position: xed; još uvijek bez bullet proof rješenja Touch eventovi lažne pozitivne vrijednosti The Undetectables
42. Razmotriti način upotrebe!
43. modernizr.com + git.io/modernizr
44. modernizr.com + git.io/modernizr Serverska implementacija
45. modernizr.com + git.io/modernizr Serverska implementacija Poly llovi
46. modernizr.com + git.io/modernizr Serverska implementacija Poly llovi Tablice kompatibilnosti caniuse.com, mobilehtml5.org
47. BUDUĆNOST? http://j.mp/LWdx1D
48. Performansna poboljšanja
49. Performansna poboljšanja Rješavanje The Undetectablesa
50. Performansna poboljšanja Rješavanje The Undetectablesa @supports
51. CSS M%9**"(+%$#$H)*I-!9!.1QH)'>('IH)*$45 $$$$%L$>(:C/'/?!G($/:)$G($27!,$7)>'M/.$L% ; @supports j.mp/at-supports
52. CSS M%9**"(+%$#$H)*I-!9!.1QH)'>('IH)*$45 $$$$%L$>(:C/'/?!G($/:)$G($27!,$7)>'M/.$L% ; @supports j.mp/at-supports
53. @niksy ~ ~