Maison > interface Web > tutoriel CSS > Améliorations progressives simples en CSS

Améliorations progressives simples en CSS

Susan Sarandon
Libérer: 2024-12-18 20:19:15
original
513 Les gens l'ont consulté

Simple progressive enhancements in CSS

Le CSS a beaucoup changé ces dernières années. J'ai l'impression que nous recevons désormais de nouvelles fonctionnalités chaque mois. Les nouvelles fonctionnalités, c'est bien, mais il est difficile de suivre ce qui est entièrement pris en charge ou sûr à utiliser.

Entrez des améliorations progressives : fonctionnalités de code et syntaxe qui vous offrent des solutions de secours sûres au cas où vos utilisateurs visiteraient votre site Web dans un navigateur qui ne prend pas en charge.

Voici quelques propriétés et techniques CSS simples qui peuvent être utilisées en toute sécurité ; améliorant l'expérience pour certains utilisateurs, mais fournit des solutions de secours satisfaisantes pour d'autres.

Meilleur texte avec text-wrap : joli et text-wrap : équilibre

Tous les navigateurs ne prennent pas en charge les valeurs d'habillage de texte balance et jolie, mais ils sont sûrs à utiliser.

Si vous n'êtes pas familier avec ces valeurs, ce sont des moyens de "réparer" votre texte pour qu'il paraisse (vous l'aurez deviné) plus joli ou plus équilibré.

résout assez le problème des mots "orphelins", lorsque le dernier mot d'un paragraphe de texte passe à une nouvelle ligne, le laissant tout seul en bas. Pretty garantit que le dernier mot est accompagné d'un autre, ce qui est idéal pour les titres (REMARQUE : ne l'utilisez pas pour des portions plus grandes du corps du texte, car il utilise un algorithme plus lent pour calculer le meilleur résultat).

Documentation MDN pour le text-wrap : joli

la balance ajuste vos paragraphes afin que le texte soit renvoyé à la ligne de manière à équilibrer le nombre de caractères sur chaque ligne, améliorant ainsi la qualité et la lisibilité de la mise en page. C'est utile pour les paragraphes d'une certaine longueur, par ex. texte principal ou une copie marketing à l’intérieur d’une bannière. (REMARQUE : ne l'utilisez pas sur toutes les balises

de votre corps de texte. Le calcul de l'équilibre parfait basé sur le nombre de caractères est coûteux en termes de calcul, c'est pourquoi les navigateurs limitent cette fonctionnalité en fonction des lignes de texte : six ou moins pour Chromium et dix ou moins pour Firefox)

Documentation MDN pour le retour à la ligne : solde

Démo

Le repli

La seule chose qui se produit si le navigateur ne prend pas en charge ces fonctionnalités est que le texte aura des orphelins ou pourrait ne pas être aussi équilibré que vous le souhaiteriez. Et ce n'est pas grave ; nous vivons avec cela depuis 30 ans de navigation sur le Web, cela ne nuit donc pas à l'expérience des utilisateurs dont les navigateurs ne sont pas pris en charge.


Champs de formulaire à croissance automatique avec dimensionnement des champs : contenu

Avez-vous déjà été frustré par le fait que les