カスタムCSS内に`<`が含まれるとエスケープ処理されてしまう

[hsgw]

カスタムCSS内にメディアクエリの範囲指定で使用する<が含まれると、HTMLタグと誤判断され削除され正しいCSS文字列として出力されません。

入力文字列

@media (width >= 1000px) {
  p { color: red;}
}

@media (width > 1000px) {
  p { color: green;}
}

@media (width <= 1000px) {
  p { color: blue;}
}

@media (width < 1000px) {
  p { color: blue;}
}

出力HTML（抜粋）

<style type="text/css">/* VK CSS Customize Single */@media (width >= 1000px) { p { color: red;}}@media (width > 1000px) { p { color: green;}}@media (width </style>

[kurudrive]

最近 ExUnit のカスタムCSS 機能はあまり使う出番がなくなってきたように思いますが、どんなケースで使ってますか？

[hsgw]

単純にテーマファイルをいじるまでもないCSSを直接書き込んでいます。

[kurudrive]

外観 > カスタマイズ > 追加CSS ではなくて ExUnit の方を使う理由は何かありますか？

[hsgw]

再利用しないCSSのスコープを狭めたいため、ページ内で使用しています

[kurudrive]

特定のページの編集画面の下に表示される入力欄で使っているという事ですね。理解しました。 ブロックエディタを使っていますか？クラシックエディタですか？

[hsgw]

その通りです。ブロックエディタを使用しています。

[kurudrive]

なるほど、ちょっと修正まで時間がかかるかもしれないので、 お急ぎの場合はカスタムHTMLブロックを配置して、以下のように記述してください。

<style type="text/css">
@media (width >= 1000px) {
  p { color: red;}
}

@media (width > 1000px) {
  p { color: green;}
}

@media (width <= 1000px) {
  p { color: blue;}
}

@media (width < 1000px) {
  p { color: blue;}
}
</style>

[hsgw]

代替案、ありがとうございます。 私の方では、カスタムCSS内で<を使用せずに

@media (1000px >= width)

として回避しています。

現状、<を使用できないことが周知できればと思いご報告させていただきました。 ご対応よろしくお願いします。

[kurudrive]

@hsgw ご報告ありがとうございます！ (￣人￣)

[kurudrive]

@hsgw ご報告ありがとうございました。9.98.0.1 にて修正いたしました。