[カラーミー + js]邪魔なcssを無効化する方法

余計なものがある。

仕様について
cssは無効化できる
やっていく

仕様について

カラーミーの<head>にはこういうのがある。

<link rel="stylesheet" href="【ドメイン】/css/framework/colormekit.css" type="text/css">
<link rel="stylesheet" href="【ドメイン】/css/framework/colormekit-responsive.css" type="text/css">

オリジナルデザインを組んで放り込んだときになんかおかしい場合、こいつらが悪さの原因になってたりする。

邪魔だけど自動挿入されてるから任意で削除できない。

cssは無効化できる

disabledがついてると、その<link>は発火しない。

<link rel="stylesheet" href="hogehoge.css" type="text/css" disabled>

disabledの記述タイミングは後からでも良い。

つまり、jsで追記しても効果がある。
今回の対処はこれでやっていく。

やっていく

自分でも実害を受けた「colormekit-responsive.css」を対象に無効化していく。

こんな感じ。

const targetCss = document.querySelector('link[rel="stylesheet"][href*="colormekit-responsive.css"]');

if (targetCss) {
    targetCss.disabled = true;
    console.log('colormekit-responsive.css を無効化しました');
}

共通のHTML内に書くなり外部ファイルで読み込むなり、colormekitの方が上位に記述されるので好きな方法で書き込めば良い。

良かったですね。