Верстальщик должен бытьленивыйТимофей Чаптыков

t.chaptykov@2gis.ru @chaptykov

Holy war

— What are you doing when you don’t code?

— Testing and debugging.“

4

Поддержка браузеров

5

Yes, cap!

Поддержка браузеров → «На всякий случай»

7

/* Префиксы */

.class { -khtml-border-radius: 10px; border-radius: 10px; }

6 посещений за прошедший месяц на 2gis.ru

9

~ 0.00% согласно Google Analytics

10

~ 128 МБ трафика

11

/* Градиенты */

.class { background: #000; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIH htbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMT AwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbm VhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3 BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2 Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3 RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg ogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD 0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz 4KPC9zdmc+); background: -moz-linear-gradient(top, #000 0%, #fff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #fff)); background: -webkit-linear-gradient(top, #000 0%, #fff 100%); background: -o-linear-gradient(top, #000 0%, #fff 100%); background: -ms-linear-gradient(top, #000 0%, #fff 100%); background: linear-gradient(to bottom, #000 0%, #fff 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#fff', GradientType=0); }

/*Firefox 16+ (13 версий назад), Chrome 26+ (10),Safari 6.1+ (2), Opera 12.1+ (8), IE10+ (2),iOS, Android, Opera Mobile, Android Chrome, IE Mobile,IE9- не взрываются, просто показывают сплошной фон*/

.class { background: #000; background: linear-gradient(to bottom, #000, #fff); }

<!-- Метатеги -->

<meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="cleartype" content="on"><meta name="HandheldFriendly" content="True"><meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"t;<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv="imagetoolbar" content="black-translucent"><meta http-equiv="msthemecompatible" content="no"><meta name="format-detection" content="telephone=no"><meta name="format-detection" content="address=no"><!-- ... -->

Поддержка браузеров → Рискованные решения

15

Flexbox на мобилках

16

Нужно ли это

17

Нужно ли это → JS-анимация

18

Нужно ли это → Кастомизация форм

19

Элементы интерфейса должны быть родными для браузера и системы

20

Готовые решения

— Chosen

— Select2

— LinkSelect

— Image Combo Box

— QuickSelect

— тысячи их

22

Килобайты

84 КБjquery.js

27 КБ+

chosen.js11 КБ+

chosen.css122 КБ=

23

Оверкил

— подгрузка вариантов;

— Поиск по элементам;

— поддержка письма справа-налево.

24

Пишем сами

Optgroup

Много текста

Скролл

Управление с клавиатуры

29

Баги, баги

В реальной жизни

Можно было так

Или даже так

Меньше контроля

36

Больше, больше контроля

Меньше контроля → Baron

38

Много контроля

39

Проблемы подхода

— разные устройства ввода;

— разная частота событий;

— инерция и другие особенности платформ.

41

Мало контроля

42

Baron

— Статья на хабре: habrahabr.ru/company/2gis/blog/169359/

— Видео с Fronttalks: vimeo.com/74930126

— Исходный код: github.com/Diokuz/baron

44

Меньше контроля →Mindmap

45

Много контроля

47

Мало контроля

51

<!-- Структура -->

<h1>Mindmap root</h1><ol> <li> Element <ol> <li>Element</li> <li>Element</li> <!-- ... --> </ol> </li> <!-- ... --></ol>

<!-- Узлы -->

<h1>Mindmap root</h1><ol> <li> Element <ol> <li>Element</li> <li>Element</li> <!-- ... --> </ol> </li> <!-- ... --></ol>

<!-- Список дочерних узлов -->

<h1>Mindmap root</h1><ol> <li> Element <ol> <li>Element</li> <li>Element</li> <!-- ... --> </ol> </li> <!-- ... --></ol>

<!-- Список дочерних узлов -->

<h1>Mindmap root</h1><ol> <li> Element <ol> <li>Element</li> <li>Element</li> <!-- ... --> </ol> </li> <!-- ... --></ol>

<!-- Немного БЭМ -->

<h1 class="node node_root">Mindmap root</h1>

<ol class="children"> <li class="children__item">

<div class="node">Element</div>

<ol class="children"> <li class="children__item"> <div class="node">Element</div> </li> <li class="children__item"> <div class="node">Element</div> </li> <!-- ... --> </ol>

</li> <!-- ... --></ol>

/* Все позиционирование двумя CSS-правилами */

.node { display: inline-block; vertical-align: middle; }

.children { display: inline-block; vertical-align: middle; list-style: none; }

Добавляем стили для псевдоэлементов

60

Бонусы

— Мало весит;

— везде работает;

— вектор;

— можно напечатать.

62

Меньше контроля → Photor

64

// Вписываем фотографию в произвольный блок

function fitImage() { // ...}

// Resize// Debounce|Throttle// On load// Все равно не заработает для скрытых блоков

/* Вписываем фотографию в произвольный блок */

.image { background-size: contain; }

@media (max-width: 400px) { .image { background-size: cover; } }

/* Неожиданный бонус */

.image { background-size: contain; background-attachment: fixed; }

Photor

github.com/2gis/photor

71

Пат

72

Ахтунг

— Прогрессбар на загрузку файлов;

— визуальные редакторы;

— и т. д.

73

Заключение

74

Как писать меньше кода

— Смотреть на статистику;

— не поддерживать в отдельных модулях браузеры и устройства,

которые не поддерживает продукт в целом;

— сохранять нативные механизмы;

— меньше контроля на своей стороне. Тяжелая работа — браузеру.

75

Думайте про фичу, а не про код

76

Тимофей Чаптыков

t.chaptykov@2gis.ru@chaptykov

78