Перейти до вмісту

Домоглася, щоб режим зменшеного руху працював

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

  • Traffic lights, building, city
    Фото: Javaistan / Pixabay
  • Pendulum, map, navigation
    Фото: poupoune05 / Pixabay

одинадцять селекторів усе ще рухалися в режимі зменшеного руху

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

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

Дія. Причина — у специфічності. Універсальне правило має найнижчу специфічність у каскаді й програє будь‑якому правилу з класом, тож загальне вимкнення переходів поступається кожній продуманій анімації на сторінці, а саме такі анімації й варто вимикати. Виправлення було структурним, а не латкою: усе, що рухається, тепер зібрано в одній частині таблиці стилів, яка підключається наприкінці, а лінтер відхиляє перехід властивості transform будь‑де поза нею. Межу правило проводить свідомо, і вона вужча за очевидну: зменшувати треба рух, а не колір. Плавна зміна кольору — не рух, і якщо її вимкнути, інтерфейс здаватиметься зламаним людям, які про це не просили, тож перехід колірних властивостей перевірку проходить, а перехід руху — ні. Крім того, рух обов’язково задають переходом, а не анімацією з ключовими кадрами, бо перехід скасувати елементарно, а анімацію — ні. Під час тієї самої роботи виявилися ще дві пов’язані пастки, і їх записано з вимірюваннями: оздоба меню встигала пройти тридцять один градус із шістдесятиградусного повороту, перш ніж ставала наполовину видимою, а оскільки форма періодична, пів оберту має такий самий вигляд за третину вартості; а п’ять різних властивостей — кожна окремо — роблять елемент блоком‑контейнером (containing block) для всього, що позиціюється відносно вікна перегляду, і через це шар для закриття (dismiss layer) непомітно зменшився до частки екрана.

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

Одна частина довшого переліку — і він увесь на цьому сайті.

Кожен запис написано однаково: ситуація, завдання, що ми зробили і що змінилося.

Переглянути весь перелік