Más contenido relacionado La actualidad más candente (8) Similar a Тимофей Чаптыков «Верстальщик должен быть ленивый» (20) Тимофей Чаптыков «Верстальщик должен быть ленивый»4. — What are you doing when you don’t code?
— Testing and debugging.
“
4
12. /* Градиенты */
.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);
}
13. /*
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);
}
14. <!-- Метатеги -->
<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">
<!-- ... -->
44. Baron
— Статья на хабре: habrahabr.ru/company/2gis/blog/169359/
— Видео с Fronttalks: vimeo.com/74930126
— Исходный код: github.com/Diokuz/baron
44
53. <!-- Узлы -->
<h1>Mindmap root</h1>
<ol>
<li>
Element
<ol>
<li>Element</li>
<li>Element</li>
<!-- ... -->
</ol>
</li>
<!-- ... -->
</ol>
54. <!-- Список дочерних узлов -->
<h1>Mindmap root</h1>
<ol>
<li>
Element
<ol>
<li>Element</li>
<li>Element</li>
<!-- ... -->
</ol>
</li>
<!-- ... -->
</ol>
55. <!-- Список дочерних узлов -->
<h1>Mindmap root</h1>
<ol>
<li>
Element
<ol>
<li>Element</li>
<li>Element</li>
<!-- ... -->
</ol>
</li>
<!-- ... -->
</ol>
56. <!-- Немного БЭМ -->
<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>
57. /* Все позиционирование двумя CSS-правилами */
.node {
display: inline-block;
vertical-align: middle;
}
.children {
display: inline-block;
vertical-align: middle;
list-style: none;
}
66. // Вписываем фотографию в произвольный блок
function fitImage() {
// ...
}
// Resize
// Debounce|Throttle
// On load
// Все равно не заработает для скрытых блоков
67. /* Вписываем фотографию в произвольный блок */
.image {
background-size: contain;
}
@media (max-width: 400px) {
.image {
background-size: cover;
}
}
75. Как писать меньше кода
— Смотреть на статистику;
— не поддерживать в отдельных модулях браузеры и устройства,
которые не поддерживает продукт в целом;
— сохранять нативные механизмы;
— меньше контроля на своей стороне. Тяжелая работа — браузеру.
75