スクロールしてこの見出しが画面上部に貼り付いたときだけ、見出しの下に境界線を出したい。 技として、境界線用の要素をいっこ用意して、それを見出しの裏に忍ばせておく方法がある。……

TweetDeck の URL が pro.twitter.com に変わったので、そこでも動作するようにしました / Original ボタンのテキストを設定できるようにしました

CSS だけでダークモードとそうじゃないモード(ライトモード？)を切り替えられるような仕組みはできないのかな〜と考えていて、 details タグをボタンと見なして open 属性の有無で切り替えるというのは :has で書けるな、と思ったのだけど、自分のブログに置…

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

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

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

こんにちは、 id:hogashi です。 whywaita Advent Calendar 2022 - Adventar 3日目です。 目次 目次 z-index バトル z-index が 100 より小さいもの z-index が正の値のもの 統計 z-index バトルの頂点はどこか あそびかた むすび z-index バトル id:whywait…

CSS に counters() というのがあって、 1.1 とかをカスタマイズできておもしろい。 counters() - CSS: Cascading Style Sheets | MDN 言 葉 庭 というのをシンボルに使うことにして、繋ぎを の にするとこうなる。 @counter-style kotonohanoniwa { sy…

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…

世界の whywaita Advent Calendar 2021 - Adventar から、今日は 10日目です。昨日の id:gurapomu さんの記事は図から写真から迫力があってすごい、何かのタイミングで参加させてください。 ここ最近の id:whywaita さんとの会話の場所は主に大学のサークル…

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

chrome.google.com 自分で使うための UserCSS 拡張機能を作って公開した。 Chrome の拡張機能は意外と信用しづらくて、ある拡張機能がいつの間にか全く違う人に買われてて自動更新でどんどん使いづらくなるとか、あるいは変なコードを埋め込まれてて情報が送…

任意のサイトの CSS をまるごとそっくり手製のページに入れてみたくなったものの、 style タグに URL を指定するのは CORS とかで怒られるらしい(やっていない)ので、取れる範囲でいいから値だけコピーした。 document.styleSheets で取得したシートにそれぞ…

[追記(2017/07/07)] この内容をScrapboxに取り入れていただけました。記事は残しておきますが、この記事のように特段設定する必要は、既にありません。～～ Scrapbox の数式記法中で \text 環境を使うと改行されてしまうので、雑に(後述)インラインにします…