`Fit-content()` - Fonction CSS

fit-content()

Résumé des caractéristiques de la fonction `fit-content()`

Description rapide

Calcule une dimension en fonction du contenu et de limites.

Statut

Standard

Module W3C

Module CSS - Dimensionnement des blocs

Références (W3C)

CSS Box Sizing Module Level 3

Statut du document: WD (document de travail)

Description de la fonction `fit-content()`.

La fonction fit-content() calcule une dimension d'après le contenu de l'élément, tout en veillant à ce que cette dimension reste inférieure ou égale à la limite indiquée. Elle est surtout efficace pour définir la largeur des colonnes ou la hauteur des lignes d'une grille (voir grid-template-columns et grid-template-rows).

fit-content() effectue le calcul suivant:


	min(max-content, max(min-content, <paramètre>))

La spécification future devrait étendre son utilisation au dimensionnement des blocs (propriétés width, height, min-width, max-width, min-height et max-height).

Les trois cellules ci-dessous font partie de trois grilles différentes. Elles ont toutes été dimensionnées avec fit-content(200px). On voit que la largeur des cellules s'agrandit en fonction du contenu, mais ne dépasse jamais la limite des 200 pixels indiquée.

Texte court

Texte un peu plus long

Texte vraiment beaucoup plus long

Remarque : il existe également une valeur prédéfinie fit-content qui a un fonctionnement comparable à la fonction du même nom, mais qui ne permet pas de définir une dimension maximale. La valeur fit-content est cependant mieux reconnue par les navigateurs pour dimensionner des éléments en dehors d'une grille. Plus d'infos sur la valeur fit-content.

Reportez-vous également aux pages d'explication des valeurs min-content et max-content.

La valeur `fit-content()` peut être utilisée avec les propriétés suivantes :

grid-auto-columns : Définit la largeur par défaut des colonnes dans une grille.
grid-auto-rows : Définit la hauteur par défaut des lignes dans une grille.
grid-template-columns : Définit le nombre et la largeur des colonnes d'une grille.
grid-template-rows : Définit le nombre et la hauteur des lignes d'une grille.

Syntaxes de la fonction `fit-content()`.

grid-auto-columns: fit-content(100px);

fit-content() attend une seule valeur, positive ou nulle, suivie d'une unité de dimensions, sauf l'unité fr. Voir les unités de dimension. Cette valeur est traitée comme un maximum dans le calcul de la largeur optimale.

Simulateur avec la fonction `fit-content()`.

La fonction fit-content() est particulièrement pratique pour définir la largeur des colonnes d'une grille, ou la hauteur de ses lignes. Elle prend en compte toutes les cellules des colonnes, ou toutes les cellules des lignes.

Les ordinateurs sont inutiles. Ils ne savent que donner des réponses.

Pablo Picasso

L'intelligence artificielle ne fait pas le poids face à la stupidité naturelle.

Albert Einstein

L'intelligence artificielle se définit comme le contraire de la bêtise naturelle.

Woody Allen

Simulateur avec la fonction `fit-content()`.

Le simulateur manipule une grille de trois colonnes. La largeur de ces dernières est ajustée en fonction de la valeur que vous choisissez ci-dessous.

grid-auto-columns :

auto

fit-content( 100px )

fit-content( 150px )

fit-content( 30% )

Première cellule

Deuxième cellule, contenant plus de texte

3^ème cellule

Support de la fonction `fit-content()`.

Le tableau ci-dessous présente la prise en charge de la fonction fit-content() dans trois cas de figure :

Colonne 1

Support par les navigateurs de la fonction fit-content() dans le contexte d'une grille, pour dimensionner les largeurs de colonnes et les hauteurs de lignes.

Colonne 2

Support par les navigateurs de la fonction fit-content() pour dimensionner les éléments d'un flex-box.

Colonne 3

Support par les navigateurs de la fonction fit-content() pour dimensionner n'importe quel élément avec les propriétés height et width.

Remarques :

(1) Firefox peut activer cette fonctionnalité avec le flag layout.css.fit-content-function.enabled.

Fonction
fit-content()
(grille)

Fonction
fit-content()
(flex-box)

Fonction
fit-content()
(autres usages)

Estimation de la prise en charge globale.

95%

93%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Firefox

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la fonction `fit-content()`.

Module CSS - Dimensionnement des blocs Niveau 3

Regroupement de toutes les techniques de dimensionnement des boîtes dans ce module "Sizing".
Introduction de la fonction fit-content() et de la valeur fit-content.

27 Septembre 2012
Document de travail.
Module CSS - Dimensionnement des blocs Niveau 4

Pas de modification concernant la fonction fit-content() ou la valeur du même nom

26 Mai 2020
Document de travail.

Dimensionnement des blocs, voir aussi...

Les spécifications CSS éditées par le W3C sont organisées en modules. La fonction fit-content() est décrite dans le module Module CSS - Dimensionnement des blocs, ainsi que la valeur du même nom et les définitions suivantes :