This document discusses various challenges with browser compatibility and standards compliance when working with technologies like JavaScript, CSS, and HTML. It explores issues with window sizing, mouse and keyboard events, scrolling, and more across different browsers. It emphasizes that browsers continue to evolve and change, so developers need strategies like fallback capabilities and compatibility layers to account for inconsistencies.

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

2. Prelude

4. OpenOffice.org on iPad

5. Open. Window. Please.

6. Unscientific JavaScript
Tutorials Survey
alert
window.open
0% 20% 40% 60% 80% 100% 120%

7. Unscientific JavaScript
Tutorials Survey
A little more than always
alert
window.open
0% 20% 40% 60%
A little less than always
80% 100% 120%

8. window.open(‘http://new.window.url’,
‘_blank’,
‘width=W, height=H’)

9. What’s important for us?
1. It has to be a window
2. Size has to match, what’s on the server
3. Should be able to resize to catch up with
the server

10. What can happen as a result of this call?
window.open(‘http://new.window.url’,
‘_blank’,
‘width=383, height=92’)

11. Nothing Happens

12. Nothing Happens
…unless you are in Chrome
kind of
New window is actually created, DOM is
loaded, but window remains hidden and
window.outerWidth == 0

13. Window Sized 383x92 Opens Correctly!

14. Window Sized 383x92 Opens Correctly!
… and they lived happily ever after.

15. Window Sized 383x92 Opens Correctly
…unless 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…

16. Window Sized 383x92 Opens Correctly
…unless 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…

18. Wait! Aren’t all those browsers
“standards compliant”?

19. 5.1.6 Browser Context Names
… a new browsing context is
being requested, and what
happens depends on the user
agent's configuration and/or
abilities.
More at http://www.w3.org/TR/html5/browsers.html

20. Oh, You Want to Read Some
Keys?

21. Oh! You tell me
you want to read
some keys?

22. JavaScript Madness:
Keyboard Events
http://unixpapa.com/js/key.html

23. Who Moved My Mouse?

24. Stay cool! It’s under control
• mousedown
• mouseup
• mouseclick
• mousemove

25. It’s the mousewheel
Or should I call it
DOMMouseScroll, Mr. Firefox?

26. Trying to make some sense
# of “clicks” Scrolling down?
WebKit, wheelDelta/120 wheelDelta
IE is negative
Firefox detail/3 detail
is positive

27. Touchpad scrolling
• Highly granular
• All over the place
• Decide for yourself

28. Let Me Size That For You

29. rollApp File Opener

30. open

31. Beyond Belief

32. What’s the best bullet proof
completely reliable “works
everywhere” way to design a block?

33. That’s right – image.
In PNG* format.
* PNG stands for Portable Network Graphics

34. What Do You Choose, Neo?

35. More at http://superuser.com/questions/579216

36. So What?
Sooner or later
• You’ll need to do something that your
framework does not support
• Something in the browser will change before
your framework supports it
• A bug in the framework will bite you

37. Each browser is incompatible with
any other browser.
W3C darmoyedy?

39. Standards Are Good. I mean “really”

40. 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

41. Meaningful Fallback and
Development Strategies
• Compatibility layers with standard interface
– WebSockets via Flash
– Canvas via Flash
• When browser catches up, throw
compatibility layer away

42. Our Jobs Aren't Getting Easier
Developers of Blink
say “Hi!” to you
Developers of Servo
say “Hi!” to you too

44. Any questions?
Now:
and later:
@dmalenko
dmalenko@rollapp.com
www.dmalenko.org