minmax() - Fonction CSS
minmax()
Résumé des caractéristiques de la fonction minmax()
Description rapide
Renvoie une valeur comprise dans une fourchette.
Statut
Standard
Pourcentages
Calculés par rapport à la largeur du container grille.
Module W3C
Module CSS - Mise en page par grille
Références (W3C)
Statut du document:: CRD (document proposé pour la recommandation)
Statut du document:: CRD (document proposé pour la recommandation)
Description de la fonction minmax()
.
La fonction minmax()
définit une dimension comprise entre deux valeurs, pour le dimensionnement des colonnes et
des lignes d'une grille.
La fonction minmax()
peut être utilisée avec :
grid-auto-columns
: Mode de calcul des colonnes 'auto' dans une grille.grid-auto-rows
: Mode de calcul de la hauteur 'auto' des lignes dans une grille.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 minmax()
.
- grid-auto-columns: minmax(100px, 300px); min max
min
etmax
peuvent être :- Deux valeurs numériques positives ou nulles, suivies d'une unité de dimension (voir les unités CSS de dimension).
Notez en particulier l'unité
fr
, particulièrement adaptée à cet usage.
- La valeur
auto
: le navigateur détermine la valeur suivant son algorithme habituel. - La valeur
min-content
: dimension déterminée en fonction du contenu, en la minimisant en ajoutant tous les retours à la ligne possibles. - La valeur
max-content
: dimension déterminée en fonction du contenu, sans ajouter de retours à la ligne.
Si la valeur indiquée pour
max
est inférieure à celle indiquée pourmin
, la fonction renvoiemin
. - Deux valeurs numériques positives ou nulles, suivies d'une unité de dimension (voir les unités CSS de dimension).
Notez en particulier l'unité
Simulateur.
HTML : Hyper Text Markup Language
CSS : Cascading Style Sheets
JS : Javascript
XML : Extended Markup Language
Compatibilité et prise en charge par les navigateurs.
Les navigateurs actuels traitent correctement la fonction minmax()
pour le dimensionnement des lignes et des colonnes d'une grille.
1
minmax()
Estimation de la prise en charge en pourcentage du parc actuel.
96%
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 le site Caniuse.com pour plus d'informations de compatibilité.
Voir aussi, dans le même module de standardisation que minmax()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. minmax()
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.
Propriétés.
Propriété raccourcis définissant les principaux paramètres d'une grille.
Positionne un élément dans une zone nommée de la grille.
Mode de calcul des colonnes 'auto' dans une grille.
Mode de calcul de l'emplacement des éléments dans la grille.
Mode de calcul de la hauteur 'auto' des lignes dans une grille.
Numéro de colonne(s) d'un élément dans une grille.
Numéro de la colonne de fin d'un élément dans une grille.
Numéro de la colonne de début d'un élément dans une grille.
Numéro des lignes d'un élément dans une grille.
Numéro de la ligne de fin d'un élément dans une grille.
Numéro de la ligne de départ d'un élément dans une grille.
Largeur des colonnes et hauteur des lignes d'une grille.
Définition de zones nommées dans une grille
Définition du nombre et de la largeur des colonnes d'une grille.
Définition du nombre et de la hauteur des lignes d'une grille.