Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,9 @@ Ce composant `<Image />` générera le code HTML suivant :
>
```

## Remplacement des styles d'image
## Styles d'images adaptatives par défaut

Le composant d'image réactif applique un petit nombre de styles pour garantir qu'elles sont correctement redimensionnées. Les styles appliqués dépendent du type de mise en page et sont conçus pour donner le meilleur comportement pour les attributs générés `srcset` et `sizes`. Voici les styles par défaut :
Le composant d'images adaptatives applique un nombre limité de styles pour garantir qu'elles sont correctement redimensionnées. Les styles appliqués dépendent du type de mise en page et sont conçus pour optimiser le comportement des attributs `srcset` et `sizes` générés :

```css title="Styles des images adaptatives"
:where([data-astro-image]) {
Expand All @@ -162,10 +162,16 @@ Le composant d'image réactif applique un petit nombre de styles pour garantir q
}
```

Vous pouvez remplacer les styles `object-fit` et `object-position` en définissant les props `fit` et `position` sur le composant `<Image />` ou `<Picture />`.
### Remplacement des styles par défaut

Les styles utilisent la [pseudo-classe `:where()`](https://developer.mozilla.org/fr/docs/Web/CSS/:where), dont la [spécificité](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_cascade/Specificity) est de 0, ce qui signifie qu'il est facile de la remplacer par vos propres styles. Tout nom de classe ou de balise aura une spécificité supérieure à `:where()` ; vous pouvez donc facilement remplacer les styles en ajoutant votre propre nom de classe ou de balise à l'image.
Les styles utilisent la [pseudo-classe `:where()`](https://developer.mozilla.org/fr/docs/Web/CSS/:where), dont la [spécificité](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_cascade/Specificity) est de 0, ce qui signifie qu'il est facile de la remplacer par vos propres styles. Tout sélecteur CSS aura une spécificité plus élevée que `:where()`, vous pouvez donc facilement remplacer les styles en ajoutant vos propres styles pour cibler l'image.

Tailwind 4 est un cas particulier, car il utilise [des couches en cascade](https://developer.mozilla.org/fr/docs/Web/CSS/@layer), ce qui signifie que les règles Tailwind sont toujours moins spécifiques que les règles qui n'utilisent pas de couches. Astro prend en charge les navigateurs qui ne prennent pas en charge les couches en cascade ; il ne peut donc pas les utiliser pour les images. Cela signifie que si vous devez remplacer les styles en utilisant Tailwind 4, vous devez utiliser [le modificateur `!important`](https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-modifier).
Vous pouvez remplacer les styles `object-fit` et `object-position` image par image en définissant les props `fit` et `position` sur le composant `<Image />` ou `<Picture />`.

Vous pouvez désactiver entièrement les styles par défaut en définissant [`image.experimentalDefaultStyles`](/fr/reference/configuration-reference/#imageexperimentaldefaultstyles) sur `false` si vous préférez gérer vous-même le style des images adaptatives.

#### Tailwind 4

Tailwind 4 est un cas particulier, car il utilise [des couches en cascade](https://developer.mozilla.org/fr/docs/Web/CSS/@layer), ce qui signifie que les règles Tailwind sont toujours moins spécifiques que les règles qui n'utilisent pas de couches. Astro prend en charge les navigateurs qui ne prennent pas en charge les couches en cascade, il ne peut donc pas les utiliser pour les images. Cela signifie que [vous devez désactiver les styles par défaut](/fr/reference/configuration-reference/#imageexperimentaldefaultstyles) si vous avez besoin de les remplacer avec Tailwind 4.

Pour une présentation complète et pour donner votre avis sur cette API expérimentale, consultez la [RFC Responsive Images](https://github.com/withastro/roadmap/blob/responsive-images/proposals/0053-responsive-images.md).