РИТ++ 2017, Frontend Сonf Зал Дели + Калькутта, 5 июня, 11:00 Тезисы: http://frontendconf.ru/2017/abstracts/2514.html Нам постоянно нужно от CSS больше того, что в нём (или браузерах) есть прямо сейчас. История, рассказывающая о том, какими способами мы решали(ем) проблемы недостающих нам возможностей (css frameworks, css polyfills, preproccessors, “post”-proccessors) и о Houdini, который должен положить конец этой ерунде, позволив описывать разработчикам с помощью JavaScript не просто полифилы, а полноценные реализации, не мешающие производительности. Расскажу о том, что мы можем контролировать в CSS сейчас, что сможем с Houdini, и что в нем есть на текущий момент с примерами демок.

1. Ваш CSS нас
не устраивает,
мы придумаем
свой
Прудников Роман

6. 2009

8. Красиво

9. Решения верстальщиков
● вставить картинку
● вставить картинку
● вставить картинку
● filter
● .htc

10. Решения opensource'щиков

11. Решения W3C'щиков

12. Быстро

13. Решения верстальщиков

14. Решения opensource'щиков

15. Решения W3C'щиков

16. Удобно

17. Удобно
ul a { color: #999; }
div { background: #999; }
button { border-color: #999; }

18. ul { background: #999; }
ul li { color: #888; }
ul li a { color: #777; }
Удобно

19. Удобно
div {
-webkit-font-feature-settings: “c2sc”;
font-feature-settings: “c2sc”;
font-variant-numeric: lining-nums;
}

20. --brandGr: #999;
ul a { color: var(--brandGr);}
div { background: var(--brandGr); }
button { border-color: var(--brandGr); }
Решения opensource'щиков

21. Решения opensource'щиков
ul {
background: #999;
li {
color: #888;
}
}

22. div {
font-variant-numeric: lining-nums;
}
Решения opensource'щиков

23. Решения opensource'щиков
@if $you == ‘#555’ {
$I: ‘#666’;
}

24. Решения opensource'щиков

25. Решения opensource'щиков

26. Решения W3C'щиков

27. Безболезненно расширяемо

28. Безболезненно расширяемо
main.css
.nav {
color: #999;
}
question.css
.nav {
color: #333;
}

29. Решения opensource'щиков

30. Решения W3C'щиков

31. Предсказуемо безопасно

32. Решения верстальщиков
ul {
color: grey;
color: rgba(0, 0, 0, .5);
}

33. Решения верстальщиков
div {
-webkit-font-feature-settings: “c2sc”;
font-feature-settings: “c2sc”;
font-variant-numeric: lining-nums;
}

34. Решения верстальщиков
if ('opacity' in document.body.style) {
// some code
}

35. Решения opensource'щиков

36. Решения W3C'щиков
@media (max-width: 768px) {
ul {
color: grey;
}
}

37. Решения W3C'щиков
@supports (--foo: green) {
body {
color: green;
}
}

38. Ну и что?

39. Как решаем проблемы
● подменяем на похожее
● засахариваем
● отдаём рабочее (fallback)
● проверяем и пишем иначе
● описываем досконально

40. И то

41. Как было бы в JS
Предложить
фичу
Написать
полифил/
транспилить
Юзать
фичу

42. Как отрисовывается страница

43. Как отрисовывается страница

44. Как отрисовывается страница

45. СSS Typed OM
$('.el').style.transform =
`translate(${this.width}px,${this.height + 20}px)`;

46. СSS Typed OM
$('.el').styleMap
.set('opacity', new CSSNumberValue(0.5));
$('.el').styleMap
.set('height', new CSSSimpleLength(50, 'px'));

47. СSS Typed OM
$('.el').styleMap
.get('opacity').value; // 1
$('.el').styleMap
.get('height').type; // ‘px’

48. СSS Typed OM
$('.el').styleMap
.set('height', new CSSCalcLength(‘50vh - 20px’));

49. СSS Typed OM
$('.el').styleMap
.set('height', new CSSCalcLength({
vh: 50,
px: -20
}));

50. Потрогать?
https://github.com/css-typed-om/typed-om

51. Потрогать?

52. Статус?
CSS Typed OM Level 1
Editor’s Draft, 3 June 2017

53. Properties and Values API
.aside {
transition: --width 1s ease;
--width: 50px;
width: var(--width);
}
.aside.open {
--width: 250px;
}

54. registerProperty({
name: '--width',
syntax: '<length>',
inherits: false,
initialValue: '50px'
})
Properties and Values API

55. Properties and Values API
.aside {
transition: --width 1s ease;
--width: 50px;
width: var(--width);
}
.aside.open {
--width: 250px;
}

56. Потрогать?

57. Статус?
CSS Properties and Values API Level 1
Editor’s Draft, 3 June 2017

58. Composited Scrolling & Animation

59. DEMO

60. Composited Scrolling & Animation

61. window.compositorWorklet.import('worklet.js')
Composited Scrolling & Animation

62. class Header {
onmessage(e) {
this.initialized = true;
this.scroller = e.data[0];
this.avatar = e.data[1];
this.bar = e.data[2];
};
tick() {/**/}
}
registerCompositorAnimator('head', Header);
Composited Scrolling & Animation

63. window.compositorWorklet.import('worklet.js')
.then(() => {
var animator = new CompositorAnimator('head');
animator.postMessage([
new CompositorProxy($('window'), ['scrollTop']),
new CompositorProxy($('.avatar'), ['transform']),
new CompositorProxy($('.bar'), ['transform', 'opacity']),
])
})
Composited Scrolling & Animation

64. Потрогать?

65. Статус?
Ну вы поняли

66. registerPaint('circle', class {
static get inputProperties() { return ['--circle-color']; }
paint(ctx, geom, properties) {
const color = properties.get('--circle-color');
ctx.fillStyle = color;
const x = geom.width / 2;
const y = geom.height / 2;
const radius = Math.min(x, y);
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
ctx.fill();
}
});
Paint API

67. .bubble {
--circle-color: blue;
background-image: paint('circle');
}
Paint API

68. Потрогать?
Ну вы поняли

69. Статус?
Ну вы поняли

70. Layout API

71. Layout API

72. Layout API
registerLayout('masonry', class {
static get inputProperties() {
return ['width', 'height']
}
static get childrenInputProperties() {
return ['x', 'y', 'position']
}
layout(children, constraintSpace, styleMap, breakToken){
// Layout logic goes here.
}
}

73. Layout API
body {
display: layout('masonry');
}

74. Статус?
Ну вы поняли

75. Потрогать?
Не в этот раз

76. Самари

77. We want moar!
● Explainers
● Animator Worklet
● TypedOM Polyfill
● Demystifying CSS
● Houdini Mailing List
● Demos

78. Прудников Роман
Разработчик интерфейсов
2ГИС
stillerr@ya.ru
vk.com/rayproud
facebook.com/stillerr