CSS container queries это огонь 🔥
ฝัง
- เผยแพร่เมื่อ 24 มิ.ย. 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 проще) потом понял фишку, а объяснение с примером отличноебез этого ролика я бы это н узнал) спасибо
Пожалуйста)
о это прям то что мне нужно! только компоновать блоки внутри боковой панели. спасибо!!
Пожалуйста)
🔥
🔥
Как раз неделю назад начал ее юзать ) изучать
Супер)
Молодец! Только высота на английском звучит не "хейт", а "хайт" 🙂"хейт это "ненавидеть" 😁
👍
👍
Лайк и подписка на канал!
Спасибо)
Да, штука шикарная. Жаль так и не представилась возможность применить на работе(
😧
like
Спасибо!
Очень хорошо для строительства сложных дашбордов, интересно а Mansory view можно с помощью этого сделать?
Не думаю, там более сложная логика
попробуй columns
Привет. Можешь рассказать об оборудовании на котором делаешь ролики?
th-cam.com/video/gsEa9b0QRuI/w-d-xo.htmlsi=1oKZMxYxUNQdUqvy - сейчас немного обновил мониторы, но в остальном оно
Это уже лет 10 назад хотел увидеть - да и зделали неудобно надо чтоб относительно обёртки карточки
Что значит относительно обертки карточки?
@@PurpleSchool не относительно большого одного контейнера а контейнера каждой карточки чтобы в зависимости от количества карточек на одной строке они меняли выгляд
Здесь, здание, здоровье...
@@user-pi3em2ke2lтак в чем проблема? Сделай контейнер квери самой карточки и адаптируй ее контент в зависимости от ее ширины. А общий врап карточек флекс или грид, много карточек в линию, меньше их ширина - адаптив карточки.
Какие контейнер кверис
У меня на проекте 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 и отрисовки в браузере сомнительна на мой взгляд. Есть возможность описать этот кейс подробнее и дать ссылочку?
а что за тема у вас в vs выглядит красиво?
Это PurpleSchool Theme
Также заказчик: нужна поддержка IE 11
😆
А ещё дают такое требование?)
Круто, но cqw и cqh не поддерживается Firefox согласно Can I use
К сожалению пока да
Мне кажется вы заблуждаетесь
@@user-wx7rd2je8v в чем именно?
Лисичка подтянется, но факт в том что скорее всего это пока нельзя использовать на проде.
@@user-ie7em2oi4m В поддержке этих единиц Firefox. На caiuse указано вроде, что поддержка с февраля 2023. В FF Developer она по крайней мере точно есть. Поправьте, если ошибаюсь
Height произноситсч не как хЭйт, а хАйт
Окэй)
Вообще-то правильно вЫсота
Все хорошо, но перестаньте наконец использовать max-width в тех вариантах, когда можно использовать min-width для медиазапросов. Если вы укажете стили через min, то на меньшем разрешении браузер вообще их не отрендерит и вы тем самым оптимизируете код.
Что ты ***** несешь?
Информативно но пожалуйста можете при монтаже убрать чавкание&хлюпание и вздохи смотрел вас с субтитрами
+
Ну не понимаю я такие подходы. Может, я старомодный, но что я вижу? Засунуть весь код в один блок, да еще подгрузить тяжелые шрифты по внешней ссылке (где запросто могут запретить вас по национальному признаку) и выдать какие-то несуразные карточки с перегруженными CSS, от отрисовки которых в браузере процессор будет сходить с ума и включится вентилятор. Куда-то не туда свернул веб. Все это можно было оформить табличной версткой и слоями, тоже адаптивно и с простейшим CSS,
Зачем нужны container queries? Мы можем запросить ширину родителя элемента и на основе этого уже адаптировать элемент. Это означает, что мы можем запросить ширину родителя элемента и на основе этого уже адаптировать элемент. Не благодарите, кому времени жаль...
Как ты в css запросишь ширину родителя?
В css кроме container queries нет возможность получить параметры родителя. А адаптировать сайт с помощью JS это просто ужасная практика
@@user-mg1mu1sn7z для этого потерпи и посмотри видео
@@user-mg1mu1sn7z вот так:
@container my-container (width > 60ch) {
article {
flex-direction: row;
}
}
@@user-mg1mu1sn7z как медиа, только контейнер