1.Browsers,or what standards do not tell Dima Malenko

2. Prelude 3. OpenOffice.org on iPad 4. Open. Window. Please. 5. Unscientific JavaScriptTutorials Survey alertwindow.open 0% 20% 40% 60% 80% 100% 120% 6. Unscientific JavaScriptTutorials SurveyA little more than always alertwindow.open 0% 20% 40% 60%A little less than always80%100% 120% 7. window.open(http://new.window.url, _blank, width=W, height=H) 8. Whats important for us?1. It has to be a window2. Size has to match, whats on the server3. Should be able to resize to catch up with the server 9. What can happen as a result of this call? window.open(http://new.window.url,_blank,width=383, height=92) 10. Nothing Happens 11. Nothing Happensunless you are in Chrome kind ofNew window is actually created, DOM isloaded, but window remains hidden andwindow.outerWidth == 0 12. Window Sized 383x92 Opens Correctly! 13. Window Sized 383x92 Opens Correctly! and they lived happily ever after. 14. Window Sized 383x92 Opens Correctlyunless you are in Chrome Would open a window with all dimensions not less than 100px Would let you resize to a smaller size from within the window At least there is a workaround 15. Window Sized 383x92 Opens Correctlyunless you are in fullscreen on Mac Safari would always open new window in a tab when in fullscreen Chrome and Firefox would open regular windows even in fullscreen And there is no workaround for that 16. Wait! Arent all those browsers standards compliant? 17. 5.1.6 Browser Context Names a new browsing context is being requested, and what happens depends on the user agents configuration and/or abilities. More at http://www.w3.org/TR/html5/browsers.html 18. Oh, You Want to Read SomeKeys? 19. Oh! You tell meyou want to readsome keys? 20. JavaScript Madness: Keyboard Eventshttp://unixpapa.com/js/key.html 21. Who Moved My Mouse? 22. Stay cool! Its under control mousedown mouseup mouseclick mousemove 23. Its the mousewheelOr should I call itDOMMouseScroll, Mr. Firefox? 24. Trying to make some sense# of clicksScrolling down?WebKit, wheelDelta/120wheelDeltaIEis negativeFirefox detail/3detail is positive 25. Touchpad scrolling Highly granular All over the place Decide for yourself 26. Let Me Size That For You 27. rollApp File Opener 28. open 29. Beyond Belief 30. Whats the best bullet proofcompletely reliable workseverywhere way to design a block? 31. Thats right image. In PNG* format.* PNG stands for Portable Network Graphics 32. What Do You Choose, Neo? 33. More at http://superuser.com/questions/579216 34. So What?Sooner or later Youll need to do something that yourframework does not support Something in the browser will change beforeyour framework supports it A bug in the framework will bite you 35. Each browser is incompatible with any other browser.W3C darmoyedy? 36. Standards Are Good. I mean really 37. Easy and Consistent Checks for Capabilities function processMouseWheel(event) {var delta = 0;if (!event) { /* For IE */ event = window.event;}Unfortunately, this slide is not sponsored by caniuse.com 38. Meaningful Fallback andDevelopment Strategies Compatibility layers with standard interface WebSockets via Flash Canvas via Flash When browser catches up, throwcompatibility layer away 39. Our Jobs Arent Getting Easier Developers of Blinksay Hi! to you Developers of Servo say Hi! to you too 40. Any questions?Now: and later:@dmalenko dmalenko@rollapp.comwww.dmalenko.org