📦 CSS Container Queries, или Адаптация по-новому: контейнер вместо вьюпорта

[@viktormoskalev2269]

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

[@it2341]

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

[@Dukhevych]

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

[@kirillriman3611]

Да, пять лет ждали, ещё пять лет подождём...

[@Dukhevych]

@@Nomikama как по мне максимум полтора-два года. А то и раньше!

[@gavrstanislav999]

И видимо придется ещё столько же ждать, пока это все дойдет до стабильных сборок актуальных браузеров

[@Запискисамоучки]

еще возьмут и отменят, как это стало с style scoped

[@wimanen]

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

[@risovye_polya]

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

[@KlinovAS]

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

[@MrShnaiderTV]

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

[@KIperad]

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

[@romanpopov8836]

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

[@Stas-ir3gh]

Спасибо

[@egorshnel986]

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

[@DennisS-h4b]

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

[@vadymliesin9219]

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

[@lenaryan]

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

[@NOX_69RUS]

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

[@Disorrder]

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

[@rendalf256]

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

[@ms77grz]

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

[@Secrets-YoutubeRu]

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

[@mpcomp12]

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

[@olegivanov6231]

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

[@NicolaFrunza]

Super

[@YellowPanamka]

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

[@pepelsbey]

Да, это моя любимая клавиатура сейчас. Об этом отдельный лайв уже скоро :)

[@YellowPanamka]

@@pepelsbey а какие клавиши стоят?)

[@evgeny_mdr]

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

[@kirillkononov5094]

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

[@maghicugi7418]

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

[@pepelsbey]

Ничего, придёт наше время ) А пока вы в курсе, а значит готовы

[@АлександрБанин-ь4х]

Вадим на острие рускоязычного фронтенда, здорово знать, что и куда будет меняться.

[@YevhenZhuchenko]

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

[@aliaksandrk3338]

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

[@rasulturganov3421]

Круто!!

[@EirikUa]

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

[@xcrashful]

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

[@pepelsbey]

Хотел бы я уметь так круто шутить, но нет, всё по-честному

[@eldarda]

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

[@vm5786]

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

[@мэйз-у9ю]

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

[@zapiski_verstalshika]

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

[@a.osethkin55]

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

[@MrVertu01]

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

[@rnikolaenkov]

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

[@artemsdobnikov259]

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

[@AbraKadabra000]

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

[@constantinerafikov]

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

[@development76]

Крутооо!!!

[@DienelEsida]

Браво

[@Junckovski]

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

[@pepelsbey]

Для монтажа без джамп-катов (когда прыгает картинка), нужно переключать планы. До сих пор я переключал их кропом, то есть увеличивал картинку. Из-за этого не получалось выпускать видео в 4K, а хотелось. Сейчас я попробовал снимать на две камеры, чтобы планы можно было переключать без кропа. Мне, в целом, понравилось, но я ещё буду пробовать.

[@Junckovski]

@@pepelsbey повторюсь, просто мое личное) у меня создается ощущение что человек смотрит мне за спину. Если по аналогии с телеком, то ведущие поворачиваются в камеру когда переключают план. Спасибо за развернутый ответ, успехов с экспериментами и прироста аудитории.

[@EvgenichTalagaev]

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

[@шмяка]

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

[@POEOneLove]

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

[@Илья-с1л6э]

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

[@ihopeingod1]

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

[@KlinovAS]

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

[@semerset]

Мне стало интересно, как решить эту задачку и я набросал такой вариант - codepen.io/Samerset/pen/QWOQJdp. Получается, внутрь flex контейнера со скроллом добавляем непрозрачный блок, он должен занимать все свободное пространство и иметь z-index выше, чем у стрелки. Если в контейнере мало элементов и нет скролла, то этот блок заполнит пустоту и перекроет собой стрелку. Но как только контейнер начинает переполняться, свободное место исчезает и появляется скролл, а этот блок просто сплющивается, делая стрелку видимой. Решение не идеально, но с ним можно работать и оно довольно чистое.

[@timurkhudiyev]

Шикарно)

[@nshebeko]

огонь жду!

[@GilyazovAydar]

Кайф

[@gavrstanislav999]

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

[@pepelsbey]

Я бы не стал так жестоко шутить!

[@XATADOM]

Дякую

[@ivanmalenko356]

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

[@pepelsbey]

Пока не было опыта, но может разберусь. Спасибо за идею!

[@АндрейГоловкин-и5й]

Круть)

[@it_doc2319]

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

[@macgera]

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

[@pepelsbey]

Вы просто не распробовали гриды, они мощнее флексов, особенно для адаптации

[@macgera]

@@pepelsbey Я то распробовал, более чем. Но применять их не хочется.

[@АлександрБанин-ь4х]

Чем не угодили? В каких кейсах?

[@СуликДжун]

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

[@pepelsbey]

teejungle.net/

[@asmix7328]

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

[@ГеоргийЖуравлев-к2ъ]

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

[@pepelsbey]

Если вы верстаете под IE6, разве что

[@k.safonov]

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

[@pepelsbey]

Добавил подробности и ссылки про редактор в описание видео :)

[@Chetanoo]

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

[@zalexstudios]

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

[@Black1991Star]

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

[@pepelsbey]

Я не слукавил, я отбросил нерелевантное теме. Всё то же самое прекрасно сработает, если завернуть в и сделать там адаптивные картинки.

[@IvanLukyanets]

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

[@pepelsbey]

Пока не видел попыток сделать полифил, но может появится.

[@МаксимМельник-ч2о]

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

[@pepelsbey]

Мне нравится располагать контент в разметке в логическом порядке: сначала заголовок, потом всё остальное. Одна из гипотез в том, что пользователям скринридеров такой порядок лучше для понимания: они быстро переходят между заголовками и при движении дальше не пропустят картинку.

[@МаксимМельник-ч2о]

@@pepelsbey ясно, даже не знал что такое есть, спасибо !

[@eldarda]

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

[@pepelsbey]

Не скажу наверняка, заходите в чат Веб-стандартов и спросите там t.me/webstandards_chat

[@ПакоОфициальный]

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

[@pepelsbey]

Она живёт и развивается вполне нормально. Особенно с учётом числа пользователей и необратимости стандартов. Это не мажорную версию Бутстрапа выпустить «мы тут всё переписали с нуля».

[@yslpn]

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

[@popuguytheparrot_]

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

[@pepelsbey]

Да, всё верно, см. piccalil.li/blog/container-queries-are-actually-coming

[@GuiderWGM]

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

[@pepelsbey]

teejungle.net/

[@volodymyrkorniienko8670]

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

[@aprinciple9559]

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

[@pepelsbey]

В целом, довольно быстро. Кажется, что Safari на подобных CSS-фичах не тормозит слишком долго. Другое дело, что у них релизный цикл медленный. Вряд ли они успеют до осени, но есть шансы, что в следующем году поддержка появится в зимне-весеннем релизе.

[@Sacar666]

С 1 апреля

[@pepelsbey]

Не повезло с датой публикации, всё всерьёз!

[@burnspirt]

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

[@pepelsbey]

Да, кажется пора добавлять, под каждым видео спрашивают :D

[@k.ayvazov]

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

[@pepelsbey]

teejungle.net/

[@UbivanKenobi-q6y]

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

[@pepelsbey]

Мне просто 1fr кажется понятнее, чем auto, но это как border: 0 и border: none - дело вкуса, кажется. Мне none понятнее ;)

[@levsonc]

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

[@pepelsbey]

Записал экран в 1080 по старой памяти, в следующий раз будет 2160 :)

[@ЯрославДмитриев-ю1ю]

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

[@dmtr_ptrv]

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

[@pepelsbey]

Лучше с contain, чем вообще без Container Queries, да ведь?

[@Dukhevych]

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

[@pepelsbey]

Свойство contain слишком изменяет поведение браузера по умолчанию. Кажется, нельзя просто так сделать. Это как везде прописать will-change или zoom: 1 (если вы помните). Мне кажется, что это небольшая цена для такой крутой возможности.

[@Dukhevych]

@@pepelsbey Так а если это будет применяться только для тех элементов, селекторы которых обернуты в @container? Есть ли смысл в @container для селектора элемента, если парент этого элемента не имеет свойства contain?

[@yura3d3d]

А что, если нам нужно изменить не сам блок, а элемент этого блока? Что тогда является контейнером для элемента: родитель блока или сам блок? Вот тут свойство contain очень кстати, т.к. даёт возможность задавать контейнер

[@irustv7674]

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

[@pepelsbey]

По-вашему лучше вообще никак не решать задачу адаптации в контексте?

[@irustv7674]

@@pepelsbey ну тут уже больше кому-как удобнее.

[@astranik]

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

[@pepelsbey]

Просто будьте в курсе, это хорошие новости, а не руководство к действию прямо сейчас.

[@astranik]

@@pepelsbey тогда вопрос, не поменяется ли синтаксис когда дойдет по релиза?

[@pepelsbey]

Возможность не исключена, но шансы не высокие - он достаточно простой и получил одобрение CSSWG. То есть это не просто Google фантазирует.

[@dmitry.gashko]

@@astranik Так а какая вообще разница что что-то может поменяться? Сейчас можно только игратся и завидовать себе будущему. А то что за флагом говорит только о том, что этой штуки еще нет для реальных проектов. Но это не означает, что об этом нельзя говорить, пробовать и думать, как можно будет писать через время.

[@alienspro]

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

[@pepelsbey]

Раньше, гораздо раньше :)

[@KDevJS]

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

[@pepelsbey]

Всё всерьёз!

[@MaksymMinenko]

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

[@pepelsbey]

Теперь вы знаете, что это есть. Это тоже многого стоит, правда?

[@thecatwrites9731]

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

[@pepelsbey]

Зато эти 2К самые ценные :)

[@thecatwrites9731]

@@pepelsbey 🤓в космос!

[@deevue_sews]

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

[@pepelsbey]

И как бы вы справились с новостью, которая должна по-разному вести себя при разных ширинах колонки, не окна?

[@dobramorda9818]

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

[@it2341]

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

[@pepelsbey]

Ну либо не понравилось, всякое бывает, либо случайно зашли, не поняли и на всякий случай показали, что им не интересно. Всё нормально :)

[@it2341]

@@pepelsbey Просто очень хочется понять мотивации, что человек хотел сказать, что плохой контент, так он узкоспециальный, никто не заставляет смотреть, а если человек из данной сферы, ему априори долго быть интересно, ибо лучше в русскоязычном сегменте контента по теме, да ещё с такой получку мало. Меня как всегда интересуют психологические аспекты подобного явления, но пока никто из минусящих неразу не откликнулся)

[@КостянЕрмаков-е9ю]

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

[@SuperTRISTAN888]

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

[@pepelsbey]

Кроме размеров окна меняется расположение блоков, размер шрифтов, масштабирование страницы. И теперь вам нужно за всем этим следить, замедляя браузер. Можно ли это было сделать до сих пор? Конечно! Но очень, очень сложно и медленно. Теперь можно будет легко и быстро.