コーディングをしていて、少しだけ複雑なCSSのしくみのリストを作っていた。
角丸で尚且つタブのようになっているものをテキストで表示できるようにするものである。

普通に表示する分には、

Windows：IE6、IE7、Firefox3、Opera9.6、Safari
MacOS X：Safari、Firefox2、Opera9.6

以上のブラウザできっちり表示することが出来、文字拡大やズーム等の機能にも対応出来ていた、が...
MacSafariの文字拡大の場合のみ1pxずれてしまう!!!
通常時はちゃんと表示されているのに、拡大時のみずれる!!!

出来ればハックは使いたくなかったが、もうこれは止むを得ない、Safariのみに適用されるハックを使うしか...
ところが、Safariのみに効くと言われていた*html[xmlns*=""] body:last-childやbody:first-of-typeやhtml:66irst-childなどのハックがOpera（9.6）にも効いてしまうという事実

しかも

 
CSSの記述の際、イメージを呼び出したり、ファイルをインポートしたりする時に、そのファイル名はダブルクォーテーションで囲む。
当たり前のようにダブルクォーテーションを利用していたのだが、この度、気付いたことがあった。

「今更？！」という突っ込みもありそうですがｗ

この囲み、シングルクォーテーションを使っている人もいるようなので（WordpressのデフォルトテーマのCSSがそうだった）試しに使ってみた。
まぁ、特に不具合もないだろう。。。そう思っていた。
だって！Wordpressのデフォルトテーマで利用されているCSSの記述ですもの！

ところが。。。

 
ここまで長い道のりだった。
いや、いろんなサイトの説明を見る限り、そんなに難しいことではなかったはずなんだけど、実装すると、これがまた微妙だったのだ。

IE6以前は、透過pngに対応していなかった。
透過pngを表示しようとすると、その透過部分がグレー色で表示されてしまうのだ。
マジで使えねー難題だ。

オイラのサイトには、実は今のデザインのシンボルとも思っている「スカル」が右上に存在しているのだ。
IE6以前以外のブラウザには、この「スカル」は存在していたのだが、IE6以前のブラウザには、見えない存在だった。

最初は拾ってきたjavascriptで表示させようと思っていたのだが、これも一度グレー色のついた画像が表示された後に、透過されるという挙動の一部始終が見えてしまっていたため、スマートじゃないと考え、断念。
次に、Microsoftのサイトに記載されていたCSSの記述を使ってみた。
でもこの方法、invalid。

...しかし、思ったように表示されない！
ってか、オイラの記述が悪いのか？
で、気付いたのが、一度ページがその画像を読み込めば、表示されるのだ。
だから別のページへ移動したり、リロードしたりすると出る...というこれまた難儀な...

(*ﾟДﾟ)つﾐ匚___　あﾞ･･･
じゃぁプリロードさせればいいじゃなーい！と思い、しかもHTMLファイルをいじるのではなく、CSSで。
などと考えていたら、display:noneだったりwidthとheightを0指定だったりと、あんまり使いたくない方法ばかりだ。

なので、見えないところに置いてみた。
結構間抜けだがまぁいいか。えへへ。

 
今日初めて知ったんだけどね。

...Operaって「letter-spacing:-1000em;」って記述しても、テキストが隠れてくれないの。
text-indentで隠せばいいじゃんってところなんだけど、以前エントリしたCSSで背景画像を印刷させる方法を利用するために使いたかったのよね。
ちきしょ。

んで、どうするか考えた。
考えた挙句...面倒だが、スタイルを画面用と印刷用に分ける。これしかない。
と言うか、最初から【印刷用のスタイル】と考えておくべきだったのかもしれない。

画面用には背景（background）で、印刷用にはリストイメージ（list-style-image）を利用する。
...とゆーことだ。

 
ま、今更ですけどね。
いや考え始めたのはもっとずっと前から。

CSSで「text-indent: -9999px」を使ったり、オイラは使わないけど「display: none」を使っての画像置換は、『SEOスパムになるのではないか？』という記事を、いろんなサイトとかブログとかで見かけるからである。

。。。といっても、そのエントリ時期は最近ではない。
去年とか去年とか去年とか。。。主に去年ｗ

でも、いろんなところで書いてある通り、一概に検索ロボットにスパム扱いされると決まっている訳ではないらしい。
とゆーか、「スパム扱いに決まり!!」と明言されている訳ではないようだぜ。
だが、どのようにGoogleが解釈してくれるかはGoogle次第かもね。


以下は「Googleウェブマスター向けヘルプセンター」より抜粋してみました。