repeat() - Fonction CSS
Résumé des caractéristiques de la fonction repeat()
Description de la fonction repeat()
.
La fonction repeat()
est utilisée pour définir les largeurs des colonnes d'une grille ou
les hauteurs des lignes.
repeat()
évite de répéter les valeurs identiques plusieurs fois. Cela allège l'écriture.
Exemple :
grid-template-columns: repeat(10, 10%);
/* Est équivalent à : */
grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10% ;
La fonction repeat() peut être utilisée avec :
grid-template-columns
: Définition du nombre et de la largeur des colonnes d'une grille.grid-template-rows
: Définition du nombre et de la hauteur des lignes d'une grille.
Syntaxe de la fonction repeat()
.
n
est le nombre de répétitions.
d
est une dimension ou un groupe de dimensions.
repeat(
)
- grid-template-columns;: repeat(5, 20%); n l
n
est un nombre positif, sans unité, qui indique le nombre de répétitions.l
est la largeur d'une colonne. Reportez-vous aux propriétésgrid-template-columns
etgrid-template-rows
pour connaître les différentes syntaxes acceptées pour cette valeur.Il faut noter que la valeur
l
peut être une série de plusieurs valeurs et même éventuellement comporter des virgules mais la fonctionrepeat()
ne considèrera pas qu'il s'agit de plusieurs paramètres : tout ce qui suit la première virgule est considéré comme la valeur à répéter.
Ainsi la syntaxerepeat(5, 5% 15%)
est équivalente à
5% 15% 5% 15% 5% 15% 5% 15% 5% 15%
.
Simulateur.
Compatibilité et prise en charge par les navigateurs.
Les navigateurs actuels traitent bien le dimensionnement des lignes ou des colonnes d'une grille avec la fonction repeat()
.
repeat()
avec la propriété grid-template-columns
.
repeat()
avec la propriété grid-template-rows
.
repeat()
grid-template-columns
repeat()
grid-template-rows
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que repeat()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. repeat()
fait partie du Module CSS - Mise en page par grille (CSS Grid Layout Module). Les définitions suivantes sont également décrites dans ce même module.