5 способів підготувати ваш сайт до зустрічі з браузером Microsoft Edge та іншими сучасними браузерами

16

Від автора: Edge – новий браузер від Microsoft, що використовує новий движок для рендеринга сторінок EdgeHTML і загружающийся разом з системою Windows 10. Через безкоштовного переходу з Windows 7, 8 і 8.1 навіть для тих, хто використовує піратську копію операційної системи, в найближчі місяці можна очікувати напливу користувачів на сайти через цей браузер.

Edge – абсолютно новий браузер, не оновлення або доробка старого IE, і я впевнений, багато хто і в першу чергу веб-розробники сприймуть цю новину позитивно. І враховуючи все вищесказане, я хочу поділитися з вами п’ятьма способами підготувати ваш сайт до роботи з сучасними браузерами. І паралельно цьому ви можете протестувати свій сайт на сумісність з Microsoft Edge.

1. Оновіть бібліотеки JavaScript

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

За результатами наших внутрішніх досліджень 57% сайтів з топ 20, 000 використовують застарілі бібліотеки з багами, які були усунуті в останніх версіях фреймворків. Для виявлення застарілих JS-фреймворків на вашому сайті можете скористатися інструментом site scanner.

2. Уникайте вендорних префіксів CSS

Префікси в CSS застосовуються творцями браузерів для того, щоб нові, ще не пройшли документацію W3C властивості, працювали в браузерах. Вендорные префікси виглядають, як на прикладі нижче (IE префікс для властивості «hyphens»): -ms-hyphens: auto;

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

Розробники браузерів стали менше використовувати вендорные префікси. Це пов’язано з проблемою обслуговування даних префіксів. Деякі браузери Microsoft Edge в їх числі, взагалі майже не використовує їх.

Уникайте префіксів скрізь, де це можливо. Але, якщо вам все ж вони необхідні, скористайтесь Grunt PostCSS для автоматизації управління вендорными префіксами.

3. Уникайте методів визначення браузера

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

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

Детальніше прочитати про те, як користуватися бібліотекою Modernizr, полифиллами та іншими техніками сумісності, можна в статті Martin Kearn Настройка, модернізація та оптимізація вашого веб-сайту.

4. Звільнитеся від плагінів

Так як Edge не підтримує плагіни, настав час вирішити, як позбавитися від ліцензованих плагінів, таких як Flash і Silverlight. Edge, звичайно, підтримує Flash плагін, але на відміну від старої архітектури плагінів, Flash поставляється в комплекті з браузером. Оновлення і патчі випускаються командою самого Edge спільно з Adobe.

Деякі сайти можуть легко відмовитися від плагінів, в той час як для основної частки веб-сайтів ця задача досить складна, особливо для сайтів, що постачають медіа контент. Edge Blog команда розробників браузера представило керівництво, як перейти від HTML до преміум-контенту.

5. Перевірте правильність рендеринга в Edge

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