marqueeをcssで再現する

[totegamma]

marqueeはdeprecatedなので。(そもそも)

またmarqueeが起因で再描画が必要以上に走ってリソースを過剰消費している疑いがある？

[totegamma]

参考: https://github.com/kokoa0429/ichigen-yamero/issues/5

[ouroboros723]

修正方針としては次のいずれかになりそう...？

• 形だけ<marquee>タグを残して、内部的に<marquee>が書かれている部分をCSSに置き換える

  • 参考: https://github.com/kokoa0429/ichigen-yamero/issues/5

• 完全に<marquee>タグのまま残して、非表示の時はDOMを削除もしくは非表示にしてCPUリソースの消費を抑える
  • https://concurrent.world/message/e55d8fd9-7bc6-4eee-92bc-c82ef3f39a5f@CC506dDf8C7d5B0ea9242C699F628756E674E8Af26
• ”<marquee>的な"タグを実装(ex. <mar-quee>)してそのタグが呼ばれたらCSSなどで描画する(元の<marquee>は使用不可にする)
  • 参考: https://github.com/yutori/mar-quee

検討の余地はありそうですね...

[totegamma]

検討ありがとうございます！

少なくともmarqueeタグをcssにリプレースする目的はCPUリソースうんぬんの文脈もあるにはあるのですが、一番の目的は「そもそもmarqueeタグがdeprecatedであり、例えば一部のfirefoxでは非表示であったりiosのsafariでは簡略化された表示にfallbackする現状であるため、代替要素に切り替えてどのブラウザからも意図した見た目になってほしい」というものです。

個人的には1つ目のようにmarqueeタグをdivかなんかに置換してそこにcssのスタイルを当ててしまう方法で十分だと思ってます。

ReactMarkdownにコンポーネント定義があればコンポーネント射影設定で簡単にこれができますが、如何せんdeprecatedなタグなので定義がない可能性もあり、その場合はちょっと面倒ですね。

もし定義がなかった場合

とはいえremarkないしはrehypeのプラグインはconcurrent-worldのプロジェクトでは遅かれ早かれ実装することになると思っているので、今回このmarqueeを置き換えるプラグインをちゃんと書いてしまってもいいですし、面倒であれば一旦単純置換でもいいかなと思ってます。