Gap Non Funziona in Safari - 3 Modi per Risolverlo

Chi non apprezza quando i browser implementano nuove funzionalità CSS? A volte alcune funzionalità, come lo spazio tra le colonne, non funzionano in Safari.

La proprietà gap è uno sforzo per fornire una proprietà simile alla griglia CSS e al flexbox. Sarà responsabile dello spazio (grondaie) tra colonne e righe.

Tuttavia, alcuni browser, incluso Safari, non abilitano la proprietà Gap quando si utilizza il layout flessibile.

Questo non è l’unico problema con il browser e molti hanno segnalato che Safari non riesce a scaricare un file, ma abbiamo trattato questo problema in una guida separata.

Gap funziona in Safari?

Se lo spazio tra le colonne o lo spazio tra le griglie non funziona in Safari, molto probabilmente stai utilizzando una versione di Safari inferiore alla 14.

Gli spazi tra righe e colonne sono ora supportati nei contenitori Flexbox in Safari 14.1. Questo aggiornamento rende possibile l’utilizzo di flexbox nel web design senza la necessità di scomodi hack sui margini.

Ma se il gap di colonna non funziona in Safari, ci sono modi per risolverlo.

Flexbox Gap è supportato in tutti i browser?

La maggior parte dei browser moderni supporta flexbox. Diversi browser web hanno un’implementazione sperimentale di flexbox.

L’utilizzo del prefisso del fornitore era la procedura standard per lo sviluppo di implementazioni sperimentali.

Questo problema riguarda solo Safari prima della versione 15.4, ma se utilizzi questa o una versione più recente, non riscontri alcun problema.

Ora che sai di più su questa funzionalità, vediamo cosa possiamo fare se grid-gap non funziona in Safari.

Consiglio dell’Esperto:

In poche parole, puoi risolvere questo problema del sito Web con colonne o righe separate semplicemente passando dal browser a Opera One.

Questa soluzione alternativa non risolve il problema su Safari ma offre comunque una navigazione ottimizzata con supporto delle proprietà gap e molte funzionalità di integrazione, persino un’intelligenza artificiale nativa.

Opera One

Naviga senza errori su qualsiasi pagina web utilizzando funzionalità avanzate e accessibilità.

Gratuito Visita il sito

Come posso correggere il divario se non funziona su Safari?

1. Aggiorna il tuo Safari alla versione più recente

1. Seleziona Preferenze di Sistema dal menu Apple nell’angolo dello schermo.
   
2. Fai clic su Aggiornamento software.
   
3. Attendi che il Mac esegua un controllo degli aggiornamenti.
4. Fai clic su Aggiorna ora se sono presenti aggiornamenti accessibili.
   
5. Seleziona l’opzione denominata Mantieni aggiornato automaticamente il mio Mac per ottenere automaticamente gli aggiornamenti di macOS e Safari.
6. Attendi che eventuali aggiornamenti vengano installati sul tuo Mac.

Questa soluzione non è una soluzione alternativa al flex gap di Safari e risolverà in modo permanente il problema sul tuo computer.

2. Soluzione flessibile per il gap

1. Apri il tuo file CSS.
2. Ora aggiungi all’elemento desiderato il seguente codice:
display: grid;
grid-gap: 8rem;
gap: 8rem;
   
3. Salva le modifiche.

Se il gap flessibile CSS non funziona, puoi risolvere questo problema utilizzando una soluzione alternativa. Non c’è supporto per Flexbox in Safari inferiore a 14.

Il gap della griglia è supportato nelle versioni precedenti di Safari; pertanto, sarebbe preferibile passare dal display flessibile alla griglia.

3. Utilizza il selettore del gufo lobotomizzato

1. Apri il file CSS nel tuo editor preferito.
2. Ora aggiungi questa riga di codice: .parent_div>*+* { margin-left: 8rem;}
   

   

3. Salvare le modifiche.

Esiste un insolito selettore CSS a tre caratteri sotto forma di selettore del gufo lobotomizzato. Poiché ha una strana somiglianza con l’aspetto vacuo di un gufo, è chiamato selettore del gufo lobotomizzato.

Cosa posso usare al posto di gap nei CSS?

Invece di utilizzare gap in CSS 3, puoi utilizzare margin-right in CSS 3. Se gap non funziona affatto in Safari, puoi seguire le soluzioni sopra menzionate per risolvere questo problema.

Tuttavia, il problema del gap sembra essere stato risolto nelle versioni più recenti di Safari, quindi non dovrai più ricorrere a soluzioni alternative.

Se il divario non funziona in Safari, l’opzione migliore sarebbe aggiornare il browser, ma se questa non è un’opzione, dovrai ricorrere a soluzioni alternative.

Si tratta di un problema lato client, ma molti presentavano problemi lato server, ad esempio il server smetteva di rispondere ai messaggi di Safari, ma anche questi possono essere risolti.

Sei riuscito a risolvere il problema del gap in Safari? Facci sapere quale soluzione ha funzionato per te.