CSS container queries это огонь 🔥

[@PurpleSchool]

🔗 Ссылки: 🎓 Курс по HTML и CSS: purpleschool.ru/course/html-css 💬 Telegram канал с полезными советами: t.me/purple_code_channel

[@DubinArtur]

Три раза пришлось пересмотреть, чтобы понять зачем, и наконец-то понял. Полезная вещь

[@PurpleSchool]

👍

[@mexvision-3556]

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

[@hycode05]

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

[@GothBoxBoy]

В целом нововведение с container-type, container name и media container ну очень удобное. Теперь можно будет изменять содержимое различных контейнеров, делая все по отдельности вместо целой кучи в media запросе. По началу думал что смысла нет от container query ведь по media проще) потом понял фишку, а объяснение с примером отличноебез этого ролика я бы это н узнал) спасибо

[@PurpleSchool]

Пожалуйста)

[@Лаурахит]

Это прямо огонь, прям консистенция нововведений)

[@PurpleSchool]

👍

[@TimurSevimli]

Спасибо Антон, полезный ролик!

[@PurpleSchool]

Пожалуйста)

[@stoyn6826]

Шикарный канал , шикарный программист !

[@PurpleSchool]

Спасибо!

[@TeodorArg]

Спасибо за видос. О свойстве не знал, но пошел использовать в новом проекте :) !

[@PurpleSchool]

Пожалуйста!

[@Kotovar]

Шикарный ролик и шикарная особенность css :)

[@PurpleSchool]

Спасибо)

[@nastyazelenenkaya9889]

Спасибо, доступно и с примерами 👍🏽

[@PurpleSchool]

Пожалуйста!

[@gurgen5217]

Спасибо, супер объяснение.

[@PurpleSchool]

Пожалуйста)

[@АлександрИраджапов]

Спасибо, очень полезное видео, буду пробовать в своих проектах!)

[@PurpleSchool]

Рад, что понравилось

[@EvgeniyYatsenko]

о это прям то что мне нужно! только компоновать блоки внутри боковой панели. спасибо!!

[@PurpleSchool]

Пожалуйста)

[@sumrakk_]

спасибо большое за такой познавательный ролик!

[@PurpleSchool]

Пожалуйста!

[@aukyjl8400]

только вчера узнал о такой штуке и тут видосик

[@PurpleSchool]

Отлично)

[@zizzxiii2714]

Как раз неделю назад начал ее юзать ) изучать

[@PurpleSchool]

Супер)

[@vladpoezzhaev4616]

Смотрел доклад, что не стоит ими злоупотреблять. Потому что может на производительность повлиять

[@vladpoezzhaev4616]

В плане много слоев с помощью контейнеров создавать. Ограничиться основными блоками

[@PurpleSchool]

👍

[@Max.Kozlov]

супер пупер огонь! лайк и подписка

[@PurpleSchool]

Спасибо)

[@undertale-15075O]

Какие контейнер кверис У меня на проекте safari зависал из-за css grid cpu 100. Отрисовка лэйаута. Сначала не поверила, потом нашла похожее ишью в Astro js. Вот переписываю по возможности на flex. Лаги постепенно пропадают

[@7iomka]

привет) Можно пример кейса если не сложно? очень интересно

[@PurpleSchool]

Странно, не сталкивался с таким

[@undertale-15075O]

@@PurpleSchool astro github issue. [solved] Safari grid issue #6271

[@undertale-15075O]

​@@7iomka github astro issue. [solved] Safari grid issue #6271

[@Pax_Roma]

Какая связь гридов с контейнер квериз?.. Типо если то "глючит", то и новое будет? Вообще связь cpu и отрисовки в браузере сомнительна на мой взгляд. Есть возможность описать этот кейс подробнее и дать ссылочку?

[@biyrololo]

Класс

[@PurpleSchool]

@@biyrololo 👍

[@HEX_CAT]

❤❤❤

[@PurpleSchool]

♥️

[@LonelyRiderStonerBand]

Очень хорошо для строительства сложных дашбордов, интересно а Mansory view можно с помощью этого сделать?

[@PurpleSchool]

Не думаю, там более сложная логика

[@A.Floatrx]

попробуй columns

[@ОлегСелин-ш9ы]

Да, штука шикарная. Жаль так и не представилась возможность применить на работе(

[@PurpleSchool]

😧

[@Максим-д1у4щ]

🔥

[@PurpleSchool]

🔥

[@extrememod2734]

Привет. Можешь рассказать об оборудовании на котором делаешь ролики?

[@PurpleSchool]

kzbin.info/www/bejne/naSokmyYZbaFq6ssi=1oKZMxYxUNQdUqvy - сейчас немного обновил мониторы, но в остальном оно

[@musoverda]

Хм... ожидал увидеть в описании к видео - ссылку на исходник, рассмотренный в видео; обычно - так всегда делают ))

[@PurpleSchool]

@@musoverda буду добавлять, хотя тут пример простой

[@ВладимирНечаев-ь9р]

Ребят такой вопрос,сможет ли ИИ заменить фронтенд разработчиков в ближайшие 3 -5 лет?

[@PurpleSchool]

Он скорее помощник в работе, чем замена

[@ВладимирНечаев-ь9р]

@@PurpleSchool понял,спасибо)

[@mexvision-3556]

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

[@ВладимирНечаев-ь9р]

@@mexvision-3556 понял спасибо,просто в новостях постоянно пугают,что скоро выйдет chat gpt5 или что то подобное и после этого разработчикам придется не сладко,а я вот только учусь программированию,и меня пугает что через пару тройку лет стану не нужным )

[@mexvision-3556]

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

[@tildaKloun]

а что за тема у вас в vs выглядит красиво?

[@PurpleSchool]

Это PurpleSchool Theme

[@space8143]

Молодец! Только высота на английском звучит не "хейт", а "хайт" 🙂"хейт это "ненавидеть" 😁

[@AndrzejDW13]

👍

[@PurpleSchool]

👍

[@ЕвгенийБорисов-е1ч]

Это уже лет 10 назад хотел увидеть - да и зделали неудобно надо чтоб относительно обёртки карточки

[@PurpleSchool]

Что значит относительно обертки карточки?

[@ЕвгенийБорисов-е1ч]

@@PurpleSchool не относительно большого одного контейнера а контейнера каждой карточки чтобы в зависимости от количества карточек на одной строке они меняли выгляд

[@ГригорийМельник-ш8ф]

Здесь, здание, здоровье...

[@Pax_Roma]

​@@ЕвгенийБорисов-е1чтак в чем проблема? Сделай контейнер квери самой карточки и адаптируй ее контент в зависимости от ее ширины. А общий врап карточек флекс или грид, много карточек в линию, меньше их ширина - адаптив карточки.

[@daniil2704]

А зачем писать inline-size тогда? Можно же везде писать просто size и не парится если он даст и ширину и высоту, зачем ограничивать себя только шириной? Чет не вкурил. Или это для ортимизации, что сложно браузеру считать?

[@Александр-к3с2х]

Круто, но cqw и cqh не поддерживается Firefox согласно Can I use

[@PurpleSchool]

К сожалению пока да

[@ИгорьВолков1971]

Мне кажется вы заблуждаетесь

[@Александр-к3с2х]

@@ИгорьВолков1971 в чем именно?

[@Pax_Roma]

Лисичка подтянется, но факт в том что скорее всего это пока нельзя использовать на проде.

[@ИгорьВолков1971]

@@Александр-к3с2х В поддержке этих единиц Firefox. На caiuse указано вроде, что поддержка с февраля 2023. В FF Developer она по крайней мере точно есть. Поправьте, если ошибаюсь

[@progerlife6690]

Лайк и подписка на канал!

[@PurpleSchool]

Спасибо)

[@ssurrokk]

like

[@PurpleSchool]

Спасибо!

[@iGotton]

Также заказчик: нужна поддержка IE 11

[@PurpleSchool]

😆

[@Pax_Roma]

А ещё дают такое требование?)

[@mexvision-3556]

@@Pax_Roma такие прям думаю что нет. Но вот то что Chrome for Android получил поддержку 16 дней назад - является сигналом того, что использовать это еще рано. Большая доля людей не обновляют свой софт в момент выхода новых версий. Дай бог чтобы через пол года обновились.

[@ИльхамХалиуллин-ц8д]

обидно, когда приходиться поддерживать 14 версию сафари🥲

[@PurpleSchool]

😧

[@gabrielgms6051]

Информативно но пожалуйста можете при монтаже убрать чавкание&хлюпание и вздохи смотрел вас с субтитрами

[@Хорошийдруг-ц8ы]

+

[@AntowaKartowa]

Height произноситсч не как хЭйт, а хАйт

[@PurpleSchool]

Окэй)

[@ДенисКуликов-м3о]

Вообще-то правильно вЫсота

[@mexvision-3556]

Oh, mister, you amerecanez? =)

[@AntowaKartowa]

@@mexvision-3556 )) 5 лет тому работал в американском стартапе и после какого совещания с американским офисом мне сделали аналогично хАйт замечание.

[@2Extremum]

Все хорошо, но перестаньте наконец использовать max-width в тех вариантах, когда можно использовать min-width для медиазапросов. Если вы укажете стили через min, то на меньшем разрешении браузер вообще их не отрендерит и вы тем самым оптимизируете код.

[@azazinlove7514]

Что ты ***** несешь?

[@mexvision-3556]

@@azazinlove7514 Верстальщики делятся на 3 типа. От меньшего к большему, от большего к меньшему, и зануда сраная=)

[@andrejaga3003]

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

[@artlavart]

зачем себя так не любить? и заниматься мазохизмом

[@ГригорийМельник-ш8ф]

Зачем нужны container queries? Мы можем запросить ширину родителя элемента и на основе этого уже адаптировать элемент. Это означает, что мы можем запросить ширину родителя элемента и на основе этого уже адаптировать элемент. Не благодарите, кому времени жаль...

[@user-mg1mu1sn7z]

Как ты в css запросишь ширину родителя?

[@PurpleSchool]

В css кроме container queries нет возможность получить параметры родителя. А адаптировать сайт с помощью JS это просто ужасная практика

[@ГригорийМельник-ш8ф]

@@user-mg1mu1sn7z для этого потерпи и посмотри видео

[@ГригорийМельник-ш8ф]

@@user-mg1mu1sn7z вот так: @container my-container (width > 60ch) { article { flex-direction: row; } }

[@ГригорийМельник-ш8ф]

@@user-mg1mu1sn7z как медиа, только контейнер