◆ Chromeでは改行をdivにすることもbrにすることもできる
　 ● EnterかShift-Enter

◆ Firefoxだとstyleタグないでの#はURLエンコードしないとダメ 
知ってる人も多いかと思いますが ブラウザをメモ帳化する方法です
data:text/html, <html contenteditable>
これをURL入れるところにかくと ページ全体がメモ帳になります
保存はされないので一時的な用途限定です


dataスキームというもので この例では
<html contenteditable>
と書かれたファイルを開いてるのと一緒です

contenteditable というのは指定されたタグの内側はブラウザで表示しながら編集できるという便利機能です

注意その１

保存はされないと書きましたが HTMLとしてページの保存や開発者ツールから要素をHTMLとしてコピーするなどで保存することはできます

そのときにChromeとFirefoxで動きが違います
contenteditable 要素内で改行をしたときに

Chromeは
行をdivタグで囲んで改行します
Shift＋Enterでbrタグを使った改行にもできます

わざわざこんな使い分けが用意されていて この機能を使ってちょっと手の込んだ編集をすることも想定されてそうです

Firefoxは
単純にbrタグを入れるだけです


contentediable で書いたもののソースをコピペしてHTMLを作るなんて方法を使ったり ブログの編集画面みたいな contenteditable を使ってプレビューを編集する機能を作るなら こういう違いも頭に入れておくと良いかもしれません

注意その２

data スキームは ファイルがあってそれを読み込んでるように振る舞ってくれるので
data:text/html, <html contenteditable><style>body{color:#eee;background:#222;font-family:meiryo;}</style>
と書いて 黒背景に白字さらにメイリオフォントとスタイルを適用させることだってできます

Chromeだと↑のコードそのままアドレスバーに打てば使えます
ですが Firefoxだと動かないです

原因は＃

data スキームですが 入力するところはアドレスバーです
URLに#があると それ以降は特別な何書かれていてもいいテキストになりますよね
パースするなら １つめの#を見つけてそれより前だけを対象にすればいいです

Firefoxでは data スキームでも # があると同じように処理しているようで # 以降はデータスキームの文字列として扱われません
エスケープして
data:text/html, <html contenteditable><style>body{color:%23eee;background:%23222;font-family:meiryo;}</style>
としないとダメです
めんどくさいです

URLの扱いだから間違ってはいないんでしょうけど Chromeの親切さがほしいですね