As I mentioned before, I don't have access to a modern version of Safari and when I pass an Apple store, I try to play with it and the site. Something always pops up to bite me.
This time it was an improved version of my Hebrew keyboard, that I made into a popup, absolutely-positioned
<div> instead of a separate page, using sprites for the keyboard button rollovers. Nice and elegant, but it means loading the <style> element with all those a:hover {background: 0 -150px}'s via Ajax as well. Just putting a <style> element in the loaded <div> worked fine in IE and Firefox, but today Safari wouldn't show any styles. Turns out Safari is technically right; <style>'s go in the <head>, not the middle of the <body>. That's a rule that doesn't make any sense, any more than requiring <script> elements to be limited to the <head> would. But such are the rules.
I looked up a few ways to include a <style> element, but realized there's an easier way; I split the style into its own stylesheet and added a line to Javascript:
$('head').append('<link type="text/css" href="/css/kb.css" rel="stylesheet" >');
before the
$('<div id="keyboard-holder">').insertAfter('#q').load('/inc/keyboard.html'); // load via Ajax
and now the style loads dynamically and easily.
Luckily, jQuery handles identifying and executing <script> elements in Ajax'ed code, so I don't have to pull that out. 
Leave a Reply