Кросбраузерна оптимізація сторінок сайту

Модуль «Веб-технології»

Урок 14

​

Повторюємо

1. Що таке медіа-запити? Чим обумовлена їх поява?
2. Яка сфера використання медіа-запиту braille?
3. Опишіть принципи адаптивного дизайну.
4. Які інструменти дозволяють розробляти адаптивні сайти?
5. Які модулі CSS використовуються для адаптивних сайтів. В чому різниця між ними?
6. Наведіть приклади атрибутів модуля СSS, який забезпечує адаптивність сайту

Поміркуємо

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

Порівняйте зі статистикою, наведеною на рисунку (джерело https://statcounter.com/).

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

Еволюція веб

Еволюція веба (http://www.evolutionoftheweb.com)

Так виглядали�майбутні� гіганти ІТ-індустрії

Трохи історії

• Веб-браузер Тіма Бернерса Лі WorldWideWeb дозволяв переглядати текстові сторінки, тоді як перегляд зображень здійснювався в окремих вікнах і був з чорно-білим інтерфейсом. Перший браузер, який отримав графічний інтерфейс був розроблений у 1993 році�і мав назву NCSA Mosaic �

Трохи історії

• Наступником Mosaic став браузер Netscape. Його розробники додавали в HTML нові теги, які робили зовнішній вигляд документа більш привабливим. Ці теги не були стандартизовані й працювали лише в Netscape. Та оскільки частка Netscape на той час становила понад 90 % від усіх наявних браузерів, це проблемою не було. �

Браузерні війни – І

• Поява конкурента — Internet Explorer від Microsoft — і практично відкрита війна між двома корпораціями за частку ринку, яка отримала назву «війна браузерів» призвела до серйозної проблеми, що полягала у відсутності єдиних стандартів відображення веб-сторінок. Дійшло до того, що на сайтах вбудовувалися кнопки «Best viewed in Netscape» і «Best viewed in Internet Explorer»�

Марк Андріссен – засновник Netscape

Браузерні війни - I

• Топ-менеджери Microsoft переманювали ключових співробітників Netscape та переходили до погроз, якщо це не вдавалося. Більш того, корпорація тиснула на великих клієнтів Netscape і провайдерів, погрожуючи, що перестане постачати їм ПЗ, - а для ІТ-бізнесу в кінці 1990-х це означало крах

Трохи історії

• Mozilla — це внутрішнє ім’я браузера Netscape Navigator, що означає Mosaic Killer (вбивця Mosaic). Назва здалася співробітникам фірми занадто зухвалою, пізніше так було�названо нащадка Navigator — Mozilla Foudation. Браузер же отримав назву Phoenix на честь птаха Фенікс, який згоряє, щоб відродитися з попелу. Згодом цю назву було змінено на Firebird (Жар-Птиця), а потім на Firefox (бо дві попередні назви вже �використовувалися іншими розробниками). �

Це цікаво

• компанія Mozilla Foudation позиціонувала себе на ринку як спадкоємниця Netscape. Фанати Netscape викупили для реклами першої версії Firefox розгортку в New York Times.

Трохи історії

​

• Mozilla була не єдиним браузером, яка кинула виклик Internet Explorer. На арену вийшла Opera - її перша версія, розроблена для корпоративного використання всередині норвезької телекомунікаційної компанії Telenor, з'явилася ще в далекому 1994 році. У 1996 році друга версія через тотальну війну між Netscape і Microsoft теж пройшла непоміченою, і лише третя версія почала завойовувати популярність
• У 2006 році на ринок браузерів зайшла ще і Apple зі своїм Safari, який базувався на двигуні Webkit
• У 2008 році світ побачив браузер від Google, розроблений на основі Chromium, який теж використовував двигун Webkit.
• Продукт, який перейняв кращі якості Firefox, Safari і Opera, захопив аудиторію.

Браузерні війни – ІІ

Друга війна браузерів знову не обійшлася без нечесних прийомів Microsoft з утримання лідерства. Так, у 2011 році при оновленні антивіруса Microsoft Security Essentials Google Chrome був доданий в базу вірусів, як шкідливе програмне забезпечення, що краде дані банківських рахунків.

Типовий мем про браузери☺

більш детально про війну браузерів можна дізнатись, переглянувши фільм �«Download: The True Story of the Internet»)

Поміркуйте

Перегляньте відео

Як змінювались симпатії користувачів?

​

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

• Правильна верстка сайта, за допомогою якої веб-сторінки сайта однаково відображаються в різних браузерах
• Нагадаємо що ще за часів Netscape, розробники додавали в HTML нові теги, які робили зовнішній вигляд документа більш привабливим. Ці теги не були стандартизовані й працювали лише в в певних браузерах.�

Вендорні префікси:

Кожен браузер має власні властивості, які змінюють поведінку елемента тільки в певному браузері та ігноруються іншими платформами. Вендорні префікси — приставки до стилів CSS, мають змістовне навантаження лише для тих браузерів, до яких належать. �

• -webkit — для Google Chrome, Safari і iOs�• -moz — для Mozilla�• -o — для Opera�• -ms — для Internet Explorer �

• Плагін Autoprefxer (https://autoprefxer.github.io) аналізує правила CSS, що існують на сайті, та додає необхідні вендорні префікси. �

• кожен браузер за замовчуванням має певний�набір базових стилів, які він застосовує до сторінки. У різних браузерах ці правила трохи відрізняються�
• Щоб зробити за замовчуванням відображення сторінки у всіх браузерах однаковим, використовують спеціальні CSS-файли: reset.css або normalize.css. �

• Американський веб-дизайнер Ерік Майєр запропонував CSS Reset у травні 2007 року. Майєр�написав цілу низку популярних у світі веб-розробки книжок, в тому числі «Cascading Style Sheets: The Defnitive Guide», «Eric Meyer on CSS» �

reset.css

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

Як наслідок відбувається скидання стилів за замовчуванням у всіх браузерах.

Спочатку на сторінці користувачу слід підключити файл reset.css, а потім власний файл зі стилями style.css.

Скидати всі стилі не завжди доречно, саме тому існує ще один інструмент — normalize. На відміну від reset.css - normalize.css запропонований ще одним американським веб-дизайнером – Ніколасом Галахером, нормалізує стилі (тобто приводить до єдиного вигляду у всіх браузерах). Після його застосування базові стилі відображення заголовків, розмір шрифтів, відступи тощо, уніфікуються і відображаються у всіх браузерах однаково.�

Завантажити файл можна із сайта https://necolas.github.io/normalize.css �

Normalize.css

продукт глибокого дослідження відмінностей між стилями за замовчуванням браузера, його мета:

• зберігати корисні налаштування;
• нормалізувати стилі для більшості HTML-елементів;
• Коригувати помилки й основні невідповідності браузера;
• удосконалювати юзабіліті непомітними поліпшеннями;
• пояснювати код, використовуючи коментарі та детальну документацію.

​

Це сучасна альтернатива CSS resets.

Наразі normalize.css використовується в Twitter Bootstrap, HTML5�Boilerplate, GOV.UK, Rdio, CSS Tricks і в багатьох інших фреймворках, інструментах і сайтах �

�Аналізуємо. Обговорюємо

1. Що таке кросбраузерність?
2. Які браузери ви знаєте?
3. Що таке CSS-хаки, який їх недолік?
4. Що таке вендорні префікси?
5. Чому вендорний префікс для Google Chrome, Safari і iOs�однаковий?
6. Чому необхідно спочатку підключати reset.css, і тільки потім власний style.css?
7. Яким чином досягається кросбраузерність�сайта?�

Завдання для самостійного виконання

1. Завантажте коди reset.css та normalize.css
2. Порівняйте їх.
3. Зробіть висновки про їх відмінності

​

Нагадаємо, що завантажити файл normalize.css можна з сайта https://necolas.github.io/normalize.css, а reset.css -https://meyerweb.com/eric/tools/css/reset/

​

Домашнє завдання

• На наступному слайді наведено обкладинку спеціального випуску журналу «Business Week» (1997 року).
• Знайдіть відомості про будь-яку компанію, представників якої ви бачите на обкладинці, зробіть невелике повідомлення про історію розвитку цієї компанії.
• Зробіть невелике ессе на тему «Що об’єднує всі ці компанії»

​

• Larry Ellison, Oracle;
• Marc Andreessen, Netscape;
• Andy Grove, Intel;
• Al Shugart, Seagate Technology;
• Gordon Moore, Intel;
• John Chambers, Cisco Systems;
• Steve Jobs, Apple Computer, Pixar;
• Scott McNealy, Sun Microsystems;
• John Doerr ,Kleiner Perkins, Caufield & Byers;
• Larry Sonsini, Wilson Sonsini Goodrich & Rosati;
• Lew Platt, Hewlett-Packard;
• Jim Clark, Netscape