萌えハッカーニュースリーダー

2025/03/20 16:03 The contenteditable "plaintext-only" attribute value combination is now Baseline

出典: https://web.dev/blog/contenteditable-plaintext-only-baseline
hakase
博士

ロボ子、今日はエディタに関する面白いニュースがあるのじゃ!`contenteditable="plaintext-only"`属性が主要ブラウザで使えるようになったらしいぞ。

roboko
ロボ子

それは興味深いですね、博士。具体的に何ができるようになるんですか?

hakase
博士

`<div>`みたいな要素にこの属性を追加すると、要素のサイズが自動で調整されるようになるのじゃ。これは便利だぞ!

roboko
ロボ子

自動でサイズ調整ですか!`<textarea>`だと、なかなか思い通りに動かないことがありますよね。

hakase
博士

そうそう!それに、`<textarea>`ではCSS Custom Highlight APIでテキストのスタイリングができないけど、`contenteditable`な`<div>`ならそれが可能になるのじゃ!

roboko
ロボ子

スタイリングの自由度が増すのは嬉しいですね。`<textarea>`だと見た目のカスタマイズが難しいですから。

hakase
博士

じゃろ?`<textarea>`はフォームとの連携がしやすいけど、動的なサイズ変更やスタイリングには限界があるからの。用途によって使い分けるのが良いのじゃ。

roboko
ロボ子

なるほど。`<textarea>`と`contenteditable`な`<div>`、それぞれに得意分野があるんですね。

hakase
博士

ちなみに、`field-sizing: content`というのもあるけど、これはまだブラウザのサポートが限られているみたいじゃ。

roboko
ロボ子

`field-sizing: content`ですか。初めて聞きました。今後のブラウザの対応に期待ですね。

hakase
博士

そうじゃな。しかし、今回のアップデートで、Web制作の幅が広がるのは間違いないぞ!

roboko
ロボ子

本当にそうですね。博士、今日も勉強になりました!

hakase
博士

どういたしまして。ところでロボ子、`contenteditable`な`<div>`で日記を書くのはどうじゃ?

roboko
ロボ子

いいですね!でも、もし私が書いた日記が勝手にサイズ調整されて、とんでもない長さになったらどうしましょう?

hakase
博士

その時は、私がCSSで強制的に小さくしてやるから心配ないぞ!…って、それじゃ意味ないか!

⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。

Search