Developing for Multiple Browsers

Transcript

1. Developing for other browsers And why it’s important... Sunday, March 17, 13
2. Overview Why? General Practice CSS3 IE Sunday, March 17, 13
3. Why? Sunday, March 17, 13
4. Sunday, March 17, 13
5. Sunday, March 17, 13
6. Popularity statcounter.com Sunday, March 17, 13
7. Popularity 32% 33% 25% 7% 2% statcounter.com Sunday, March 17, 13
8. General Practice Sunday, March 17, 13
9. Basic Steps Sunday, March 17, 13
10. Basic Steps KISS Sunday, March 17, 13
11. Basic Steps KISS Clean up JS Sunday, March 17, 13
12. Basic Steps KISS Clean up JS Test Sunday, March 17, 13
13. Basic Steps KISS Clean up JS Test Analytics Sunday, March 17, 13
14. KISS Sunday, March 17, 13
15. KISS Keep It Simple Stupid Sunday, March 17, 13
16. KISS Keep It Simple Stupid CSS3? Not for me Sunday, March 17, 13
17. KISS Keep It Simple Stupid CSS3? Not for me JQuery Animate Sunday, March 17, 13
18. Clean up JS Sunday, March 17, 13
19. Clean up JS Remove console.log Sunday, March 17, 13
20. Clean up JS Remove console.log Fix syntax errors Sunday, March 17, 13
21. Clean up JS Remove console.log Fix syntax errors Browser dependent Sunday, March 17, 13
22. Test Sunday, March 17, 13
23. Test Sunday, March 17, 13
24. Analytics Sunday, March 17, 13
25. CSS3 Sunday, March 17, 13
26. Popularity 32% 33% 25% 7% 2% statcounter.com Sunday, March 17, 13
27. CSS3 Type ms? webkit moz webkit o Sunday, March 17, 13
28. Gradient Sunday, March 17, 13
29. Gradient .purchases div.send-as-gift { background-color: #f1f1f1; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(241, 241, 241)), to(rgb(228, 228, 228))); background-image: -webkit-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -moz-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -o-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -ms-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f1f1', EndColorStr='#e4e4e4'); } Sunday, March 17, 13
30. Gradient .purchases div.send-as-gift { background-color: #f1f1f1; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(241, 241, 241)), to(rgb(228, 228, 228))); background-image: -webkit-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -moz-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -o-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -ms-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f1f1', EndColorStr='#e4e4e4'); } Webkit (Chrome/Safari) Sunday, March 17, 13
31. Gradient .purchases div.send-as-gift { background-color: #f1f1f1; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(241, 241, 241)), to(rgb(228, 228, 228))); background-image: -webkit-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -moz-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -o-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -ms-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f1f1', EndColorStr='#e4e4e4'); } Moz (Firefox) Sunday, March 17, 13
32. Gradient .purchases div.send-as-gift { background-color: #f1f1f1; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(241, 241, 241)), to(rgb(228, 228, 228))); background-image: -webkit-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -moz-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -o-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -ms-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f1f1', EndColorStr='#e4e4e4'); } O (Opera) Sunday, March 17, 13
33. Gradient .purchases div.send-as-gift { background-color: #f1f1f1; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(241, 241, 241)), to(rgb(228, 228, 228))); background-image: -webkit-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -moz-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -o-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -ms-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f1f1', EndColorStr='#e4e4e4'); } IE 6-9 Sunday, March 17, 13
34. Gradient .purchases div.send-as-gift { background-color: #f1f1f1; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(241, 241, 241)), to(rgb(228, 228, 228))); background-image: -webkit-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -moz-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -o-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -ms-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f1f1', EndColorStr='#e4e4e4'); } IE 10 Consumer Preview Sunday, March 17, 13
35. Gradient .purchases div.send-as-gift { background-color: #f1f1f1; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(241, 241, 241)), to(rgb(228, 228, 228))); background-image: -webkit-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -moz-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -o-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -ms-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f1f1', EndColorStr='#e4e4e4'); } W3C Markup, IE10 Release Preview Sunday, March 17, 13
36. Gradient .purchases div.send-as-gift { background-color: #f1f1f1; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(241, 241, 241)), to(rgb(228, 228, 228))); background-image: -webkit-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -moz-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -o-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: -ms-linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); background-image: linear-gradient(top, rgb(241, 241, 241), rgb(228, 228, 228)); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f1f1', EndColorStr='#e4e4e4'); } In case a$ else fails... Sunday, March 17, 13
37. Gradient Sunday, March 17, 13
38. Gradient No more gradients! Sunday, March 17, 13
39. Tools Sunday, March 17, 13
40. IE Sunday, March 17, 13
41. IE Ar%hh.. Sunday, March 17, 13
42. IE7 Sunday, March 17, 13
43. JS Differences between versions and preview 'om ie9 test in ie, better to notice self than have cto notice errors Sunday, March 17, 13
44. Sunday, March 17, 13
45. Silent Upgrade Sunday, March 17, 13
46. Sunday, March 17, 13
47. Final Thoughts Some people don’t use chrome Those people buy things Don’t upset them Sunday, March 17, 13
48. Fin Sunday, March 17, 13