mozilla
Vos résultats de recherche

    ::first-letter

    Cet article nécessite une relecture technique.

    Résumé

    Le pseudo-élément CSS ::first-letter sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.

    La première lettre d'un élément n'est pas forcément évidente à identifier :

    • La ponctuation, c'est à dire n'importe quel caractère défini dans une des classes Unicode open (Ps), close (Pe), initial quote (Pi), final quote (Pf) et other punctuation (Po) , précédent ou suivant immédiatement la première lettre est aussi sélectionnée par ce pseudo-élément.
    • D'autre part, certaines langues possèdent des digraphes qui sont mis en majuscule ensemble, comme le IJ en néerlandais. Dans ces rares cas, les deux lettres di digraphes doivent être sélectionnées par le pseudo-élément ::first-letter . (Ceci est mal supporté par les navigateurs, reportez vous au tableau de compatibilité des navigateurs).
    • Enfin, une combinaison du pseudo-élément ::before et de la propriété content peuvent injecter du texte au début de l'élément. Dans ce cas, ::first-letter sélectionnera la première lettre du contenu inséré.

    Une première ligne a qu'une seule signification dans la boîte contenante bloc, ainsi le pseudo-élément ::first-letter n'a un effet que sur les éléments ayant une valeur display correspondant à block, inline-block, table-cell, list-item ou table-caption. Dans tous les autres cas, ::first-letter n'a pas d'effet.

    Seul un petit sous-groupe de propriété CSS peuvent être utilisées dans un bloc déclaratif contenant un sélecteur utilisant le pseudo-élément ::first-letter :

    Puisque cette liste sera complétée dans l'avenir, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à concevoir un CSS pérenne.

    Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Puisque les pseudo-classes suivaient elle aussi cette convention, la distinction était impossible. Afin de résoudre ce problème, CSS 2.1 a modifié la convention des pseudo-éléments. Désormais un pseudo-élément est précédé de deux caractères deux-points, et une pseudo-classe est toujours précédée d'un seul caractère deux-points.

    Du fait que de nombreux navigateurs avaient déjà implémentés la syntaxe CSS 2 dans une version publique, tous les navigateurs supportant la syntaxe à deux caractères deux-points peuvent aussi supporter l'ancienne syntaxe à un caractère deux-points.

    Si les navigateurs anciens doivent être supportés, :first-letter est le seul choix viable. Sinon, la syntaxe ::first-letter doit être privilégiée.

    Exemples

    /* agrandir et mettre en rouge les premières lettres de chaque paragraphe */
    
    p:first-letter { /* Utilisez :first-letter si le support pour IE8 ou antérieur est nécessaire. */
      color: red; 
      font-size: 130%; 
    }
    

    Spécifications

    Spécification Statut Commentaire
    CSS Pseudo-Elements Level 4
    La définition de '::first-letter' dans cette spécification.
    Version de travail Généralisation des propriétés permises pour la mise en form du texte et des popriétés de mise en page en-ligne, opacity et box-shadow.
    CSS Text Decoration Level 3
    La définition de 'text-shadow avec ::first-letter' dans cette spécification.
    Candidat au statut de recommendation Autorise l'usage de text-shadow avec ::first-letter.
    Selectors Level 3
    La définition de '::first-letter' dans cette spécification.
    Recommendation Définition des cas limites comme les listes, ou les comportement spécifiques à certaines langues (comme le digraphe néerlandais IJ)
    CSS Level 2 (Revision 1)
    La définition de '::first-letter' dans cette spécification.
    Recommendation CSS Level 2 utilisait la syntaxe à un caractère deux-points.
    CSS Level 1
    La définition de '::first-letter' dans cette spécification.
    Recommendation La définition initiale utilisait la syntaxe à un caractère deux-points.

    Compatibilité des navigateurs

    Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Support de base 1.0 1.0 (1.7 ou moins) 9.0 7.0 1.0 (85)
    Ancienne syntaxe (:first-line) 1.0 1.0 (1.7 ou moins) 5.5 3.5 1.0 (85)
    Support du digraphe néerlandais IJ Pas de support Pas de support Pas de support Pas de support Pas de support
    Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de base ? 1.0 (1) Pas de support ? ?
    Ancienne syntaxe (:first-line) ? 1.0 (1) ? ? ?
    Support du digraphe néerlandais IJ ? Pas de support ? ? ?

     

    Voir aussi

    Étiquettes et contributeurs liés au document

    Contributors to this page: louuis, tregagnon, teoli, FredB
    Dernière mise à jour par : tregagnon,