Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Vos résultats de recherche

    ::first-line (:first-line)

    Résumé

    Le pseudo-éléments CSS ::first-line applique la décoration à la première ligne d'un élément. La quantité de texte sur la première ligne dépend de nombreux facteurs, comme la largeur des éléments ou du document, mais aussi la taille du texte. Comme tous les pseudo-éléments, les sélecteurs contenant ::first-line ne ciblent pas un élément HTML réel.

    Une première ligne n'a de sens que dans une boîte de type bloc, et ainsi le pseudo-élément ::first-line n'a d'effet que sur les éléments dont display à une valeur de block, inline-block, table-cell ou table-caption. Dans tous les autres cas, ::first-line n'a pas d'effet.

    Seul un petit sous-ensemble de propriétés CSS peut être utilisé dans un bloc de déclaration contenant un sélecteur CSS utilisant le pseudo-élément ::first-line :

    Comme cette liste sera étendue dans le futur, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à ce que le CSS reste pérenne.

    Dans CSS 2, les pseudo-éléments étaient précédés d'un seul caractère deux-points. Comme les pseudo-classes utilisaient aussi la même convention, ils n'était pas possible de les distinguer. Afin de résoudre cela, CSS 2.1 à changé 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 d'un seul.

    Puisque de nombreux navigateurs avaient déjà mis en place la version CSS 2 dans une version publique, tous les navigateurs supportent les deux syntaxes.

    Si les navigateurs anciens doivent être supportés, :first-line est le seul choix viable ; sinon,::first-line est préféré.

    Exemples

    p::first-line { text-transform: uppercase }
    Change les lettres de la première ligne de chaque paragraphe en lettres capitales.
    Résultat de référence

    LOREM IPSUM DOLOR SIT AMET,  consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

    DUIS AUTE IRURE DOLOR IN reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    p::first-line { margin-left: 20px }
    Ne fait rien, margin-left ne peut pas être appliqué au pseudo-élément ::first-line.
    Résultat de référence

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    p::first-line { text-indent: 20px }
    Ne fait rien, text-indent ne peut pas être appliqué au pseudo-élément ::first-line.
    Résultat de référence

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    Spécifications

    Spécification Statut Commentaire
    CSS Pseudo-Elements Level 4
    La définition de '::first-line' dans cette spécification.
    Version de travail Défini plus strictement où il est applicable.
    Généralisation des propriétés autorisées pour la mise en forme du text, des propriétés de mise en page en-ligne et opacity.
    Défini l'héritage de ::first-line.
    CSS Text Decoration Level 3
    La définition de 'text-shadow avec ::first-line' dans cette spécification.
    Candidat au statut de recommendation Permet l’usage de text-shadow avec ::first-line.
    Selectors Level 3
    La définition de '::first-line' dans cette spécification.
    Recommendation La définition de ce qu'est la première ligne d'un élément a été reformulée. La syntaxe à deux caractères deux-points à été introduite.
    CSS Level 2 (Revision 1)
    La définition de '::first-line' dans cette spécification.
    Recommendation Pas de modification significative.
    CSS Level 1
    La définition de '::first-line' dans cette spécification.
    Recommendation La définition initiale utilise la syntaxe avec un seul caractère deux-points.

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Support de base 1.0 (Bogué en utilisant text-transform : Issue 129669) 1.0 (1.7 ou moins) 9.0 7.0 1.0 (85) (Bogué en utilisant text-transform : Issue 3409)
    Ancienne syntaxe (:first-line) 1.0 (Bogué en utilisant text-transform : Issue 129669) 1.0 (1.7 ou moins) 5.5 3.5 1.0 (85) (Bogué en utilisant text-transform : Issue 3409)
    Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Support de base ? 1.0 (1) Pas de support ? ?
    Ancienne syntaxe (:first-line) ? 1.0 (1) ? ? ?

    Voir également

    Le pseudo-élément ::first-letter.

    Étiquettes et contributeurs liés au document

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