Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)
0 likes252 views
Документ посвящен CSS и его применениям, обсуждая различные решения и подходы, включая Open Source и W3C. Приводятся примеры кода, который иллюстрирует работу с CSS и создание анимаций, а также упоминаются различные API, такие как Paint API и Layout API. Документ завершает призыв к экспериментам и дальнейшему изучению возможностей CSS.
![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](https://image.slidesharecdn.com/2css2-170626213243/85/CSS-2-62-320.jpg)
![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](https://image.slidesharecdn.com/2css2-170626213243/85/CSS-2-63-320.jpg)
![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](https://image.slidesharecdn.com/2css2-170626213243/85/CSS-2-66-320.jpg)
![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.
}
}](https://image.slidesharecdn.com/2css2-170626213243/85/CSS-2-72-320.jpg)
Ваш CSS нас не устраивает, мы придумаем свой / Роман Прудников (2ГИС)
- 1. Ваш CSS нас не устраивает, мы придумаем свой Прудников Роман
- 6. 2009
- 8. Красиво
- 9. Решения верстальщиков ● вставить картинку ● вставить картинку ● вставить картинку ● filter ● .htc
- 12. Быстро
- 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’; }
- 28. Безболезненно расширяемо main.css .nav { color: #999; } question.css .nav { color: #333; }
- 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 }
- 36. Решения W3C'щиков @media (max-width: 768px) { ul { color: grey; } }
- 37. Решения W3C'щиков @supports (--foo: green) { body { color: green; } }
- 38. Ну и что?
- 39. Как решаем проблемы ● подменяем на похожее ● засахариваем ● отдаём рабочее (fallback) ● проверяем и пишем иначе ● описываем досконально
- 40. И то
- 41. Как было бы в JS Предложить фичу Написать полифил/ транспилить Юзать фичу
- 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 }));
- 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
- 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. Потрогать?
- 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
- 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'); }
- 75. Потрогать? Не в этот раз
- 76. Самари
- 77. We want moar! ● Explainers ● Animator Worklet ● TypedOM Polyfill ● Demystifying CSS ● Houdini Mailing List ● Demos