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.