問題を送信する前に、次の手順を完了していることを確認してください。
- 最新バージョンを使用していることを確認してください✅
- 検索機能を使用して、バグが以前に報告されていないことを確認しました✅
バグを説明する
現在、CSSファイルを組み合わせる場合、ここでメディアクエリをチェックします。
https://github.com/wp-media/wp-rocket/blob/443f2e1b902c592bd517cbaa641571bb2ddce1a5/inc/Engine/Optimization/Minify/CSS/AbstractCSSOptimization.php#L124
次のようなメディアクエリを含むlink要素を除外しません。
max-widthmin-width
たとえば、次のファイルが結合されます。
<link rel='stylesheet' media='screen and (max-width: 900px)' href='css/medium.css' />
その場合、ファイルのコンテンツをメディアクエリにラップしません。これが理想的なソリューションです。
代わりに、結合されたファイルに直接追加します。
そこに含まれるルールは、元のメディアクエリが何を指示したかに関係なく、要素に適用される場合があります。
再現するには
動作を再現する手順：
- メディアクエリを使用してCSSファイルを追加します（例：
max-width。 その中で、たとえばh1の色を変更します。 - CSSの組み合わせを有効にします。
- サイトにアクセスしてください。 ビューポートの幅に関係なく、手順1のルールが適用されます。
予想される行動
このようなメディアクエリを含むファイルは、元のメディアクエリにラップされている間、自動的に除外されるか、結合される必要があります。
追加のコンテキスト
関連チケット： https ： //secure.helpscout.net/conversation/1305858288/201378？folderId = 2135277
バックロググルーミング（WP Media開発チームのみが使用）
- [x]問題を再現する
- [x]根本原因を特定する
- [x]ソリューションのスコープ
- [x]労力を見積もる
vmanthos
全てのコメント3件
Vasilisの詳細をありがとう。 最も簡単な解決策は、CSSの組み合わせからそのようなファイルを除外することだと思います。あるいは、提案されている理想的な解決策を実行できるかもしれません。
3.8ではCSS関連の変更が見られるため、それまでは保留のままにしておきます。 これに関連するチケットが多すぎる場合は、これを変更して修正できます。 そうでない場合は、3.8がこの機能の将来を決定するためにどのように判明するかを見てみましょう。
arunbasillal
2020年10月20日
@arunbasillal簡単なメモ。
これに関連するチケットが多すぎる場合は、これを変更して修正できます。
CSSファイルの
考慮に値する何か。 🙏
vmanthos
2020年10月20日
CSS TreeShakerを使用した@ arunbasillal ＆ @ vmanthos 3.8は、この状況を適切に処理できます。
ソリューションのスコープ✅
ここでの解決策は、 @ vmanthosによって提案されたもの
- メディアリンク属性を識別し、
allと異なる場合は、CSSのコンテンツを適切なメディアタグで囲むだけです。
正規表現を使用すると、メディア属性を識別でき、次のような単純な変更になります。
sprintf( '<strong i="15">@media</strong> %1$s { %2$s }', $media, $css_content );
労力を見積もる✅
[S]
crystinutzaa
2020年11月09日
関連する問題
Tabrisrp
·
4コメント
Screenfeed
·
5コメント
vmanthos
·
5コメント
piotrbak
·
4コメント
webtrainingwheels
·
5コメント
最も参考になるコメント
CSS TreeShakerを使用した@ arunbasillal ＆ @ vmanthos 3.8は、この状況を適切に処理できます。
ソリューションのスコープ✅
ここでの解決策は、 @ vmanthosによって提案されたもの
allと異なる場合は、CSSのコンテンツを適切なメディアタグで囲むだけです。正規表現を使用すると、メディア属性を識別でき、次のような単純な変更になります。
sprintf( '<strong i="15">@media</strong> %1$s { %2$s }', $media, $css_content );労力を見積もる✅
[S]