Sélectionner une page


Avez-vous déjà essayé de changer la valeur de? font-weight Propriété sur les états de lien? Si tel est le cas, vous avez peut-être remarqué le décalage du texte.

Dans cette astuce rapide, nous découvrirons d’abord les causes de ce comportement indésirable, puis nous examinerons deux solutions possibles.

Identifiez le problème

Tout d’abord, identifions le problème à l’aide d’un exemple simple. Considérez la visualisation suivante:

Exemple de menu

Les éléments sont des liens. Donc, dans votre CSS, voici ce que vous pouvez essayer:

a:hover {
  font-weight: bold;
}

Comme nous ne définissons normalement pas de largeur fixe pour de tels éléments, le texte se décale lorsque l’utilisateur déplace la souris sur les liens. Bien sûr, cela se produit parce que la largeur de chaque lien augmente à mesure qu’il survole. Pour le tester, nous attribuons que active Classez le premier lien et ajoutez cette règle CSS:

.active {
  font-weight: bold;
}

Enfin, modifions le texte du deuxième lien pour qu’il corresponde au premier:

Épaisseur de la police lorsqu'elle est flottante

Maintenant, si nous ouvrons la console du navigateur et visons les deux premiers liens, nous verrons que leur largeur calculée est différente.

Vous pouvez voir ce que nous avons discuté ci-dessus dans la démo CodePen ci-dessous:

Voir le stylo Utilisez la propriété font-weight pour le flottement par SitePoint (@ SitePoint) sur CodePen.

Certes, il n’est pas très courant d’ajouter un effet audacieux à un limbe, mais cela peut arriver à un moment donné. Voyons donc deux solutions possibles pour contourner ce problème.

Solution 1: Donnez une largeur à tous les éléments

Comme mentionné précédemment, la solution la plus évidente est de donner une largeur à tous les éléments de la liste. Dans notre exemple, nous ajoutons la largeur de chaque élément de liste 24%.

Voici le résultat:

Voir le stylo Correction de l’état flottant de la taille de la police à l’aide de largeurs définies par SitePoint (@ SitePoint) sur CodePen.

Bien que la solution ci-dessus fonctionne, elle peut ne pas être idéale car dans certains cas, nous voulons éviter d’ajouter une largeur fixe à nos éléments. Dans cet esprit, discutons d’une meilleure solution.

Solution 2: ombre de texte

En utilisant le text-shadow Nous pouvons en quelque sorte simuler la propriété font-weight Comportement. Nous faisons cela en jouant avec le blur-radius Cela vaut la peine d’ajuster l’ombre à nos besoins.

En fonction des polices utilisées dans nos projets, nous pouvons les combiner text-shadow Propriété avec ça letter-spacing Propriété pour créer de jolis effets de texte.

Pour illustrer ce comportement, nous attribuerons des lignes CSS supplémentaires à nos liens:

a {
  letter-spacing: .1em;
  transition: text-shadow .3s;
}

a:hover {
  text-shadow: 0 0 .65px #333, 0 0 .65px #333;
  
  
}

Voici la démo:

Voir le stylo Corrigez l’état flottant de la taille de la police avec Text Shadow par SitePoint (@ SitePoint) sur CodePen.

De cette façon, nous évitons le problème du déplacement des éléments et nous n’avons pas à ajouter de largeur aux éléments. Et comme vous pouvez le voir, cette solution est bien plus agréable que de l’utiliser font-weight car la taille du texte ne change pas du tout. Donc ça a l’air beaucoup plus propre.

Conclusion

Si je devais résoudre ce problème, j’utiliserais probablement l’une des deux solutions que je viens de décrire. Connaissez-vous un autre moyen de résoudre ce problème? Faites le nous savoir dans les commentaires.



Source link

Recent Posts