Home / Diary / タグ: css
・・・のCSSを使えたらいいなぁ。
という思いがあってAutoHotKeyにてproxomitron用のフィルタに出力するスクリプトを作っていたのが去年のこと（だったと思う）。
しかし、最近はNo More ScriptsのおかげでJavaScriptが常に有効になっているので、UserJavaScriptで出力してしまってもいいな。と考えるようになったので、Rubyに移植してみた。
設定ファイルにstylish.rdfのフルパスとOperaのUserJavaScriptを保存しているフォルダを指定すれば準備完了。exeを実行すればたちまち大量のスタイルを組み込んだUserJavaScriptが作成される。
その他詳細は同梱のマニュアル参照。
注意
他人が書いたCSSはあまり取り込んでいないので、妙なCSSを書いていると出力されないかも。
メモ
Ruby1.8xでは正規表現で戻り読みがサポートされていないが、1.9以降は標準で鬼車搭載により戻り読みがサポートされているようだ。
Info
- 投稿日
- 2008年5月13日
- タグ
- css、opera、userjs
- このエントリの固定リンク
- http://bmky.net/diary/log/1761.html
- ブックマークに追加する
-
- コメント
2008
0513
Tagscssoperauserjs
偏執的な書き方はともかく、Stylishを使って記述から投稿までを解説したようなサイトは見たことがないので、こちらも覚書として自分の手法を紹介する。
なお、ここから先は偏執的ではない。
Stylish専用プロファイルの作成
Firefoxに導入する拡張を絞り、広告ブロック等も行わないようにすることでwebページへの影響を最小限に抑える。これにより素のwebページを弄ることができるようになるので、ユーザースタイルシートを導入した際の他ユーザーとの差異を小さくすることができる。
別プロファイルを起動できるようにする。
複数の Firefox を同時起動するを参考に、
C:\Firefox\firefox.exe -no-remote -P "Stylish"
このような感じでショートカットを作成。初回はプロファイル編集ダイアログが表れるので新規プロファイルを作成する。間違っても通常使うプロファイルに設定してはいけない。
右クリックメニューからStylish専用プロファイルを起動する
このままでは、「ユーザースタイルシートを作成したいページのURLをコピー⇒専用プロファイル起動⇒URLをペースト⇒開く」といった手順が必要になるので、簡略化するべくJSActionsを利用して、右クリックから起動できるようにする。
JSActionsの導入については三軒隣の斜め向かい:JavaScript Actionsにて詳しく説明されているので、参考にすると良い。
無事にフォルダの設定まで完了したのなら、以下のスクリプトを「Stylish専用プロファイルで開く.js」とでも名前をつけてscript_set/globalに保存する。
// 現在のページまたはリンク先をStylish専用プロファイルで開く
jsa_execStylishProfile( );
function jsa_execStylishProfile(){
// Firefoxのパス
var fxpath = "D:\\Firefox\\firefox.exe";
// プロファイル名
var prof = "Stylish"
var docURL = ( _jsaCScript.context.onLink )
? _jsaCScript.context.link.href
: window.location;
_jsaCScript.exec( fxpath, ' -no-remote -P ' + prof + ' ' + docURL );
}
Firefoxを再起動後、適当なページで右クリックメニューから「Actions/Stylish専用プロファイルで開く」と選択すれば、見事に専用プロファイルが起動するようになる。
好みのテキストエディタでスタイルを書く
StylishのスタイルシートエディタはFirefox標準のtextareaなので非常に使いづらい。そこでuserChrome.jsを利用して、好みのテキストエディタで編集できるようにする。導入についてはuserChrome.js - Mozilla Firefox まとめサイトを参照してほしい。
userChrome.jsを導入したら、次にuserChrome.jsの話題8 Stylishのエディットウインドウに外部エディタ起動ボタンを追加する(改1)を参考にstylish0.5_edit.uc.jsをchromeフォルダに保存する。
うまくいけば、StylishのスタイルエディタにEditerというボタンが表れるので、これを押すことで外部エディタが起動するようになる。
webページをキャプチャする
実際に作成したユーザースタイルシートをuserstyles.orgに投稿する場合、スクリーンショットがあると導入の指針になるので、可能なら作成していく。
webページのキャプチャにはFirefoxの拡張の一つ、Screengrab!を利用する。
Screengrab!を導入すると、ステータスバーのアイコンからwebページのキャプチャが行えるようになる。saveは画像ファイルとして保存、copyはクリップボードに格納する。それぞれのサブメニューは以下のとおり。
- Complete Page/Frame…
- スクロール領域も含めた、ページの全てをキャプチャする
- Visible Portion…
- 現在表示している部分のみをキャプチャする
- Selection…
- 選択した部分をキャプチャする
チートシートを用意する
CSS3 セレクタ チートシート
CSS3のセレクタは強力なものが多く、その幾つかはFirefox2.xでも利用可能。こちらのチートシートにはFirefoxだけでなくOperaの対応状況も載っているので、両ブラウザで使えるユーザースタイルシートを作成する際にそばに置いておくと重宝する。
その他拡張機能の導入
- Firebug
- 消したい要素をクリック一つで判別できるだけでなく、CSSがどのように適用されているかも知ることができる。Stylishとの相性はグンバツ。神拡張。
- Web Developer
- 必須というわけでは無いが、機能の一つにウインドウを指定サイズでリサイズできるというものがあるので。他で代用できるなら入れる必要はあまり無い。
その他、webページに影響を与えない拡張なら必要最小限に抑えて導入していく。
ユーザースタイルシートのバックアップ
プロファイルフォルダ内にあるstylish.rdfがStylishの本体なので、コピーするなりしておく。
userstyles.orgに投稿する際の注意
- 投稿したスタイルは削除できない
- 投稿したスタイルの名前は50byteまで
- 他とする重複タイトルは登録不可能
- スクリーンショットは75KByte以下且つGIFかPNGのみ
- スクリーンショットは横幅が300pxになるまで縮小される
- Editページのobsoletion formから投稿したユーザースタイルシートを検索に引っかからなくなるようにできる
画像の一括リサイズ
キャプチャした画像は75KB以下でないとアップロードできない上、横幅が300px以上だとサーバーで汚く縮小されてしまうので、GIMPを利用して一括縮小してしまう。
一括変換プラグインで一度に複数画像を処理するを参考にプラグインを導入すれば、容易に一括リサイズが可能になる。
Info
- 投稿日
- 2008年4月20日
- タグ
- css、firefox
- このエントリの固定リンク
- http://bmky.net/diary/log/1755.html
- ブックマークに追加する
-
- コメント
2008
0420
Tagscssfirefox
StylishとはFirefoxの拡張のひとつで、ユーザースタイルシートの作成と管理を助けてくれるもの。
userstyles.orgには大量のユーザースタイルシートが投稿されていて、Stylishを導入しているなら現在開いているサイトのユーザースタイルシートが無いか確認したりすることができる。
このStylishを使って去年あたりから細々とユーザースタイルシートを投稿してきたので、ここらで自分流のスタイルシートの書き方とかについていろいろまとめてみようと思った。
なお、一度でも使ったことがあるなら分かるが、かなり偏執的なレイアウトにしてしまうので、合わない人にはとことん合わないということを注意しておきたい。
どのようなサイトに向けて作成するか
基本的には訪問頻度と文章を読む上でのレイアウトの酷さ。レイアウトの酷さには以下の点が挙げられる。
- 無駄にデカいサイトロゴ
- サイドバーが多い
- サイドバーが縦に長い
- 画像が多い
- 文字が小さい
- 行間が狭い
- 文字間が狭い
- リンクに下線が引かれていない
- 適度に改行されていない
- 段落と段落の間が詰まっている
- 数世代先の色使い
などなど。そこまでレイアウトが酷いサイトにはそうそう出会わないが、文字が小さいサイトが非常に多いので、今まで作成したユーザースタイルシートの大半は文字を大きくするついでにレイアウトも変えてしまったサイトだ。
どのようなレイアウトにするか
可読性と速さを追求したレイアウトにしたい。
まずは可読性。自分の中で理想的なのが、スタイルシートを全く適用させない状態で本文の幅を40文字前後にして中央寄せにしたもの。さらに行間と文字間を広げ、文字も大きくすることで可読性を向上させる。文字を大きくするのは単に視力が弱いから。
次に速さ。可能な限り広告の画像やコンテンツの背景画像等を極力読み込まないようにし、1カラムのシンプルなレイアウトに仕上げる。こうすることでブラウザのレンダリング負荷を下げ、無駄なファイルリクエストを減らし、1秒でも速くページの読込と表示が完了するようにする。
読みやすいレイアウトの基礎作り
body {
font-size : 112.5% !important; /* 18px */
margin : 0 auto !important; /* 中央寄せ */
padding : 0 !important;
background-color : #f0f0f0 !important;
color : #111 !important;
width : 40em !important; /* 最大幅40文字分 */
max-width : 100% !important; /* 横スクロールバーが出ないように */
border : 0 !important;
}
フォントサイズを大きくし、文章の幅を最大40文字に。背景色と前景色を読みやすい色に固定する。
* {
background-image : none !important;
float : none !important;
text-align : left !important;
letter-spacing : 1px !important;
line-height : 1.5 !important;
min-width : 0 !important;
text-indent : 0 !important;
white-space : normal !important;
}
背景画像は文章の邪魔になることが多いので消去。floatによる段組レイアウトも必要無し。文字間と行間を広げることで可読性を上昇させる。
あらゆるレイアウトを崩す
#container
, #container div {
font-size : 100% !important;
position : static !important;
background-color : transparent !important;
width : auto !important;
height : auto !important;
border : 0 !important;
margin : 0 !important;
padding : 0 !important;
}
それなりに構造がまともなサイトであれば、レイアウトはdivにclassやidを振ってCSSで調整しているのが大半なので、大元のノード及び子孫全てのdivに対してこのスタイルを適用することで、ほとんどのサイトで1カラム化が完了する。
最後に調整
#container * {
font-size : 100% !important;
position : static !important;
background-color : transparent !important;
width : auto !important;
height : auto !important;
}
グローバルセレクタだけでは優先順位の関係上適用されなかったもの（言い換えれば、サイトオーナー側でよく設定されているもの）を、今度は大本のノードの子孫全てというセレクタで再設定する。これでほとんどのサイトは陥落する。
本当はグローバルセレクタでレイアウトを一気に設定したいが、そうするとFirebugでの表示に不具合が生じるので、仕方なくこのような形になっている。
上記だけでも多くのサイトが理想のレイアウトに近くなるが、いくつか邪魔な要素が残るはずなので、classやidを指定して消していく。これらの作業は大体10分前後で完了する。
こうして完成したユーザースタイルシート群は「DestroyAllLayouts」シリーズと名付けることにした。ネーミングに関しては、デストロイオールヒューマンズというゲームタイトルの語呂が良かので拝借した記憶がある。
なんでもかんでも消せばいいと思っているのか？
最近のエントリ一覧や関連のあるエントリ一覧は残したいと思っているが、サイドバーに組み込まれていたり、残すことで他の必要ない要素も残さなければならないようなサイトは泣く泣く消している。
何が必要かは個人によって差があるが、以下についてはできるだけ残したいと思っている。
- サイトロゴ兼トップページへのリンク
- 前後の記事へのリンク
- コメント
- 最近のエントリ
- 関連のあるエントリ
崩せないサイトもある
tableレイアウトを多用していたり、そもそもHTMLが破綻しているようなサイト。数年以上前からサイトに手を加えずにそのまま運営している羅列方ニュースサイト等に多い。
このようなサイトはCSS3のセレクタをもってしても通用しない構造をしていたりするので満足にレイアウトを変更できない。隣接セレクタを利用した力技でなんとか対処しているのが現状。
mixiにいたっては心が折れた。
作成したユーザースタイルシート
下記リンクからどうぞ。OperaでもUserJavaScriptとして利用できるが、対応しているセレクタの関係上、うまく適用されないことがたまにある。
まだまだ試行錯誤の段階なので、上記テンプレートはユーザースタイルシートを作成する度に少しずつバージョンアップを重ねている。
そのため、初期に作成したものと最近のものでは仕上がりがかなり違うので、暇を見て修正している最中だ。もし、インストールしたユーザースタイルシートがおかしいと思ったら、しばらく経ってからインストールし直すと正常に動作するかもしれない。
suzusaki | userstyles.org
Info
- 投稿日
- 2008年4月20日
- タグ
- css、firefox
- このエントリの固定リンク
- http://bmky.net/diary/log/1754.html
- ブックマークに追加する
-
- コメント
2008
0420
Tagscssfirefox
再生エリアの上になんか出てるー！？
#flvplayer {
position : absolute;
top : -101px;
left : -7px;
}
#WATCHHEADER {
position : absolute;
top : 460px;
}
これをテキストとして保存、niconico.cssとでも名づけてユーザーCSSとして使うといいだろう。
視聴補助スクリプトのほうにも一応反映しといたが、ユーザーCSSにしといたほうが何かと好都合。
ついでなんで実装しわすれてたF5キャンセラーキャンセラーも実装しといた。
Info
- 投稿日
- 2007年6月18日
- タグ
- css、opera
- このエントリの固定リンク
- http://bmky.net/diary/log/1539.html
- ブックマークに追加する
-
- コメント
2007
0618
Tagscssopera
FirefoxにはStylishというユーザースタイルシートの管理を容易にする拡張が存在する。
これを活用すると、全てのWebサイトを自分好みに調整できるようになる。使ったことがある人にしかわからないが、あまりにも便利すぎて笑いが止まらない。
さらに、StylishとFirebugを組み合わせると、レジェンダリーな構造のWebサイトでさえも5分で裸にひん剥けるので重宝している。
んが、これはあくまでもFirefox用。stylishはどうしようもないが、CSSだけでもOperaで使えるようにできないだろうか。
・・・じゃあ、移植しちまおう。まるっと。
というわけで、stylishで管理しているCSSをOpera用に書き出すスクリプトを試しに作成した。
opelish.ahk
作成した・・・のはいいんだが、問題が。
stylishはCSSをrdfにまとめて保存しているので、そこからurlとcssを地味に抜き出して書き出す。
FirefoxはどのページにCSSを適用させるかを、ドメイン、URL完全マッチ、URL部分マッチの3タイプで選べるが、Operaの場合、ユーザーCSSはドメインまでしか指定できない。
だからといってユーザースクリプトとして書き出すと、確かに好きなページに適用させることが可能になるが、適用されるまでにタイムラグが発生するだけでなく、ページのスクリプトを無効にしているとそもそも動作すらしない。
常にスクリプトをONにしているのなら、あまり問題では無いんだが、常にOFFにしている身としては辛い。
これ以上を望むとなるとproxomitron等と連携する必要がでてくる。できればOpera内で解決したいんだが・・・どうすんべ。
なお、このスクリプトは、とりあえずでっちあげただけの試作品なので、rdfのパースがいけてなかったり、Firefoxでしか適用されないプロパティを放置するなどといった不具合というか手抜きが存在する。登録しているCSS次第では出力すらできない可能性があるので注意してもらいたい。
Info
- 投稿日
- 2007年5月16日
- タグ
- ahk、css、opera
- このエントリの固定リンク
- http://bmky.net/diary/log/1534.html
- ブックマークに追加する
-
- コメント
2007
0516
Tagsahkcssopera
以前のエントリでheight:100%がよろしくないのでposition:fixedを使うようにしたいが、IE6は対応していない。ではどうするか。
幸か不幸か当サイトのIEを利用した閲覧者の多くがJavaScriptを有効にしているようなのでCSS Expressionという、CSS内でJavaScriptを使えるというIE限定のウル技を使うことにした。
expression() のまとめ
このサイトを参考に以下のように記述。
body {
filter : expression('');
}
#navi {
position : expression( 'absolute' );
top : expression( body.scrollTop + 10 + 'px' );
}
bodyのやつはチラつき防止だそうで、見事に固定された。もしJavaScript無効なら1カラムで表示。うむ、これでいこう！
・・・と思ったが、また落とし穴が。IE6はheight:100%だろうがexpressionだろうが、要素を固定すると非常にCPUに負荷がかかる。3GHzとかのハイエンドクラスの人は気にならないかもしれないが、ミドルやや下なPCだとかなりもっさりっしゅ。
ってか何故に重いのだ？ 右側200pxは再描画する必要無いんだから軽くならね？ って、それはWindowsがやることでブラウザの中の人とはまた別か。んでIE6は無駄な処理が多いと。
さらにマズいことに、このサイトで一番使われているブラウザがIE6で全体の8割。いつぞやから始まる強制IE7化が始まっても減るのは4割程度か？ 無視できる数ではない。
あー、レンダリングエンジンが古いのはどうしようもないよな。IE7はしっかり改良されてるから固定しようがFirefoxと同程度なんで全然問題無いんだがなぁ。IE6以下専用でサイドを固定しないレイアウト作るしかないのか。
カドゥケウスZ 2つの超執刀 -攻略術式集-
レイアウト迷走中。一応進展はしてるけど。（見た目はほとんど変わってない）
Info
- 投稿日
- 2007年1月2日
- タグ
- css
- このエントリの固定リンク
- http://bmky.net/diary/log/1499.html
- ブックマークに追加する
-
- コメント
2007
0102
Tagscss
まずった。
Opera for Wii（以下Wipera、勝手に略称付け）をダウンロードして早速自分のホームページにアクセス。おお、予想以上にまともっつーか、数ヶ月前にも似たような感覚を覚えたな、とか思いながらカドゥケウスZ攻略ページを開くと・・・上下にスクロールできない。
理由は分かってる。擬似フレームを利用したせいだ。擬似フレームというのはhtmlとbodyにheight:100%とoverflow:hiddenをつけてから中のボックスにoverflow:autoを与えて、さもframeを使っているかのような視覚効果を生み出すCSSウル技の一つ。
この時bodyの高さ=ウインドウの高さになるのだが、そこに問題がある。
基本的に、ブラウザでページを開いた際に真っ先にフォーカスが移るのはbody（htmlかも）要素になる。そして、キーボードの入力はフォーカスされている要素に送られる。
つまり、どういうことかというと、フォーカスを中の要素に移さない限りキーボードでスクロールに関する一切の操作を受け付けなくなる。
OperaかIEで上記のページを開いて適当なチャプターを開いてからPageDownやPageUpやカーソルキーを押してみよう。恐らく一切スクロールしないはずだ。理由は簡単。フォーカスがあるbodyは既にheight:100%でスクロールしようが無いから。
フォーカスを移すには、クリックするのが一番なわけだが、さすがにそれはインターフェース的によろしくない。
各ブラウザともホイールの操作はマウスが乗っている要素に送られるので、幸いにもマウス派には全く問題無いのだが、閲覧者の中にはキーボード派もいるだろう。となると無視するわけにはいかない。
んで、最初に言ったWipera。Aボタンを押してもフォーカスが移動しない。スクロールするにはわざわざスクロールバーを直接弄らなければいけない。他のブラウザならスクロールバーを弄った時点でフォーカスが移るはずなんだが、それも無し。アンカーで移動してもフォーカスは微動だにせず。
ではどうするか。
・・・・・・どうしよう。
PC用ブラウザならJavaScriptを使うことで、ある程度の補助は可能になる。が、JavaScript無効だと手も足も出ない。
Wiperaはフォーカスを移動させることができない。JavaScriptによる補助もたぶん無理。
となると・・・
ざんねん！ わたしのちょうせんは これでおわってしまった！
あー、レイアウト作り直すかー。
補足
Firefoxは通常の要素にもfocusが使えるので、上記ページではFirefoxのみフォーカスが中の要素に合っている。元々focusはフォーム要素に使うものなんだが、Firefoxが正しいかどうかは知らん。このうえなく便利だが。
Info
- 投稿日
- 2006年12月23日
- タグ
- css
- このエントリの固定リンク
- http://bmky.net/diary/log/1496.html
- ブックマークに追加する
-
- コメント
2006
1223
Tagscss
JavaScriptによるCSSの操作
- まとめた理由
- 書いた俺自身が、あれどーやんだっけな～、と自分の書いた文書をあちこち探してたことがあったから。
というわけで、サクっとまとめつつ、Opera9の仕様とかにも合わせたり、関数を微妙に改良したりとかいろいろ変更を加えた。
今後CSS関係で何か分かったらこっちに追加するつもり。
Info
- 投稿日
- 2006年8月24日
- タグ
- css、javascript
- このエントリの固定リンク
- http://bmky.net/diary/log/1431.html
- ブックマークに追加する
-
- コメント
2006
0824
Tagscssjavascript
このエントリは、JavaScriptによるCSSの操作として新たに書き直しました。
-
前々回、前回同様いい加減な部分もあるので、鵜呑みにしないように。
Changelog
- …
- Added support for DOM level 2 Style Sheets and associated parts of DOM level 2 CSS. (Yay!!)
Friday once more! - Opera Desktop Team
DOM2CSSが遂に！
早速インストールして色々試してみたけど、基本はFirefoxと一緒でIEの良いとこ取りになってる。コードの書き換えはほとんど必要なし。ありがとう、おぺらたん！
スタイルシートルールの追加と無効
基本的な方法は前々回と一緒。3ブラウザ共通。
スタイルシートルールの取得
基本的な使い方は前々回と一緒。
Operaの場合、返ってくる値の自動補完は無効。つまりIEと一緒で、実際に記述したプロパティの値しか返ってこないっぽい。
div.hoge { background : #668 }
getStyleValue( "div.hoge", "background" );
//IE : #668
//Firefox : rgb(136, 102, 102) none repeat scroll 0% 0%
//Opera : #668
要素に適用されているスタイルを取得する
ここでちょいと前々回の修正。
FirefoxはgetComputedStyleを利用して取得するが、この場合得られる値は何が何でもpx換算されてしまう。
仮にemで指定した場合、ブラウザのフォント設定によって結果が変わってしまう。ブラウザ側で18pxと設定してCSSに1emと記述した場合、1em=1文字の大きさ=設定された18pxとなり、18pxが返ってくる。
ブラウザ側でCtrl++でフォントを大きくした場合でもしっかり対応してくれるので、使いようによっては便利かもしれない。上記の例なら、2回フォントを大きくしてから取得すれば、しっかり50%増しの27pxが返ってくる。試していないが、モニタ解像度を96dpiから72dpiに変えたりすれば、pt指定の値も変化するものと思われる。
なお、OperaはgetComputedStyleでもcurrentStyleでも両方イケるので、記述した値をまんま取得したいならcurrentStyleで取得するべきだ。
getComputedStyleで取得する場合、OperaはFirefoxと違ってブラウザ側のフォントサイズ変更には追従してくれないので注意。300%まで拡大してもデフォルトサイズが返ってくる。
それと、OperaのgetPropertyValueはFirefoxと違い、一括指定したプロパティでもIE同様に取得することができる。
#hoge { margin : 1em }
getActiveStyle( $( "hoge" ), "margin" );
//IE : 1em
//Firefox : null
//Opera(currentStyle) : 1em
//Opera(getPropertyValue) : 16px
軽くまとめる
- IE
- － セレクタ毎に分割登録される
- × 擬似要素（:visited等）が取得できない
- × 全称セレクタが削除されて登録される
- Firefox
- － セレクタ毎に分割登録されない
- ○ ブラウザに忠実なpxサイズ取得
- △ プロパティの自動補完
- × 一括指定セレクタで取得できない
- Opera
- － セレクタ毎に分割登録されない
- ○ IE/Firefox両方の方法で取得できる
雑感
Operaがいい感じに仕上がってきたので、ボチボチ使い始めてる。
デフォルトでも最低限の機能が揃ってるOperaをライトユーザーに。拡張をブヂュルブヂュル入れてパワーアップ！ スワップしてくれるぜー！ というコアユーザーはFirefox、という風に住み分けてもいいんじゃないかと思えるようになってきた。
描画周りが速いOperaをwebアプリケーション専用ランチャーにでもしようかなーとか思ってたり。メーラーとして使ってもいいだろうし。
そういやOperaは各種携帯端末だけじゃなく、DSでも使える上にwii標準搭載らしい。実にいいね。
InternetExplorer？ dataスキーム未実装でスクリプト処理速度が亀でAcid2が血の海でまともにCSSが使えないブラウザなんて存在しませんよ。ファンタジーやメルヘンじゃあるまいし。
Info
- 投稿日
- 2006年6月14日
- タグ
- css、javascript
- このエントリの固定リンク
- http://bmky.net/diary/log/1393.html
- ブックマークに追加する
-
- コメント
このエントリは、JavaScriptによるCSSの操作として新たに書き直しました。
-
前回同様、結構適当に書いてる部分もあるので鵜呑みにしないように。
IEとMozillaでは、スタイルシートの値を取得するには以下の処理を利用すればよい。
function getStyleValue( selector, property ) {
property = ( property.match( /-/ ) ) ? property.camelize( ) : property;
var stylesheets = document.styleSheets[0].rules //IE
|| document.styleSheets[0].cssRules; //Mozilla
for( var i = 0, len = stylesheets.length; i < len; i++ ) {
var css = stylesheets[i];
if( css.selectorText.toLowerCase( ) == selector.toLowerCase( ) ) {
if( css.style[ property ] ) return css.style[ property ];
}
}
return null;
}
しかし・・・
全称セレクタ
IEにはほとんどの場面で取得出来なくなる仕様が存在する。
ul * { line-height : 150% }
このようにスタイルシートに記述していた場合
getStyleValue( "ul *", "line-height" );
このようにしてもIEでは取得できない。どうやら内部でアスタリスクが消されるようで、document.styleSheets[0].rulesを参照しても、上記の場合はselectorTextがulのみになってしまう。
じゃあアスタリスクを除いたulだけ指定して取得すればいいじゃん、と思うが
ul { margin : 1em }
ul * { margin : 0.5em }
もし、このように指定されていたら、forループ中に先に指定したulがひっかかってしまい、本来取得したいul要素の子要素全てのmarginは取得できなくなってしまう。
ブラウザの差異を無くすために以下のように記述することがある。
* {
margin : 0;
padding : 0;
font-size : 100%;
font-weight : normal;
font-style : normal;
line-height : 100%;
list-style-type : none;
}
この場合は以下のようにすることで取得することができる。
getStyleValue( "", "line-height" );
ちなみに
ul * span { line-height : 150% }
これを取得する場合は以下のようにする。
getStyleValue( "ul span", "line-height" );
スペースを二つ空けるのがポイント。一つではダメ。
これらは全てIEのみで、mozillaは関係ない。
グループ化
ul li, span { line-height : 150% }
カンマで区切ってグループ化する場合、IEでは内部で分解される。
getStyleValue( "ul li", "line-height" );
getStyleValue( "span", "line-height" );
上記で両方とも取得できる。が、「ul li, span」では取得できない。
逆にmozillaは内部で分解されないので
getStyleValue( "ul li, span", "line-height" );
と指定する必要がある。ややこしい。
まとめ
JavaScriptでCSSを弄るつもりなら、全称セレクタは使うな。グループ化は避けろ。
そこでプロパティ別整理法をプッシュしてみる。
全てとは言わず、デザイン段階での変更頻度が高い「margin、padding、color、background、border」あたりだけでもやっておくと結構楽。ただし、CSSのサイズが小さい場合は逆効果。
どうでもいいこと
getStyleValueを、同じセレクタで複数スタイルを指定していても（たぶん）大丈夫なように変更。
愚痴
OperaはWidgets実装して浮かれてる暇があったらさっさとDOM2 CSSをサポートしやがれ。ってゆーかサポートしてくださいお願いしますおぺらたん。
愚痴 その2
IE7はタブ+RSS実装して浮かれてる暇があったらさっさとdataスキームを実装しやがれ。
Info
- 投稿日
- 2006年5月13日
- タグ
- css、javascript
- このエントリの固定リンク
- http://bmky.net/diary/log/1381.html
- ブックマークに追加する
-
- コメント
2006
0513
Tagscssjavascript
