Gap ne fonctionne pas dans Safari: 3 façons de le corriger facilement

Qui n'apprécie pas que les navigateurs implémentent de nouvelles fonctionnalités CSS? Cependant, certaines fonctionnalités, telles que l'espacement des colonnes, ne fonctionnent parfois pas dans Safari.

La propriété gap est un effort pour fournir une propriété similaire à la grille CSS et à la flexbox. Il sera en charge de l'espace (gouttières) entre les colonnes et les rangées.

Cependant, certains navigateurs, dont Safari, n'activent pas la propriété gap lors de l'utilisation de la disposition flexible. Ce n'est pas le seul problème avec le navigateur, et beaucoup ont signalé que Safari ne peut pas télécharger un fichier, mais nous avons couvert ce problème dans un guide séparé.

L'écart fonctionne-t-il dans Safari ?

Si l'écart de colonne ou l'écart de grille ne fonctionne pas dans Safari, c'est probablement parce que vous utilisez une version de Safari inférieure à 14.

Les espaces entre les lignes et les colonnes sont désormais pris en charge dans les conteneurs Flexbox dans Safari 14.1. Cette mise à jour permet d'utiliser flexbox dans la conception Web sans avoir besoin de hacks de marge gênants.

Mais si l'écart de colonne ne fonctionne pas dans Safari, il existe des moyens de le réparer.

Flexbox Gap est-il pris en charge dans tous les navigateurs ?

La plupart des navigateurs modernes prennent en charge flexbox. Plusieurs navigateurs Web ont une implémentation expérimentale de flexbox. L'utilisation d'un préfixe de fournisseur était la procédure standard pour développer des implémentations expérimentales.

Ce problème affecte uniquement Safari avant la version 15.4, mais si vous utilisez cette version ou une version plus récente, vous n'avez aucun problème.

Maintenant que vous en savez plus sur cette fonctionnalité, voyons ce que nous pouvons faire si grid-gap ne fonctionne pas dans Safari.

Conseil rapide:

En termes simples, vous pouvez résoudre ce problème de site Web avec des colonnes ou des lignes vides en basculant simplement votre navigateur sur Opera.

Cette solution de contournement ne résout pas le problème sur Safari, mais offre toujours une navigation optimisée avec la prise en charge de la propriété gap et de nombreuses fonctionnalités d'intégration.

Opéra

Naviguez sans erreur sur n'importe quelle page Web en utilisant les fonctionnalités avancées et l'accessibilité.

Libre Visitez le site Web

Comment puis-je corriger l'écart si cela ne fonctionne pas sur Safari ?

1. Mettez à jour votre Safari vers la dernière version

1. Sélectionner Préférences de système du Pomme menu dans le coin de votre écran.
   
2. Cliquer sur Mise à jour logicielle.
   
3. Attendez que le Mac effectue une vérification de mise à jour.
4. Cliquez sur Mettre à jour maintenant s'il existe des mises à jour accessibles.
   
5. Cochez l'option intitulée Maintenir automatiquement mon Mac à jour pour obtenir automatiquement les mises à jour macOS et Safari.
6. Attendez que les mises à jour soient installées sur votre Mac.

Cette solution n'est pas une solution de contournement Safari flex gap, et elle résoudra définitivement le problème sur votre ordinateur.

2. Solution de contournement de l'écart flexible

1. Ouvrez votre fichier CSS.
2. Ajoutez maintenant à l'élément souhaité le code suivant:
affichage: grille ;
écart de grille: 8 rem ;
écart: 8 rem ;
   
3. Sauvegarder les modifications.

Si CSS flex gap ne fonctionne pas, vous pouvez résoudre ce problème en utilisant une solution de contournement. Il n'y a pas de support pour Flexbox dans Safari inférieur à 14.

L'écart de grille est pris en charge dans les versions précédentes de Safari; par conséquent, il serait préférable de passer de l'affichage flexible à la grille.

3. Utiliser le sélecteur de hibou lobotomisé

1. Ouvrez le fichier CSS dans votre éditeur préféré.
2. Ajoutez maintenant cette ligne de code :.parent_div>*+* { marge-gauche: 8rem ;}

   

3. Sauvegarder les modifications.

Un sélecteur CSS à trois caractères inhabituel existe sous la forme du sélecteur de hibou lobotomisé. Parce qu'il ressemble étrangement à l'apparence vide d'un hibou, on l'appelle le sélecteur de hibou lobotomisé.

Que puis-je utiliser à la place de l'écart dans CSS?

Au lieu d'utiliser gap dans CSS 3, vous pouvez utiliser margin-right dans CSS 3. Si l'écart ne fonctionne pas du tout dans Safari, vous pouvez suivre les solutions mentionnées ci-dessus pour résoudre ce problème.

Cependant, le problème d'écart semble être résolu dans les nouvelles versions de Safari, vous n'aurez donc plus besoin de recourir à des solutions de contournement.

Si l'écart ne fonctionne pas dans Safari, la meilleure option serait de mettre à jour votre navigateur, mais si ce n'est pas une option, vous devrez recourir à des solutions de contournement.

Il s'agit d'un problème côté client, mais beaucoup avaient des problèmes côté serveur, tels que le le serveur a cessé de répondre Safari messages, mais ceux-ci peuvent également être corrigés.

Avez-vous réussi à résoudre le problème d'écart dans Safari? Faites-nous savoir quelle solution a fonctionné pour vous.