ネタ以外の何ものでもありませんが、こんなものを作ってみました。→CSSで擬似ブラウザ判別

ソースを見ていただければ一目瞭然かとは思いますが、CSSハックでひたすらdisplay:none;や色指定を上書きしていっているだけで特に目新しい代物ではありません。まあ、作ってみました、程度で（´･ω･`）

editor.jsが更新されたのでカスタムエディタも更新しました。特に目新しい修正は行っていませんが、ルビタグ挿入時の挙動を若干変更し、CSSも微修正しました。

[ファイル1217777345_CustomEditor1-7-5.lzh]

CSSのみでルビを実装するとした時、まあ、一番シンプルな考えをするのであれば、Ruby要素以下、関連のタグに対してスタイルを指定する方法ですね。IEを除けた指定をしておけば、IEでは独自実装のルビ表示が。他はIE6/7では未実装のdisplay:inline-table系を使った指定が使えるので、実に分かりやすい実装が出来ます。

弊害として考えられるのは、オリジナルでRuby要素関連にユーザスタイルシートを当てている場合くらいでしょうが、まあ、そんなにはいないでしょうね。

私が作っているルビCSSは、そこの弊害を回避する一つのアイディア（と呼べるほどのものではないですが）で、Ruby要素に指定するのではなくSPAN要素にクラスを指定して、そのクラスに同じスタイルシートを適用するというやり方。ソースが非常に煩雑になって見づらいことこの上ないのですが、まあ、そこそこ安定します。

ネックは、IE6,7での表示ですね。Ruby要素の独自拡張を実装しているからと言って、display:ruby-baseなんかを実装しているわけではないので、結局別の仕組みでIEでのルビを組まなければなりません。それがまた、スマートにはできないんですよねぇ……。絶対配置を使った非常に安直なやり方です。

両者を比べるなら明らかに前者ではあるんですが、イマイチ踏み切れません。

……というのは建前で。本当は、<ruby><rb title="ruby text">ruby base</rb></ruby>としようかと思ったんですよ。ところが、この書き方だとIE8で動かないんですね。というより、RB要素に一切スタイルが効かない……。そうなると、RUBY要素の中にはRB要素RT要素他ルビ関連しか包含できないので、結局SPAN要素のお出ましというわけです（´д｀）

まあでも、それなりに面白いとは思うんですよねー。IE8だと大量に使うとページがクソ重たくなるので実用性皆無ですけど（笑でも、他のブラウザでは色んな意味で使い勝手が良いです。コピペしてもルビが入ってこないところとか、頑張れば手打ちでも打てるくらいの面倒くささとか(ﾉ∀｀)

結構苦労しましたよー。裏技的なことをやってるおかげでブラウザごとに微妙な挙動が発生するもので。Safariはベーステキスト部にtabel-cellを指定するとルビテキストのセンタリングが出来ないし、IE8は逆にルビ側がtable-captionだとセンタリングが出来ないし、上下のdisplayの設定次第だとSafari落ちるし（笑下table-cell、上table-header-groupだったかな？　謎仕様……。

つか、そもそも生成要素に本当はテーブル関連プロパティは設定できないことになってた気がします。CSS3からOKになりそう、だった筈。ま、動いてるからいいんですけどね（ﾟДﾟ）

サンプルはこちらからどーぞブラウザ側で拡大縮小してもそんなに崩れない、はず。

今回のルビCSSをいじるに当たって、元祖の方も微調整しました。次ページに掲載ィー

追記CSSの修正版があります。

現在IEのみで実装されているルビタグをCSSによって他のブラウザでも再現してしまえ、という企画。実際にルビタグを使うわけではなく、SPAN要素にクラスを指定して実現しているので、CSSハックだらけ・フォント依存の部分がある・HTMLが読みづらくなる、という欠点以外はクリーンな実装だと思います。

/* 
 * [Ruby CSS v2.1]
 *
 * Example    : <span class="ruby"><span class="rb"> [ruby base] </span><span class="rp">《</span><span class="rt"> [ruby text] </span><span class="rp">》</span></span> 
 *
 * CSS Author : Akatsuki Kitamura 
 * Sourses    : http://www.akatsukinishisu.net/itazuragaki/css/use_ruby_style_as_user_stylesheet.html 
 *              http://www.akatsukinishisu.net/itazuragaki/id/ruby_for_mozilla.html
 *  
 * Customize  : BENIT(2008/06/21)
 *
 * OS : Windows XP
 *
 * Browser : Internet Explorer6
 *           Internet Explorer7
 *           Internet Explorer8
 *           Firefox3.0 // and less than
 *           Opera9.5 // and less than
 *           Safari3.1.2 for win // and less than
 *
 * rb == ruby base
 * rt == ruby text
 * rp == ruby parentheses?
 * 
 * Last Updata //2008-6-21// Added the new CSS for Firefox3. 
 *                           Fixed CSS for IE7/8 
 *
 */

/* -+-+-+-+-+-+-[Common CSS]-+-+-+-+-+-+- */
span.ruby {
  font-size: 100%;
  line-height: 2.2;
  text-indent: 0;
  white-space: nowrap;
  margin: 0;
  position: static;
}
span.ruby span.rt {
  font-size: 77%;    /* ruby size */
  line-height: 1.3;
  letter-spacing: 0;
}
span.rp {    /* parentheses for a browser that not support CSS */
  display:none;
}

/* -+-+-+-+-+-+-[For IE7/8]-+-+-+-+-+-+- */

/* IE7 only (not apply IE8) START*/
/*/*/
*:first-child+html span.ruby {
  line-height: 2.3;
  padding: 0 0.2em;
  position: relative;
}
/**/
/*/*/
*:first-child+html body span.ruby span.rt {
  position: absolute;
  top: -1.2em;
  left: 0.2em;
}
/**/
/* IE7 only END*/

/* Common of IE7/8 */
*:first-child+html body span.ruby span.rt {
  font-size: 77%;
}

/* -+-+-+-+-+-+-[For IE6]-+-+-+-+-+-+- */
* html span.ruby {
  line-height: 2.2;
  padding: 0 0.2em;
  position: relative;
}
* html span.ruby span.rt {
  font-size: 62%;
  position: absolute;
  top: -1.0em;
  left: 0.2em;
}

/* -+-+-+-+-+-+-[For IE8, Firefox, Opera and Safari]-+-+-+-+-+-+- */
html>/**/body span.ruby {
  display : inline-table;
  line-height : 1;
  text-align : center;
  padding : 0;
}

/* Adjustment of each browser */
html>/**/body span.ruby                          { vertical-align : -28%; } /* Firefox2.x */
html>/**/body span.ruby , x:-moz-broken          { vertical-align : 115%; } /* Firefox3.0 */
html[lang*=""]>/**/body span.ruby                { vertical-align : 125%; } /* Opera9.5 (, IE8 and Safari) */
*:first-child+html/**/>body span.ruby            { margin-bottom: -4px; vertical-align: baseline; } /* IE8 */
html[lang*=""]:not(:nth-child(n)) body span.ruby { vertical-align: -15%; } /* Safari3.1.2 */

html>/**/body span.ruby > span.rb {
  display : table-row-group;
  line-height : 1.2;
}
html>/**/body span.ruby > span.rt {
  display : table-header-group;
}

　六の宮の姫君の父は、古い宮腹《みやばら》の生れだつた。が、時勢にも遅れ勝ちな、昔気質《むかしかたぎ》の人だつたから、官も兵部大輔《ひやうぶのたいふ》より昇らなかつた。姫君はさう云ふ父母《ちちはは》と一しよに、六の宮のほとりにある、木高《こだか》い屋形《やかた》に住まつてゐた。六の宮の姫君と云ふのは、その土地の名前に拠《よ》つたのだつた。

図書カード：六の宮の姫君　-　芥川龍之介（青空文庫）

　六の宮の姫君の父は、古い<span class="ruby"><span class="rb">宮腹</span><span class="rp">《</span><span class="rt">みやばら</span><span class="rp">》</span></span>の生れだつた。が、時勢にも遅れ勝ちな、<span class="ruby"><span class="rb">昔気質</span><span class="rp">《</span><span class="rt">むかしかたぎ</span><span class="rp">》</span></span>の人だつたから、官も<span class="ruby"><span class="rb">兵部大輔</span><span class="rp">《</span><span class="rt">ひやうぶのたいふ</span><span class="rp">》</span></span>より昇らなかつた。姫君はさう云ふ<span class="ruby"><span class="rb">父母</span><span class="rp">《</span><span class="rt">ちちはは</span><span class="rp">》</span></span>と一しよに、六の宮のほとりにある、<span class="ruby"><span class="rb">木高</span><span class="rp">《</span><span class="rt">こだか</span><span class="rp">》</span></span>い<span class="ruby"><span class="rb">屋形</span><span class="rp">《</span><span class="rt">やかた</span><span class="rp">》</span></span>に住まつてゐた。六の宮の姫君と云ふのは、その土地の名前に<span class="ruby"><span class="rb">拠</span><span class="rp">《</span><span class="rt">よ</span><span class="rp">》</span></span>つたのだつた。

Firefox3で微妙に2とCSSレンダリングの仕方に違うところがあって、でもハックが見つからなくて困っていたのですが、発見したのでメモメモ。

Firefox 1.0, 1.5, 3.0 用の CSS ハック

しかし、グループ化したセレクタ群の中に、Web ブラウザが未対応のセレクタが一つでも含まれている場合、グループ化した別のセレクタも無効化されてしまい、グループ化した全てのスタイルが適用されなくなります。