Досвіду в налагодженні CSS у мене хоч відбавляй. Чужий код і мій власний. Мобільні Плотформа і десктопні браузери. Все від старих версій Internet Explorer до останніх нічних збірок WebKit. Працюючи з людьми, я зрозумів, що далеко не у всіх налагоджений процес налагодження CSS.
Я зрозумів, що з системним підходом до вирішення проблеми боротьба з багами займає менше часу.
А ось і мій власний підхід.
Я не стверджую, що це єдиний спосіб налагодження CSS. Але він вкрай ефективний для мене. Якщо CSS для вас не основна мова, то його налагодження може здатися чимось таємничим; з наступним керівництвом можна набагато ефективніше боротися і позбавлятися від багів.
В цілому, я поділяю процес налагодження на три етапи:
- Оцінка і швидкі рішення
- Локалізація та відтворення
- Причини і виправлення
Давайте розглянемо кожен етап, а після швиденько розберемо одну CSS-проблему для прикладу.
Оцінка і швидкі рішення
Безліч багів легко виправити, якщо ви глибоко знаєте і розумієте CSS (наприклад, тому, що працюєте з ним постійно). В іншому випадку, швидких рішень у вашому арсеналі буде менше.
Ось деякі з поширених підводних каменів, які напевно відомі будь-якому досвідченому CSS-розробнику:
- дивний пробіл навколо зображення? Задайте йому display: block (зображення за замовчуванням рядкове, тому враховуються прогалини).
- елемент неправильно поводиться в потоці? Ймовірно, десь встановлено обтікання (float).
- абсолютно позиційований елемент не з'являється або знаходиться в неправильному місці або за іншим елементом? Швидше за все, ви забули встановити position батьківського елементу, або випадково створили контекст накладення z-index за допомогою transform або opacity.
- псевдоелемент не відображається? Швидше за все потрібно додати будь-яке значення властивості content.
Таких «багів» сила-силенна. Але це не справжні баги, просто розробники не до кінця розуміють, що робить браузер. Точніше: що ваш CSS-код наказує браузеру робити.
Більш досвідчені розробники вже знають, яких проблем можна чекати від цих особливостей CSS, і тому для них це «баги», з якими можна швидко впоратися. Вони моментально розпізнають баг, на відміну від розробників з куди меншим об'ємом CSS-знань. Важливо розуміти, що одним розробникам швидше знадобиться переключитися на налагодження по «методикою», ніж іншим.
А ось складні проблеми навряд чи варто вирішувати шляхом додавання різних властивостей і значень навмання в надії на результат. Якщо навіть пощастить і проблема вирішиться, то далеко не факт, що вам вдасться визначити, що це була за проблема і чому вона зважилася.
Замість цього, в складних ситуаціях варто визначити проблемну область і буквально скопіювати розмітку з DOM, а потім переходити до наступного етапу налагодження: локалізація і відтворення.
Локалізація та відтворення
На цьому етапі налагодження CSS дуже допомагають сервіси типу Codepen. По суті нам потрібно локалізувати проблему - отримати конкретний код, який бере участь в баг. Це дозволить швидко ізолювати баг і зосередитися на першопричину.
Для чистоти експерименту, в цей мінімальний приклад повинен потрапити тільки той HTML і CSS, який важливий для відтворення проблеми. Можете набрати стилі для розмітки заново або скопіювати мінімальну частину реального CSS, що відноситься до справи. По можливості, постарайтеся не вивалювати в тестовий приклад весь CSS; для відтворення потрібно тільки найнеобхідніше. Найчастіше поступового додавання CSS цілком вистачає, щоб виявити проблемну зону.
Коли ви майже миттєво бачите результат кожної дії, часто вдається помітити, при додаванні якого властивості або значення баг дає про себе знати.
Зворотним підходом буде, викинувши весь CSS в тестовий приклад, видаляти розділи шматок за шматком і сподіватися, що баг сам себе проявить. На практиці я знаходжу це трохи незграбним, але в вашому конкретному випадку може бути інакше.
Тепер, після поступового додавання / видалення CSS, у нас повинен вийти короткий тестовий приклад, який відтворює проблему і допомагає вивчити злощасна ділянка / код.
Припустимо, ми зробили тестовий приклад з мінімальним CSS, але він веде себе так само, як вихідний проблемний код. Це також корисно. Тепер прийшов час розмітки.
Як тільки валідність розмітки перевірена, корисно «позбутися» від зайвих браузерних стилів. Ось так:
Перш за все, замініть всі елементи в розмітці на div-и (для блокових елементів) і span-и (для малих), а після перевірте, що елементи вибираються в CSS тільки по класу. Можливо, ще буде потрібно поміняти все перевантажені селектори типу a.link на просто .link.
Завдяки нейтральній розмітці ми видаляємо будь-які браузерні стилі / поведінку за замовчуванням для певних хитромудрих HTML-елементів, що представляють проблему. Особливо це стосується елементів форми (як ми побачимо в нашому прикладі).
Причини і виправлення
Припустимо, спрощення розмітки нічого не змінило. Проте проблема локалізована і стабільно відтворена Тепер варто перевірити локалізований ділянку в інших браузерах. Та ж проблема спливає в Chrome, Internet Explorer, Safari і Firefox? Якщо немає, хто з них розуміє правильно? Якщо помилка спливає тільки в одному браузері, то варто пошукати серед відомих багів для цього браузера.
Це відома проблема з браузером Х або конкретної версії браузера Х? Баг скоро виправлять? Чи відомі обхідні шляхи, які не впливають на інші браузери? В крайньому випадку, можете додати в код гілку з виправленням бага для потрібного браузера?
Грег Вітворг з Microsoft також поділився деякими деталями округлення субпикселей в браузерах. WebKit / Blink округлює до 1/64, Gecko - до 1/60 і Edge - до 1/100 (з подачі 'smfr. Розробника WebKit)
Налагодження мобільних платформ
Для мобільних пристроїв, якщо у вас фізично є потрібний пристрій, а не тільки повідомлення про баг від користувача, і цей пристрій підтримує таку функцію, ніщо не зрівняється з «віддаленої» налагодженням по кабелю. В цьому плані чудовий Safari з підключеним iPhone (тільки для Mac), втім, як і Chrome на Android в парі з десктопних Chrome (Windows і Mac). Для iOS, якщо у вас немає під рукою конкретного пристрою, досить непоганий і відладчик Safari в парі з симулятором iOS, але ви будете обмежені тими версіями iOS, які підтримує ваша версія Xcode. У теорії, можна завести декілька версій Xcode одночасно, наприклад, одну, яка підтримує iOS6 і iOS7, і іншу з підтримкою iOS8 і 9, але у мене це ніколи не толком не спрацьовувало.
А як бути, якщо потрібно розібратися з більш старим мобільним пристроєм? Дистанційна налагодження тут часто не варіант. Для таких випадків корисно виробити «чуття», які інструменти розробника можуть допомогти у вирішенні проблем відображення якої платформи.
Наприклад, якщо ви розглядаєте проблему в старій версії Safari на iOS (напр. IOS5-6) або у вбудованому браузері з Android <4.2, полезно знать, что у них общая основа WebKit. На свежих версиях OS X, как отмечено выше, довольно трудно добиться, чтобы симулятор iOS точно воспроизвел эти устройства (симуляторы iOS склонны поддерживать лишь пару последних версий). Более плодотворным подходом может оказаться вовсе даже взять и скачать последнюю версию Safari для Windows (5.x, если память меня не подводит).
Відображення на цій старій версії Safari для Windows насправді дуже схоже на ті мобільні платформи, так що відладчик в ньому напевно покаже більше, ніж в новітніх Chrome / Firefox або наявному IE. Ще один варіант - якщо операційна система це підтримує, скачати і встановити давню нічну збірку WebKit.
Аналогічно, якщо у вас Mac, а проблеми виникають на Windows Mobile (8 / 8.1), візьміть і скачайте віртуальну машину з IE10. Потім скористайтеся тамтешнім отладчиком, оскільки у відображенні на IE10 і мобільних IE8 і 8.1 дуже багато спільного.
У деяких браузерах, особливо старих мобільних, якщо щось здається багом - воно цілком може їм і опинитися, так що знайти обхідні рішення буде набагато простіше, якщо дослідити проблему там, де її можна «поколупати» в отладчике.
обчислені стилі
Розробники часто недооцінюють таку функцію відладчика, як панель обчислених стилів. Якщо обчислені стилі для вас новинка, то їх назва саме себе пояснює - це стилі, які застосовуються до елементу після обчислення в браузері. Це важливо, тому що фактично діючі стилі можуть відрізнятися від тих. що написали ви. Більш того, серед діючих стилів можуть бути ті, яких ви зовсім не писали. Зараз я поясню це на прикладі. Візьмемо таку розмітку.
Яка ширина у outer по вашому? Якщо вважаєте, що 400px, як зазначено в max-width. то я б вас зрозумів. Але це не так. Погляньте на це :?
Що відбувається? Чому max-width не враховується? Дам підказку. Відкрийте відладчик і погляньте на панель «Попередньо обчислені стилі» ( «Computed Styles»).
Врятую вас від невизначеності; по умовчання у fieldset є обчислена ширина, яка підлаштовується під його вміст. У Chrome це відображається в «Computed Styles» в якості нового значення довжини min-content в min-width.
Щоб це виправити, можна додати нове значення в властивість min-width. З min-width: 0 наше властивість max-width запрацює, як треба.
Ось наскільки корисною може виявитися панель «Computed Styles» в отладчике. Пам'ятайте, що все те, що ви написали, не обов'язково має обчислюватися в браузері.
висновок
Причини для візуальних аномалій в інтернеті численні і різноманітні. Реалізації специфікацій відрізняються, так що у кожного браузера вистачає своїх примх. Крім накопичення уявного каталогу «підводних каменів», методичність - найефективніший підхід до вирішення проблеми. Загалом, цей підхід виявився для мене вкрай ефективним:
P.S. Це теж може бути цікаво:
Не минуло й півроку з останньої зміни робочого процесу W3C, як керівництву Консорціуму надійшла пропозиція застосувати нарешті цей новий процес на ділі. І списати вже неактуальні специфікації HTML в музей, щоб вони не заплутували розробників, «прикидаючись» актуальними.
Ще один модуль CSS, про який ми розповідали, непомітно дозрів до статусу, з якого W3C радить починати повсякденне використання новинок. Властивість contain дозволяє обмежувати зміни дерева відтворення, перерисовку CSS-боксів і зміни їх розмірів в межах елемента. Тому воно так важливо ...
ДАЛІ
З Парижа (на фото), де недавно проходила зустріч робочої групи CSS, прилетіла цікава новина: властивості grid-row-gap і grid-column-gap, а також їх скорочення grid-gap ...