つい最近とても驚いたこと
CSSセレクタにiフラグが指定可能
それを使うとセレクタに対して「大文字小文字を区別しない」という指定ができます。まさかCSSで正規表現のiフラグが使えたとは...
CSSカスタマイズで役立ちそうなの記録しておきます。
CSSセレクタの大文字小文字を区別したくない場面
例えばこういうHTML要素がある場合...
<img src="hoge.jpg" />
<img src="fuga.JPG" />
<img src="piyo.jpg" />
単純にimg要素が並んでるだけだけど、真ん中の画像だけ拡張子がJPGになってます。こういう拡張子とかの大文字小文字が違う場合について
これに対して次のCSSを適用したとします。
img[src*="jpg"]{
width: 100px;
height: 100px;
}
このCSSの src*="jpg" はセレクタの正規表現みたいなものです。
このケースだと hoge.jpg と piyo.jpg にのみCSSが適用され、fuga.JPGには適用されません。なぜなら [src*="jpg"] と指定してるからです。
これに頭を悩ませてました・・・
セレクタには正規表現的にiフラグが指定できた!
こんな便利なのを今まで知らなかったとは
実はCSSで正規表現のiフラグが使えます。
これは大文字小文字を区別しないフラグのこと
先ほどと同じHTMLで考えてみましょう。
▼ なんか画像要素が並んでいるHTML例
<img src="hoge.jpg" />
<img src="fuga.JPG" />
<img src="piyo.jpg" />
ここで [src*="jpg"] とだけ書くと、fuga.JPG にはマッチしてくれないという問題でした。今まではパータンの数だけセレクタを書いてました。
でもiフラグを使って書くと超スマート
▼ こういうCSSで大文字小文字の区別がなくなる!
img[src*="jpg" i]{
width: 100px;
height: 100px;
}
単純に [src*="jpg" i] みたいにするだけ。これだけで大文字小文字が区別されなくなり、fuga.JPGもマッチ対象になるようですね。
そもそも正規表現みたいにiフラグが使えるなんて知らなかった。まさしく目からウロコ。今まで知らなかったのはなんでだろう?
もしかしたらiフラグ以外にもあるかもしれません。
それは少し調べてみようと思います。
属性セレクタでのiフラグのブラウザ対応状況
少し気になるのがブラウザの対応状況
そこでCan i use...で調べてみました。
▼ このような対応状況らしい
残念ながらIE(Internet Explorer)では全バージョンで使えない模様。でも2022年6月にサポート終了みたいだし、もう気にしなくてOKですね。
主要ブラウザでは全て対応してるので問題ありません。
もちろんjQueryのセレクタでもiフラグは使える
当然ながらjQueryのセレクタでも同じことが可能
大文字小文字の区別をつけさせないことができます。
▼ 例えばこういうコードが書けるってこと
$('[src*="jpg" i]').each(function(i, elem){
$(elem).css({
'width': '100px',
'height': '100px'
});
});
これを知らずに今まで非効率なコードを書いてしまっていた。
これは便利なので活用していきたいです。
フク郎
最新記事 by フク郎 (全て見る)
- 最大5,000円報酬をもらうために、招待を受入れていただけませんか? - 8月 27, 2024