Meguro.css #9 @ oRo

• 2023/12/1
• https://megurocss.connpass.com/event/300400/

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

• Kaitouさん

ユーザースタイルシート

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

Chrome拡張を自分で作る

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

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

• yamanokuさん
• https://scrapbox.io/yamanoku/2020%E5%B9%B4%E3%81%8B%E3%82%892023%E5%B9%B4%E3%81%BE%E3%81%A7%E3%81%AECSS%E3%81%AE%E5%A4%89%E9%81%B7%E3%82%92%E6%8C%AF%E3%82%8A%E8%BF%94%E3%82%8B

ブラウザやFEのできごと

• Chrome
  • 80が2020/2でいまは120
• Edge
  • Chromiumベースが2020/1
  • レガシーEdfeは2021/3に終了
• IE
  • 2021/5に終了発表2022/6にサポート終了
• Igalia
  • ブラウザベンダに代わってクラウドファンディングでクロスブラウザ対応してくれる会社

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の進化

• degudegu2510さん
• https://speakerdeck.com/degudegu2510/scroll-driven-animationstocssnojin-hua

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

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

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

• katashinさん
• https://katashin.info/posts/css-math-animation/

アニメーションの作り方

• 昔はkeyframesで0,25,50,75,100みたいに指定してた
• sin()を使うともっといい感じにできる
  • 引数にカスタムプロパティを入れてその値を変化させる
    • sin(var(--x))
  • 設定を書く必要もある
• iOSのアニメーション
  • バネっぽい表現で動く
  • 複雑な数式で表現されてる
  • 複雑だけどCSSで再現することができる
  • https://github.com/ktsn/css-spring-animation

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

• CSSでやった方がJSでやるより速い
  • opacityやtransformなどは速い
  • カスタムプロパティはそうでもなかった
    • 1frごとにレンダリングが走っちゃってた

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

• うえむーさん

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

• ポンチ絵書く
• 素材を準備
  • 画像をsvg化するツール
    • https://ja.vectorizer.ai/
• Figmaでデザイン
• HTML/CSSだけで実装
• https://htmlgame-animation.vercel.app/

CSSだけでCookie Clickerを作る

• はとさん

CookieClicker

• https://kthatoto.github.io/css-cookie-clicker/
• https://github.com/kthatoto/css-cookie-clicker/tree/main