こんにちは、 id:hogashi です。 masawada Advent Calendar 2022 - Adventar の 2日目です。 目次 目次 OTP 入力フォーム まずベストプラクティスを見る それでは本題です ちなみに ちなみに2 むすび OTP 入力フォーム なぜか id:masawada さんとたまにワン…

スクロールしたときどの要素で scroll イベントが発火しているか探すのが大変なことがあるけど、とにかく全部の要素にイベントリスナをつけて、実際にスクロールしてみることで、とにかく発見することができる。 document.querySelectorAll('body *').forEac…

Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 － Publickey を読んだので、調べたものとあわせてまとめる。 三行 原因 forgiving-selector-list Chrome と Safari の状況の違い されている…

CSS には :nth-child() - CSS: Cascading Style Sheets | MDN という疑似クラスがあって、何番目の兄弟かを指定できる。 :nth-child(3) とかやると 3番目、みたいな感じで、 1 始まりになっている。 li:nth-child(3) { background-color: gold; font-size: 2…

before 疑似要素でブログを書くとどうなるのか、と思ったけど、改行ができないことがわかってきた。それ以外は見た感じは変化がなくて、カーソルを持ってくると文字列選択ができないことがわかるくらいで、素朴に文字をどんどん書いていくだけなら before で…

CSS の text-shadow は、ぼかしは無しでずらすだけというのもできる。なので、めちゃくちゃずらすと文字が複製されたように見える。 MDN で書かれている例だとこう。 text-shadow: 5px 10px; https://developer.mozilla.org/ja/docs/Web/CSS/text-shadow つ…

web サイトの html のうち、 body タグ以下のタグをランダムで選んで様子を変える、というのを思いついて遊んでいた。 この間は、ランダム麻雀という、配牌をひたすら見定めることができる web サイトを作った。

Chrome 拡張機能でbodyタグを取得して何かしようとしたら、スクリプトが読まれるの結構早くて、DOMContentLoadedを待たないとbodyタグが現れない？ときがあるのだけど、拡張機能はなぜかDOMContentLoadedのイベント発火を取れない？らしくて、力技を使った。…