Новый CSS и HTML!

CSS и HTML улетели далеко вперед! Фронтендеры за ним не поспевают! Экскурсия в мир актуальной верстки!

0:00 CSS и HTML прорыв?!
0:25 Контейнерные запросы
0:55 Style Queries
1:38 :has
2:16 :nth-of
2:42 text-wrap: balance
3:12 initial-letter
3:36 svh, lvh, dvh
4:48 Цветовое пространство с широкой гаммой
5:33 color-mix()
6:27 Nesting
6:45 Каскадные слои
8:51 Scope
9:59 Синусы / косинусы
10:12 Индивидуальные свойства для transform
10:35 Subgrid
11:20 Masonry grid
11:36 Вертикальный режим отображения текста
11:49 Новые логические свойства
13:06 aspect-ratio
13:27 content-visibility
15:02 Подписка
15:38 Flexbox gap
16:10 Object view box
16:52 Media Queries Range
17:11 mix-blend-mode
17:37 filter
17:52 backdrop-filter
18:19 linear easy function
18:51 min, max, fit-content
20:52 conic-gradient
21:18 accent-color
21:35 currentColor
21:54 Относительные цвета
22:24 Цветовые пространства для градиента
22:40 Scroll Snap
23:07 Overscroll-behavior
23:45 Touch action
24:04 Scroll-behavior
24:22 Scrollbar gutter
25:00 font-display
26:00 line-clamp
26:18 Вариативные шрифты
27:25 Подписка
27:48 font-palette
28:15 prefers-reduced-motion
28:34 prefers-color-scheme
28:45 prefers-reduced-data
29:09 color-scheme
29:27 prefers-contrast
29:41 Режим принудительных цветов
29:55 focus-visible
30:23 CSS-переменные
30:41 Supports
30:55 Функции сравнения (min, max, clamp)
31:30 property
31:46 :marker
32:22 image-set
32:40 image()
33:15 Popover API
33:49 Dialog
34:23 Anchor positioning
35:18 Кастомный селект
35:40 Анимация дискретных свойств
36:25 Scroll driven animation
36:51 View Transitions API
37:22 Резюме

*****************

Тренажеры HTML Академии + Книга рецептов фронтендера + Академия + комьюнити за 99 рублей:
https://boosty.to/how-to-learn-it
Для оплаты с НЕ российских карт:
https://foamy-stag-bb6.notion.site/Donate-bot-1550973e32a24d1da9a4ef15f80391ee

Если не открывается:
https://t.me/+K1H8FmJKURg0MGYy

Какие тренажеры бывают:
https://htmlacademy.ru/courses#fe-start

Мой телеграм:
https://t.me/howToLearnIT

******************


Ссылки:

1) Подробно про контейнерные запросы
https://youtu.be/8OptuS8VXe4

2) Поиграть с новыми цветовыми пространствами
https://gradient.style/

3) Поиграть с color-mix
https://color-mix.style/

4) Видос про mix-blend-mode эффекты
https://youtu.be/-c94pr41jaI

5) Про функции сравнения (min, max, clamp)
https://youtu.be/YtkGbZ3DxoQ

6) Про property в css Houdini
https://youtu.be/ZBjsgJyrKTU

7) Про CSS scroll snap
https://habr.com/ru/articles/498456/

8) Про стратегии font-display
https://doka.guide/css/font-display/

#css #html #frontend #javascript