Le défi de styliser seulement la moitié d'un personnage, tout en gardant le texte accessible, intrigue les développeurs depuis un certain temps. Cet article présentera la solution en utilisant une combinaison de CSS pur et de JavaScript pour une implémentation dynamique.
Pour styliser un seul caractère, ajoutez simplement la classe ".halfStyle" à l'élément span correspondant. L'astuce consiste à définir dynamiquement le contenu ":before" du pseudo-élément à l'aide de l'attribut "data-content". Cela vous permet de spécifier le caractère souhaité pour chaque étendue.
Pour appliquer un style partiel au texte dynamique, jQuery automatise le processus. En parcourant les caractères, il crée des éléments cachés pour l'accessibilité et des éléments visibles avec la classe ".halfStyle".
<code class="css">.halfStyle { position: relative; display: inline-block; font-size: 80px; /* or any font size */ color: black; /* or transparent, any color */ overflow: hidden; white-space: pre; } .halfStyle:before { display: block; z-index: 1; position: absolute; top: 0; left: 0; width: 50%; content: attr(data-content); overflow: hidden; color: #f00; }</code>
< h3>Implémentation JavaScript
<code class="javascript">$('.textToHalfStyle').each(function() { var $el = $(this); var text = $el.text(); var chars = text.split(''); for (var i = 0; i < chars.length; i++) { $el.append('<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>'); } });</code>
Cette solution garantit l'accessibilité en fournissant du texte masqué pour les lecteurs d'écran. L'élément invisible préserve le texte original tout en permettant à l'élément visible d'afficher la partie stylisée.
Avec cette technique, vous pouvez obtenir l'effet souhaité de styliser partiellement les caractères dans le texte, qu'ils soient statiques ou dynamiques. Il utilise une combinaison de CSS et de JavaScript pour maintenir l'accessibilité tout en améliorant l'attrait visuel de vos conceptions.
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!