Cet article est extrait du dernier livre de Tiffany "CSS Master, deuxième édition". Sur la voie de devenir un maître CSS, il est crucial de maîtriser les compétences de dépannage et d'optimisation du CSS. Comment diagnostiquer et résoudre les problèmes de rendu? Comment s'assurer que CSS n'affecte pas les performances de l'utilisateur final? Comment assurer la qualité du code?
Les outils appropriés peuvent assurer une opération frontale efficace. Cet article se concentrera sur la technologie de compression CSS.
Les outils du développeur aident à trouver et à résoudre les problèmes de rendu, mais à quel point est-il efficace? Notre taille de fichier est-elle suffisamment petite? Pour le moment, nous devons utiliser des outils de compression.
Dans CSS, la compression est simplement de "supprimer les caractères inutiles". Par exemple, considérez le bloc de code suivant:
<code>h1 {
font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;
width: 80%;
margin: 10px auto 0px;
}</code>Ce code contient des ruptures de ligne et des espaces, avec un total de 98 octets. Regardons l'exemple compressé:
<code>h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;margin:10px auto 0}</code>Maintenant, notre CSS n'est que de 80 octets - une réduction de 18%. Bien sûr, moins il y a d'octets, plus la vitesse de téléchargement est rapide et plus le coût de la transmission des données, ce qui est bon pour vous et vos utilisateurs.
Cet article présentera CSS Optimizer (CSSO), un outil de compression basé sur Node.js. Pour installer CSSO, vous devez d'abord installer Node.js et NPM. NPM est installé dans le cadre du processus d'installation Node.js, vous n'avez donc qu'à installer un seul package.
L'utilisation de CSSO vous oblige à vous familiariser avec l'interface de ligne de commande. Les utilisateurs de Linux et MacOS peuvent utiliser des applications de terminal (MacOS est une application> Application de terminal). Si vous utilisez Windows, utilisez l'invite de commande. Accédez au menu Démarrer ou Windows et tapez CMD dans la zone de recherche.
Après avoir installé Node.js et NPM, vous pouvez installer CSSO. Sur la ligne de commande, tapez:
<code>npm install -g csso</code>
-g Flags pour installer CSSO globalement afin que nous puissions l'utiliser dans la ligne de commande. Une fois l'installation terminée, NPM imprimera un message à votre fenêtre de terminal.
Maintenant, nous sommes prêts à comprimer CSS.
Pour compresser le fichier CSS, exécutez la commande CSSO et passez le nom du fichier en tant que paramètre:
<code>csso style.css</code>
Cela effectuera une compression de base. CSSO supprime les espaces inutiles, les demi-colons supplémentaires et les commentaires dans les fichiers d'entrée CSS.
Une fois terminé, CSSO imprimera le CSS optimisé à la sortie standard, c'est-à-dire la fenêtre de borne ou d'invite de commande actuelle. Cependant, dans la plupart des cas, nous voulons enregistrer la sortie dans un fichier. Pour ce faire, veuillez passer le deuxième paramètre à CSSO - le nom du fichier compressé. Par exemple, si nous voulons enregistrer la version compressée de style.css en tant que style.min.css, nous utiliserons la commande suivante:
<code>csso style.css style.min.css</code>
Par défaut, CSSO réorganise les parties de CSS. Par exemple, il fusionne les blocs de déclaration avec des sélecteurs en double et supprime certains attributs écrasés. Considérez le CSS suivant:
<code>h1 {
font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;
width: 80%;
margin: 10px auto 0px;
}</code> Dans ce segment de code, margin-left remplace la déclaration précédente margin. Nous avons également réutilisé h1 comme sélecteur pour les blocs de déclaration continue. Après optimisation et compression, nous obtenons:
<code>h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;margin:10px auto 0}</code> CSSO supprime les espaces inutiles, les nouvelles lignes et les semi-colons et raccourcit #ff6600 vers #f60. Le CSSO fusionne également les propriétés margin et margin-left dans une déclaration (margin: 20px 30px 20px 0) et combine nos blocs de sélecteur h1 séparés en un.
Si vous êtes sceptique quant à la façon dont CSSO réécrit CSS, vous pouvez désactiver sa fonction de refactorisation. Utilisez simplement le logo --restructure-off ou -off. Par exemple, l'exécution csso style.css style.min.css -off obtiendra:
<code>npm install -g csso</code>
Maintenant, notre CSS est comprimé, mais pas optimisé. La désactivation de la refactorisation empêchera votre fichier CSS d'atteindre la taille minimale. Évitez de désactiver la refactorisation à moins que vous ne rencontriez des problèmes.
Les préprocesseurs et les postprocesseurs tels que SASS, moins et PostCSS fournissent des capacités de compression dans leurs ensembles d'outils. Cependant, l'utilisation du CSSO peut réduire davantage la taille du fichier.
Pour en savoir plus sur le débogage et l'optimisation CSS, veuillez consulter le livre de Tiffany "CSS Master, Second Edition".
Articles connexes:
CSSO, ou CSS Optimizer, est un outil pour optimiser les fichiers de feuilles de styles en cascade (CSS). CSS est une langue utilisée pour décrire l'apparence et le format de documents écrits en HTML ou XML. CSSO fonctionne en minimisant la taille des fichiers CSS, ce qui peut améliorer considérablement la vitesse de chargement de votre site Web. Ceci est crucial car les vitesses de chargement plus rapides peuvent améliorer l'expérience utilisateur et améliorer le classement de votre site Web dans les moteurs de recherche.
CSSO réduit sa taille en analysant votre code CSS et en appliquant diverses transformations. Ces transformations incluent la suppression des espaces et des commentaires inutiles, la fusion des mêmes sélecteurs et des mêmes attributs, et même réécrivant les valeurs d'attribut en formes plus courtes. Le résultat est un fichier CSS plus petit et plus optimisé qui fonctionne exactement comme le fichier d'origine.
CSSO peut être utilisé comme outil de ligne de commande ou comme module Node.js. Pour l'utiliser comme outil de ligne de commande, vous devez l'installer globalement à l'aide de NPM (Node Package Manager). Après l'installation, vous pouvez exécuter CSSO sur n'importe quel fichier CSS à l'aide de la commande "CSSO [Fichier d'entrée] [Fichier de sortie]". Pour l'utiliser comme module Node.js, vous devez l'installer localement dans votre projet, puis le référer dans votre script.
CSSO peut non seulement minimiser les fichiers CSS, mais également optimiser la structure CSS. Cela signifie qu'il peut fusionner le même sélecteur CSS, supprimer les propriétés redondantes et même réécrire les valeurs de propriété sous une forme plus courte. Cela entraînera des tailles de fichiers plus petites par rapport aux autres compresseurs CSS qui suppriment uniquement les espaces et les commentaires.
Alors que le CSSO est conçu pour optimiser votre CSS sans affecter sa fonctionnalité, dans certains cas, il peut briser votre CSS. Ceci est généralement causé par des erreurs dans le CSSO ou une mauvaise utilisation. Après avoir appliqué le CSSO, assurez-vous de tester soigneusement votre site Web pour vous assurer que tout fonctionne correctement.
Si vous rencontrez des problèmes avec le CSSO, vous pouvez utiliser l'option "- debug" à l'exécution pour des informations plus détaillées sur la façon dont elle fonctionne. Cela peut vous aider à identifier tous les domaines problématiques de votre CSS. Vous pouvez également restaurer le fichier CSS d'origine à tout moment si nécessaire.
Oui, vous pouvez utiliser CSSO avec d'autres préprocesseurs CSS. Cependant, vous devez d'abord compiler SASS ou moins de code dans CSS ordinaire, puis l'exécuter via CSSO.
CSSO optimise votre code CSS sans modifier sa fonctionnalité, de sorte que le CSS généré doit être compatible avec tous les navigateurs qui prennent en charge le CSS d'origine. Cependant, après avoir appliqué le CSSO, il est préférable de tester votre site Web dans un autre navigateur pour assurer la compatibilité.
Oui, CSSO offre quelques options qui vous permettent de contrôler le niveau d'optimisation. Par exemple, vous pouvez désactiver l'optimisation structurelle ou préserver les commentaires si nécessaire.
Oui, CSSO est un outil open source, ce qui signifie qu'il est gratuit. Vous pouvez trouver son code source sur GitHub et, si vous préférez, participer à son développement.
Cette réponse maintient le format d'image et le placement, réécrit le texte pour l'originalité tout en préservant le sens et répond à toutes les exigences.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
