Maison > Article > interface Web > Partagez 12 compétences CSS impressionnantes
Les techniques CSS avancées suivantes
Utilisez :not() pour appliquer/désappliquer les bordures du menu
Ajouter la hauteur de la ligne au corps
Tout est centré verticalement
Liste séparée par des virgules
Utilisez un nième enfant négatif pour sélectionner les éléments
Utilisez SVG
pour les icônes Optimiser le texte à afficher
Pour les curseurs CSS purs, utilisez max-height
Hériter dimensionnement de la boîte
TableauLargeur uniforme des cellules
Utilisez Flexbox pour vous débarrasser de divers hacks de marges
Utiliser le sélecteur d'attribut pour les liens vides
Ajoutez d’abord une bordure à chaque élément du menu
/* add border */ .nav li { border-right: 1px solid #666; }
…puis supprimez le dernier élément…
//* supprimer la bordure */
.nav li:last-child { border-right: none; }
...Vous pouvez directement utiliser la pseudo-classe :not() pour appliquer des éléments :
.nav li:not(:last-child) { border-right: 1px solid #666; }
De cette façon, le code est propre, lisible et facile à comprendre.
Bien entendu, si votre nouvel élément comporte des éléments frères, vous pouvez également utiliser le sélecteur universel de frères et sœurs (~) :
..nav li:premier-enfant ~ li {
border-left: 1px solid #666; }
Vous n'avez pas besoin d'ajouter line-height individuellement à chaque
,
body { line-height: 1; }
De cette façon, les éléments de texte peuvent facilement hériter du body .
Pour centrer tous les éléments verticalement, c'est si simple :
html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }
Écoute, n'est-ce pas très simple ?
Remarque : soyez prudent avec flexbox dans IE11.
Faire en sorte que les éléments de la liste HTML ressemblent à une vraie liste séparée par des virgules :
ul > li:not(:last-child)::after { content: ","; }
Utilisez la pseudo-classe :not() pour le dernier élément de la liste.
Utilisez un nième enfant négatif en CSS pour sélectionner l'élément 1 à l'élément n.
li { display: none; } /* select items 1 through 3 and display them */ li:nth-child(-n+3) { display: block; }
C'est aussi simple que cela.
pour les icônes Il n'y a aucune raison de ne pas utiliser SVG pour les icônes :
.logo { background: url("logo.svg"); }
SVG a une bonne évolutivité pour tous les types de résolution et prend en charge tous les navigateurs revenant à IE9. De cette façon, vous pouvez éviter les fichiers .png, .jpg ou .gif.
Parfois, les polices ne s'affichent pas de manière optimale sur tous les appareils, alors laissez le navigateur de votre appareil vous aider :
html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
Remarque : Veuillez utiliser optimiseLegibility de manière responsable. De plus, IE/Edge ne prend pas en charge le rendu de texte.
pour les curseurs CSS purs Utilisez le masquage de la hauteur maximale et du débordement pour implémenter un curseur CSS uniquement :
.slider ul { max-height: 0; overlow: hidden; } .slider:hover ul { max-height: 1000px; transition: .3s ease; }
Laissez le dimensionnement de la boîte hériter du HTML :
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
Cela facilite la modification de la taille des boîtes dans les plugins ou d'autres composants qui exploitent d'autres comportements.
Les tableaux sont difficiles à utiliser, alors assurez-vous d'utiliser table-layout:fixed pour garder les cellules de largeur égale :
.calendar { table-layout: fixed; }
Lorsque vous devez utiliser des séparateurs de colonnes, vous pouvez vous débarrasser des hacks du nième, premier et dernier enfant grâce à la propriété space-between de flexbox :
.list { display: flex; justify-content: space-between; } .list .person { flex-basis: 23%; }
Les séparateurs de liste apparaîtront désormais à des positions régulièrement espacées.
Afficher le lien lorsque l'élément n'a pas de valeur texte mais que l'attribut href a un lien :
a[href^="http"]:empty::before { content: attr(href); }
Assez pratique.
Ces techniques avancées fonctionnent efficacement dans les versions actuelles de Chrome, Firefox, Safari et Edge, ainsi que dans IE11.
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!