Отладка CSS в боевых условиях

Никита Дубко, Яндекс

Отладка CSS в боевых условиях

Никита Дубко, разработчик интерфейсов

Никита Дубко


MinskCSS MinskJS CSS-Minsk-JS
Никита Дубко

Приходит к вам тестировщик...

«У нас критический баг ...

... в очень важной функции.

Релиз сегодня».

Гарольд

Алгоритм решения проблемы

Дизлайк

Хороший алгоритм решения проблемы

  1. воспроизвести проблему;
Лайк

Спасибо за внимание!

Никита Дубко

разработчик интерфейсов


Нельзя просто взять и отладить CSS

Фигура первая.
Рабочая

Десктоп, популярный браузер

У ссылок пропали выделения по фокусу.

Ваш тестировщик

outlinenone

www.outlinenone.com

Вы стараетесь делать хорошо, у вас...

Алгоритм решения проблемы

  1. воспроизвести проблему;
  2. локализовать ошибку;
  3. исправить ошибку;
  4. протестировать;
  5. избежать повторения в будущем;
  6. отдать тестировщику.

Инструменты разработчика

Dev Tools

Включение состояний

Dev Tools Hover Panel

Алгоритм решения проблемы

  1. воспроизвести проблему;
  2. локализовать ошибку;
  3. исправить ошибку;
  4. протестировать;
  5. избежать повторения в будущем;
  6. отдать тестировщику.

style.scss

%outline {
    outline: 0;
    box-shadow: 0 0 1px 2px $color_outline;
    background-color: $color_link;
    color: $color_background;
}

.link:focus {
    @extend %outline;
}

Увеличиваем специфичность

Было:

Стало:

http://specificity.keegan.st

Калькулятор специфичности

Специфичность не помогла :(

Как хорошо вы знаете CSS? 👨🏼‍🏫

Даны следующие классы:

.red { color: red; }
.blue { color: blue; }

Какого цвета должны быть эти дивы?

<div class="red blue">
<div class="blue red">

twitter.com/mxstbr/status/1038073603311448064

Twitter War
Facepalm

css-live.ru/css/nikto-ne-znaet-css-specifichnost-ne-kaskad.html

CSS-live.ru

Приоритетность стилей (по убыванию)

Браузерные стили

Браузерные стили

style.scss

%outline {
    outline: 0;
    box-shadow: 0 0 1px 2px $color_outline !important;
    background-color: $color_link !important;
    color: $color_background;
}

.link:focus {
    @extend %outline;
}

!important не помог :(

Вычисленные стили
box-shadow
outline

Source maps

github.com/ryanseddon/source-map/wiki/Source-maps:-languages,-tools-and-other-info

SASS

style.css.map

{"version":3,"file":"style.css","sources":["style.scss","imports/reset.css"],"sourcesContent":["@import './imports/reset';\n\n$color_outline: hsl(210, 89%, 40%);\n$color_link: hsl(210, 89%, 40%);\n$color_background: white;\n\n%outline {\n outline: 0;\n box-shadow: 0 0 1px 2px $color_outline;\n background-color: $color_link;\n color: $color_background;\n}\n\n.link:focus {\n @extend %outline;\n}","/* http://meyerweb.com/eric/tools/css/reset/ */\n/* v1.0 | 20080212 */\n\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, font, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\toutline: 0;\n\tfont-size: 100%;\n\tvertical-align: ...

Пример включения для gulp

const
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps');

gulp.task('build:scss', function () {
    return gulp
        .src('path/to/scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('path/to/css'));
});
Map

reset.css:37

meyerweb.com/eric/tools/css/reset/reset200802.css

/* remember to define focus styles! */
:focus {
    outline: 0;
}

Дебаг препроцессорного кода

sitepoint.com/using-sass-error-warn-and-debug-directives/

В SASS есть отладочные директивы:

style.scss

%outline {
    outline: 0;
    box-shadow: 0 0 1px 2px $color_outline;
    background-color: $color_link;
    color: $color_background;
}

.link:focus {
    @extend %outline;
    @debug $color_outline;
}

style.scss:10: DEBUG: hsl(210, 89%, 40%)

style.scss

%outline {
    outline: 0;
    box-shadow: 0 0 1px 2px $color_outline;
    background-color: $color_link;
    color: $color_background;
    @debug $color_outline;
}

.link:focus {
    @extend %outline;
}

style.scss:6: DEBUG: hsl(210, 89%, 40%)

style.css

.link:focus,
.button_type_ghost:focus,
.title:focus,
.popup__button:not(.popup .popup__button_disabled):focus,
.menu__item:focus,
/* ... */
.more__button:focus {
    outline: 0;
    box-shadow: 0 0 1px 2px #0b66c1;
    background-color: #0b66c1;
    color: #fff;
}

style.css

.link:focus,
.button_type_ghost:focus,
.title:focus,
.popup__button:not(.popup .popup__button_disabled):focus,
.menu__item:focus,
/* ... */
.more__button:focus {
    outline: 0;
    box-shadow: 0 0 1px 2px #0b66c1;
    background-color: #0b66c1;
    color: #fff;
}

:not

w3.org/TR/selectors-3/#negation

Простой селектор

w3.org/TR/selectors-3/#simple-selectors

:not(.popup .popup__button_disabled)

Алгоритм решения проблемы

  1. воспроизвести проблему;
  2. локализовать ошибку;
  3. исправить ошибку;
  4. протестировать;
  5. избежать повторения в будущем;
  6. отдать тестировщику.

Правильный селектор

Было:

.popup__button:not(.popup .popup__button_disabled):focus {
    @extend %outline;
}

Стало:

.popup__button:not(.popup__button_disabled):focus {
    @extend %outline;
}

Алгоритм решения проблемы

  1. воспроизвести проблему;
  2. локализовать ошибку;
  3. исправить ошибку;
  4. протестировать;
  5. избежать повторения в будущем;
  6. отдать тестировщику.

После исправления

Алгоритм решения проблемы

  1. воспроизвести проблему;
  2. локализовать ошибку;
  3. исправить ошибку;
  4. протестировать;
  5. избежать повторения в будущем;
  6. отдать тестировщику.

Принятые решения

Советы

Фигура вторая.
Печальная

Смартфон, популярная ОС

На iOS в любом браузере при скролле блок становится невидимым.

Ваш тестировщик

Алгоритм решения проблемы

  1. воспроизвести проблему;
  2. локализовать ошибку;
  3. исправить ошибку;
  4. протестировать;
  5. избежать повторения в будущем;
  6. отдать тестировщику.
iPhone
Чегооо?

Алгоритм решения проблемы

  1. воспроизвести проблему;
  2. локализовать ошибку;
  3. исправить ошибку;
  4. протестировать;
  5. избежать повторения в будущем;
  6. отдать тестировщику.

Отладка мобильного устройства

Эмуляторы

Подключаем Android для дебага

developers.google.com/web/tools/chrome-devtools/remote-debugging/

Android debug

Подключаем iOS для дебага

iPhone Safari
macOS Safari

Правильная вёрстка и стили

validator.w3.org

w3c валидатор

csstree.github.io/docs/

csstree валидатор

animation: ease ease-in-out 2s 2s;

csstree.github.io/docs/syntax.html

CSS Tree inspector
iPhone
Чегооо?
Распечатай Яндекс.Карты

youtube.com/watch?v=7-qUm-N_fyA

В стабильных браузерах есть баги

bugs.webkit.org/buglist.cgi?product=WebKit&resolution=---

WebKit Bug List

-webkit-overflow-scrolling: touch

developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

Attention

Шаг 3. Исправить

Вынести на новый графический слой

iPhone

Containing block

developer.mozilla.org/en-US/docs/Web/CSS/Containing_block

И что нам делать?

Грусть

Очень странное решение

.gallery__item {
    animation-name: scroller-overflow-hack;
    animation-fill-mode: forwards;
    animation-duration: 1ms;
}

@keyframes scroller-overflow-hack {
    0% { opacity: .9999; }
    100% { opacity: 1; }
}
iPhone

Шаг 5. Избежать повторения в будущем

Тестирование скриншотами

Советы

Фигура третья.
Разлучная

UC Browser, Nokia 6300

В UC Browser на Nokia 6300 не работает шапка сайта.

Ваш тестировщик

Nokia 6300 ???

Nokia 6300

Целевой рынок

Китай

Самые продаваемые смартфоны, Китай (2017)

mobile.zol.com.cn/657/6570496.html

  1. Honor8 32GB
  2. iPhone7 Plus 32GB
  3. Vivo X9 64GB
  4. Huawei Mate9 32 GB
  5. Oppo RII 64GB
  1. Samsung Galaxy S8 64GB
  2. Honor V9 64GB
  3. Oppo R9S Plus 64 GB
  4. Gionee M2017 128 GB
  5. Moto Z 65 GB

caniuse.com

Настройки
Доля UC Browser
Распределение браузеров

Шаг 1. Воспроизвести

Сайт UC-браузера

Но как жить без инструментов разработчика?

FireBug

FireBug

en.wikipedia.org/wiki/Firebug_(software)

всего 12 лет назад

FireBug Lite

getfirebug.com/releases/lite/1.2/

iPhone
Firebug lite ios

Шаг 2. Локализовать

  1. собрать демо;
Странности

Отладка слоёв #1

medium.freecodecamp.org/heres-my-favorite-weird-trick-to-debug-css-88529aa5a6a3

*:not(path):not(g) {
    color: hsla(210, 100%, 100%, 0.9) !important;
    background: hsla(210, 100%,  50%, 0.5) !important;
    outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
    box-shadow: none !important;
}
Debug 1

Отладка слоёв #2

habr.com/post/65009/

* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }
Debug 2

debug.css

github.com/nternetinspired/debug-css

:empty { outline:5px solid yellow; }

img { outline:5px solid red; }
img[alt] { outline:none; }
img[alt=""] { outline:5px solid yellow; }

ul > *:not(li),
ol > *:not(li) { outline: 5px solid red; }

/* ... */
Debug 3

Как понять, что класс есть на странице?

Помните про псевдоэлементы

.link {
    position: relative;
}
.link:before {
    content: '.link';
    color: red;
}
.link:after {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    border: 1px solid red;
}

Используйте div и span для отладки

Не так давно...

github.com/afarkas/html5shiv

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Шаг 3. Исправить

... может быть критически дорого.

github.com/google/material-design-lite

Material Lite

github.com/google/material-design-lite

Material Lite

github.com/google/material-design-lite/issues/4524

Material Lite

Шаг 5. Избежать повторения

Послесловие

Для размышления

Спасибо за внимание!

Никита Дубко

разработчик интерфейсов