Кросбраузерність

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

Дослівно браузер означає «переглядач» (від англ. browser), але насправді вони більше ніж просто переглядачі. Це також і перекладачі. Адже саме браузери інтерпретують у своєму вікні сукупність коду з файлів HTML, CSS та JS. А ще вони — наші вікна у світ інтернету.

В 90-і роки жага контролю за цими вікнами спричинила протистояння, відоме, як браузерні війни. Про це ми вже трохи розповідали в лекції «Історія вебдизайну», а ще докладніше про ці війни можна дізнатись з документального фільму «Завантаження: битва браузерів».

В середині дев’яностих найпопулярнішим браузером був Netscape Navigator. Поступово він утратив позиції, і наприкінці дев’яностих найпопулярнішим став Internet Explorer. У двотисячних з’явились і включились в протистояння й інші браузери — Firefox (ідеологічний нащадок Netscape Navigator), Opera, Safari, Chrome. В цей період роль лідера декілька разів змінювалась, і наразі протистояння виграє Chrome.

Проблема кросбраузерності вебсайтів з’явилась ще у період першого протистояння вебдизайнерів. Річ у тім, що різні браузери можуть інтерпретувати HTML-, CSS- та JS-файли по-різному.

Розбіжності часом були дрібними. Наприклад, Internet Explorer інтерпретував «пробіл» поміж тегів як відступ між ними, а Mozilla Firefox вважав такий пробіл технічним символом розмітки й ігнорував його.

Траплялись й суттєвіші розходження. Наприклад, у Firefox набагато раніше з’явилась можливість заокруглювати кутки елементів через стилі, ніж в Internet Explorer. Відтак, одну і ту саму візуальну задачу тоді доводилось виконувати двома дуже різними шляхами. На додачу до цього іноді сценарії JavaScript, що чудово працювали в одному браузері, видавали помилку в іншому.

При цьому замовник, звісно, очікував, що сайти будуть виглядати й працювати однаково. 

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

Поступово проблема кросбраузерності зменшувалась. Цьому сприяли декілька факторів:

  • поява смартфонів iPhone, а згодом і планшетів iPad; не сама собою, а те, що вона підштовхнула технології до розвитку;
  • впровадження п’ятої версії мови HTML і третьої версії CSS;
  • перехід популярних браузерів (Chrome, Opera та Edge) на однаковий рушій виведення для вебсторінок (спершу це був Webkit, а згодом — Blink).

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

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

Станом на 2020 рік сім із десяти користувачів комп’ютерів використовують браузер Chrome. Може здатись, що перемога є однозначною, адже популярності Chrome сприяє його зв’язок із корпорацією Google, яка сьогодні займає майже монопольне становище в області пошукових систем.

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

Відтак вебдизайнерам (а ще більше, фронтенд-розробникам та QA-фахівцям) корисно знати ключові браузери й перевіряти коректну роботу сторінок у кожному з них. В наступному блоці ми їх розглянемо докладніше.

Ключові комп’ютерні браузери

Станом на жовтень 2020 року, відповідно до світової статистики, п’ятірка лідерів виглядає так:

  • Chrome використовують 70,33% користувачів
  • Safari — 8.87%
  • Mozilla Firefox — 7,69%
  • Edge (нащадок Internet Explorer) — 5.83%
  • Opera — 2.43%
  • Інші браузери — 1,5%

Більш актуальну статистику ви завжди можете подивитись тут.

Розгляньмо детальніше п’ятірку лідерів.

Google Chrome

Chrome — найпопулярніший браузер 2020 року. Його створює компанія Google на основі вільного браузера Chromium та рушія Blink.

Існує версія, нібито Chrome народився внаслідок першоквітневого жарту. У 2006 році хтось запустив інформаційну качку про те, що Google створює власний браузер. На той момент це не відповідало дійсності, але, прочитавши плітки, в компанії замислились: а дійсно, чи не створити власний браузер? Слід сказати, що на той момент цю ідею не все керівництво компанії сприйняло з ентузіазмом. Колишній головний виконавчий директор Google Ерік Шмідт не бачив сенсу долучатись до чергової війни браузерів. Але всередині інженерної команди ідею створення власного браузера зустріли жваво. До того ж в компанії й так працювали декілька фахівців, що перейшли з Mozilla Firefox та Netscape.

Коли Chrome з’явився, він швидко набув популярності. Цьому сприяв мінімалістичний дизайн, завдяки якому вікно перегляду сайтів було більшим, ніж у конкурентів. На ньому сайти завантажувались швидше. Оновлення виходили регулярно та встановлювались безпосередньо в браузері (тобто, для їх встановлення не потрібно було завантажувати окремий файл). А ще, Chrome першим об’єднав поле адреси з полем пошукової системи.

Safari

Браузер Safari з’явився в січні 2003 року, як браузер для операційної системи MacOS. До цього діяла угода Apple з Microsoft про те, що в цій операційній системі буде використовуватись за замовчуванням версія браузера Internet Explorer для Mac OS X. Щойно дія угоди добігла завершення, робота над Internet Explorer для Mac була припинена.

Браузер Safari з моменту появи використовує рушій WebKit, що забезпечував ліпше дотримання стандартів W3C. Тривалий час Safari залишався браузером суто для MacOS, лише у 2009 році з’явились версії для інших операційних систем. Цілком зрозуміло, що в битві за комп’ютерні версії браузерів, він отримав досить помірні результати.

Втім саме Safari став базою для розробки мобільного браузера на iPhone, і вже тут він відігрався на повну. Адже, — і про це мало хто знає, — всі мобільні браузери iOS станом на 2020 рік насправді є Safari. Навіть якщо ви встановлюєте на iPhone мобільний браузер Chrome, то насправді змінюється лише інтерфейс. Рушій же, що відповідає за показ вебсторінок, завжди той самий.

Mozilla Firefox

Проєкт браузера Firefox з’явився у 2002 році. До цього проєкт існував під кодовим ім’ям «Фенікс». Це не просто красиве слово, а радше нагадування про походження браузера. Firefox — ідеологічний нащадок того самого легендарного браузера Netscape Navigator, який поступився у першій браузерній війні Internet Explorer, вебпереглядачу від Microsoft.

На момент першого релізу Firefox у 2004 році Internet Explorer мав майже монопольне положення на ринку браузерів, тож протистояння нагадувало біблейську битву Давида з Голіафом. Адже Firefox був безплатним проєктом з відкритим вихідним кодом, а Internet Explorer створювала могутня корпорація, одна з найбагатших у світі.

Але попри таку нерівність, Firefox таки почав набувати популярність. Цьому сприяло, зокрема, швидше запровадження можливостей HTML, CSS та JavaScript, як наслідок — коректніше відображення вебсторінок. А ще цей браузер забезпечував надійність, кращу безпеку та швидкодію. До того ж Firefox регулярно оновлювався!

У 2009 році кількість користувачів цього браузеру сягнула 32.21%. Тоді кількість користувачів Firefox версії 3.5 стала більшою, ніж кількість користувачів Internet Explorer 7. Попри те, що загалом Internet Explorer все ще займав найбільшу долю на ринку браузерів, все одно, це була перемога.

Edge

Edge — нащадок Internet Explorer і, відтак, найстарший з п’ятірки лідерів. У нього за плечима довга історія, в якій були злети та падіння. Цей проєкт почався влітку 1994 року. Автором його був американський комп’ютерний інженер Томас Ріардон, сьогодні він є генеральним директором та співзасновником компанії CTRL-labs.

Певно, ключовим козирем в боротьбі за панівне положення на ринку цього браузера стала інтеграція його в операційну систему Windows 95. Microsoft навіть певною мірою ототожнювали весь інтернет із цим браузером, адже саме слово «інтернет» розміщувалось під іконкою Internet Explorer. Розуміючи важливість інтернету в розвитку персональних комп’ютерів, Microsoft не шкодувала ні сил, ні ресурсів, щоб зробити цей браузер головними воротами в інтернет.

І це дало результат. В середині 1990-х 80% користувачів використовували Netscape Navigator. В 1999 році Internet Explorer випередив конкурента і сам захопив 80% ринку. А якоїсь миті, у 2004 році, він дістався вже 90%. Але ці лідерські позиції погано вплинули на розвиток браузера. На дуже тривалий проміжок часу він зупинився на 6-й версії — вона залишалась актуальною з 2001 по 2006 рік. Її критикували з багатьох причин. Internet Explorer 6 не дотримувався стандартів W3C, мав проблеми з безпекою, працював дуже повільно і при цьому майже не оновлювався. А через велику популярність цей браузер мав шалений вплив на розвиток вебтехнологій. Хоч справедливіше буде сказати — він впливав на сповільнення цього розвитку.

Поява iPhone та розробка інших браузерів, зокрема Mozilla Firefox та Google Chrome, змусила Microsoft все ж повернутись до більш інтенсивного оновлення власного браузера та системної інтеграції нових функцій. У 2006 році з’явилась довгоочікувана сьома версія Internet Explorer, у 2008 — восьма, у 2011 — дев’ята, у 2012 — десята, а у 2013 — одинадцята. Але попри таку роботу над помилками й досить інтенсивний розвиток, Internet Explorer продовжував втрачати позиції. Вірогідно, це був прямий наслідок тривалого застою в розвитку проєкту і, на жаль, до імені браузера причепилась неприємна асоціація технічного відставання.

Тож у 2015 році браузер змінився. Його перейменувати на Microsoft Edge. Нова версія з’явилась одночасно із досить успішною операційною системою Windows 10. Насправді з технічної точки зору, Edge — це цілковито новий браузер, що спочатку працював на власному рушії EdgeHTML, а у 2019-му переїхав на Chromium. З пращуром його мало що пов’язує і справедливо буде сказати, що поточна версія браузера працює набагато краще, а спільний з Chrome рушій сприяє і швидкодії, і дотриманню стандартів W3C.

Opera

Opera — це майже одноліток Internet Explorer. Її розробка почалась ще у 1994 році, а перша версія побачила світ у 1995-му. І з того часу цей браузер щороку оновлювався та вдосконалювався.

Його авторами були Стівенсон фон Тетчнер та Гер Іварсой, колишні інженери норвезької телекомунікаційної компанії Telenor. В 1995 році вони заснували компанію Opera Software, і з того часу ніколи не припиняли роботу над браузером.

Саме їм ми маємо завдячувати численними інтерфейсними рішеннями браузерів. В браузері Opera вперше з’явились:

  • масштабування сторінок,
  • вкладки,
  • фрейми під час відкриття браузера,
  • голосове управління,
  • підтримка 360-градусних відео, які можна було передивлятись в шоломах віртуальної реальності.

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

Мобільні браузери

Вище в матеріалі ми описали комп’ютерні браузери. Існують також браузери для мобільних пристроїв, і їх чимало.

Найпопулярнішими серед них є (станом на жовтень, 2020):

  • Google Chrome для мобільних пристроїв (63,28%)
  • Safari (24,17%)
  • Samsung Internet Browser (6,55%)
  • UC Browser (2,37%)
  • Opera (1,55%)
  • Інші браузери (2,08%)

Браузер Samsung Internet Browser своєю популярністю завдячує високому рівню популярності смартфонів Samsung. В його основі вже, певно, знайомий вам браузер Chromium. Ну а популярність UC Browser здебільшого поширюється на азійський регіон.

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

На завершення

В першому десятилітті 2000-х і на початку 2010-х проблема кросбраузерності дійсно була гострою. Відображення сайтів могло суттєво відрізнятись в різних браузерах. А забезпечення прийнятного й уніфікованого відображення вимагало чималих зусиль.

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

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

Для маленьких проєктів, відвідуваність яких не перевищує 1000 користувачів на день, цілком достатньо провести ручну перевірку силами QA-фахівця. У випадку виявлення проблеми, він має зазначити, якою версією якого саме браузера він користувався і які кроки передували її виникненню.

Виправлення пов’язаних з кросбраузерністю проблем лягає на плечі фронтенд-розробників, тож в них на робочих комп’ютерах часто встановлені всі популярні браузери.

Але чим популярнішим є проєкт, тим вагомішою стає проблема кросбраузерності. Адже для новинних сайтів з кількістю відвідувачів 100 000 на день 0.01% — це якихось 10 людей, а для таких проєктів, як Facebook або Google — це мільйони відвідувачів.

·
4939
·
10
·
goodsuper 87
Головна