CSS container queries это огонь 🔥
Вставка
- Опубліковано 28 чер 2024
- Сегодня мы разберём CSS container queries как их использовать и для каких случаев.
🔗 Ссылки:
🎓 Курс по HTML и CSS: purpleschool.ru/course/html-css
💬 Telegram канал с полезными советами:
t.me/purple_code_channel
Разделы видео:
0:00 - Введение
0:20 - Зачем нужны
3:52 - Использование container queries
7:02 - container-name
9:32 - cqw и cqh
12:25 - Поддержка браузеров
13:09 - Заключение
🔗 Ссылки:
🎓 Курс по HTML и CSS: purpleschool.ru/course/html-css
💬 Telegram канал с полезными советами:
t.me/purple_code_channel
Три раза пришлось пересмотреть, чтобы понять зачем, и наконец-то понял. Полезная вещь
👍
Да, супер полезно, особенно в модульной системе, где модули могут находится в разных частях сайта. К примеру, сегодня новости - это основной контент страницы, а завтра они как модуль в сайдбаре
Это прямо огонь, прям консистенция нововведений)
👍
Спасибо за видос. О свойстве не знал, но пошел использовать в новом проекте :) !
Пожалуйста!
Шикарный ролик и шикарная особенность css :)
Спасибо)
Спасибо, доступно и с примерами 👍🏽
Пожалуйста!
Спасибо, очень полезное видео, буду пробовать в своих проектах!)
Рад, что понравилось
Шикарный канал , шикарный программист !
Спасибо!
Спасибо, супер объяснение.
Пожалуйста)
спасибо большое за такой познавательный ролик!
Пожалуйста!
В целом нововведение с container-type, container name и media container ну очень удобное. Теперь можно будет изменять содержимое различных контейнеров, делая все по отдельности вместо целой кучи в media запросе. По началу думал что смысла нет от container query ведь по media проще) потом понял фишку, а объяснение с примером отличноебез этого ролика я бы это н узнал) спасибо
Пожалуйста)
супер пупер огонь! лайк и подписка
Спасибо)
только вчера узнал о такой штуке и тут видосик
Отлично)
о это прям то что мне нужно! только компоновать блоки внутри боковой панели. спасибо!!
Пожалуйста)
Как раз неделю назад начал ее юзать ) изучать
Супер)
Возможность действительно крутая, но я бы настоятельно не рекомендовал использовать данные свойства еще хотя бы пол года - год. Так как некоторые браузеры получили поддержку только в этом месяце, а это значит, что на данный момент, имеется куча людей с андроидами, которые не обновили свои браузеры. Людей у которых не стоит авто обновления софта очень большое количество. В админ панелях и т.п. думаю использовать можно, там доступы как правило у небольшого круга лиц, и они в случай чего обновят свои браузеры до необходимой версии. А вот в паблике, на данный момент использовать опасно. Если не хотите спорить с клиентом и объяснять ему что его пользователи динозавры, и вместо того чтобы лечить верстку, надо лечить несколько сотен человек. Ни один клиент не согласится с данными аргументами.
Молодец! Только высота на английском звучит не "хейт", а "хайт" 🙂"хейт это "ненавидеть" 😁
🔥
🔥
Да, штука шикарная. Жаль так и не представилась возможность применить на работе(
😧
Лайк и подписка на канал!
Спасибо)
❤❤❤
♥️
👍
👍
Это уже лет 10 назад хотел увидеть - да и зделали неудобно надо чтоб относительно обёртки карточки
Что значит относительно обертки карточки?
@@PurpleSchool не относительно большого одного контейнера а контейнера каждой карточки чтобы в зависимости от количества карточек на одной строке они меняли выгляд
Здесь, здание, здоровье...
@@user-pi3em2ke2lтак в чем проблема? Сделай контейнер квери самой карточки и адаптируй ее контент в зависимости от ее ширины. А общий врап карточек флекс или грид, много карточек в линию, меньше их ширина - адаптив карточки.
Смотрел доклад, что не стоит ими злоупотреблять. Потому что может на производительность повлиять
В плане много слоев с помощью контейнеров создавать. Ограничиться основными блоками
👍
like
Спасибо!
Очень хорошо для строительства сложных дашбордов, интересно а Mansory view можно с помощью этого сделать?
Не думаю, там более сложная логика
попробуй columns
Какие контейнер кверис
У меня на проекте safari зависал из-за css grid cpu 100. Отрисовка лэйаута. Сначала не поверила, потом нашла похожее ишью в Astro js. Вот переписываю по возможности на flex. Лаги постепенно пропадают
привет) Можно пример кейса если не сложно? очень интересно
Странно, не сталкивался с таким
@@PurpleSchool astro github issue. [solved] Safari grid issue #6271
@@7iomka github astro issue. [solved] Safari grid issue #6271
Какая связь гридов с контейнер квериз?.. Типо если то "глючит", то и новое будет? Вообще связь cpu и отрисовки в браузере сомнительна на мой взгляд. Есть возможность описать этот кейс подробнее и дать ссылочку?
Привет. Можешь рассказать об оборудовании на котором делаешь ролики?
ua-cam.com/video/gsEa9b0QRuI/v-deo.htmlsi=1oKZMxYxUNQdUqvy - сейчас немного обновил мониторы, но в остальном оно
а что за тема у вас в vs выглядит красиво?
Это PurpleSchool Theme
Ребят такой вопрос,сможет ли ИИ заменить фронтенд разработчиков в ближайшие 3 -5 лет?
Он скорее помощник в работе, чем замена
@@PurpleSchool понял,спасибо)
Никак нет=))) На данный момент это не более чем справочник и рассадник примеров, что тоже круто. Но написать цельный проект и поддерживать его чисто через ИИ - это такая головная боль, что лучше руками всё сделать.
@@mexvision-3556 понял спасибо,просто в новостях постоянно пугают,что скоро выйдет chat gpt5 или что то подобное и после этого разработчикам придется не сладко,а я вот только учусь программированию,и меня пугает что через пару тройку лет стану не нужным )
Круто, но cqw и cqh не поддерживается Firefox согласно Can I use
К сожалению пока да
Мне кажется вы заблуждаетесь
@@user-wx7rd2je8v в чем именно?
Лисичка подтянется, но факт в том что скорее всего это пока нельзя использовать на проде.
@@user-ie7em2oi4m В поддержке этих единиц Firefox. На caiuse указано вроде, что поддержка с февраля 2023. В FF Developer она по крайней мере точно есть. Поправьте, если ошибаюсь
Также заказчик: нужна поддержка IE 11
😆
А ещё дают такое требование?)
@@Pax_Roma такие прям думаю что нет. Но вот то что Chrome for Android получил поддержку 16 дней назад - является сигналом того, что использовать это еще рано. Большая доля людей не обновляют свой софт в момент выхода новых версий. Дай бог чтобы через пол года обновились.
обидно, когда приходиться поддерживать 14 версию сафари🥲
😧
Height произноситсч не как хЭйт, а хАйт
Окэй)
Вообще-то правильно вЫсота
Oh, mister, you amerecanez? =)
@@mexvision-3556 )) 5 лет тому работал в американском стартапе и после какого совещания с американским офисом мне сделали аналогично хАйт замечание.
Все хорошо, но перестаньте наконец использовать max-width в тех вариантах, когда можно использовать min-width для медиазапросов. Если вы укажете стили через min, то на меньшем разрешении браузер вообще их не отрендерит и вы тем самым оптимизируете код.
Что ты ***** несешь?
@@azazinlove7514 Верстальщики делятся на 3 типа. От меньшего к большему, от большего к меньшему, и зануда сраная=)
Информативно но пожалуйста можете при монтаже убрать чавкание&хлюпание и вздохи смотрел вас с субтитрами
+
Ну не понимаю я такие подходы. Может, я старомодный, но что я вижу? Засунуть весь код в один блок, да еще подгрузить тяжелые шрифты по внешней ссылке (где запросто могут запретить вас по национальному признаку) и выдать какие-то несуразные карточки с перегруженными CSS, от отрисовки которых в браузере процессор будет сходить с ума и включится вентилятор. Куда-то не туда свернул веб. Все это можно было оформить табличной версткой и слоями, тоже адаптивно и с простейшим CSS,
Зачем нужны container queries? Мы можем запросить ширину родителя элемента и на основе этого уже адаптировать элемент. Это означает, что мы можем запросить ширину родителя элемента и на основе этого уже адаптировать элемент. Не благодарите, кому времени жаль...
Как ты в css запросишь ширину родителя?
В css кроме container queries нет возможность получить параметры родителя. А адаптировать сайт с помощью JS это просто ужасная практика
@@user-mg1mu1sn7z для этого потерпи и посмотри видео
@@user-mg1mu1sn7z вот так:
@container my-container (width > 60ch) {
article {
flex-direction: row;
}
}
@@user-mg1mu1sn7z как медиа, только контейнер