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

    percentage

    Résumé

    Le type de données CSS <percentage> représente une valeur en pourcentage. De nombreuses propriétés CSS prennent des valeurs en pourcentages, souvent pour déterminer des tailles en fonction de leurs parents. Les pourcentages sont formés d'un <number> immédiatement suivi par le signe pourcentage %. Comme pour toutes les valeurs avec unité en CSS, il n'y a aucun espace entre le '%' et le nombre.

    De nombreuses propriétés CSS utilisent des pourcentages, comme width, margin et padding. Les pourcentages peuvent aussi être vus avec font-size, où la taille du texte est directement en relation avec celle de son parent.

    Note : Seules les valeurs calculées sont héritées. Ainsi, même si une valeur en pourcentage est utilisée sur la propriété parent, une valeur réelle, comme une largeur en pixel pour une valeur <longueur>, sera accessible sur la propriété héritée, pas la valeur en pourcentage.

    Interpolation

    Les valeurs du type <percentage> peuvent être interpolées de manière à rendre les animations possibles. Dans ce cas l'interpolation se fait par des nombres réels à virgule flottante. La rapidité de l'interpolation est déterminée par la fonction de temporisation associée à l'animation.

    Exemples

    <div style="background-color:#0000FF;">
      <div style="width:50%;margin-left:20%;background-color:#00FF00;">Width: 50%, Left margin: 20%</div>
      <div style="width:30%;margin-left:60%;background-color:#FF0000;">Width: 30%, Left margin: 60%</div>
    </div> 
    

    L'HTML ci-dessus produira :

    Width: 50%, Left margin: 20%
    Width: 30%, Left margin: 60%

     

    <div style="font-size:18px;">
      Texte taille normal (18px)
      <span style="font-size:50%;">50%</span>
      <span style="font-size:200%;">200%</span>
    </div> 
    

    L'HTML ci-dessus produira :

    Texte taille normal (18px) 50% 200%

    Spécifications

    Spécification Statut Commentaires
    CSS Values and Units Module Level 3 Candidate Recommendation Aucun changement significatif depuis CSS Level 2 (Revision 1)
    CSS Level 2 (Revision 1) Recommendation Aucun changement par rapport à CSS Level 1
    CSS Level 1 Recommendation  

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Support basique 1.0 1.0 (1.0) <=5.0 (Oui) 1.0 (85)
    Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Support basique (Oui) (Oui) (Oui) (Oui) (Oui)

    Voir également

    Types de données CSS : <angle>, <blend-mode>, <color>, <frequency>, <gradient>, <image>, <length>, <number>, <percentage>, <position>, <ratio>, <resolution>, <shape>, <string>, <time>, <timing-function>, <uri>, <user-ident>

    Étiquettes et contributeurs liés au document

    Contributors to this page: BenoitL, teoli, tregagnon, FredB
    Dernière mise à jour par : teoli,
    Masquer la barre latérale