ブックマーク / marmooo.blogspot.com (3)

  • drop-inline-css でインライン化レベルを最適化する

    CSS 最適化ツール drop-inline-css を更新し、drop-inline-css でインライン化レベルを最適化できるようにしました。 一部分だけ不要 CSS をチェックしたり、一部分だけはチェックをせずそのまま inline 化できたりします。 めちゃくちゃ便利な気がしますが、まあ私だけかな…。 どんなことができるなったかというと、こんな感じの HTML を、 <html> <head> <link class="drop-inline-css" rel="stylesheet" href="inefficient.css"></link> <link class="inline-css" rel="stylesheet" href="efficient.css"></link> <link rel="stylesheet" href="keep.css"></link> <

    drop-inline-css でインライン化レベルを最適化する
    yug1224
    yug1224 2024/03/31
  • Unicode の部首を一意にする

    @marmooo/kanji の部首データを Unicode 全漢字に対応させました。 @marmooo/kanji では画数データは一意になるように設計しているのですが、 Unihan Database の部首は Unicode 15.1 では 183 件の重複登録があり、この解決に苦労が伴ったのでメモを残しておきます。 ちなみに Unihan Database では画数の管理で int を諦めて string を使っているのですが、 情報が不確かな漢字のために int を放棄するのは嫌なので int にしています。 具体的なコードはこちらを参照してください。 ちなみに画数も重複データがあるのですが、3件だけなので画数の対処は簡単です。 より正確に言うと kRSUnicode には大量の重複データがあるはずなのですが、kTotalStrokes には重複が 3件だけです。 ただこれも問題

    yug1224
    yug1224 2024/01/02
  • HTML 全体の CSS を取得して Shadow DOM に適用する

    以下のコードで HTML 全体の CSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたのですが、link タグだと最適化がしにくい問題があります。 CSS はインライン化したほうが高速なので、その時にも同じように使える方法が欲しかったのですが、この方法でいけるとわかりました。 document.styleSheets も知らなかった…。 function getGlobalCSS() { let cssText = ""; for (const stylesheet of document.sty

    yug1224
    yug1224 2023/06/11
  • 1