Чому потрібна підтримка браузерів застарілих версій: розбираємо ситуацію з оглядкою на CSS

1. Застряг в минулому
2. Використання новітнього і найкрутішого - з фолбек підтримкою
3. Наскільки сильно може бути застарілим браузер?
4. Еволюція триває ...

Наша взаимовыгодная связь https://banwar.org/

Від автора: спасибі, Господи, за те, що веб-браузери постійно оновлюються. Протягом стількох років нам доводилося покладатися на користувачів, щоб докласти зусиль для завантаження нових версій одразу після їх виходу. Але тепер навіть Microsoft's Edge приєдналися до постійного оновлення.

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

Але ми також знаємо, що до сих пір є користувачі, які працюють з більш старим програмним забезпеченням. Дивно, але за даними NetMarketShare, Internet Explorer 11 як і раніше займає третє місце в списку найбільш часто використовуваних браузерів за 2017 рік. IE 8 посів шосте місце, в той час як IE 9 посів десяте місце. На IE як і раніше припадає близько 13% використання десктопних пристроїв.

Безсумнівно, цифри не найвищі, коли справа стосується IE. Але вони все ж досить високі, що потрібно враховувати при створенні нового веб-сайту. Питання в тому, як ми продовжуємо підтримувати старі браузери при використанні нових функцій? І, як далеко ми повинні зайти в цьому?

Застряг в минулому

В ідеальному світі дизайнери хотіли б бачити, як Internet Explorer просто залишиться в історії. Схоже, що його смерть ще не скоро. Хоча більш дешеві ПК і просте використання мобільного Інтернету, вказують на те, що IE в кінцевому рахунку піде з дошки. По крайней мере, це стосується споживача.

JavaScript. Швидкий старт

Вивчіть основи JavaScript на практичному прикладі зі створення веб-додатки

Корпорації як і раніше використовують більш старі версії Windows, а це значить, що використовується і IE. Edge доступний тільки для Windows 10. Тому, якщо великі компанії будуть користуватися Windows 7 або 8, IE залишиться вибором за замовчуванням. Звичайно, можуть використовуватися Chrome і Firefox, але це не обов'язково означає, що користувачам в цих корпораціях дозволено встановлювати їх.

Дехто випереджає IE. Остання версія Safari від Apple не буде працювати на деяких старих комп'ютерах Mac або iOS. Здавалося б, ефект тут буде діяти на мобільний дизайн, так як є ще кілька старих моделей iPhone. Safari є другим найбільш широко використовуваним мобільним браузером.

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

Використання новітнього і найкрутішого - з фолбек підтримкою

Отже, як ми можемо впроваджувати нові функції, зберігаючи при цьому проекти в старих браузерах? Коли справа доходить до CSS, використання допоміжних методів може бути величезною допомогою. У загальному випадку резерв - це код, який дозволить застарілому браузеру використовувати прийнятну альтернативу тому, чого ми намагаємося досягти.

Наприклад, якщо ви використовуєте Flexbox, є деякі доступні префікси браузера, які дозволять обмежити підтримку в старіших версіях Chrome, Safari, Firefox і IE. Не кожна функція CSS буде мати цей тип резервного копіювання, але зазвичай завжди є спосіб обійти проблеми, з якими ви стикаєтеся.

Чим далі ви йдете в плані надання альтернативи, тим складніше її отримати. Але в міру тестування різних версій браузера і пристрої, ви можете провертати хитрості.

Ваша робота також може бути спрощена за допомогою інструментів, типу Modernizr. Це скрипт, який виявить підтримку браузера для певних функцій і відповідно додасть клас CSS в body сторінки. Потім ви можете використовувати цей клас для надання альтернативних стилів, якщо функція може бути в браузері користувача.

JavaScript. Швидкий старт

Вивчіть основи JavaScript на практичному прикладі зі створення веб-додатки

Саме чудове в тому, що перед завантаженням скрипта можна вибрати, які функції ви хочете знайти. Наприклад, ви можете вибрати такі функції, як canvas, HTML5 Audio / Video або навіть emoji. Це дозволяє зробити речі максимально можливими, забезпечуючи велику допомогу в забезпеченні сумісності.

Наскільки сильно може бути застарілим браузер?

Ми знаємо, що ми можемо підтримувати застарілі браузери. Але як далеко ми можемо зайти? Якщо ви запитаєте 100 різних дизайнерів, то отримаєте 100 різних відповідей. Це тому, що насправді не існує конкретного правила про зворотну сумісність.

Особисто я вважаю, що частина рівняння має бути про функції, які ви використовуєте. Такі функції, як Flexbox або CSS Grid, які впливають на макет, мають життєво важливе значення для зручності використання веб-сайту. Тому важливо надати якийсь резерв для старих систем. Такі речі, як макет і навігація, слід розглядати як «занадто круті, щоб зазнати невдачі».

Коли справа доходить до предметів, які більше підходять для естетики, ніж для функціональності, їх часто можна залишити як є. Якщо ви використовуєте властивості CSS3, такі як тіні і закруглені кути, ймовірно, не варто витрачати час на надання альтернатив. Сайт повинен бути таким же зручним для використання з ними або без них.

Якщо ви сподіваєтеся з'ясувати, яка версія браузера повинна служити точкою відліку, має сенс посилатися на згадані вище номера використання. І якщо у вас є дані цього типу для сайту, над яким ви працюєте, ще краще. Отже, якщо ви знаєте, що на вашому сайті все ще є відвідувачі, які використовують IE8, то варто переконатися, що вони можуть отримати доступ до контенту.

Що стосується моєї власної підпрограми, то для IE8 вона така ж, як я тестую десктопні браузери. Також я перевіряю Safari 6 разом з випадковою версією Chrome і Firefox. На мобільному телефоні я зазвичай звертаюся до пристроїв Android 4.x і iOS 7. Звичайно, ваші потреби і переваги можуть відрізнятися.

Еволюція триває ...

Ймовірно, не дивно, що старі браузери все ще використовуються. Веб-дизайнери вже багато років пробивають собі шлях через цю проблему. Але ситуація набагато краща, ніж в минулому. Той, хто мав справу з IE6, може це підтвердити.

Згодом ми побачимо, як старі настільні і переносні комп'ютери відправляються в кошик. І навіть корпоративним користувачам доведеться в кінцевому підсумку все оновити. Оскільки сучасні браузери постійно оновлюються, нові системи повинні йти в ногу з розвитком веб-дизайну.

Схоже, що більш цікавим завданням буде підтримка старих мобільних пристроїв. Хоча ми бачимо користувачів в безперервному циклі поновлення в багатьох областях світу, деякі з них як і раніше будуть використовувати застаріле обладнання і програмне забезпечення. Тому, можливо, наш резервний фокус буде більше рухатися до маленького екрану.

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

Автор: Eric Karkovack

джерело: https://speckyboy.com/

Редакція: Команда webformyself.

JavaScript. Швидкий старт

Вивчіть основи JavaScript на практичному прикладі зі створення веб-додатки

Вивчіть сучасну верстку сайтів з нуля