Everyone's familiar with menu bars, but to illustrate modal popups we have a handy demo here. My issue has always been browser compatibility; I can come up with good code on my own, but it fails when taking into account Internet Explorer, Safari on Windows, Opera, and so on.
The Gibson Research Corporation's Script-Free Pure-CSS Menuing System was a godsend to me in this regard. I experimented with it on IE's Emulator tool; while it's true it looks ok on the emulated IE 5, the hover over submenus didn't work. Also, when I replaced the images being used for the first-order menu elements with text and styling, in IE 5 the menu reordered itself vertically. I'm therefore more comfortable with saying my alters result in code that's IE 7-applicable.
The site that I got the demo from became the basis for the modal system. It was very simple code, except that it used a lot of features older versions of IE do not support. So the gradients, border-radius, rgba opacity, and box-shadows had to go. One could presumably use hacks to get the same effects on IE, but I've tried all of them and have never gotten them to work. Besides, we need to have a handle on how fast the page runs - adding too many files would be awful on the load time.
For radial gradient effects or large linear gradients, I usually take a screenshot of the gradient on a browser that supports it. I then crop everything out, leaving only a thin sliver of the gradient. For small gradients, I use online gradient image creation tools; then we just specify on the CSS to repeat the image as a background image and we're done. That method is also how I got around the rgba opacity not being supported in old IE; in this case I use a PNG file at a certain percentage transparency (usually plain black) for the background.
Another thing I noticed is that Safari on Windows does not give a nice calendar when using Formalize CSS; I would recommend instead using jQuery's Datepicker.
No comments:
Post a Comment