Les dix meilleurs hacks CSS en production web_Experience Exchange

 Si vous êtes un codeur front end , vous devez savoir à quel point il est important de faire des navigations croisées, un code CSS et xHTML valide. Et vous devez savoir combien de temps nous passons dans tous ces piratages et correctifs pour divers navigateurs. J'ai écrit sur certains d'entre eux plus tôt sur les problèmes de transparence PNG, les champs jaunes dans la forme Web, l'alignement vertical div etc..

Voici la liste de 10 hacks et astuces CSS triés sur le volet qui peuvent vous aider dans votre Code CSS et gagnez également du temps.

1. Alignement vertical div  (垂直居中)

http:/
* sélecteur html{property:value;}
/*stylizedweb.com/2008/02/01/vertical-align-div/

2. Min-Height  (最小高度)

sélecteur {
min-height:500px ;
hauteur : auto ; !important
hauteur:500px;
}

3. PNG transparence  (透明png)

http://stylizedweb.com/2007/12/30/png-transparency-issues/

4. Effacement automatique (自动清除)

.container:after {
content : "." ;
affichage : bloquer ;
hauteur : 0 ;
clair : les deux ;
visibilité : masquée ;
}
.container {display : inline-table;}
/* Se cache de IE-mac */
* html .container {hauteur : 1%;}
.container {display : block;}
/* Fin masquer sur IE-mac */

5. Réinitialiser CSS  (CSS重设)

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset, input,p,blockquote,th,td {
margin:0; remplissage : 0 ;
}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong ,th,var {
font-style:normal;font-weight:normal;
}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size :100%;}
q:avant,q:après {content:”;}

6. Défilement Rendu IE  (IE滚动条渲染)

html {
arrière-plan : url(null) fixé sans répétition ;
}

7. Opacité (透明度)

#transdiv {
filter:alpha(opacity=75);
-moz-opacité : 0,75 ;
opacité : 0,75 ;
}

8. PRE Tag (标签预格式)

pre {
espace blanc : pre-wrap ; /* css-3 */
espace blanc : -moz-pre-wrap !important; /* Mozilla, depuis 1999 */
white-space : -pre-wrap; /* Opera 4-6 */
espace blanc : -o-pre-wrap; /* Opera 7 */
word-wrap : break-word ; /* Internet Explorer 5.5+ */
}

9. Li Arrière-plan Répéter IE (LI标签背景重复)





10. Bon à savoir  (最好知道的)

@charset « UTF-8″ ;

/* ———————————————————————-
WinIE7
——————————— ————————————- */
*:premier-enfant+sélecteur html{property:value;}

/* —————————— —————————————-
WinIE6 & Mac IE
———————————————————————- */
* sélecteur html{property:value;}

/* ———————————————————————-
WinIE6
———————————————————————- */
/***/

/* ———— ———————————————————-
MacIE
——————————————————————— - */
/***/
sélecteur{property:value;}
/**/