CSS від А до Я: як домогтися кросбраузерності

32

Від автора: вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких порад щодо того, як домогтися кросбраузерності.

Повний відеоурок і його текстову версію за правилом @supports тут.

S значить підтримка у всіх браузерах

Відстежувати підтримку властивостей у браузері потрібно постійно. В мережі є чудові сайти типу caniuse.com, які допомагають стежити за рівнем підтримки властивостей, а також чудові засоби автоматизації, як Autoprefixer. З Autoprefixer вам більше не потрібно буде вручну писати вендорные префікси.

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

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

Не турбуйтеся про анімації і плавних переходах

Здебільшого анімація і плавні переходи повинні бути у вигляді тонких ефектів, які виділяють контент, спрямовують увагу користувача або додають трохи унікальності і характеру сторінці. Якщо анімація або плавні переходи не підтримуються в якомусь браузері, елементи просто залишаться статичними або будуть різко перестрибувати з одного стану в інше за подіями hover і focus.

Якщо початковий стан анімації не пересуває елемент за межі екрану або не робить його невидимим (наприклад, opacity: 0), то нас не хвилює той факт, що елемент перестане рухатися в старих браузерах.

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

Не турбуйтеся про легенів трансформаціях

У тому ж дусі можна сказати і про незначних трансформаціях типу поворотів або спотворень на всіляких пристроях – не думайте про них.

.wonky-image {
transform: rotate(2deg);
}

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

Не турбуйтеся про напівпрозорих кольорах

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

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

У випадку з анімацією або трансформацією у нас немає іншого виходу. Хоча можна використовувати GIF анімацію в залежності від обставин. Але в деяких випадках відсутність підтримки призводить до того, що перед користувачем відкривається порожня сторінка. Якщо ви підтримуєте IE8, то ваш випадок якраз підходить під напівпрозорі кольору.

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

Якщо ви хочете зробити фон background елемента напівпрозорим червоним, ви можете спочатку поставити звичайний колір, а нижче переписати його напівпрозорим.

.box {
background: red;
background: rgba(255,0,0,0.5);
}

Старі браузери побачать перше оголошення і розпізнають червоний колір. Слідом вони побачать друге оголошення (яке має переписати перше), але вони не зрозуміють його значення. Браузери порахують друге оголошення background неправильним і залишать колір червоним.

Техніка підходить для прозорих кольорів, градієнтів, округлених кутів, rem одиниць і багато іншого. Досить проста концепція.

Так про що ж потрібно турбуватися?

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

макеті;

розбірливості;

продуктивності.

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

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

Продуктивність також має вирішальне значення. Це величезна тема, яку я не буду намагатися вмістити в один параграф. Однак стосовно нашої теми підтримки в браузерах можу сказати, що не потрібно використовувати полифилы або додавати купу анімації і ефектів за допомогою JS на шкоду продуктивності. Багато старі браузери, які ви намагаєтеся напихати додатковим кодом, і так ледве дихають і повільно парсят скрипти. Додавання коду може призвести до критичних помилок.

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