Прогалина не працює в Safari: 3 способи легко її виправити

Хто не цінує, коли браузери впроваджують нові функції CSS? Однак іноді певні функції, як-от розрив стовпців, не працюють у Safari.

Властивість gap — це спроба забезпечити властивість, подібну до CSS grid і flexbox. Він відповідатиме за простір (жолоби) між колонками та рядками.

Однак деякі браузери, зокрема Safari, не вмикають властивість gap під час використання гнучкого макета. Це не єдина проблема з браузером, і багато хто повідомили про це Safari не може завантажити файл, але ми розглянули цю проблему в окремому посібнику.

Чи працює проміжок у Safari?

Якщо розрив у стовпці чи сітці не працює в Safari, швидше за все, ви використовуєте версію Safari, старішу за 14.

Розрив рядків і стовпців тепер підтримуються в контейнерах Flexbox у Safari 14.1. Це оновлення робить flexbox можливим для використання у веб-дизайні без необхідності незручних хаків полів.

Але якщо розрив у стовпці не працює в Safari, є способи це виправити.

Чи Flexbox Gap підтримується всіма браузерами?

Більшість сучасних браузерів підтримують flexbox. Кілька веб-браузерів мають експериментальну реалізацію flexbox. Використання префікса постачальника було стандартною процедурою для розробки експериментальних реалізацій.

Ця проблема стосується лише Safari до версії 15.4, але якщо ви використовуєте цю чи будь-яку новішу версію, у вас не виникне проблем.

Тепер, коли ви знаєте більше про цю функцію, давайте подивимося, що ми можемо зробити, якщо grid-gap не працює в Safari.

Коротка порада:

Простіше кажучи, ви можете вирішити цю проблему веб-сайту з пропусками стовпців або рядків, просто перемкнувши свій браузер на Opera.

Це обхідне рішення не вирішує проблему в Safari, але все одно забезпечує оптимізовану навігацію з підтримкою властивостей пропуску та багатьма функціями інтеграції.

Опера

Переміщуйтесь без помилок на будь-якій веб-сторінці за допомогою розширених функцій і спеціальних можливостей.

безкоштовно Відвідайте веб-сайт

Як виправити розрив, якщо він не працює в Safari?

1. Оновіть Safari до останньої версії

1. Виберіть Системні налаштування від Яблуко меню в кутку екрана.
   
2. Натисніть на Оновлення програмного забезпечення.
   
3. Зачекайте, поки Mac виконає перевірку оновлень.
4. Натисніть Оновити зараз якщо є доступні оновлення.
   
5. Перевірте позначену опцію Автоматично оновлювати мій Mac щоб автоматично отримувати оновлення macOS і Safari.
6. Зачекайте, поки будь-які оновлення будуть встановлені на вашому Mac.

Це рішення не є обхідним шляхом Safari flex gap, і воно назавжди вирішить проблему на вашому комп’ютері.

2. Обхідний шлях Flex gap

1. Відкрийте файл CSS.
2. Тепер додайте до потрібного елемента такий код:
дисплей: сітка;
розрив сітки: 8rem;
зазор: 8rem;
   
3. Зберегти зміни.

Якщо CSS flex gap не працює, ви можете вирішити цю проблему за допомогою обхідного шляху. Немає підтримки Flexbox у Safari менше 14.

Розрив сітки підтримується в попередніх версіях Safari; тому перехід від гнучкого дисплея до сітки буде кращим.

3. Використовуйте лоботомізований селектор сови

1. Відкрийте файл CSS у вашому улюбленому редакторі.
2. Тепер додайте цей рядок коду:.parent_div>*+* { margin-left: 8rem;}

   

3. Зберегти зміни.

Існує незвичайний трисимвольний селектор CSS у вигляді лоботомізованого селектора сови. Оскільки він дивовижно схожий на порожній вигляд сови, його називають лоботомізованим селектором сови.

Що я можу використовувати замість прогалини в CSS?

Замість використання проміжку в CSS 3, ви можете використовувати margin-right у CSS 3. Якщо прогалина взагалі не працює в Safari, ви можете виконати наведені вище рішення, щоб вирішити цю проблему.

Однак проблему прогалини, схоже, виправлено в новіших версіях Safari, тому вам більше не доведеться вдаватися до обхідних шляхів.

Якщо прогалина не працює в Safari, найкращим варіантом буде оновити веб-переглядач, але якщо це неможливо, вам доведеться вдатися до обхідних шляхів.

Це проблема на стороні клієнта, але багато хто мав проблеми на стороні сервера, наприклад сервер перестав відповідати Safari повідомлень, але їх також можна виправити.

Чи вдалося вам вирішити проблему розриву в Safari? Повідомте нам, яке рішення спрацювало для вас.