Stylus を使ってよく見るサイトは独自スタイルを適用することがよくある。ヘッダー、フッター、サイドバーを消すとか。OS に依存しない場合はいいけど、レンダリングやディスプレイによって微妙に変えたい場合に対応できない。css で OS を判断して分岐できないから。Dropbox と連携して複数環境 (と言っても二台) で Stylus の設定を同期しているので、windows では適用したいけど mac では適用したくないなどがある。特にフォント周り。それぞれの os で同期したときだけ有効と無効を切り替えればいいかと運用してたけど、都度気になってしまうので効率が悪い。Stylus に同期しない設定を追加するような機能追加をすればいいかと思って実装していたけど、npm の実装に依存して対応できなさそうなので諦めた。PR 作るにしてもテストできる範囲は限られてるし。
Stylus じゃなくて Tampermonkey で個別に対応すればいいことに気がつく。以下。
// ==UserScript== // @name All Windows // @namespace http://tampermonkey.net/ // @version 2025-05-18 // @description try to take over the world! // @author You // @match http://*/* // @match https://*/* // @grant none // ==/UserScript== (function() { 'use strict'; const style = document.createElement('style'); style.className = 'self-tampermonkey'; style.textContent = ` 設定したいスタイル `; // body がまだ無い場合に備えて function insertStyleWhenReady() { if (document.body) { document.body.insertAdjacentElement("afterend", style); } else { new MutationObserver((mutations, observer) => { if (document.body) { document.body.insertAdjacentElement("afterend", style); observer.disconnect(); } }).observe(document.documentElement, { childList: true, subtree: true }); } } insertStyleWhenReady(); })();
また便利になった。