2024-10-17

CSSの:is()と:where()の違いの例

HTML/CSS

:isは()内のセレクタの詳細度が適用されるが、:whereは()内セレクタの詳細度が0となる。

<div id="sample">
  <div class="test">sample(:is使用、上書きされない)</div>
</div>

<div id="sample2">
  <div class="test">sample2(:where使用、後に上書きされる)</div>
</div>

<div id="sample3">
  <div class="test">sample3(:where使用、後に記述しているので上書きされない)</div>
</div>

:is(#sample) .test {
  background-color: #faa;
}

:where(#sample2) .test {
  background-color: #aaf;
}

.test {
  background-color: #fff;
}

:where(#sample3) .test {
  background-color: #afa;
}

/* :isでも同じ詳細度であれば後で上書きされる
#sample .test {
  background-color: #fff;
} */

:isと:whereの違いの結果

変に詳細度の上書き合戦を避けるべく、できる限り詳細度は低くしたいので、その場合は:where()を使用すると有効。とっても便利。

:where()ブラウザ対応状況

主要ブラウザでは対応してそうなので使用して問題なさげです。

CSS設計完全ガイド　～詳細解説＋実践的モジュール集

Web制作者のためのCSS設計の教科書モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

今すぐ使えるCSSレシピブック

HTML5/CSS3モダンコーディングフロントエンドエンジニアが教える3つの本格レイアウトスタンダード・グリッド・シングルページレイアウトの作り方

2023-04-12

CSSテキスト無限ループアニメーション

HTML/CSS

CSSだけでテキスト無限ループアニメーションさせる方法

CSSによるテキストの無限ループアニメーションについて、備忘録として掲載しておきます。
テキストのみならず画像などでも対応可能ですので、同じような事を行いたいどなたかの参考になれば幸いです。

2023-02-10

ChatGPTを使用してWordpressのタグにカラー設定項目を追加する方法を聞いてみた

Wordpress etc

ChatGPTにWordpressカスタマイズのコードを書かせてみた今流行りの自然言語を理解するAIによる会話チャットツール 「ChatGPT」 超優秀で、既にかなり仕事に活用させて頂いています。

そこでお題にある通り、こんなの出来るかなってことで下調べがてらChatGPTにタグのカラー項目追加について聞いてみたところ、サクッと返答を返してくれました。
実際に動くのかどうか、コードも含めて見ていきましょう。

2023-01-16

URLを間違えたので正しくリダイレクトさせるJavaScript (はてなブログの場合)

JavaScript etc

はてなブログでURLを間違って投稿した時503リダイレクトさせるJavaScript解説よくやってしまいがちな日本語タイトルのままのブログ記事投稿。
一応モダンブラウザだと問題なく日本語URLで表示されますが、サーチコンソールでチェックしづらく、SEO的にもイマイチそうな文字化けの可能性があるURLになってしまいます。
ですので、気づいたらURLを正しく半角英数の自然なものに変更し、JavaScriptを使ってリダイレクトさせています。