Comment optimiser les CSS

Méthode d'optimisation : 1. Simplifiez les commentaires ; 2. Simplifiez les codes de couleur ; 3. Utilisez des attributs sur une seule ligne au lieu d'attributs multilignes, c'est-à-dire utilisez des attributs abrégés ; 4. Omettez l'unité lorsque la valeur est ; 0 ; 5. Définir simultanément les attributs de plusieurs éléments ; 6. Supprimer les espaces et les sauts de ligne 7. Définir le délai d'expiration et utiliser GZip.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

L'optimisation du code CSS peut réduire les octets occupés par la page Web, raccourcir le temps nécessaire au navigateur pour télécharger le code CSS dans les mêmes conditions et accélérer l'ouverture de la page Web. Alors comment optimiser le code CSS ? Voici quelques conseils pour optimiser le code CSS.

Conseils pour optimiser le code CSS

1 Simplifiez vos commentaires

De nombreuses situations sous le. Dans certaines circonstances, en particulier les programmeurs qui ont été engagés dans le développement de langages tels que C/Java, peuvent aimer écrire des commentaires sur plusieurs lignes, tels que :

Bien sûr, il n'y a aucun problème avec de tels commentaires dans les langages compilés, mais dans CSS ils augmenteront considérablement la taille du fichier CSS. Vous devriez essayer de le simplifier comme ceci :

Cela réduit la taille du fichier tout en conservant la lisibilité. En fait, dans une véritable version publiée du fichier CSS, vous pouvez supprimer complètement ces commentaires.

2. Simplifier les codes couleurs

En CSS, on a souvent affaire à des codes couleurs hexadécimaux. Vous avez peut-être l'habitude d'écrire la "forme standard" suivante :

color: #ffffff;
color: #ff88ff;

En fait, cette méthode d'écriture peut être simplifiée en CSS, on peut écrire :

color: #fff;
color: #f8f;

3 . Utilisez des attributs sur une seule ligne au lieu d'attributs multilignes, c'est-à-dire utilisez l'attribut d'abréviation

Dans les attributs CSS tels que margin/padding/font/border, vous pouvez utiliser une ligne pour remplacer. de nombreux paramètres de ligne, par exemple :

padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;

On peut écrire :

padding: 10px 0 10px 0;

L'ordre est top, right, bottom, left Bien sûr, pour les attributs margin et padding, quand. les valeurs de gauche et de droite/haut et bas sont les mêmes, cela peut s'écrire plus simplement, par exemple, l'exemple ci-dessus peut s'écrire comme :

padding: 10px 0;

Quand le haut, en bas, à gauche et à droite sont les mêmes, cela peut même s'écrire comme :

padding: 10px;

Pour d'autres méthodes d'abréviation, vous pouvez vous référer à certaines informations sur Internet . Bien sûr, je recommande d'utiliser le logiciel TopStyle pour apprendre à écrire du CSS, il donnera des conseils précis.

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

Lorsque la valeur est 0, l'unité peut être omise

Par exemple :

padding: 0;

5. Définissez les attributs de plusieurs éléments en même temps

à titre d'exemple. Par exemple :

h1 {
margin: 0;
padding: 0;
}
h2 {
margin: 0;
padding: 0;
}
h3 {
margin: 0;
padding: 0;
}

Une meilleure façon de l'écrire est :

h1,h2,h3 {
margin: 0;
padding: 0;
}

6. Supprimer les espaces et les sauts de ligne

C'est très Opération discrète, mais cela devrait être fait pour les CSS qui ont quitté le stade de développement et doivent être appliqués sur Internet. C'est du moins ainsi que fonctionnent toutes les applications Google. Par exemple :

h1 {
margin: 0;
padding: 0;
}
blockquote {
background-color: #ffcccc;
}

doit être traité en :

h1{margin:0;padding:0;}
blockquote{background:#fcc;}

En fait, aucun saut de ligne n'est nécessaire dans le fichier CSS. Mais afin de garder le code un peu lisible, je recommande quand même d'écrire chaque élément sur une seule ligne. Il existe aujourd'hui des outils disponibles pour faire quelque chose de similaire afin que cela n'ait pas d'impact sur votre processus de développement.

7. Définissez le délai d'expiration et utilisez GZip

Si possible, nous devons définir le délai d'expiration du fichier CSS et activer GZip pour la transmission des fichiers CSS. . La configuration du premier permet aux navigateurs populaires de mettre en cache vos fichiers CSS, évitant ainsi d'avoir à lire le fichier à chaque fois qu'un chargement est effectué, accélérant considérablement le processus tout en réduisant également la consommation de trafic. L'activation de GZip peut réduire vos fichiers CSS à un degré inimaginable, et la plupart des navigateurs populaires prennent aujourd'hui en charge GZip.

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

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!