たまに18歳未満の人や心臓の弱い人にはお勧めできない情報が含まれることもあるかもしれない、甘くなくて酸っぱくてしょっぱいチラシの裏。RSSによる簡単な更新情報を利用したりすると、ハッピーになるかも知れませんしそうでないかも知れません。
の動向はもえじら組ブログで。
宣伝。日経LinuxにてLinuxの基礎?を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能!
テキストシャドウに、userContent.css内の指定を読む機能を加えた。圧倒的多数のサイトではtext-shadowはまだまだ使われていないけれども、ユーザースタイルシートを使えば色々遊べるよ、と。
といっても全サイトで同じ色の影しか指定できない、サイトごとにいちいち影の色を指定しなきゃいけない、なんてのじゃあとてもじゃないけど使ってらんないので、userContent.css内の指定のみ、色が無指定の時はCSS3の仕様を無視して自動的にそれっぽい影の色を適用するようにしてみた。例えばh1, h2, h3, h4, h5, h6 { text-shadow: 0.2em 0.2em 0.2em; }
とかuserContent.cssに書いとけば、色んなサイトで影が付いて楽しくなるかもしれません。
ちなみに、XPCOMを使ってもuserChrome.cssやuserContent.cssから生成されたスタイルシートオブジェクトには絶対にアクセスできない。なので今回は、新規に空のドキュメントを生成し、そこにxml-stylesheet処理命令でuserContent.cssを読み込ませて、生成されたスタイルシートオブジェクトを参照する、という裏技を使っている。
テキストシャドウを作って以降、何かの機会に見るページで不意に影付きテキストがあったりして、「ああ、今まで僕は『古いブラウザの人は最新のWeb技術の恩恵を受けられなくてかわいそうだなあ』とか思ってたけど、いつの間にか、Firefoxユーザの自分自身の方が『最新の技術の恩恵を受けられずにみすぼらしいページしか見れずにいるかわいそうな人』になっていたんだ……」と切なくなる。(いやまあtext-shadowそのものは10年近く前の仕様ですけどね……)
Bugzillaの方のコメントにも書かれてるけど、テキストシャドウを公開した後で、2年以上前に同じようなことをやってた人がいたことを知った。いやぁ、薄々「既出なんじゃね?」とは思ってはいたんですけどね。
一応、対応してる機能(CSSのセレクタをかなりまじめに解釈してる)や使い勝手(XBLを使ってるので影付きテキストのコピペで困らない、アドオンだから自動アップデートできる、など)の面でアドバンテージはあると思うけど……まあ追加のコメントにも書いたように、頑張ればそれもGreasemonkeyスクリプトで実現は可能そうではあるわけで、アドオン嫌いグリモン好きというタイプの人は頑張ってみるのもいいかもね。
テキストシャドウは原理上、影付きのテキストをコピーしようとした時に、影のために使っているダミーテキストまでコピーされてしまうのが大きな問題だった。フォーカスできなくしたり選択できなくしたりすることはできても、コピーの対象から外すということは、普通にやる限りはどう頑張ってもできない。
で、これをどうやって解決したのかという話なんだけど。
以前XHTMLルビサポートを作った時に、略語のフルスペルをルビで表示するという機能も持たせていて、そうやって表示したフルスペルはどう頑張ってもコピーできないという現象が起こっていたんだけれども、これがヒントになった。
略語のフルスペルの表示のためにルビサポートではバインディングを使っていて、どうやらバインディングで埋め込まれた匿名内容の中のテキストノードは、触れることもコピーすることもできないようだった。そして、XBLの<children/>
要素の位置に配置された元々の子要素や子のテキストノードについては、通常通りアクセスできる。
ということは、逆に言えば、コピーの対象にさせたくないテキストはバインディングを使って匿名内容の中に入れてやればよいというわけだ。
ダイナミック疑似クラスの問題はまだ残っているとはいえ、もっとも致命的な問題はこうして解決できたので、やっと胸を張って「Firefoxをtext-shadowに対応させました」と言えるようになったと思う。
にゃるら、さんのselector.jsをベースに色々やってたらそれっぽい物ができたので、氏に敬意を表しselector.js相当の部分をMITライセンスで公開しときます。冒頭のコメントを見ての通りですが、元のselector.jsで対応されていなかったCSS3のセレクタをだいぶサポートしてます。正しく動かない事があるかもしれないのでその時はフィードバックください。
改造版の一番の特徴は、document.convertSelectorToXPath()
ですね。CSSのセレクタを文字列で渡すと、対応するXPath式を生成できる場合はそれを返します。ダイナミック疑似クラス等、XPath式では表現できない内容の時は空文字を返します。
var nodes = document.getElementsBySelector('li:nth-child(even)');
for (var i in nodes)
{
nodes[i].style.backgroundColor = 'gray';
}
var expression = document.convertSelectorToXPath('p:not(li > *)');
// → /descendant::*[local-name() = "p" or local-name() = "P"][not(self::*/parent::*[local-name() = "li" or local-name() = "LI"])]
silhouettePseudElementsAndClasses
がtrue
の時は、:first-line
疑似要素や:first-letter
疑似要素など、無茶すればどうにか再現可能な物については、勝手に要素を生成したりclass
を設定したりしてそれを使ったXPath式を返します。document.evaluate()
を多用してるので、DOM3 XPathを実装したブラウザでしか動かんです。というか多分Gecko専用? 他のブラウザでも動いたら教えてください。:nth-child()
とかは、カンマ区切りのセレクタのリストにそれがあるだけで、その宣言ブロックが丸ごと無視される模様です。(豆知識)テキストシャドウでの影付けの基本原理は以下の通り。
以下の解説を図を使って書き直しました。
テキストシャドウを地道に改良し続けている。
Geckoもtext-shadowに対応してくれ!というバグにこれを貼り付けて煽ってみようかと思ったら、貼られていたテストケースで::first-line疑似要素が使われてて表示できなくてこりゃまずいと思ったんで、元々対応する気の無かった疑似要素と疑似クラスにまで頑張って対応してみた。疑似クラスについてはGeckoすら対応してない物にまで対応してたりして。
Text Shadow。名前の通り、CSS3のtext-shadowを無理矢理再現するインチキ拡張機能。
以下は原理的にどうしようもない問題。
以下はめんどくさいから実装をさぼってる部分。そのうちどうにかするかもしれないし、しないかもしれない。
セレクタから要素ノードを選択する処理は、selector.jsを丸パクリ。でも組み込んでみたら予想以上にまともに動いてくれなかったので、半泣きになりながら修正してやっとちゃんと使えるようにした。
CSS2からCSS3に移ったtext-shadowは、どうやらFirefox 3ではサポートされない事がほとんど確定したようだ。これでモダンブラウザでドロップシャドウを実現できないのはFirefoxだけになったな(Opera 10とSafariは対応、IEもfilterを使えば可能)。
ということで拡張機能でtext-shadowを実現するという可能性を勝手に模索してみる事にしたよ。
アルゴリズムとしては以前須藤さんがcairoで不透明度を下げた物をひたすらずらして並べるというアレです。
今日はCSS Naked Dayという日だそうなので、このサイトもCSSを無効化してみました。
HTMLの方を書き換えるのがめんどくさかったので、スタイルシートの方を空のファイルに入れ換えただけですが。
しかもフィードリーダで見てる人には違いが分からない罠。
What happened to the design?
To know more about why styles are disabled on this website visit the Annual CSS Naked Day website for more information.
(訳:デザインに一体何が起こったんだ? このサイトで何故スタイルが無効になっているのかについて詳しい理由を知りたければ、年に一度のCSS素っ裸デーのサイトを見るがいいYO!)
普段何気なくスルーしているスタイルシートを敢えて無効にすることによってWeb標準技術というものをプロモートする、というのがこのイベントの趣旨だそうです。