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

Utilisez :not() pour appliquer/désappliquer les bordures du menu

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;
}

Ajouter la hauteur de la ligne au corps

Vous n'avez pas besoin d'ajouter line-height individuellement à chaque

, , etc. Ajoutez-le simplement au corps :

body {
  line-height: 1;
}

De cette façon, les éléments de texte peuvent facilement hériter du body .

Tout est centré verticalement

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.

Liste séparée par des virgules

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 pour sélectionner l'élément

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.

Utilisez SVG

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.

Optimiser le texte affiché

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.

Utilisez max-height

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;
}

Hériter du dimensionnement de la boîte

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 cellules du tableau sont de largeur égale

Les tableaux sont difficiles à utiliser, alors assurez-vous d'utiliser table-layout:fixed pour garder les cellules de largeur égale :

.calendar {
  table-layout: fixed;
}

Diverses astuces pour se débarrasser des marges avec Flexbox

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.

Utiliser le sélecteur d'attribut pour les liens vides

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);
}