テクノロジー

JavaScriptを書かない2025年のモーダルの実装方法 – TAKLOG
2025/05/26 05:07 コメント 21件
1: kohlibhai18 2025/05/26 20:42

https://www.utgop.org/expediareserve

2: yasu-log 2025/05/26 20:58

DOMの挙動に対するPolyfillは昔からあまり信用していないのですが（エンバグの経験あり）、command/commandforに対しては問題ないかしら？

3: Shinwiki 2025/05/26 22:37

“極力”

4: strawberryhunter 2025/05/26 23:31

「全コアブラウザでサポートされていない」

5: kijtra 2025/05/26 23:43

ポリフィル使うくらいなら checkbox 使ってCSSのみで作っちゃうなあ

6: eightbeeeaaat 2025/05/27 01:02

>2025年5月現在も iOS で完全にスクロールを無効にすることはできません

7: nicht-sein 2025/05/27 01:33

ちょうど今度こんなダイアログを実装しなきゃいけないところだったので、試してみよう

8: Kanasansoft 2025/05/27 07:32

『ボタンを div や span で作成する罪は今更語ることは無いが、そういった実装を自然と防ぐことができる。』

9: anonymighty 2025/05/27 07:53

HTMLの役割に装飾を侵食させるのはどうですかねえ。width=100px"とかcolor="red"とかタグに書くのをなくしてCSSに分離しようってやってきたのは何だったのか。せめてCSSでやったらいいのに。

10: ejointjp 2025/05/27 09:03

便利な反面、モーダルといいカルーセルといい、文書構造の機能のみとすべきhtmlの領域に見た目の機能がどんどん逆流してるな。cssでやれ

11: mag4n 2025/05/27 09:07

へー

12: diveintounlimit 2025/05/27 09:08

もうHTMLも構造記述言語じゃなくなってきてるし、CSSもスタイル記述言語じゃなくなってきた。

13: spark7 2025/05/27 09:14

labelのfor属性みたいなもんだと思えばそう不自然でも無いような。

14: hatest 2025/05/27 11:10

Polyfill使って隠ぺいしているのでJavaScriptを書かないと言っているが、Polyfill使ってる時点で結局はJavaScriptが動くということなので、タイトルちょっとどうなのって気がします

15: nijitaro 2025/05/27 11:42

dialog はまさに構造だと思う。それとは別に command/commandfor の採用はもう少し様子見かな

16: Masamune_903 2025/05/27 12:19

セマンティックウェブ、読みやすいHTMLになりつつあるなと好印象。それに合わせて勉強し続けていかないとな……

17: ultimatebreak 2025/05/27 13:24

知らん間にdialog変わってたのか。それはそれとしてiOSさんさあ

18: yarumato 2025/05/27 13:24

“方針としては極力JavaScriptを書かないことを目指す。<button>要素のcommand 属性 / commandfor 属性は新しいHTML属性。<dialog>要素の開閉および Light dismiss 機能が有効に。showModal() や close() するために JavaScript を書く必要はない。”

19: otchy210 2025/05/27 15:07

HTML 上の記述は別に装飾では無いような。form 要素や a 要素の target 属性とか、label 要素の for 属性の仲間だと思う。

20: xlc 2025/05/27 18:11

dialogは入力をページ内で処理したい場合に使うと思うので、ページをまたがったformとは異なり必然的にJavaScriptで処理ことになるよね。

21: hush_in 2025/05/29 09:06

closedby属性知らなかった