Préserver certains CSS lors de l'utilisation de Supprimer les ressources CSS inutilisées

Par défaut, la fonction Supprimer les ressources CSS inutilisées supprime tous les fichiers CSS et CSS inline de vos pages pour ne laisser que le bloc CSS optimisé Used CSS qui en résulte.

Dans cet article, vous trouverez les instructions pour préserver des styles inline ou des fichiers CSS spécifiques lorsque cela est nécessaire, à l'aide d'une extension d'assistance.

En outre, l'extension d'aide peut être utilisée pour modifier le bloc CSS utilisé résultant, ce qui est nécessaire dans des cas très spécifiques.

Note: Dans la plupart des cas, les problèmes d'affichage devraient être résolus à l'aide de la boîte Liste des exceptions CSS, comme indiqué ici Les approches présentées sur cette page ne devraient être utilisées que lorsque la boîte Liste des exceptions CSS ne fonctionne pas.

Extension d'aide

L'extension suivante vous aidera à modifier le CSS utilisé en excluant les CSS externes et inline, en ajoutant des styles personnalisés et en filtrant les styles inutiles du CSS utilisé.

📥 Télécharger (.zip) : WP Rocket | Modify the Used CSS

Développeurs : Vous pouvez trouver le fichier code de cette extension sur GitHub.

Attention ! L'extension d'aide ne fonctionne pas seul. Une édition manuelle du code est requise avant utilisation !

Pour personnaliser l'extension d'aide, veuillez :

1. Télécharger le fichier ZIP de l'extension d'aide et l'extraire.
2. Ouvrir le fichier wp-rocket-modify-the-used-css.php à l'aide d'un éditeur de texte/code.
3. Appliquez la ou les personnalisations requises.
4. Enregistrer les modifications.
5. Compresser les fichiers d'aide dans un fichier ZIP.

Le type de personnalisation dépend de ce que vous souhaitez obtenir, et les instructions spécifiques à chaque cas sont présentées dans les sections ci-dessous.

Exclusion des fichiers CSS

Pour exclure des fichiers CSS spécifiques de leur emplacement d'origine, procédez comme suit :

1. Décommentez la ligne 33 en supprimant les deux premiers caractères //.
2. Remplacez /wp-content/plugins/plugin-name/css/file.css par le fichier que vous devez conserver.
3. Pour exclure plusieurs fichiers CSS, copiez la ligne entière dans une nouvelle ligne pour chaque fichier de style que vous souhaitez exclure.

Le contenu du fichier CSS sera toujours ajouté au CSS utilisé.

Conseil : Pour exclure un fichier généré dynamiquement, par exemple : /wp-content/plugins/some-plugin/0/some-css-123456.css, n'utilisez pas le nom de fichier et le chemin d'accès complets, ni de caractères génériques, car ils ne fonctionnent pas dans ce cas. Utilisez plutôt une chaîne de correspondance partielle, telle que /wp-content/plugins/some-plugin/0/.

Exclure les CSS inline par contenu

Pour exclure les feuilles de style CSS inline à l'intérieur d'un contenu spécifique <style> spécifiques de leur emplacement d'origine, en ciblant des sélecteurs CSS spécifiques, procédez comme suit :

1. Choisissez un sélecteur CSS à l'intérieur de la déclaration <style>, plus il est spécifique, mieux c'est, de cette façon, seul le style inline que vous voulez sera préservé dans le code HTML.
2. Décommentez la ligne 45 en supprimant les deux premiers caractères //.
3. Remplacez .targetSelector par le sélecteur que vous avez choisi d'utiliser.
4. Pour exclure plusieurs blocs CSS inline, copiez la ligne entière dans une nouvelle ligne pour chaque déclaration de style que vous souhaitez exclure, et définissez les sélecteurs.

Le contenu du bloc CSS sera toujours ajouté au CSS utilisé.

Note : Les caractères génériques ne fonctionnent pas dans cette extension d'aide. En revanche, vous pouvez utiliser une correspondance partielle. Par exemple, si vous avez une classe générée dynamiquement comme .button-widget-wuoy0oa où wuoy0oa est la partie dynamique, vous pouvez utiliser .button-widget- pour couvrir tous les cas.

Exclusion de CSS inline par attribut

Pour empêcher les feuilles de style CSS inline à l'intérieur d'attributs spécifiques <style> spécifiques d'être supprimées, et en ciblant des attributs spécifiques trouvés dans leur balise <style>, vous pouvez suivre des étapes similaires à celles de la section ci-dessus.

Cependant, dans ce cas, pour cibler les attributs de la balise, travaillez sur la balise ligne 56.

Dans ce cas, le contenu du bloc CSS sera toujours ajouté au bloc CSS utilisé.

Supprimer les styles du CSS utilisé

Pour cibler par attribut des styles provenant de fichiers CSS externes ou d'éléments <style> et les exclure complètement de l'ajout au CSS utilisé résultant, suivez les étapes ci-dessous :

1. Décommentez la ligne 73 en supprimant les deux premiers caractères //.
2. Remplacez data-example-1 par l'attribut de l'élément CSS que vous devez exclure.
3. Pour exclure plusieurs éléments CSS, copiez la ligne entière dans une nouvelle ligne pour chaque élément de style que vous souhaitez exclure, et personnalisez-les.

Note : Les caractères génériques et autres éléments de regex ne fonctionnent pas ici.

<style> sont vidés (leurs balises restent dans le HTML), mais aussi, ces <strong>fichiers CSS ne</strong><strong>t</strong> seront pas ajoutés au bloc CSS utilisé qui en résulte.<br> <br> Cette approche est utile dans les cas où certaines feuilles de style CSS ne sont pas censées être ajoutées à toutes les pages, mais appliquées uniquement lorsque des conditions très spécifiques sont remplies. <br> <br> Si vous utilisez cette option en même temps que l'une des trois premières options ci-dessus pour cibler le même fichier CSS ou style  inline, celui-ci sera conservé à son emplacement d'origine dans la page, mais ses styles ne seront pas ajoutés au bloc CSS utilisé. Cela peut être utile pour éviter que des styles soient appliqués deux fois à des pages.</avec></p><h2>Préparer les styles au CSS utilisé</h2><p> Pour ajouter les styles spécifiés au <strong>début</strong> du bloc CSS utilisé :</p><ol> <li>Décommenter la <strong>ligne 83</strong> en supprimant les deux premiers caractères <code>//. </avec> </p> <li>Remplacez <code>.new_css {background : red;} par votre propre règle CSS.</avec></p><h2>Apporter des styles au CSS utilisé</h2><p> Pour ajouter les styles spécifiés à la <strong>fin</strong> du bloc CSS utilisé, procédez comme suit :</p><ol> <li>Décommentez la <strong>ligne 91</strong> en supprimant les deux premiers caractères <code>//. </avec> </p> <li>Remplacez <code>.new_css {background : red;} par votre propre règle CSS.</avec></p><h2>Filtrer le contenu du CSS utilisé</h2><p> Pour cibler une règle CSS du bloc Used CSS et la remplacer par votre propre règle, vous devez :</p><ol> <li>Décommenter la <strong>ligne 100</strong> en supprimant les deux premiers caractères <code>//. </avec> </p> <li>Remplacez <code>.to-be-removed{padding:10px} par la règle CSS existante que vous souhaitez <strong>supprimer</strong>.</avec></p><li>Décommentez la <strong>ligne 101</strong> en supprimant les deux premiers caractères <code>//. </avec> </p> <li>Décommenter la <strong>ligne 102</strong> en supprimant les deux premiers caractères <code>//.</avec></p><li>Remplacez <code>.to-be-inserted{padding:20px} par la règle CSS que vous souhaitez insérer.

Installation

Une fois que l'aide a été personnalisée avec les sections ci-dessus, vous pouvez installer l'extension d'aide, comme ceci :

1. Sur votre site - allez dans Extensions → Ajouter une extension → Téléverser une extension et sélectionnez le fichier zip.
2. Activez l'extension.
3. Videz le cache de WP Rocket.