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

Никита Дубко

• доброжелюбный бородач;
• адепт философии Pure CSS Images;
• состою в MinskCSS и MinskJS.

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

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

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

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

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

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

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

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

www.outlinenone.com

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

• на все взаимодействия есть визуальные зацепки;
• выделение по умолчанию сброшено;
• но взамен установлено красивое, дизайнерское.

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

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

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

• Ctrl + Shift + I
• ⌘ + ⌥ + I
• F12

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

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

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;
}

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

Было:

• .link

Стало:

• .link.link
• .link[class]
• .link:not(.foo)
• .link:not(#foo)

http://specificity.keegan.st

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

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

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

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

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

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

https://twitter.com/mxstbr/status/1038073603311448064

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

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

1. Стили во время CSS-переходов (transition)
2. Браузерные стили с !important
3. Пользовательские стили с !important
4. Авторские стили с !important
5. Стили во время анимаций
6. Обычные (т.е. без !important) авторские стили
7. Обычные пользовательские стили
8. Обычные браузерные стили

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

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 не помог :(

Source maps

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

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'));
});

reset.css:37

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

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

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

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

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

• @error
• @warn
• @debug

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

https://www.w3.org/TR/selectors-3/#negation

• сам по себе не увеличивает специфичность селектора;
• может содержать вложенный :not;
• принимает внутрь себя простой селектор.

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

https://www.w3.org/TR/selectors-3/#simple-selectors

• селектор типа: h1;
• универсальный селектор: *;
• селектор атрибута: [href];
• селектор класса: .link;
• ID-селектор: #header;
• псевдокласс: :visited;
• пустой селектор: .

: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. отдать тестировщику.

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

• отказаться от @extend в пользу @mixin;
• сделать класс вроде .custom-focus;
• отказаться от устаревшего reset.css.

Советы

• Проверяйте сборку.
• Знайте свои инструменты.
• Настройте линтеры.
  • Как внедрить стандарты разработки, чтобы никто не пострадал — Александра Шинкевич
  • Кодстайл и насилие — Антон Немцев

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

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

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

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

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

• в эмуляторе;
• на реальном устройстве.

Эмуляторы

• VirtualBox
• Vagrant
• Parallels
• Xcode
• Android Studio
• ...

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

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

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

• Safari
• ios-webkit-debug-proxy

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

• Валидатор W3C
• CSSTree

https://validator.w3.org/

https://csstree.github.io/docs/

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

https://csstree.github.io/docs/syntax.html

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

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

• Баги в Chrome
• Баги в Firefox
• Баги в Safari (WebKit)
• Баги в Microsoft Edge

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

-webkit-overflow-scrolling: touch

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

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

• Вынести на новый графический слой.
• Отказаться от использования -webkit-overflow-scrolling.
• Переверстать без бага.
• Костыль на JavaScript.

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

• transform: translateZ(0)
• will-change: transform
• filter: invert(100%) invert(100%)
• opacity: 0.9999999

Containing block

• для position: absolute формируется по краям padding box ближайшего родителя, у которого position не static;
• для position: absolute или position: fixed также может формироваться по краям padding box ближайшего родителя, у которого:
  • transform не равен none;
  • perspective не равен none;
  • will-change: transform или will-change: perspective;
  • filter не равен none.

https://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; }
}

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

• Добавить тесты скриншотами.
• Добавить в сборщик @warn или @error на использование нестабильных свойств.

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

• Тестируем пользовательские сценарии вместе с «Гермионой» — Николай Ильченко
• Unit-тестирование скриншотами: преодолеваем звуковой барьер — Роман Дворнов
• «Найди N отличий». Опыт тестирования верстки Tinkoff.ru

Советы

• По возможности не используйте нестабильные свойства.
• Тестируйте на реальных устройствах.
• Знайте спецификацию.

Nokia 6300 ???

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

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

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

caniuse.com

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

• Реальное устройство
• BrowserStack
• UC Browser — версия для разработчиков

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

FireBug

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

• Январь 2006

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

FireBug Lite

https://getfirebug.com/releases/lite/1.2/

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

1. собрать демо;
2. запустить демо на устройстве;
3. отключить потенциально проблемные стили;
4. goto 1.

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

https://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;
}

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

https://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.css

https://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; }

/* ... */

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

• JavaScript
• CSS image
  • background-image: url('/api/check?s=.my-class')
  • list-style-image: url('/api/check?s=.my-class')
  • content: url('/api/check?s=.my-class')
  • ...

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

.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 для отладки

• У некоторых HTML5-элементов есть предопределённые стили.
• Некоторые браузеры не умеют HTML5.

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

https://github.com/afarkas/html5shiv

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

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

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

https://github.com/google/material-design-lite

https://github.com/google/material-design-lite

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

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

• Если важно — делайте отдельную лёгкую версию сайта.
• Используйте прогрессивное улучшение.
• Всегда проверяйте совместимость внешних библиотек с вашим стеком браузеров.
• Мыслите нестандартно.

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

• Верстать не сложно. Сложно верстать правильно.
• Ваш сайт могут открыть даже на холодильнике.
• Упасть может что угодно.
• Пользователь не должен страдать из-за лени разработчика.
• Знайте свои инструменты.