「Meguro.css #9 @ oRo」に参加してきました

勉強会メモ

Meguro.css #9 @ oRo

ユーザースタイルシートや拡張機能で作る広告ブロック入門

  • Kaitouさん

ユーザースタイルシート

  • 自分で作ったCSSを適用できる
  • SafariとかFFとかで使える
  • Chromeはないので使うとしたらChrome拡張で

Chrome拡張を自分で作る

  • 自分で使うだけならパッケージ化されてないものも読み込める
  • 簡単に作れるのでよく使うページのちょっとした改良とかできちゃう

2020年から2023年までのCSSの変遷を振り返る

ブラウザやFEのできごと

CSSの進化

  • where/is
  • aspect-ratio
  • flexboxのgap
  • subgrid
  • ContainerQueries
  • focus-visible
  • margin-inline-start/end/margin-block-top/bottom
  • accent-color
  • scroll-snap
  • scroll-behavior
  • inset
  • media queryの範囲指定
  • @scope/@layer
  • has
  • CSS Nesting
  • View Transition API

Scroll-driven AnimationsとCSSの進化

スクロール駆動アニメーション

  • スクロールに合わせて要素をアニメーションさせることができる
  • Scroll Progress Timeline
  • View Progress Timeline
  • パララックスがCSSだけで簡単に作れる
  • 対応ブラウザはまだまだ

カスタムプロパティのアニメーション

アニメーションの作り方

  • 昔はkeyframesで0,25,50,75,100みたいに指定してた
  • sin()を使うともっといい感じにできる
    • 引数にカスタムプロパティを入れてその値を変化させる
      • sin(var(--x))
    • 設定を書く必要もある
  • iOSのアニメーション

アニメーションのパフォーマンス

  • CSSでやった方がJSでやるより速い
    • opacityやtransformなどは速い
    • カスタムプロパティはそうでもなかった

2年ぶりにCSSアニメーションを作ったよ！

  • うえむーさん

アニメーションを作ってみた

CSSだけでCookie Clickerを作る

  • はとさん

CookieClicker