Résumez une partie de l'expérience d'écriture CSS que j'ai apprise, écoutée, regardée et demandée, et écrivez du CSS efficace - parlez de l'efficacité du rendu du CSS, qui est liée à l'efficacité du rendu et aux ressources consommées. Une partie est écrite sur la base de ma propre compréhension. Il n'est pas exclu qu'il puisse y avoir des erreurs et des omissions. Vous êtes invités à donner de meilleurs avis.
1. Valeur de couleur hexadécimale associant chiffres et casse
Lors de l'écriture de valeurs de couleur hexadécimales, vous pouvez utiliser des lettres minuscules ou les omettre en 3 chiffres. Il n'existe aucune donnée concluante pour prouver si cette méthode d'écriture a un impact sur l'efficacité du rendu du navigateur, mais la norme par défaut pour les valeurs de couleur hexadécimales est la norme par défaut. est Il s'agit d'une lettre majuscule et d'un nombre à 6 chiffres. Ne pas vouloir prendre de risques dans des situations inconnues réduit l'efficacité du rendu.
* Refusé - couleur :#f3a ;
* Il est recommandé d'utiliser - couleur : #FF33AA ;
2. La différence entre affichage et visibilité
Ils sont utilisés pour définir ou récupérer si l'objet est affiché. L'affichage des objets cachés ne conserve pas l'espace physique et la visibilité conserve l'espace physique occupé par les objets cachés. Lorsque le navigateur restitue l'espace physique occupé, des ressources sont consommées.
* Obsolète - visibilité : cachée ;
* Il est recommandé d'utiliser - display:none;
3. La différence entre border:none et border:0;
Semblable à la relation entre l'affichage et la visibilité, l'espace n'est respectivement pas réservé et réservé. En savoir plus sur border:0; Bien que la bordure puisse être masquée, elle conservera l'utilisation de border-color/border-style pour vous.
* Refusé - frontière : 0 ;
* Il est recommandé d'utiliser - border:none;
4. Les images d’arrière-plan trop petites ne doivent pas être carrelées.
Bien que la taille du fichier d'une image d'arrière-plan d'une largeur et d'une hauteur de 1 px soit très petite, le rendu d'un panneau d'une largeur et d'une hauteur de 500 px nécessite une mosaïque répétée 2 500 fois. L'amélioration de l'efficacité du rendu de l'image d'arrière-plan est liée à la taille et au volume de l'image. La plus grande taille du fichier image reste d'environ 70 Ko.
* Refusé – Images d'arrière-plan en mosaïque inférieure à 8 px en largeur et en hauteur.
* Utilisation recommandée - une image d'arrière-plan de taille et de taille modérées
5. Filtres IE
En plus de consommer des ressources, les filtres d'IE présentent également des problèmes de compatibilité. Il existe un filtre qui rend PNG transparent. Vous pouvez éviter d'utiliser ce filtre en rendant GIF ou JPG transparents. Il est recommandé d'utiliser uniquement la transparence GIF dans IE6, car IE7 et versions ultérieures prennent déjà en charge la transparence PNG.
* La désapprobation et l'abus des filtres IE consomment non seulement des ressources mais provoquent également des problèmes de compatibilité.
* Recommandé, il est préférable de choisir d'autres méthodes pour éviter d'utiliser des filtres.
6. *{margin:0; padding:0;} pour éviter les différences de style de navigateur
Le caractère générique * initialise toutes les balises et le rendu du navigateur consomme certaines ressources. Certaines balises sont presque les mêmes dans différents navigateurs, ou certaines balises ne sont plus recommandées (car vous ne les utiliserez pas). Elles n'ont pas besoin de caractères génériques pour être réinitialisées. Cela peut économiser certaines ressources.
* Obsolète, utilisez le caractère générique *
* Refusé, le tableau b du bouton div span et les autres balises doivent être inclus dans les caractères génériques pour contrôler les styles de remplissage internes et externes.
* Il est recommandé d'utiliser de manière sélective des caractères génériques pour contrôler les styles de remplissage intérieur et extérieur.
7. N'ajoutez pas de balises supplémentaires pour décrire la classe ou l'identifiant
Si vous disposez d'un sélecteur qui utilise id comme sélecteur de clé, veuillez ne pas ajouter de noms de balises supplémentaires. L’ID étant unique, vous ne devez pas réduire l’efficacité de la correspondance pour une raison inexistante.
* Obsolète - bouton#backButton { }
* Obsolète - .menu-left #newMenuIcon { }
* Il est recommandé d'utiliser - #backButton { }
* Il est recommandé d'utiliser - #newMenuIcon { }
8. Essayez de choisir la classe la plus spéciale pour stocker le sélecteur
L'une des principales raisons de la réduction de l'efficacité du système est que nous utilisons trop de sélecteurs dans les classes de balises. En ajoutant des classes aux éléments, nous pouvons subdiviser les catégories en classes afin de ne pas perdre de temps à faire correspondre trop de sélecteurs pour une seule balise.
* Obsolète - treeitem[mailfolder="true"] > treerow > treecell { }
* Il est recommandé d'utiliser - .treecell-mailfolder { }
9. Évitez les sélecteurs descendants
Le sélecteur descendant est le sélecteur le plus gourmand en ressources en CSS. C'est vraiment très gourmand en ressources, surtout lorsque le sélecteur utilise une classe d'étiquettes ou une classe générale. Dans de nombreux cas, ce que nous voulons réellement, c'est un sous-sélecteur. Sauf indication explicite, l'utilisation de sélecteurs descendants est strictement interdite dans UI CSS.
* Obsolète - treehead treerow treecell { }
* Mieux, mais ne fonctionne toujours pas (voir article suivant) - treehead > treerow > treecell { }
10. Ne pas inclure de sous-sélecteurs dans les classes d'étiquettes
N'utilisez pas de sous-sélecteurs dans les classes d'étiquettes. Sinon, chaque occurrence d’un élément augmentera encore le temps de correspondance. (Surtout si le sélecteur semble susceptible de correspondre)
* Obsolète - treehead > treerow > treecell { }
* Il est recommandé d'utiliser - .treecell-header { }
11. Faites attention à l'utilisation de tous les sous-sélecteurs
Utilisez les sous-sélecteurs avec précaution. Si vous trouvez un moyen de ne pas l’utiliser, ne l’utilisez pas. En particulier, les arborescences et menus RDF utilisent fréquemment des sous-sélecteurs, comme celui-ci.
* Obsolète - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }
N'oubliez pas que les propriétés RDF peuvent être copiées dans des modèles ! En utilisant cela, nous pouvons copier les attributs RDF sur les éléments XUL enfants que nous souhaitons modifier en fonction de cet attribut.
* Il est recommandé d'utiliser - .tree-folderpane-icon[IsImapServer="true"] { }