scoped css が使えなくなってた
◆ style タグの scoped 属性が使えなくなってた
◆ CSS の適用する範囲を制限できた
◆ scoped 付き style タグの親以下
◆ shadow DOM が代わりと言われても扱いづらいし まだドラフトで実装してるのが少ないし
◆ CSS の適用する範囲を制限できた
◆ scoped 付き style タグの親以下
◆ shadow DOM が代わりと言われても扱いづらいし まだドラフトで実装してるのが少ないし
ここで軽く触れましたが 便利なものです
ですが 調べてみたら Chrome では使えなくなってるようです
使えなくなったのは 35 からなので けっこう前みたいです
唯一使える Firefox も特殊な設定必要みたいです
HTML 周りの使用って使えなくなるのが多すぎですよね
便利なのは残しておいてもらいたいです
いくら shadow DOM が代わりになると言っても 手軽さではこっちのほうがよかったです
普通に style タグを全体 (frame は別ページ扱いなので除く)が対象でした
それを この div 以下だけを対象にしたいっていうのができる機能です
使い回すパーツで メニュー部分だったりカレンダーだったりとたくさんの要素を使って作っているものだと ひとつひとつに css で
そういうときに活躍するはずだったのですが 廃止です
動かないけどサンプル
a,b,c の範囲だけ赤色で e,d,f は青色になるはずです
適用範囲は scoped 付き style の親要素以下です
font-size は scoped のない style タグなので全部に有効です
a,b,c,e,d,f はそれぞれの色で 30px のサイズの文字になるはずです
scoped style タグは兄弟要素やそれ以下にスタイルをあてたいというところに書くといい感じになります
外部 css を読み込む link に scoped の仕様が決まる前に廃止の方向になってきたのか link にはないみたいです
scoped に比べると 複雑ですし css のためではなく DOM をまとめて外から直接みえないようにしてるものです
また JavaScript からすると shadow の内外でわけられてなく共通で イマイチな感じです
shadow の中なのに 同じ shadow 内の要素取得が面倒だったりでパーツ化してる部分を簡単に使い回すというのはちょっとやりづらいです
DOM を分けるなら css や JavaScript も含めて綺麗にわけて iframe のもっと扱いやすい版にしてほしいですし 無理なら単純に CSS で簡単にスコープ決めて扱えるようになってほしいです
それにしても blink はどんどん非推奨なもの増やし過ぎ感がありますよね
ですが 調べてみたら Chrome では使えなくなってるようです
使えなくなったのは 35 からなので けっこう前みたいです
唯一使える Firefox も特殊な設定必要みたいです
HTML 周りの使用って使えなくなるのが多すぎですよね
便利なのは残しておいてもらいたいです
いくら shadow DOM が代わりになると言っても 手軽さではこっちのほうがよかったです
一応どんなものだったか
css を書くための style タグの適用範囲を制限できます普通に style タグを全体 (frame は別ページ扱いなので除く)が対象でした
それを この div 以下だけを対象にしたいっていうのができる機能です
使い回すパーツで メニュー部分だったりカレンダーだったりとたくさんの要素を使って作っているものだと ひとつひとつに css で
.menu .abc{}
.menu table td:nth-child(n+2){}
.menu div.xyz{}
.menu input[type="checkbox"]{}
みたいな繰り返し .menu をつけて 影響範囲を制限することがありますが 全てに書いていくのは辛いです.menu table td:nth-child(n+2){}
.menu div.xyz{}
.menu input[type="checkbox"]{}
そういうときに活躍するはずだったのですが 廃止です
動かないけどサンプル
<body>
<div>
<style scoped>*{color:red;}</style>
<p>a</p>
<p>b</p>
<p>c</p>
</div>
<div>
<style scoped>*{color:blue;}</style>
<p>e</p>
<p>d</p>
<p>f</p>
</div>
<div>
<style>*{font-size:30px;}</style>
<p>g</p>
<p>h</p>
<p>i</p>
</div>
</body>
<div>
<style scoped>*{color:red;}</style>
<p>a</p>
<p>b</p>
<p>c</p>
</div>
<div>
<style scoped>*{color:blue;}</style>
<p>e</p>
<p>d</p>
<p>f</p>
</div>
<div>
<style>*{font-size:30px;}</style>
<p>g</p>
<p>h</p>
<p>i</p>
</div>
</body>
a,b,c の範囲だけ赤色で e,d,f は青色になるはずです
適用範囲は scoped 付き style の親要素以下です
font-size は scoped のない style タグなので全部に有効です
a,b,c,e,d,f はそれぞれの色で 30px のサイズの文字になるはずです
scoped style タグは兄弟要素やそれ以下にスタイルをあてたいというところに書くといい感じになります
外部 css を読み込む link に scoped の仕様が決まる前に廃止の方向になってきたのか link にはないみたいです
shadow DOM
かわりの CSS の適用範囲を決めれるのには shadow DOM がありますが いまだに Draft 段階ですし Chrome は使えますが Firefox が確かまだ使えなかったと思いますscoped に比べると 複雑ですし css のためではなく DOM をまとめて外から直接みえないようにしてるものです
また JavaScript からすると shadow の内外でわけられてなく共通で イマイチな感じです
shadow の中なのに 同じ shadow 内の要素取得が面倒だったりでパーツ化してる部分を簡単に使い回すというのはちょっとやりづらいです
DOM を分けるなら css や JavaScript も含めて綺麗にわけて iframe のもっと扱いやすい版にしてほしいですし 無理なら単純に CSS で簡単にスコープ決めて扱えるようになってほしいです
それにしても blink はどんどん非推奨なもの増やし過ぎ感がありますよね