Exemple courant de partage de code pour les techniques d'optimisation en CSS

Connaissez-vous l'optimisation CSS couramment utilisée ? Présentons-la en détail. Nous avons accumulé une certaine expérience et la partageons avec vous ici.

1. Utilisez des abréviations CSS

L'utilisation d'abréviations peut aider à réduire la taille de votre fichier CSS et à le rendre plus facile à lire. Pour les principales règles de l'abréviation CSS, veuillez vous référer au "Résumé de la syntaxe commune des abréviations CSS", qui ne sera pas décrit ici.

2. Définissez clairement les unités, sauf si la valeur est 0

Oublier de définir les unités de dimensions est une erreur courante chez les débutants en CSS. En HTML, vous pouvez simplement écrire width=100, mais en CSS, vous devez donner une unité exacte, telle que : width:100px width:100em. Il n'y a que deux exceptions pour ne pas définir d'unités : la hauteur de ligne et la valeur 0. De plus, les autres valeurs doivent être suivies de l'unité. Attention à ne pas ajouter d'espaces entre la valeur et l'unité.

3. Sensible à la casse

Lors de l'utilisation de CSS en XHTML, les noms d'éléments définis en CSS sont sensibles à la casse. Pour éviter cette erreur, je recommande d'utiliser des minuscules pour tous les noms de définition.

Les valeurs de class et id sont également sensibles à la casse en HTML et XHTML. Si vous devez utiliser une casse mixte, veuillez confirmer soigneusement que votre définition en CSS est cohérente avec les balises en XHTML.

4. Annulez la qualification de l'élément avant la classe et l'identifiant

Lorsque vous écrivez pour définir une classe ou un identifiant pour un élément, vous pouvez omettre la qualification d'élément précédente, car l'ID est unique dans un page , las s peut être utilisé plusieurs fois dans la page. Cela n’a aucun sens pour vous de qualifier un élément. Par exemple :

div#content { /* declarations */ }
fieldset.details { /* declarations */ }

peut être écrit sous la forme

#content { /* declarations */ }
.details { /* declarations */ }

, ce qui permet d'économiser quelques octets.

5. Valeur par défaut

Habituellement, la valeur par défaut du remplissage est 0 et la valeur par défaut de background-color est transparente. Mais la valeur par défaut peut être différente selon les navigateurs. Si vous avez peur des conflits, vous pouvez définir les valeurs de marge et de remplissage de tous les éléments à 0 au début de la feuille de style, comme ceci :

* {
margin:0;
padding:0;
}

6. Il n'est pas nécessaire de répéter définir des valeurs héritables

En CSS, les éléments enfants héritent automatiquement des valeurs d'attribut de l'élément parent, telles que la couleur, la police, etc., qui ont été définies dans l'élément parent, peuvent être directement héritées dans l'élément enfant sans définition répétée. Mais sachez que le navigateur peut remplacer votre définition par certaines valeurs par défaut.

7. Premier principe le plus proche

S'il existe plusieurs définitions du même élément, la définition la plus proche (niveau minimum) aura priorité. Par exemple, il y a ce morceau de code

Update: Lorem ipsum dolor set

Dans le fichier CSS, vous avez défini l'élément p et une classupdate

p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}

Dans ces deux définitions, class=update sera utilisé car class plus proche que p. Vous pouvez consulter le document « Calcul de la spécificité d'un sélecteur » du W3C pour en savoir plus.

8. Définitions de classes multiples

Une balise peut définir plusieurs classes en même temps. Par exemple : nous définissons d'abord deux styles, le premier style a un arrière-plan de #666 ; le deuxième style a une bordure de 10 px.

.one{width:200px;background:#666;}
.two{border:10px solid #F00;}

Dans le code de la page, nous pouvons appeler

comme ceci. L'effet d'affichage final est que ce div a à la fois un arrière-plan #666 et une bordure de 10px. Oui, c’est possible, vous pouvez l’essayer.

9. Utilisez des sélecteurs descendants

Les débutants en CSS ne savent pas que l'utilisation de sélecteurs descendants est l'une des raisons qui affectent leur efficacité. Les sous-sélecteurs peuvent vous aider à enregistrer de nombreuses définitions de classe. Jetons un coup d'oeil au code suivant :

Item 1
>
Item 1
Item 1

La définition CSS de ce code est :

div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

La définition du style est :

#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }

Utiliser sous-sélection L'éditeur peut rendre votre code et CSS plus concis et plus faciles à lire.

10. Pas besoin d'ajouter des guillemets au chemin de l'image d'arrière-plan

Afin d'économiser des octets, je recommande de ne pas ajouter de guillemets au chemin de l'image d'arrière-plan, car les guillemets ne sont pas nécessaires. Par exemple :

background:url(images/***.gif) #333;

peut être écrit comme

background:url(images/***.gif) #333;

Si vous ajoutez des guillemets, cela provoquera des erreurs de navigateur.

11. Sélecteurs de groupe

Lorsque certains types d'éléments, classes ou identifiants ont des attributs en commun, vous pouvez utiliser des sélecteurs de groupe pour éviter plusieurs définitions répétées. Cela peut économiser pas mal d'octets.

Par exemple : pour définir la police, la couleur et la marge de tous les titres, vous pouvez écrire :

h1,h2,h3,h4,h5,h6 {
font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}

S'il y a des éléments individuels qui doivent être définis indépendamment lors de leur utilisation, vous peut ajouter De nouvelles définitions peuvent écraser les anciennes définitions, par exemple :

h1 { font-size:2em; }
h2 { font-size:1.6em; }

12. Spécifiez les styles de lien dans le bon ordre

Lorsque vous utilisez CSS pour définir plusieurs styles d'état d'un lien Lors de l'écriture , faites attention à l'ordre dans lequel ils sont écrits. L'ordre correct est : :link :visited :hover :active. La première lettre extraite est LVHA, dont vous vous souvenez sous le nom de LoVe HAte (aime détester). Pourquoi est-il ainsi défini ? Vous pouvez vous référer à la « Link Specificity » d'Eric Meyer ?

Si vos utilisateurs ont besoin d'utiliser le clavier pour contrôler et ont besoin de connaître le focus du lien actuel, vous pouvez également définir l'attribut :focus. L'effet de l'attribut :focus dépend également de la position où vous écrivez. Si vous souhaitez que l'élément focus affiche l'effet :hover, vous écrivez :focus devant le :hover si vous souhaitez que l'effet de focus remplace le : effet de survol, vous mettez :focus Après :hover.

13. Effacer les flotteurs

Un problème CSS très courant est que lors du positionnement des flotteurs, le calque sous-jacent est recouvert par le calque flottant, ou les sous-couches imbriquées dans le calque dépassent la plage extérieure.

通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》(注：本站将尽快翻译此文)。

上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办?一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被广泛讨论。

上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《Floatutorial》、《Containing Floats》和《Float Layouts》

十四.横向居中(centering)

这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中?你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：

你可以这样定义使它横向居中：

#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}

但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：

body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}

第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。

十五.导入(Import)和隐藏CSS

因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：

@import url(main.css);

然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：

@import main.css;

这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》

十六.针对IE的优化

有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

1.注释的方法

(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):

html>body p {
/* 定义内容 */
}

(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)

* html p {
/* declarations */
}

(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧：

/* */
* html p {
declarations
}
/* */

2.条件注释(conditional comments)的方法

另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：

十七.调试技巧：层有多大?

当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用 border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。

另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。

十八.CSS代码书写样式

在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯

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!