6件中 1-5件目     [ 1 2 ]

ユーザにCSSを入力させる場合、一部のプロパティやプロパティの値を禁止しておかない危険な場合がある。例えば、expression(IEの独自拡張)を使えばプロパティの値にJavaScriptを書いて実行させることができるし、background-imageプロパティを使えば不快な画像を表示させることができてしまう。

そのため、ユーザにCSSを入力させる場合には、その入力されたCSSを解析する必要がある。Pythonではcssutilsというライブラリを使ってCSSをパースすることができる。


Webページを作る際に、高さ100%のボックスを表示させたいというのはよくある。 しかし、これが簡単そうに思えて実は意外と難しかったりする。 高さ100%で表示されるかと思ったらスクロールバーが出たり、ブラウザによって表示が違ったりと苦労することがある。


Webページでは普通、マウスでドラッグするとテキストを選択することができるが、JavaScriptやスタイルシートを使うことで選択を防ぐことができる。

ただし、これはサイトの文章をコピーさせない目的で使うことは推奨しない。 紹介する方法でドラッグによる選択を防いだとしても、Ctrl+Aの全選択を防ぐことができないことが多く、ソースを表示させればコピーできてしまう。 さらに、文章をコピーできないサイトは不便で、ユーザに不快な思いをさせてしまう可能性が高い。

このドラッグによる選択をキャンセルする方法は、JavaScriptなどでドラッグで特殊な効果を表現する際に、通常の選択はしてほしくないという場合などに使うと良い。 例えば、テーブルのセルをドラッグで選択するサンプルのような場合がある。 これでテキストを選択してしまうと、おかしく見えてしまう。

ドラッグによる選択をキャンセルするサンプル


IE6のStrictモードで、position:absoluteを付けたdivタグなどの上でドラッグをすると選択範囲がおかしくなることがある。 ちなみに、Quirksモードではこのバグは発生しない。

Strictモードの例

Quirksモードの例

このバグは、おそらく選択範囲の終点をposition:absoluteが付いたタグ上で取得できていないことが原因だと思われる。

このバグは、何故かbodyにheight:100%を付けると解決する。

bodyにheight:100%を付けた例


画像や文字などはスタイルシートを使って半透明にすることができるが、ブラウザによってその方法は異なる。

CSSで半透明にするサンプル


6件中 1-5件目     [ 1 2 ]