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

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

Конспект: Кросбраузерність вебсайту

1. Поняття кросбраузерності

Кросбраузерність — це властивість вебсайту відображатися та працювати однаково коректно в усіх популярних браузерах (Google Chrome, Safari, Mozilla Firefox, Microsoft Edge, Opera).

Чому це важливо? Різні браузери мають різні «двигунці» (програми для зчитування коду). Якщо сайт не кросбраузерний, він може «попливти»: кнопки зникнуть, текст накладеться один на одного, а меню перестане відкриватися.

2. Чому виникають проблеми з відображенням?

1. Різні двигунці обробки: Наприклад, Chrome базується на двигунці Blink, а Safari — на WebKit. Вони можуть по-різному розуміти деякі властивості CSS.

2. Застарілі версії: Деякі користувачі не оновлюють браузери, які не підтримують сучасні дизайнерські «фішки».

3. Префікси: Раніше для кожного браузера потрібно було писати спеціальні приставки до коду (наприклад, -webkit- для Safari).

3. Як перевірити сайт на кросбраузерність?

Розробники не встановлюють десятки браузерів на комп'ютер. Вони використовують спеціальні сервіси (емулятори):

• Browsershots

• BrowserStack

• CrossBrowserTesting

4. Кросбраузерність vs Адаптивність (Важливо не плутати!)

• Адаптивність — це підлаштування під розмір екрана (смартфон, планшет, ПК).

• Кросбраузерність — це підлаштування під програму-переглядач (браузер).

5. Поради для створення кросбраузерного сайту:

1. Використовуйте стандартні шрифти: Або підключайте Google Fonts, які працюють всюди.

2. Скидання стилів (Reset CSS): Спеціальний код, який обнуляє налаштування браузерів за замовчуванням, щоб вони «стартували» з однакових позицій.

3. Валідація коду: Перевірка коду на помилки за допомогою сервісів (наприклад, W3C Validator). Якщо в коді є помилка, один браузер її "пробачить", а інший — ні.

Завдання: Лабораторія кросбраузерності

1. Відкрийте сервіс для перевірки: Screenfly.

2. У верхньому рядку введіть адресу сайту: uk.wikipedia.org.

3. По черзі натискайте на іконки пристроїв (комп'ютер, планшет, смартфон).

4. Зверніть увагу: * Як змінюється меню? (На смартфоні воно стає "бургер-меню" — три риски ☰).

   • Чи зручно читати дрібний текст на маленькому екрані?

   • Чи легко натиснути на посилання пальцем (на екрані смартфона)?

Чому сайт може виглядати по-різному в різних браузерах?

У чому різниця між кросбраузерністю та адаптивним дизайном?

Що таке vendor-prefixes і навіщо вони потрібні?

Виконати тестування та вписати отриманий бал

https://naurok.com.ua/test/join?gamecode=9940714