hogashi.*

日記から何から

HTML

marquee 入れ子 どうなる

<marquee scrollamount="1" direction="right"> <div style="width: 100px; height: 100px; background-color: green;"></div> </marquee> <marquee scrollamount="10" direction="right"> <marquee scrollamount="9"> <div style="width: 100px; height: 100px; background-color: green;"></div> </marquee> </marquee> <…

GitHubのコード表示部分はtextareaとbefore疑似要素でできている

たしかこないだまでは普通に div ? で、テキストをマウスカーソルでドラッグアンドドロップで選択したりするような感じだったはずだけど、最近?になって、選択できる部分は textarea になっていて、点滅するカーソルが出るので、キーボードでエディタのよ…

スマホのブラウザでinput type="date"で年を選ぶ

あるサイトで、誕生日の入力に input type="date" が使われていて、こういう画面が出る (画像は MDN で見てるけどそれには特に意味はない)。 今ここでおためしできます: 前後の月に移る矢印しかなさそうで、みんな自分の生まれ年まで頑張って遡ってるのか? …

aタグで#topにリンクするとページ先頭にスクロールするのは仕様

はてなエンジニア Advent Calendar 2022 - Hatena Developer Blog の 2023/1/5 の記事です。 id:hogashi です。 目次 目次 3行 こういうやつ 仕様を眺める 追記1: おまけ 追記2: id="top" な要素があるときは? 3行 a タグの href 属性に #top と書くと、ク…

ブラウザで:has()セレクタが実装されてjQueryの:has()セレクタの挙動が変わった話の続き

前回までのあらすじ blog.hog.as ブラウザで :has() を実装した結果、 :querySelectorAll() で :has() を扱えるようになり、 jQuery で :has() を使ったときの挙動が変わってしまっていた。 その後 結局、 :is :where 以外のセレクタ (含む :has()) を unfor…

ワンタイムパスワード(OTP)のベストプラクティスじゃない入力フォームに出会う

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

ページ内のどの要素でscrollイベントが発火しているかとにかく見るには全部の要素にイベントリスナをつけると便利

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

ブラウザで:has()セレクタが実装されてjQueryの:has()セレクタの挙動が変わったの調べた

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

CSSで3番目以降を:nth-child(n + 3)で書く

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 で…

text-shadowで文字の影だけ見せる

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のイベント発火を取れない?らしくて、力技を使った。…