То чувство когда смотришь про экспериментальные свойства радуешься , а потом идёшь на работу делать сайт с поддержкой ие)

Уже второе видео подряд занимаешься чёрной магией...

Вадим дай тебе бог здоровья, прямо таки тянешь нас в светлое будущее! Ждем и надеемся!

Свершилось. Ждал это больше пяти лет! Черт-побери. Неужели теперь можно будет делать полноценную изолированную верстку для компонентов? АЯЙЯЙЯЙ БЫСТРЕЕ БЫ.

Ох как товарные карточки запляшут :)

Большое спасибо за работу.

Магия какая-то) Спасибо за видео)

Просто шикарно! Спасибо за информацию, не знал.

Я впечатлён. Спасибо вам за разбор интересного кейса!

Офигенно! Классная весч!! И отличный урок ))

Супер) Спасибо что оповестили) Фишка реально удобная

Это что-то нереальное) Спасибо!

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

Очень круто, спасибо!

А это прям вообще круто!

Первое просмотренное видео на данном канале. Подача и наглядность на высоте. Все очень понятно. Спасибо!

как же долго я этого ждал...

Спасибо за видео! Ждем реализации во всех браузерах...

каждый выпуск, как что-то из поднебесье, однозначно 100500 лайков)

Спасибо! Очень хочется что бы побыстрее появилось такое во всех браузерах

Здорово 👍 Спасибо. Мне бы с Flexbox разобраться 😃

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

Как же я этого ждал

Даже не знаю, как мы все эти года раньше определяли "контекст" просто дописывая родительский класс, где это нужно, вроде ".aside .news {...}" или ".main .news {...}" для определенных стилей

Круто. По минимум 5 лет ждал именно эту технологию. Не знал куда и кому сообщить, но проблему как я понял уже решали. И да... понятно в чем сложность. Ведь можно наделать такого, что будет все моргать если не наложить на некоторые свойства ограничения или не придумать как избежать циклических измерений в связи с изменением и вызовом новых зависимостей. Надеюсь что все заработает как надо. Спасибо!

Спасибо за видео!!

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

Офигеть, круто!

Шикарно)

мечты сбываются 😍😍😍

ох, лет 4-5 назад услышал про эту спеку, наконец-то имплементация подъезжает!

Круто!!

Крутооо!!!

Удобненько. Надеюсь, это не первоапрельская шутка ))) Раньше такое приходилось реализовывать на js и часто это приводило к лагам. Наконец-то будет работать из коробки! Главное, чтоб сафари это к себе тоже добавили. Испытываю счастья столько же, сколько от async/await и классов в js :)

в правильных руках это крутое свойство. можно будет еще лаконичнее писать стили

На словах «мечты сбываются» на заднем фоне нужен логотип газпрома. Голубой цвет фона уже в наличии )

Это круто! В обычной ситуации сделал бы через js наверное

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

Самый приятный звук клавиш что я слышал)

Штука конечно безумно классная и полезная, но вот жаль, что пользоваться ей нормально не скоро можно будет... Но ждём!)

огонь жду!

Я аж поседел пока это ждал 😢

Спасибо

Круто, быстрее бы включили поддержку во всех браузерах.

Круть)

Браво

революционная фича. Мне кажется именно этого не хватало для создания универсальных переносимых компонентов

Вадим, приветствую! Очень нравиться твой контент, вижу что читаешь комменты, потому хотел бы высказать свое ИМХО. Вижу что ты, как и многие сейчас блогеры из тех что я смотрю, стал делать дополнительный план с боку. Лично мои заморочки конечно, но выглядит как-то крипово и неестественно что-ли. Я понимаю зачем это сделано, но когда человек тебе что-то рассказывает хочется чтобы он смотрел через экран на тебя, а подобные переходы со сменой планов хорошо смотрятся на интервью когда герой общается с интервьюером и смотрит на него. Опять же ИМХО, просто наболело. З.Ы. даже на скилбоксовских курсах такое)

Тонкий троллинг)) молодец. 1 апреля. Хром... 52 версии)

Super

Однозначно отличная вещь! В работу!!!

Думал об этом всю жизнь, и всю жизнь мне этого не хватало. А не будет ли в ближайшее время обобщающего видео по css-функциям? В частности очень хочется послушать про верстку с использованием env(safe-area-inset) и про организацию переменных при ее использовании.

А вдруг это первоапрельская шутка)

Дякую

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

Каждый раз смотрю видео и мысли такие - "Офигенно... Жаль что на проектах не получиться использовать :С"

Кайф

Вадим, вы лучший преподаватель. Не хватает ваших новых уроков. Возвращайтесь поскорее.

Видео огонь!!! Футболка тоже, где взять такой мерч?

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

Вадим, а где вы берёте такие шикарные футболки?

Интересно. А можно ли сделать без этой новинки следующее: Страница. На странице в одном блоке имеется несколько картинок, которые могут уйти вправо. В случае если их много, то появится горизонтальная прокрутка. Предположим мы сделали overflow: auto; и задали ширину 100% от родительского. И тут проблема, которую я решаю только скриптами. Чтобы повысить юзабили я задумал отображать полупрозрачную стрелочку вправо (можно анимировать). Кстате не хватает что-то типа :lazy для анимации например только два раза в случае если мы добрались до элемента. Но это не главное. Главное, что стрелочка нужна только тогда, когда есть полоса прокрутки, а точней когда внутри блока контента больше по ширине чем ширина родительского блока. Наверное с этой новинкой "CSS Container Queries" такое станет возможным. Ну и еще.. Гугл как похвастался разработкой и я обрадовался что скоро будет Container Qeries, но результаты поиска по функционалу ничего полезного не выдают. Та даже если спросить о чем то новом, то даже aspect-ratio: auto; нигде не всплывает с парой object-fit. Нейросеть себя не оправдала. Вопросы с пропорциями в Гугла еще ассоциируются с 10ти летней давностью через % padding и marign

Такой вопрос не по теме видео, а что вы думаете о том, чтобы на Vue3 начинать писать реальный проект, уже прошел какой-то адаптационный период?

А что за шрифт в VSCode? Подскажи плиз. По поводу контейнер квериз - не нравится, что надо указывать какие-то свойства в родителе. Выглядит странно и нелогично. Надеюсь в итоговой реализации это будет настолько же просто, как и с медиаквериз. Респект за эстетически "вылизанный" контент. Видно, что уделено огромное внимание тому, как выглядит картинка, как выглядит код, продуманы размеры шрифта, классно подобраны цвета. Круто, очень. Все бы так делали. Респект.

Супер фишка! Вот прям сейчас бы из коробки начал использовать. Может быть есть какой-то рабочий полифил, который такую функциональность даёт?

Я заплакал от счастья.

Правильно ли я понимаю, что можно будет сделать адаптивные шрифты от контейнера с clamp?

grid самое бесполезное изобретение в CSS :) А вот контейнер Queries это прямо таки прорыв. Жду его в продакшене и везде.

Спасибо, Вадим за освещение новой фичи. Правда мне кажется ты немного слукавил в видео. Если бы поставил реальное изображение, например фото, то пришлось бы использовать тег picture для удовлетворения всех потребности и по размерам, и по пропорциям изображения и по всем возможным девайсам на которых можно просматривать данную страницу. И по факту выходит что это свойство и не очень применимо. Да будет пропорционально, но ты же не будешь для мобилы отдавать полноразмерное фото

Насколько быстро сейчас внедряются новые фичи до хорошей поддержки? И не будет ли Safari тормозить новую идею?

все ясно, только зачем ордер= -1 для картинки, просто для примера ? почему в разметке не поднять, след. интересная тема сабгриды ждем видео... спасибо Вадим, особенно что на правильной стороне ... !

А есть какая-то разница между "grid-template-column: 200px 1fr" и "grid-template-column: 200px auto"? Я всегда пользовался вторым вариантом, но смотрю у Вадима первый.

это. просто. %@&**^!

Вадим, где купить такую же футболку?

а можешь добавить в описание тему для vscode.

А неужели свойство contain не может применяться браузером автоматически к родителю всех элементов, которые обернуты в @container? Не нравится мне что нужно это вручную прописывать. Или таки там от значения contain может меняться поведение каким-то образом?

Где такую футболку можно купить?

Всё круто! Но коду как будто бы не хватает чёткости до 4к.

С 1 апреля

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

Самое печальное (обязательные правки стилей родителя) в конце Эх вот с contain уже не то

Самое смешное, что наиболее юзабельное в этом видео - background-color: paleturquoise; :D

все что за флагом да еще и в canary, нужно ли сейчас на это время тратить?

-30% css кода, гуд

18к просмотров и 2к лайков) какие жадные ухх))))

Ну, и..? До сих пор css grid не особо спешат использовать, потому что какой-то там "интернет эксполер ее плохо понимает"... Так что приходите лет через пять-десять со своими контейнерами... :)

Через 5 лет она будет стандартной поддержкой.

Стрёмно смотреть такие видео выпущенные 1 апреля...

Жаль конечно что 20.10.2023, а всего лишь Global: 87.98% + 0.05% = 88.02

Люди которые минусят, вот обьясните мне ваши мотивации ?

Не понял зачем это. Я и так спокойно со всем этим справляюсь. Ну посмотрим, что тут сказать.

Больше похоже на подход: хвост виляет собакой. Лучше уж классический медиа-окно формат.

А пока что пользуйтесь intersectionobserver и не нойте. 😂

Не совсем понимаю зачем все это городить, есть же js - проверили ширину окна, добавили класс родительскому контейнеру и по классу написали css стили, это 2 строчки кода.