アカウント名:
パスワード:
CSS の表現能力が足りないのではなく、ブラウザの CSS 実装レベルが足りないって方が現実に合っているかと思いますが。 画像を使うと CSS じゃ無理、なんてのはかなり意味不明です。
アンカーが画像だったらどうする? 単純にimgタグを使う場合cssでは違う画像に変更するなんてできないよね
a 要素の内容に img 要素しか置かないならこれでできますけど。
a[href]:hover > img { display: none; } a[href="http://www.example.com/"]:hover:before { content: url(http://www.example.com/images/top.png); }a[href="http://www.example.com/content1/"]:hover:before { content: url(http://www.example.com/images/content1.png); }a[href="http://www.example.com/content2/"]:hover:before { content: url(http://www.example.com/images/content2.png); }
URL 完全一致ではなく、前方一致でやりたいなら a[href^="..."] ですね。CSS3 Selectors になりますが、Gecko や WebKit 系なら普通に対応してます。CSS3 Selectors 的には :before ではなく ::before ですか。 後は元の HTML 側でリンク先ごとに個別の画像を a 要素の内容に置いておけばいいですね。
この程度の列挙でも面倒だけど JavaScript なら面倒じゃない、とはとても考えられないほど簡単なレベルだと思います。どうでしょうか。この書き方なら代替表示する画像も一括管理可能です。
そして、リンクがある HTML 文書が 1 つしかないのであればともかく、複数の HTML 文書から成立しているのであれば、この程度の記述の列挙程度は (どうせ CSS もキャッシュされるものですし) トータルサイズ自体はより小さく収まるでしょうね。
ただし IE6/7 は CSS2 以降への準拠度が激しく低いため、現実的に IE が想定される場面においてこれは使えません。元コメントでの意はその点を指しています。
background-imageで指定してそれを切り替えるという手段もあるけど その場合すべての画像を使ったアンカーに対してcssを書かないといけなくてとても面倒だしサイズが大きくなるよね
全リンクを onload 時に拾って onmouseover イベントを個別に埋め込んでいくのはクライアント環境にとっては製作者側の負担を閲覧者側に押し付ける無駄な処理でしかありませんから、結局 JavaScript でも HTML に対して個別に onmousehover を設定する事にならないでしょうか。 CSS を使った方がサイト全体の HTML に対して埋め込み忘れがないかを気にせず書ける点で、管理コストを下げる面においても有利でしょう。
background-image でないと CSS で似たようなことができないというのは、IE が上のような記述を行っても動作しないからです。それは CSS だけではできない事ではなく Web ブラウザ側の問題です。 少なくともその程度の範囲であれば「IE がタコだからこの程度の事でも JavaScript じゃないとだめなんだよね」と言うのは納得できますが、「CSS がタコだから～」と言うのは CSS を分かってないだけとしか思えません。
a[href]:hover > img { display: none; } a[href="http://www.example.com/"]:hover:before { content: url(http://www.example.com/images/top.png); } a[href="http://www.example.com/content1/"]:hover:before { content: url(http://www.example.com/images/content1.png); } a[href="http://www.example.com/content2/"]:hover:before { content: url(http://www.example.com/images/content2.png); }
本気で言ってますよ。それでもサイト全体の全文書に JavaScript を埋め込むよりマシですから。CSS は on だけど JavaScript が off だと全く機能しないようなものよりはマシだし、ある程度量が増えたら make 一発生成とかして終わりになるだけでしょうから。
それと、正規表現的にあまりにもありえなさすぎる例示なのでエスパー解釈してみようと思いましたが、CSS でひたすら列挙する方がコスト的に少ない点と漏れが出る可能性が低い点、確認コストが少ない点などから確実にマシですね。HTML 側はサイト共通スタイルシートの指定以外何も文書をいじる必要がないのですから。
それと、img 要素の src にそんな単純な範囲で指定できるなら、そもそも class 指定すら不要に思えますね。
1つのリンクに対して約100byteとすると リンクが10000あったらそれだけで1Mbyte そんなサイズのcssは今のところ現実的ではないですね
そりゃあり得ないですよね。1 サイトで 10,000 も個別にリンク用画像を置き換える必要があるサイトとか。(笑) そのために JavaScript を埋め込む製作者のコストと、個別のページの各リンクに埋め込むコストについてはどうですか? 単純にサイズ面でも ' onmouseover="a();"' (最短パターン) で 19 文字が増加する訳ですが、1 HTML 文書内に重複なしで 10,000 個のリンクがあったら、HTML ファイルが 10 個あるだけで 1,900,000 バイト増える事になりますね。 もちろん 1 HTML 文書内のリンク数が固定される状況ではない、つまりナビゲーション用のリンク等の固定的なものではなく、本文に含まれる部分でリンク画像置き換え (なんてする訳ないよね、普通) が行われる可能性があるとすると、置き換えが行われる可能性があるリンクのパターンは確かに 10,000 パターンあるかもしれないですが、リンクに対する onmouseover の埋め込みが必要な個所は数十万、数百万に上る可能性があるのですよね。
onload で対象のリンクに対し onmouseover ハンドラを設定していくなんて、可能性として最低でも document.getElementsByName('a'); で 1 万以上の要素が引っ掛かる可能性がある文書に対してなんて適用できない話ですし、そもそも文書ツリーに含まれる要素が非常に多い場合、getElementsByName() や getElementsByClassName() のコストは非常に高くなるため、あくまでも HTML に静的に埋め込むコストの方でお願いします。
1,000 個程度でも異常に多いレベルなのに、10,000 のパターンとか非現実的すぎますね。そんな数の置き換え画像をプリロードされたら、閲覧者にとっては地獄としか言いようがありません。 本気でそこまでやるようなプロデューサーがいたら正面きって批判してあげた方がその人の為でしょう。
でも動的ページならどうしますか? 「一発生成」できるようにするまでのコストがとんでもなくでかいと思いますよ 切り替えする画像としない画像の判定はどうしますか?
URL の生成パターンすら決まってなくて、ドメイン名直下から常にリンク先 URL がランダム生成なのですか? それこそ非現実的すぎですね。 もっとも、ヒントとなるパラメータがあるなら a[href*="&mode=foo"] とか書けますけど。
前方一致/後方一致/部分一致/完全一致にスペース区切りのトークンに対する一致程度は属性セレクタで指定できますので、これで拾えないパターンの URL が生成される事の方が稀ではないでしょうか。
そもそも「ユーザの行動に対して画像を切り替える」事を実現するのにjsを使うのが間違いな訳がないよね googleMapもおなじだもんね
IE 等を考慮すると現実的な解としては結局 JavaScript になる、という点については全く否定していないのですが、何か勘違いしていませんか?
もう一度最初に書いたコメントを繰り返しておきますね。
より多くのコメントがこの議論にあるかもしれませんが、JavaScriptが有効ではない環境を使用している場合、クラシックなコメントシステム(D1)に設定を変更する必要があります。
日本発のオープンソースソフトウェアは42件 -- ある官僚
NoScript (スコア:1)
NoScriptのデフォルト設定はフツーに閲覧するには少々厳しすぎない？
私はNoScriptを入れてるけど、いつもは無効にしてる。
JSとCSSの住み分けが進む (スコア:5, 興味深い)
Javascriptを視覚エフェクトとしてつかっているサイトは非常に多いと思いますが、Scriptなしでも最低限の機能は提供するのがうまい設計であって、切るだけでボロ崩れ/飛べない場所が出る等の機能不全を起こすのはダメダメといえます。
CSS2.1（の主にセレクタ）をフルに使えるブラウザに最適化されたサイトは、この部分にさえ、Javascriptを多用する必要はありませんよね。
これから視覚エフェクトはCSS一本に、Javascriptはそれ以外にと住み分けが進んでいくと思います。
# Noscriptはホワイトリストで使ってますが、まともに見れなくなるダメサイト結構多い。
Re: (スコア:1)
画像使わないなんて事は上が許してくれないわけで・・・
そうなるとcssじゃ全然足らないよ・・・
Re:JSとCSSの住み分けが進む (スコア:1)
CSS の表現能力が足りないのではなく、ブラウザの CSS 実装レベルが足りないって方が現実に合っているかと思いますが。
画像を使うと CSS じゃ無理、なんてのはかなり意味不明です。
Re:JSとCSSの住み分けが進む (スコア:1)
アンカーがテキストだったらcssで「全部共通で」色を変更したり指定できる
アンカーが画像だったらどうする?
単純にimgタグを使う場合cssでは違う画像に変更するなんてできないよね
background-imageで指定してそれを切り替えるという手段もあるけど
その場合すべての画像を使ったアンカーに対してcssを書かないといけなくてとても面倒だしサイズが大きくなるよね
だからjs使ってmouseoverで画像切り替えるような処理にするのは当然の方向性だよね
Re:JSとCSSの住み分けが進む (スコア:1)
a 要素の内容に img 要素しか置かないならこれでできますけど。
URL 完全一致ではなく、前方一致でやりたいなら a[href^="..."] ですね。CSS3 Selectors になりますが、Gecko や WebKit 系なら普通に対応してます。CSS3 Selectors 的には :before ではなく ::before ですか。
後は元の HTML 側でリンク先ごとに個別の画像を a 要素の内容に置いておけばいいですね。
この程度の列挙でも面倒だけど JavaScript なら面倒じゃない、とはとても考えられないほど簡単なレベルだと思います。どうでしょうか。この書き方なら代替表示する画像も一括管理可能です。
そして、リンクがある HTML 文書が 1 つしかないのであればともかく、複数の HTML 文書から成立しているのであれば、この程度の記述の列挙程度は (どうせ CSS もキャッシュされるものですし) トータルサイズ自体はより小さく収まるでしょうね。
ただし IE6/7 は CSS2 以降への準拠度が激しく低いため、現実的に IE が想定される場面においてこれは使えません。元コメントでの意はその点を指しています。
全リンクを onload 時に拾って onmouseover イベントを個別に埋め込んでいくのはクライアント環境にとっては製作者側の負担を閲覧者側に押し付ける無駄な処理でしかありませんから、結局 JavaScript でも HTML に対して個別に onmousehover を設定する事にならないでしょうか。
CSS を使った方がサイト全体の HTML に対して埋め込み忘れがないかを気にせず書ける点で、管理コストを下げる面においても有利でしょう。
background-image でないと CSS で似たようなことができないというのは、IE が上のような記述を行っても動作しないからです。それは CSS だけではできない事ではなく Web ブラウザ側の問題です。
少なくともその程度の範囲であれば「IE がタコだからこの程度の事でも JavaScript じゃないとだめなんだよね」と言うのは納得できますが、「CSS がタコだから～」と言うのは CSS を分かってないだけとしか思えません。
Re:JSとCSSの住み分けが進む (スコア:1)
凄まじく面倒です
a:hover:before > img.chimg[src="(.*).(.*)"] { content: url($1_o.$2); }
適当に書いてみましたがこれくらいの1行で「サイト内すべて」の画像切り替えが実現できないと使えるとは言えない
Re:JSとCSSの住み分けが進む (スコア:1)
本気で言ってますよ。それでもサイト全体の全文書に JavaScript を埋め込むよりマシですから。CSS は on だけど JavaScript が off だと全く機能しないようなものよりはマシだし、ある程度量が増えたら make 一発生成とかして終わりになるだけでしょうから。
それと、正規表現的にあまりにもありえなさすぎる例示なのでエスパー解釈してみようと思いましたが、CSS でひたすら列挙する方がコスト的に少ない点と漏れが出る可能性が低い点、確認コストが少ない点などから確実にマシですね。HTML 側はサイト共通スタイルシートの指定以外何も文書をいじる必要がないのですから。
それと、img 要素の src にそんな単純な範囲で指定できるなら、そもそも class 指定すら不要に思えますね。
Re:JSとCSSの住み分けが進む (スコア:1)
まずサイズ
1行目の
a[href="http://www.example.com/"]:hover:before { content: url(http://www.example.com/images/top.png); }
が104文字
1つのリンクに対して約100byteとすると
リンクが10000あったらそれだけで1Mbyte
そんなサイズのcssは今のところ現実的ではないですね
列挙するコスト
静的ページならパースかければとりあえず漏れなく列挙できるでしょうね
でも動的ページならどうしますか?
「一発生成」できるようにするまでのコストがとんでもなくでかいと思いますよ
切り替えする画像としない画像の判定はどうしますか?
結局何かしらのキーワードがhtml側に埋め込まれないと現実的にはできないと思いますね
というかそんな面倒なことやるよりjsでやる方が遙かに低コスト
そもそも「ユーザの行動に対して画像を切り替える」事を実現するのにjsを使うのが間違いな訳がないよね
googleMapもおなじだもんね
それが「リンクにフォーカスしたら画像を切り替える」になったらjsを使うのが間違いっていうのは納得できないね
Re:JSとCSSの住み分けが進む (スコア:1)
そりゃあり得ないですよね。1 サイトで 10,000 も個別にリンク用画像を置き換える必要があるサイトとか。(笑)
そのために JavaScript を埋め込む製作者のコストと、個別のページの各リンクに埋め込むコストについてはどうですか? 単純にサイズ面でも ' onmouseover="a();"' (最短パターン) で 19 文字が増加する訳ですが、1 HTML 文書内に重複なしで 10,000 個のリンクがあったら、HTML ファイルが 10 個あるだけで 1,900,000 バイト増える事になりますね。
もちろん 1 HTML 文書内のリンク数が固定される状況ではない、つまりナビゲーション用のリンク等の固定的なものではなく、本文に含まれる部分でリンク画像置き換え (なんてする訳ないよね、普通) が行われる可能性があるとすると、置き換えが行われる可能性があるリンクのパターンは確かに 10,000 パターンあるかもしれないですが、リンクに対する onmouseover の埋め込みが必要な個所は数十万、数百万に上る可能性があるのですよね。
onload で対象のリンクに対し onmouseover ハンドラを設定していくなんて、可能性として最低でも document.getElementsByName('a'); で 1 万以上の要素が引っ掛かる可能性がある文書に対してなんて適用できない話ですし、そもそも文書ツリーに含まれる要素が非常に多い場合、getElementsByName() や getElementsByClassName() のコストは非常に高くなるため、あくまでも HTML に静的に埋め込むコストの方でお願いします。
1,000 個程度でも異常に多いレベルなのに、10,000 のパターンとか非現実的すぎますね。そんな数の置き換え画像をプリロードされたら、閲覧者にとっては地獄としか言いようがありません。
本気でそこまでやるようなプロデューサーがいたら正面きって批判してあげた方がその人の為でしょう。
URL の生成パターンすら決まってなくて、ドメイン名直下から常にリンク先 URL がランダム生成なのですか? それこそ非現実的すぎですね。
もっとも、ヒントとなるパラメータがあるなら a[href*="&mode=foo"] とか書けますけど。
前方一致/後方一致/部分一致/完全一致にスペース区切りのトークンに対する一致程度は属性セレクタで指定できますので、これで拾えないパターンの URL が生成される事の方が稀ではないでしょうか。
IE 等を考慮すると現実的な解としては結局 JavaScript になる、という点については全く否定していないのですが、何か勘違いしていませんか?
もう一度最初に書いたコメントを繰り返しておきますね。
Re:JSとCSSの住み分けが進む (スコア:1)
>画像を使うと CSS じゃ無理、なんてのはかなり意味不明です。
それぞれ個別に記述をしないといけないという段階でcssの表現能力が全然足りてない
a:hover で「一括で」フォーカスされたアンカーの見た目を変えれることは素晴らしい
img:hoverで同様に「一括で」画像を切り替える記述はできないよね
そもそも「画像を切り替える」ってことがcss的ではないといえるんだけど
img[src="http://example.com/img/link_button.png"]:hover { content: url(http://example.com/img/link_button_o.png) }
みたいな書き方ができればいいのかな
これなら列挙しても我慢できるレベル
正規表現が使えてまとめられるならなおよし
a[href="http://www.example.com/"]:hover:before { content: url(http://www.example.com/images/top.png); }
この記述は出来の悪いスクリプト言語にしか思えない
本来意図されているbefore,afterの使い方とは違うとおもう
これをだらだら列挙するのは精神的によろしくない