1. Browseru—identificiraj se!
Ivan Nikolić
@niksy

2. Detekcija browsera
ye olden days

3. !"#$%&!'(")*%+,(-,#$./0!1/,)'+2-('31(.,$4$45
$$$$%%$6/7'/0!$.(8,)$9/$&!'(")*$:)'!-.!:(
;
JS

4. !"#$%&!'(")*%+,(-,#$./0!1/,)'+2-('31(.,$4$45
$$$$%%$6/7'/0!$.(8,)$9/$&!'(")*$:)'!-.!:(
;
JS

5. MOGUĆNOSTI
}
Detekcija browsera
new kid on the block

6. tko si ti?
VS
možeš li ti to i to?

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. <=>)?,@7($A,BCD
<A,BC$?C/--EF!"#$%FD
<A(/>D
$$$$<-?'!7,$-'?EFB)>('.!9'+G-FD<%-?'!7,D
<%A(/>D
<H)>@D<%H)>@D
HTML
<%A,BCD

18. <=>)?,@7($A,BCD
<A,BC$?C/--EF.)IG-FD
<A(/>D
$$$$&%'()*+,%('-./"01(!)2(3$%.4&5%'()*+4
<%A(/>D
<H)>@D<%H)>@D
HTML
<%A,BCD

19. <=>)?,@7($A,BCD
&6+/7,'78%%-.$%,!"#+"9'6,:";%680"<,'%%+(8!%="(/%.4
<A(/>D
$$$$<-?'!7,$-'?EFB)>('.!9'+G-FD<%-?'!7,D
+++
HTML
J)>('.!9'+,)2?A$%%$"/C-(
J)>('.!9'+H)*-A/>)K$%%$,'2(
J)>('.!9'+?--,'/.-")'B-$%%$,'2(
JS

20. 3!"#+"9'6$+?).,')C-$5
$$$$%L$7'!:/M!$H2,,).($9/$-C!>(-A)K$L%
;
3+"9'6$+?).,')C-$5
$$$$%L$-/:'!G$H2,,).($!$:)'!-,!$7'-,(=$L%
;
CSS

21. !"#$>"01(!)2(3+"9'6$45
$$$$%%$NO$"/CCH/?:
;$(C-($5
$$$$%%$PH('I?))C$!.,('/:?!G/=
;
JS

22. +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%
;
CSS

23. API

24. addTest()
>"01(!)2(3800@1%+AB:";%)2)!?BS$"2.?,!).#45
$$$$%%$C)1!:/$9/$,(-,!'/.G(
;4U
JS

25. testProp() i testAllProps()
!"#$%&'(%)*##+$,-./0"1,'('&2/3456&7-'"&.89
4444%$-6%&4>"01(!)2(3+1%+C77D("*%AB:";E)2)!?BFG,::4-%6$
;8<
JS

26. prefixed()
>"01(!)2(3*(1=);10AB:";E)2)!?BFG$%%$J)9X)*O!9!.1
JS

27. testStyles()
>"01(!)2(3+1%+E+H71%#YZB)>('.!9'$5$K!>,AQ[R7*U$;YS
"2.?,!).#$(C(BS$'2C($45
$$$$J)>('.!9'+/>>V(-,#YK!>,AYS
$$$$(C(B+)""-(,W!>,A$EE$[R4U$%%$,'2(
;4U
JS

28. hasEvent()
>"01(!)2(368%IJ1!+#Y'(-!9(YS$K!.>)K4U$%%$,'2(
JS

29. mq()
>"01(!)2(3/K./"&=>4,7%$$&4*&#4.4?*1@A'#-BCDEFG148/8<
JS

30. _prefixes i _domPrefixes
>"01(!)2(3L*(1=);1%U$%%$7)7!-$7'("!:-/
>"01(!)2(3L0"/D(1=);1%U$%%$7)7!-$]J$7'("!:-/
JS

31. Opcionalni moduli

32. html5shiv.js

33. html5shiv.js
respond.js

34. html5shiv.js
respond.js
yepnope.js

35. >"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
JS

36. >"01(!)2(37"80#5
$$$$,(-,Q$J)>('.!9'+0!>()S
$$$$.)7(Q$^$Y"C/-AI"/CCH/?:+G-YS$Y7C/@('+-K"Y$_
;4U
JS

37. HORORI PO DETEKCIJI
http://j.mp/LWdtyU

38. pointer-events
konflikti sa SVG standardom

39. pointer-events
konflikti sa SVG standardom
position:fixed;
još uvijek bez bullet proof rješenja

40. pointer-events
konflikti sa SVG standardom
position:fixed;
još uvijek bez bullet proof rješenja
Touch eventovi
lažne pozitivne vrijednosti

41. pointer-events
konflikti sa SVG standardom
position:fixed;
još uvijek bez bullet proof rješenja
Touch eventovi
lažne pozitivne vrijednosti

42. pointer-events
konflikti sa SVG standardom
position:fixed;
još uvijek bez bullet proof rješenja
Touch eventovi
lažne pozitivne vrijednosti
The Undetectables

43. Razmotriti način upotrebe!

44. modernizr.com + git.io/modernizr

45. modernizr.com + git.io/modernizr
Serverska implementacija

46. modernizr.com + git.io/modernizr
Serverska implementacija
Polyfillovi

47. modernizr.com + git.io/modernizr
Serverska implementacija
Polyfillovi
Tablice kompatibilnosti
caniuse.com, mobilehtml5.org

48. BUDUĆNOST?
http://j.mp/LWdx1D

49. Performansna poboljšanja

50. Performansna poboljšanja
Rješavanje The Undetectablesa

51. Performansna poboljšanja
Rješavanje The Undetectablesa
@supports

52. @supports
j.mp/at-supports
M%9**"(+%$#$H)*I-!9!.1QH)'>('IH)*$45
$$$$%L$>(:C/'/?!G($/:)$G($27!,$7)>'M/.$L%
;
CSS

53. @supports
j.mp/at-supports
M%9**"(+%$#$H)*I-!9!.1QH)'>('IH)*$45
$$$$%L$>(:C/'/?!G($/:)$G($27!,$7)>'M/.$L%
;
CSS

54. ~ ~
@niksy