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.
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
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.
Avez-vous déjà été frustré par le fait que les
Cette propriété et cette valeur rendront vos ,
Documentation MDN pour le dimensionnement des champs
La solution de secours est simple : les champs ne s'agrandiront pas si un navigateur ne prend pas en charge cette fonctionnalité. Et ça va aussi !
Vous souhaitez styliser les indicateurs de disque sur les éléments de la liste dans un
Notez que l'élément ::marker est étrange, car il n'y a qu'une poignée de propriétés qui fonctionneront avec ce sélecteur :
En savoir plus ici : Documentation MDN pour ::marker
Pour ::placeholder, vous pouvez faire à peu près tout ce que vous pouvez faire avec du texte normal, changer la couleur, le poids de la police, la famille de polices, etc., mais gardez à l'esprit que l'espace réservé d'une entrée devrait toujours ressembler à un espace réservé, et non à l'impression qu'il y a déjà une valeur saisie dans l'entrée.
Documentation MDN pour ::placeholder
Ceux-ci ne fonctionnent pas dans tous les navigateurs ou versions de navigateur, mais leur utilisation ne gâchera rien non plus, ce qui en fait une amélioration progressive parfaite. Les marqueurs tels que les disques et les chiffres auront la même couleur que le texte de l'élément de liste, tandis que l'espace réservé aura le style intégré du navigateur.
Il est difficile de suivre ce qui est sûr à utiliser en CSS, car Baseline (de webstatus.dev) et caniuse.com indiquent uniquement si quelque chose est disponible dans une certaine version du navigateur, et non ce qui arrivera à votre interface utilisateur si le sélecteur , la propriété ou la valeur n'est pas prise en charge.
Déterminez toujours les solutions de secours que les fonctionnalités expérimentales ou moins prises en charge produiront.
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!