Utilisation du CSS
Consultez la taille et la proportion de CSS utilisé pendant le test, par page et par feuille. Les styles inutilisés peuvent être nécessaires après une interaction ou sur une autre page.
Audit CSS et détection des règles dupliquées
Saisissez l’URL d’une page pour analyser ses styles. Repérez les règles répétées, les sélecteurs difficiles à surcharger et le poids des feuilles CSS. Le rapport vous aide à choisir les corrections à tester dans votre projet.
Format du résultat
Le rapport affiche les sources CSS, les métriques et les signaux
Examinez la taille et l’utilisation du CSS, puis les couleurs, polices, niveaux d’empilement et erreurs de validation.
Données illustratives pour expliquer le rapport. Les résultats de votre page apparaissent après analyse.
Carte des sources de feuilles de style
Comparez les feuilles externes aux styles intégrés à la page. Chaque source indique sa taille et la quantité de code utilisé ou inutilisé pendant le test.
| Source | Type | Utilisation | Inutilisé |
|---|---|---|---|
| app.css | externe | 48 KiB / 72 KiB | 72 KiB · 60% |
| components.css | externe | 32 KiB / 8 KiB | 8 KiB · 20% |
| styles en ligne | en ligne | 6 KiB / 2 KiB | 2 KiB · 25% |
- Source
- app.css
- Type
- externe
- Utilisation
- 48 KiB / 72 KiB
- Inutilisé
- 72 KiB · 60%
- Source
- components.css
- Type
- externe
- Utilisation
- 32 KiB / 8 KiB
- Inutilisé
- 8 KiB · 20%
- Source
- styles en ligne
- Type
- en ligne
- Utilisation
- 6 KiB / 2 KiB
- Inutilisé
- 2 KiB · 25%
Exemple pédagogique : une règle inutilisée à l’ouverture peut servir au menu ouvert ou à un autre écran. Vérifiez ces états et les pages qui partagent le fichier avant de supprimer la règle. Ce cas illustre la lecture du rapport, sans mesure issue d’un site client.
Ce que nous vérifions
Un inventaire CSS complet plutôt que des conseils génériques
Le rapport rassemble les sources et tailles des styles, l’utilisation du code, la priorité des sélecteurs, les déclarations répétées, les valeurs de style et les erreurs de validation.
Taille et sources
Nous collectons la taille totale du CSS, le nombre de sources de feuilles de style et des comptages distincts pour les feuilles de style en ligne et externes.
Spécificité des sélecteurs
Comparez la spécificité minimale, moyenne et maximale des sélecteurs, qui contribue à la priorité des règles. Les sélecteurs les plus complexes sont présentés séparément.
Déclarations répétées et !important
Consultez le nombre de règles, sélecteurs et déclarations, les paires propriété-valeur répétées et les exemples utilisant !important.
Media queries et préfixes
Nous affichons les media queries les plus fréquentes et comptons les propriétés CSS avec préfixes vendeurs : -webkit-, -moz-, -ms- et -o-.
Couleurs, polices, z-index et erreurs
Le rapport fournit les valeurs de couleur uniques, les valeurs font-family détectées, les valeurs numériques de z-index et des exemples d’erreurs de validation CSS.
Comment ça marche
De l’URL à un résumé CSS complet pour la page
Saisissez l’URL de la page. Milten l’ouvre dans un navigateur, recueille les feuilles de style et prépare le rapport. Aucune intégration au processus de compilation n’est nécessaire.
Chargez la page et collectez le CSS
Le rapport indique l’URL vérifiée, la date et les sources des styles. Il distingue les styles intégrés à la page des feuilles de style externes.
Mesurer l’utilisation du CSS et la priorité des sélecteurs
Consultez la quantité de CSS utilisé, le nombre de règles et de déclarations, et les sélecteurs dont la spécificité est la plus élevée.
Construisez des tableaux pour l’examen du CSS
Examinez les déclarations répétées, !important, les requêtes média, les préfixes de navigateur, les couleurs, polices, niveaux d’empilement et erreurs CSS.
FAQ
Questions fréquentes sur l’audit CSS
Réponses sur l’utilisation du CSS, la priorité des sélecteurs, !important, le contenu du rapport et la durée du test.
Comment les CSS inutilisés affectent-ils la vitesse ?
Le navigateur télécharge, analyse et applique le CSS avant de rendre la page. Plus il y a de règles inutiles, plus le risque de retard au premier rendu est élevé et plus l'interface est difficile à maintenir.
Pourquoi examiner la spécificité des sélecteurs ?
La spécificité aide à déterminer la priorité d’un sélecteur lorsque les règles CSS se contredisent. Les sélecteurs très spécifiques compliquent les changements, car leur remplacement nécessite des règles plus fortes.
Faut-il supprimer toutes les déclarations !important ?
Non. !important modifie la priorité d'une déclaration et peut être intentionnel. Le rapport indique où approfondir l'analyse. Examinez la cascade et les états du composant avant de le remplacer.
Quelles données figureront dans le rapport ?
Le rapport comprend l’URL et la date, les sources et tailles des styles, l’utilisation du code, les sélecteurs et leur spécificité, les déclarations répétées, !important, les requêtes média, les préfixes de navigateur, les couleurs, polices, niveaux d’empilement et erreurs CSS.
Combien de temps prend la vérification d'une page ?
La vérification d'une seule page prend généralement moins d'une minute. La durée dépend du nombre de ressources, des conditions réseau et du temps nécessaire à la page pour se stabiliser après le chargement.
Services associés
Ce qu'il faut vérifier ensuite avec ce service
Vérification JavaScript
Vérifiez les fichiers JavaScript, les erreurs de chargement et le code inutilisé au chargement. Repérez les scripts à examiner davantage.
OuvrirVérification HTML
Repérez les erreurs HTML et les structures de page trop complexes. Le rapport indique les éléments concernés.
OuvrirValeurs de design
Recueillez les couleurs, les polices, les tailles et les espacements de la page. Obtenez une liste de valeurs pour travailler sur sa présentation.
OuvrirAccessibilité
Repérez les problèmes d’accessibilité avec une vérification automatique. Obtenez des recommandations ; une évaluation complète exige aussi des vérifications manuelles.
Ouvrir