::placeholder ::selection et ::marker
Mettez en forme les espaces réservés des champs, les sélections de texte et les puces des listes avec des pseudo-éléments.
::placeholder ::selection et ::marker est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
::placeholder
::placeholder met en forme le texte indicatif à l’intérieur des champs de formulaire et des zones de texte. Seul un sous-ensemble des propriétés CSS est pris en charge.
<input type="text" placeholder="Type your name…" />Propriétés prises en charge par ::placeholder
Toutes les propriétés CSS ne fonctionnent pas avec ::placeholder. Les propriétés prises en charge comprennent : color, font-size, font-weight, font-style, letter-spacing, opacity et quelques autres. Les propriétés de mise en page ne sont pas prises en charge.
Accessibilité du texte indicatif
Le texte indicatif disparaît lorsque vous saisissez du texte et NOT ne doit pas servir de substitut aux éléments <label>. Fournissez toujours des libellés visibles pour les champs de formulaire. Le contraste du texte indicatif doit également respecter un rapport de contraste WCAG de 4,5:1.
::selection
::selection met en forme le texte que l’utilisateur a sélectionné avec le curseur. Il permet de créer des couleurs de sélection adaptées à votre identité visuelle.
<p>Select this text with your cursor to see the branded highlight color.</p>Propriétés prises en charge par ::selection
Seules quelques propriétés fonctionnent avec ::selection : color, background-color, text-shadow et text-decoration. Les autres sont ignorées.
::marker
::marker met en forme le marqueur d’un élément de liste, c’est-à-dire la puce ou le numéro des listes <ul> et <ol>.
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<ol>
<li>Step one</li>
<li>Step two</li>
</ol>Propriétés prises en charge par ::marker
Les propriétés ::marker prises en charge comprennent : color, content, font-size, font-family, font-weight, font-style et unicode-bidi.
Marqueurs de liste personnalisés avec ::marker
Utilisez des émojis ou des caractères spéciaux comme marqueurs de liste :
<ul>
<li>Normal item</li>
<li class="warning">Warning item</li>
</ul>::first-line
::first-line met en forme la première ligne rendue d’un élément bloc, c’est-à-dire la ligne effectivement rendue et non le premier saut de ligne dans le HTML. Cette fonctionnalité est utile pour appliquer une mise en forme de type lettrine au paragraphe introductif.
<p>This is the opening line of a paragraph that wraps onto a second line once it runs out of horizontal room in its container, so you can see the effect clearly.</p>::first-letter
::first-letter cible la première lettre de la première ligne mise en forme. Utilisation classique : créer des lettrines dans une typographie de style magazine.
<p>Once upon a time, a designer discovered the drop cap and typography was never the same again.</p>::cue pour la mise en forme des sous-titres
::cue met en forme les sous-titres VTT des éléments HTML <video>, ce qui en fait un pseudo-élément spécialisé mais important pour les médias accessibles.
<p style="color:#888;">::cue styles VTT subtitle text inside a <video> element (no visible effect without an active video/track, shown here for reference).</p>
<video controls style="max-width:100%;"></video>Vérification rapide
Quel pseudo-élément permet de mettre en forme la puce ou le numéro d’un élément de liste ?
Récapitulatif
::placeholder met en forme le texte indicatif des champs. ::selection met en forme le texte sélectionné. ::marker met en forme les puces et les numéros des listes. ::first-letter et ::first-line permettent d’affiner la typographie. Tous ne prennent en charge qu’un sous-ensemble limité des propriétés CSS.
Questions Fréquemment Posées
La leçon « ::placeholder ::selection et ::marker » est-elle gratuite ?
Oui — le texte complet de « ::placeholder ::selection et ::marker » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « ::placeholder ::selection et ::marker » ?
Mettez en forme les espaces réservés des champs, les sélections de texte et les puces des listes avec des pseudo-éléments. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « ::placeholder ::selection et ::marker » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Contenu ::before et ::after
- ::placeholder ::selection et ::marker
- Compteurs CSS avec ::before
- Motifs décoratifs avec des pseudo-éléments