sectionタグにはaria-labelledbyをつける
HTML,CSSなど取得、解析し、レンダリングの処理をしてコンテンツを表示することをクリティカルレンダリングパスという
header/footer はbody直下で使うとページのヘッダー・フッターとなり、セクショニング・コンテンツやmain内で使用した場合、それらのヘッダー・フッターになる。ARIAロールも変わる。
見出しとそれに関連するコンテンツに<hgroup>
table系 colgroup scope headers
button要素 form内ではtype = submit, form外ではtype = buttonとなる
form form外のinput要素をformとして送信したり、form内のボタンとかを他のformの要素として送信したりできる
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https~~;" />指定したほうがいいかも
セレクタリストにて、「section .heading, section p:unknown」より「section :is(.heading, p:unknown)」がベターな理由は、未対応なセレクタが含まれていると前者は全体が無効になるが、後者は未対応部分だけ無効になるから
カスタムプロパティ登録について、-- だと値の補間がされないが、@property だと高度
css background-imageでimage-set()でdprごとに画像設定できる
justify-items,align-itemsは親側に適用し、すべての子要素が使用するjustify-self,align-selfのデフォルト設定を指定する
レンダリング最適化
contain興味深い
- contain: size
親要素に使うと、子要素の大きさを考慮しなくなる。widthとheightが明確に固定されている要素は使おう。
- contain: layout
適用された要素はほかに影響を与えない
※これだけ使っても最適化はされない
- contain:paint
要素がいに影響を与えないよう、はみ出したものはクリップされたりする
overflow:heddenやclipよりいいかも
- cocntain: stylle
一部な使い道なので忘れてよし
gsapのpinとかで以下のような使い方できるかも
.pinned-box {
contain: layout paint;
will-change: transform;
}- content-visibility
containをよしなにやってくれる
will-changeについて
無闇矢鱈に使うと逆効果になることもあるらしい。アニメーションの直前にオンになる感じが良い。
UI
- overflow-anchor
レイアウトシフトによってページがずれないように処理。
前職でページネーションとかで画面がずれる問題があって、JSでScrollを処理したが、このCSSで処理できたのかもしれない。
- 値が文字列やキーワードの場合、transitionを適用するには「allow-discrete」が必要
- display:noneのアニメーションには、@starting-styleが必要
スクロールアニメーション
細かい位置の指定はまだ全ブラウザ対応していないが、どうやらIntersectionObserverや、gsapScrollTriggerを使わなくてもスクロールに応じたアニメーションができるようになりそう。