hogashi.*

日記から何から

CSS

CSSです

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

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

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

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

z-indexバトル観戦

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

CSSのcounters()で箇条書きの数字をカスタマイズできておもしろい

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

ブラウザで: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…

秘蔵UserCSS大放出祭

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

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

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

自分用にUserCSSのChrome拡張機能つくった

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

JavaScriptでCSSをまるごとコピー

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

(OLD) Scrapboxの数式記法中の\text環境をインラインにする

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