Web

「2022年のモダンCSS改」を試してみました

投稿日:

新しいCSSプロパティが紹介されている 2022年のモダンCSS改 – Speaker Deck という記事(?)を読みました。

興味深かったので、そこで紹介されていたCSSプロパティを試すWebページを作成してみました。

ページリンク 説明
上下左右中央寄せ(CSS)
  • 上下左右方向の中央寄せ。
scroll-behavior を試す
  • 特定のボックス内のスクロールの動きを指定する。
  • 瞬時の移動、もしくは滑らかなスクロールか。
scroll-margin-top を試す
  • フラグメント(#)付きリンクでスクロールする際のオフセット(ずれの大きさ)を設定できる。
  • 画面上部に固定されたヘッダ領域がある場合などに便利。
backdrop-filter を試す
  • 背景画像に対して、ぼかしなどのフィルターを掛ける。
text-align-last を試す
  • 特定の要素内の最終行での文字の配置方法を指定する。
  • 「最終行」は、「要素の幅に対して十分な量の文字がない可能性がある」という意味で特殊であり、それ以外の行と区別して扱うと便利である。
overscroll-behavior-y を試す
  • 特定の要素上で、スクロール操作した際の挙動を指定する。
  • その要素内のスクロールと、その外部のスクロールとを扱う。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

SQLite

PHP から SQLite を使う手順

PHP から SQLite を使う手順について説明します。

Chrome

Webページが読み込まれる際、HTMLは分割されてパースされます

Webページが読み込まれる際、HTMLが分割されて段階的にパースされる様子を観察します。

ウェブブラウザのリロード処理

目次1. ウェブブラウザの「リロード」は普通のアクセスとは違う!2. もう一つのリロード3. 表にまとめてみました4. おまけ5. おまけ2: Chrome でのリロード操作6. 参考 1. ウェブブ …

Web

bfcache を体験するページを作りました

bfcache を体験するページを作りましたので紹介します。

Web

YouTube でコメントが表示されないときの対処法

YouTube でコメントが表示されないときの対処法を紹介します。