:where()と:is()の違い
参考：https://developer.mozilla.org/ja/docs/Web/CSS/:where whereやisはセレクター解釈を寛容にするためにある擬似クラスで、引数の要素をまとめて書くことができる。s …
HTML/CSS
HTML・CSSなどのマークアップ言語やスタイルシートについて
CSSに値を変換する関数があればEvery Layoutは完成を見ると思う
現時点でもEvery Layoutは充分に機能するが、値の型を変換する機能があれば、より柔軟に扱うことができるのになと思うレイアウトに遭遇した。たとえばこんな感じ。最小限のCSSにしたので、訳わからない意図ではあるが、l …
CSSの関数一覧
こんなにたくさんあるとは知らなかった。 https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Functions attr()、calc()、clamp()とかはもちろんよく …
transformの個別プロパティについて
transformプロパティは translate や rotate、scale などさまざまな値があり、アニメーションをさせる際には、調整が面倒だった。 CSSカスタム変数が登場してからは、カスタム変数を利用することで …
画像の読み込みが完了したかどうかをチェック場合のアイデア集
上記がtrueの場合は読み込みが完了している。ただし、srcやsrcsetがなかったり、404エラーなどの場合でもtrueを返す。要はsuccessではなく、読み込みが完了したかどうかのcompleteである。 http …
Adobe Blank の便利な使い方
https://github.com/adobe-fonts/adobe-blank 10年くらい前に開発されたAdobe BlankというWebフォントはすべてのUnicodeコードポイントを不可視のグリフにマッピング …
base要素について
head内にbase要素を追加するとHTML内にあるaタグの一部の挙動を制御することができる。 参考：https://qiita.com/ryuta69/items/7eaa5d07fc2e6f8933ad
（随時更新）CSSクラス名でよく使う英単語
jumbotronherooverlaytile, panelholderbar
emmetはCSSでも使える
初めて知った。 emmetはHTMLで「div.hoge」のようにセレクタで記述するとそのHTMLを作成してくれるのだが、CSSでも使えるみたい。 db! -> display: block !important; …
CSSクラス名で「_」が使われにくい理由
個人的には視認性やタイポ性の不利だと思っていたが、そうではないみたい。 アンダースコアは識別子として有効だ. “CSS2で識別子に使える文字は [A-Za-z0-9] とISO 10646の161以上、そして …