CSS, который рвёт шаблоны | Вебинар | karpov.courses dev

Курс Frontend: https://bit.ly/3rDMypt При написании стилей мы часто сталкиваемся с проблемами, которые сложно решить через CSS — приходится прибегать к помощи JS и в целом использовать «костыли». На вебинаре «CSS, который рвёт шаблоны» рассмотрим эти проблемы и научимся их решать, применяя современный стандарт CSS. Материалы с вебинара: Блок Антона про CSS Houdini 1. Генерация паттернов с помощью CSS Paint API https://css-tricks.com/creating-generative-patterns-with-the-css-paint-api/ 2. О правиле @property https://developer.mozilla.org/en-US/docs/Web/CSS/@property 3. Как работать с CSSOM https://developers.google.com/web/updates/2018/03/cssom 4. Подробное объяснение CSS Layout API https://github.com/w3c/css-houdini-drafts/blob/main/css-layout-api/EXPLAINER.md Блок Артура 1. Подробнее о CSS @layer https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/ 2. Понятное объяснение CSS-каскада https://wattenberger.com/blog/css-cascade 3. О селекторе :has https://developer.mozilla.org/en-US/docs/Web/CSS/:has https://css-tricks.com/the-css-has-selector/ 4. Подробно о Container Queries https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries https://css-tricks.com/say-hello-to-css-container-queries/ Блок Димы 1. Пример с Container Units из вебинара https://codesandbox.io/s/future-css-webinar-container-units-5n7b2 2. Черновик по Container Units с возможными значениями https://drafts.csswg.org/css-contain-3/#container-lengths 3. Заведенный баг в webkit про проблему с 100vh в мобилках и подробный ответ инженера https://bugs.webkit.org/show_bug.cgi?id=141832 4. Спецификация с объяснениями значений по large/small/dynamic viewports https://www.w3.org/TR/css-values-4/#viewport-variants 5. Черновик по @scope https://drafts.csswg.org/css-cascade-6/#scoped-styles 6. Черновик с nesting https://www.w3.org/TR/2021/WD-css-nesting-1-20210831/ 7. Больше CSS-фичей будущего https://css-tricks.com/whats-new-since-css3/ https://www.bram.us/2021/12/27/css-in-2022/ 0:00 — 3:53 Интро 3:54 — 4:49 Антон: О CSS Houdini 4:40 — 10:25 API типизированной объектной модели (ТОМ) 10:24 — 14:49 Custom CSS properties 14:50 — 23:48 Paint API 23:49 — 27:55 Layout API 27:56 — 31:47 Animation API 31:48 — 34:41 Scroll Timelines 34:42 — 35:29 Выводы про Houdini 35:30 — 37:24 Вопросы к Антону 37:25 — 43:39 Артур: псевдокласс :has 43:40 — 50:34 Container Queries 50:35 — Cascade Layers 1:05:10 — 1:22:47 Дима: Container Units 1:22:48 — 1:28:52 Viewport units 1:28:53 — 1:33:04 Scoping 1:33:05 — 1:36:59 Nesting 1:37:00 — 1:39:06 Выводы 1:39:07 — 1:40:52 Вопрос про вес селектора 1:40:53 — 1:44:06 Вопрос: зачем писать на css, когда есть препроцессоры 1:44:07 — «Скоро появится профессия CSS-программист»?