Новый CSS и HTML! 

Тренажеры HTML Академии + Книга рецептов фронтендера + Академия + комьюнити за 99 рублей: boosty.to/how-to-learn-it Для оплаты с НЕ российских карт: foamy-stag-bb6.notion.site/Donate-bot-1550973e32a24d1da9a4ef15f80391ee Если не открывается: t.me/+K1H8FmJKURg0MGYy Какие тренажеры бывают: htmlacademy.ru/courses#fe-start Мой телеграм: t.me/howToLearnIT ****************** 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 Резюме ***************** Ссылки: 1) Подробно про контейнерные запросы ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-8OptuS8VXe4.html 2) Поиграть с новыми цветовыми пространствами gradient.style/ 3) Поиграть с color-mix color-mix.style/ 4) Видос про mix-blend-mode эффекты ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE--c94pr41jaI.html 5) Про функции сравнения (min, max, clamp) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YtkGbZ3DxoQ.html 6) Про property в css Houdini ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ZBjsgJyrKTU.html 7) Про CSS scroll snap habr.com/ru/articles/498456/ 8) Про стратегии font-display doka.guide/css/font-display/ #css #html #frontend #javascript

Благодарю, за крутые новости. Качественная подача. ❤

Крайне полезное видео. Автор, ты большой молодец! 🤝

Масштабная работа! Спасибо, полезно в качестве плана изучения

Анимации в конце это пушка. Спасибо за видео.

Вот это было очень полезно, спасибо огромное!

Вот это супер крутой видос! Саммари по всему самому долгожданному в одном месте и без воды. Спасибо!

Нереальное спасибо автору!!!

Потрясающе видео, пока изучал фреймворки, библиотеки и серверные технологии, начал немного забывать такие базовые вещи как HTML и CSS, а в них оказывается завезли кучу нового.

Очень качественный контент. Не каждый бы смог такое сделать. Спасибо огромное автору видео, а с меня лайк и подписка)

Спасибо каналу за супер-сжатое ревью эпохального контента! Лучи веб-стандартной любви!

Спасибо! Очень полезное видео. Я почувствовал себя незнайкой. За-то теперь куча новых фишек буду иметь ввиду.

Это было шикарно, я прям преисполнился в своём сознании) Но всё ровно, самое главное, что я жду, это когда наконец можно будет адекватно делать кастомные select, надеюсь поддержку скоро завезут.

Супер полезно, большое спасибо !

Все по сути и просто!! рассказано доступно

Спасибо за видео! Очень полезно

Полезное видео. Спасибо! Видос в топ!

Спасибо 🎉

Благодарю! Четко, интересно, эффективно Радуют перспективы использования нативной поддержки диалогов, скролла и переходов За 15 лет сss и html стали довольно широкими

Огромное спасибо! Оrазывается некоторые мечты уже сбылись, а я о об этом не знала :D

Круто! Спасибо большое

Йоу вообще красавчик, контент в кайф!

Одна из самых крутых подач инфы! Без лишних соплей. Идеально! Спасибо огромное!

очень крутой контент, молодец!!

Спасибо🙏🔥👍

спасибо большое!

Дружище спасибо за твой труд ,огонь 🔥

Привет, друг 🤝 Спасибо за инфу, много нового узнал 👍

чётко! спасибо!!!

Автор красавчик!

Very useful! Thanks!

Спасибо стандартизаторам, что дали возможность свойствам кала определять цвет иконки 21:46

ОЧЕНЬ КРУТО!!

Спасибо, наконец то свойством кала можно определять цвет иконки

Бро, ты супер!) Все показано с примерами. Это прям вау

Спасибо !

фичий жир это потрясающе)) отдельный респект за подачу, пролетело на одном дыхании, очень много полезностей, огромнейшое спасибо) лайк, подписка, респект.

Очень крутое видео. Качество, информативность, актуальность, полезность и лёгкость восприятия зашкаливают. Жаль только, что целевая аудитория автора не шибко большая((

Дискретные свойства - те, которые имеют ограниченное количество возможных вариантов. К примеру, visibility имеет только 3 значения visible, hidden, collapse. Мы не можем взять среднее между visible и hidden или между hidden и collapse, как между 0 и 1, это не будет иметь смысла.

Не так давно попал на ваше видео про min, max и clamp уже везде использую. Очень полезными оказались. Ну, теперь еще навалилось нового. Сам только чуть больше года в этом деле. И вот так всё быстро меняется))

слои это прям круто!

четко умеете могете

спасибо очень полезно. Хотелосьб верстку сайта с использованием последних фич былоб нереально круто

Спасибо

Wow 🎉

32:04 Важное уточнение: `:where()` не добавляет специфичности, так что вес нового селектора будет меньше. Чтобы специфичность добавлялась используют `:is()`

Безоговорочный лайк

Что бля такое ты сделал это шедевр качаю в библиотеку, добавляю вопросы в список интервью, изучаю и радуюсь Спасибо спасибо добрый человек Можно вот такого контента и побольше❤❤❤❤

Даёшь Тьюринг-полный ЦСС!!!

selectmenu дааааа! наконец то

dialog, focus и popover мой топ 3

👍👍👍

Каскадные слои вообще тема. Куча костылей убирает)

Я почему-то "И HTML" на заставке прочитал как "Интим". Перечитал ещё раз. Думаю: "Хммм... Странно. Канал ведь про программирование. Вижу же css". И только с четвертого о раза прочитал правильно. Подумал, что первые 3 буквы и правда похожи. Прикольно)

Понял, пойду курсы по экселю смотреть

Помню когда флекс появился я заинтересовался вебом. А когда наконец после 14 года начали убирать совместимость со старыми браузерами, перестали поддерживать старое и пошел мейнстрим на новые технологии, я просто полюбил это все дело и наконец-то вздохнул полной грудью. Мало кто помнит холивары в ТЗ на тему шестого осла 😂

Видос огонь, жаль, что не ссылки на репу с исходниками.

Видимо скоро таки появятся css программисты xD. Спасибо, очень полезное видео и кол-во труда которое вложено колоссальное. Добавьте в описание ссылки для донатов, я бы лично немного задонатил если бы они были.

36:00 дискретные свойства- это скорее всего display:none, который всегда ломает анимацию и надо придумывать костыли вокруг него. Само понятие дискретности подразумевает отсутствие промежуточных значений, то есть прерывистость. Например, механизм секундной стрелки в часах можно назвать дискретным, она «прыгает»

Имба

Материал классный, где-то 80% фишек оттуда я узнал впервые. А уже есть какие-либо сайты, где все эти фишки применяются?

Мой мозг 🤯

Материал суперполезный и большое спасибо. Но есть конструктивная критика - она субъективна - не касается контентной части, а про монтаж. В конце каждого фрагмента показывается текстовая информация, резюмирующая содержание фрагмента - и тут бы задержать ее на экране сек на 5 подольше, чтобы было физически время на почитать. Но переход к следующему фрагменту идет практически сразу, да так, что и паузу не успеваешь нажать. Приходится назад перематывать - и ловить на паузу. Вот такой вот user experience...

Круто, но уверен многое не дойдёт до полной поддержки браузерами, как это обычно бывает или работать будет по разному - привет сафари)

Как это теперь запомнить ?

А все это где найти, например в доке нет еще их

Еще бы адекватную бегущую строку завезли на замену marquee, было бы шикарно, чтобы не городить самому из смеси js и css

Мой топ по новым фичам это: 1. Каскадные слои. 2. Scope. 3. Функции сравнения (min, max, clamp).

Контейнерные запросы вообще не ждал.

🤯

Да, крутой выпуск. Я на самом деле очень жду нативные поповеры. То постоянно костыли всякие мутить приходится.

👍

Пишу свой топ значит 1. CSS vars и сюда же color-scheme это базовые вещи, которые просто будут необходимы 2. Html попапы, мы сократим кучу, просто кучу js для простых попапчиков, а это не может не радовать. 3. Сюда я тоже выпишу солянку, анимации + цвета и градиенты + работа с шириной и видимостью контента + обработки свойств пользователя, тема, батарейка и тд Да не топ 3 конечно получилось 😅 а еще круто, когда слушаешь и понимаешь, что большую половину уже используешь, автору респект ❤🎉

мясо мясо

Прозвучит как негатив, но я напишу комментарий, который писал под многими видео с описанием новых возможностей языка/разметки - это трындец (мягко выразился). Основная проблема айти, в том числе и верстки - отсутствие единых стандартов. Один и тот же макет можно сверстать по разному. А вот эти новые фичи, добавляют варианты верстки. В результате мы не получаем что то кардинально новое, какую то абсолютно новую возможность, а получаем ещё один вариант сделать то, что делали раньше. А отсюда следует - все эти фичи это надо знать, так как спросят на собеседовании. Это не надо знать, так как не спросят на другом собеседовании...стандартов то нет.) Один верстальщик будет верстать по старому, другой по новому. Нужно будет подстраиваться под верстку, править. Будет смешение стилей, приемов. Будет конфликт - чья верстка современнее, будут холивары. А стандартов то нет - как верстать гридами, флексами, дивами, использовать новые фичи - выбор каждого. Итого можно ли сказать - я верстальщик? Можно ли сказать я синьор программист? Можно. Сказать можно. А по факту - неизвестно. Когда спортсмен сдает норматив - кмс, он выполняет упражнение. Выполняет определенным образом, определенной техникой и получает удостоверение одного образца. Он кмс. Есть четкие критерии качества, техник сдачи норматива. В верстке можно прекрасно сверстать и таблицами и будет работать. ) Это огромная проблема айти - и пища для размышлений куда это вас приведет, к чему приведет и кем вы потом станете. А пока молодой - можно и поверстать и в деливери поработать ) А вот потом... ну это придет с опытом.

Ещё чуть-чуть и для браузера с отключенными JS будет требоваться игровая видео карта.

Честное слово, от половины этих новых фич я в голос кричал "НАКОНЕЦ-ТО!"

text-wrap is not a known css. Как исправить ?

вот единицы вьюпорта это прям топ , до этого приходилось использовать хак с innerWidth Насчет каскадных слоев и прочего подобного, а сейчас кто-то вообще пишет свои приложения без css модулей? Ну кроме создателей библиотек и легаси проектов

Caniuse даст ответ стоит ли пользовать новинки в html&css.

Как я стар со своим float 😁

Eee aysheri

а можно разъяснялки без неподдерживаемых фич7

прастите! не "анчор" а "энкёр" :) а видос зачётный, спасибо!

Пользы много. Буду использовать как справочник

Круто!

С flex gap к сожалению, не всё так однозначно. Ну прошлом проекте были клиенты, которые сидели на макбуках 2015 что ли года, которые уже никак не обновить, и пользовались сафари, который не поддерживает эту фичу. В целом, да, можно использовать, но если внезапно возникнет потребность это отрефакторить, то я представляю лицо разработчика (потому что самому пришлось изобретать костыли). Теперь стараюсь по дефолту использовать гриды вместо флекса, где это возможно

Кому не сложно сделайте, фича - краткое описание, буду благодарен)

Ох, либо это путь к стандартизации, Либо это путь к безумству

контейнер кверис поддерживаются. Уооооггггхххх сеееггссс

Привет, мощное видео, спасибо!🎉 Можешь все это добро в свой справочник закинуть? Думаю придётся много раз видео смотреть, чтобы что-то найти, текстом будет проще это сделать

Больше половины уже использую , что-то уже больше 2 лет.

Как называется этот плагин чтобы в этих кубиках , показывать код ?

Че такое OKLCH и как это возможно без HDR?

Некогда видео смотреть, есть ли текстовый вариант?

Gap для флексов уже давно, не? Я пользовался еще года три назад

вот поэтому я хочу стать фронтендером 40+

Все сложнее и сложнее, или наоборот все проще становится?

А зачем вам на скриншотах кода какие-то ПОЦовские три цветных кругляшка?

Спасибо , но сильно быстро для восприятия.