В целом нововведение с container-type, container name и media container ну очень удобное. Теперь можно будет изменять содержимое различных контейнеров, делая все по отдельности вместо целой кучи в media запросе. По началу думал что смысла нет от container query ведь по media проще) потом понял фишку, а объяснение с примером отличноебез этого ролика я бы это н узнал) спасибо
Да, супер полезно, особенно в модульной системе, где модули могут находится в разных частях сайта. К примеру, сегодня новости - это основной контент страницы, а завтра они как модуль в сайдбаре
@@mexvision-3556 сегодня - завтра роль не играет, можно одновременно в разных местах сайта юзать, и фишка была не в том, где как юзать, а в том, что ты можешь управлять блоком в зависимости от ширины "контейнера" тобой указанного, а не как раньше в зависимости от ширины экрана
Все хорошо, но перестаньте наконец использовать max-width в тех вариантах, когда можно использовать min-width для медиазапросов. Если вы укажете стили через min, то на меньшем разрешении браузер вообще их не отрендерит и вы тем самым оптимизируете код.
Зачем нужны container queries? Мы можем запросить ширину родителя элемента и на основе этого уже адаптировать элемент. Это означает, что мы можем запросить ширину родителя элемента и на основе этого уже адаптировать элемент. Не благодарите, кому времени жаль...
Возможность действительно крутая, но я бы настоятельно не рекомендовал использовать данные свойства еще хотя бы пол года - год. Так как некоторые браузеры получили поддержку только в этом месяце, а это значит, что на данный момент, имеется куча людей с андроидами, которые не обновили свои браузеры. Людей у которых не стоит авто обновления софта очень большое количество. В админ панелях и т.п. думаю использовать можно, там доступы как правило у небольшого круга лиц, и они в случай чего обновят свои браузеры до необходимой версии. А вот в паблике, на данный момент использовать опасно. Если не хотите спорить с клиентом и объяснять ему что его пользователи динозавры, и вместо того чтобы лечить верстку, надо лечить несколько сотен человек. Ни один клиент не согласится с данными аргументами.
Какие контейнер кверис У меня на проекте safari зависал из-за css grid cpu 100. Отрисовка лэйаута. Сначала не поверила, потом нашла похожее ишью в Astro js. Вот переписываю по возможности на flex. Лаги постепенно пропадают
Какая связь гридов с контейнер квериз?.. Типо если то "глючит", то и новое будет? Вообще связь cpu и отрисовки в браузере сомнительна на мой взгляд. Есть возможность описать этот кейс подробнее и дать ссылочку?
Никак нет=))) На данный момент это не более чем справочник и рассадник примеров, что тоже круто. Но написать цельный проект и поддерживать его чисто через ИИ - это такая головная боль, что лучше руками всё сделать.
@@mexvision-3556 понял спасибо,просто в новостях постоянно пугают,что скоро выйдет chat gpt5 или что то подобное и после этого разработчикам придется не сладко,а я вот только учусь программированию,и меня пугает что через пару тройку лет стану не нужным )
@@PurpleSchool не относительно большого одного контейнера а контейнера каждой карточки чтобы в зависимости от количества карточек на одной строке они меняли выгляд
@@ЕвгенийБорисов-е1чтак в чем проблема? Сделай контейнер квери самой карточки и адаптируй ее контент в зависимости от ее ширины. А общий врап карточек флекс или грид, много карточек в линию, меньше их ширина - адаптив карточки.
@@Pax_Roma такие прям думаю что нет. Но вот то что Chrome for Android получил поддержку 16 дней назад - является сигналом того, что использовать это еще рано. Большая доля людей не обновляют свой софт в момент выхода новых версий. Дай бог чтобы через пол года обновились.
@@Александр-к3с2х В поддержке этих единиц Firefox. На caiuse указано вроде, что поддержка с февраля 2023. В FF Developer она по крайней мере точно есть. Поправьте, если ошибаюсь
Ну не понимаю я такие подходы. Может, я старомодный, но что я вижу? Засунуть весь код в один блок, да еще подгрузить тяжелые шрифты по внешней ссылке (где запросто могут запретить вас по национальному признаку) и выдать какие-то несуразные карточки с перегруженными CSS, от отрисовки которых в браузере процессор будет сходить с ума и включится вентилятор. Куда-то не туда свернул веб. Все это можно было оформить табличной версткой и слоями, тоже адаптивно и с простейшим CSS,
🔗 Ссылки:
🎓 Курс по HTML и CSS: purpleschool.ru/course/html-css
💬 Telegram канал с полезными советами:
t.me/purple_code_channel
Это прямо огонь, прям консистенция нововведений)
👍
В целом нововведение с container-type, container name и media container ну очень удобное. Теперь можно будет изменять содержимое различных контейнеров, делая все по отдельности вместо целой кучи в media запросе. По началу думал что смысла нет от container query ведь по media проще) потом понял фишку, а объяснение с примером отличноебез этого ролика я бы это н узнал) спасибо
Пожалуйста)
Смотрел доклад, что не стоит ими злоупотреблять. Потому что может на производительность повлиять
В плане много слоев с помощью контейнеров создавать. Ограничиться основными блоками
👍
Как раз неделю назад начал ее юзать ) изучать
Супер)
Три раза пришлось пересмотреть, чтобы понять зачем, и наконец-то понял. Полезная вещь
👍
Да, супер полезно, особенно в модульной системе, где модули могут находится в разных частях сайта. К примеру, сегодня новости - это основной контент страницы, а завтра они как модуль в сайдбаре
@@mexvision-3556 сегодня - завтра роль не играет, можно одновременно в разных местах сайта юзать, и фишка была не в том, где как юзать, а в том, что ты можешь управлять блоком в зависимости от ширины "контейнера" тобой указанного, а не как раньше в зависимости от ширины экрана
Хм... ожидал увидеть в описании к видео - ссылку на исходник, рассмотренный в видео; обычно - так всегда делают ))
@@musoverda буду добавлять, хотя тут пример простой
Класс
@@biyrololo 👍
🔥
🔥
like
Спасибо!
Все хорошо, но перестаньте наконец использовать max-width в тех вариантах, когда можно использовать min-width для медиазапросов. Если вы укажете стили через min, то на меньшем разрешении браузер вообще их не отрендерит и вы тем самым оптимизируете код.
Что ты ***** несешь?
@@azazinlove7514 Верстальщики делятся на 3 типа. От меньшего к большему, от большего к меньшему, и зануда сраная=)
Зачем нужны container queries? Мы можем запросить ширину родителя элемента и на основе этого уже адаптировать элемент. Это означает, что мы можем запросить ширину родителя элемента и на основе этого уже адаптировать элемент. Не благодарите, кому времени жаль...
Как ты в css запросишь ширину родителя?
В css кроме container queries нет возможность получить параметры родителя. А адаптировать сайт с помощью JS это просто ужасная практика
@@user-mg1mu1sn7z для этого потерпи и посмотри видео
@@user-mg1mu1sn7z вот так:
@container my-container (width > 60ch) {
article {
flex-direction: row;
}
}
@@user-mg1mu1sn7z как медиа, только контейнер
Возможность действительно крутая, но я бы настоятельно не рекомендовал использовать данные свойства еще хотя бы пол года - год. Так как некоторые браузеры получили поддержку только в этом месяце, а это значит, что на данный момент, имеется куча людей с андроидами, которые не обновили свои браузеры. Людей у которых не стоит авто обновления софта очень большое количество. В админ панелях и т.п. думаю использовать можно, там доступы как правило у небольшого круга лиц, и они в случай чего обновят свои браузеры до необходимой версии. А вот в паблике, на данный момент использовать опасно. Если не хотите спорить с клиентом и объяснять ему что его пользователи динозавры, и вместо того чтобы лечить верстку, надо лечить несколько сотен человек. Ни один клиент не согласится с данными аргументами.
Молодец! Только высота на английском звучит не "хейт", а "хайт" 🙂"хейт это "ненавидеть" 😁
Да, штука шикарная. Жаль так и не представилась возможность применить на работе(
😧
Какие контейнер кверис
У меня на проекте 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 и отрисовки в браузере сомнительна на мой взгляд. Есть возможность описать этот кейс подробнее и дать ссылочку?
обидно, когда приходиться поддерживать 14 версию сафари🥲
😧
Шикарный ролик и шикарная особенность css :)
Спасибо)
Спасибо за видос. О свойстве не знал, но пошел использовать в новом проекте :) !
Пожалуйста!
Height произноситсч не как хЭйт, а хАйт
Окэй)
Вообще-то правильно вЫсота
Oh, mister, you amerecanez? =)
@@mexvision-3556 )) 5 лет тому работал в американском стартапе и после какого совещания с американским офисом мне сделали аналогично хАйт замечание.
❤❤❤
♥️
только вчера узнал о такой штуке и тут видосик
Отлично)
Ребят такой вопрос,сможет ли ИИ заменить фронтенд разработчиков в ближайшие 3 -5 лет?
Он скорее помощник в работе, чем замена
@@PurpleSchool понял,спасибо)
Никак нет=))) На данный момент это не более чем справочник и рассадник примеров, что тоже круто. Но написать цельный проект и поддерживать его чисто через ИИ - это такая головная боль, что лучше руками всё сделать.
@@mexvision-3556 понял спасибо,просто в новостях постоянно пугают,что скоро выйдет chat gpt5 или что то подобное и после этого разработчикам придется не сладко,а я вот только учусь программированию,и меня пугает что через пару тройку лет стану не нужным )
Спасибо, супер объяснение.
Пожалуйста)
Это уже лет 10 назад хотел увидеть - да и зделали неудобно надо чтоб относительно обёртки карточки
Что значит относительно обертки карточки?
@@PurpleSchool не относительно большого одного контейнера а контейнера каждой карточки чтобы в зависимости от количества карточек на одной строке они меняли выгляд
Здесь, здание, здоровье...
@@ЕвгенийБорисов-е1чтак в чем проблема? Сделай контейнер квери самой карточки и адаптируй ее контент в зависимости от ее ширины. А общий врап карточек флекс или грид, много карточек в линию, меньше их ширина - адаптив карточки.
Спасибо, доступно и с примерами 👍🏽
Пожалуйста!
Привет. Можешь рассказать об оборудовании на котором делаешь ролики?
ruclips.net/video/gsEa9b0QRuI/видео.htmlsi=1oKZMxYxUNQdUqvy - сейчас немного обновил мониторы, но в остальном оно
Спасибо, очень полезное видео, буду пробовать в своих проектах!)
Рад, что понравилось
👍
👍
спасибо большое за такой познавательный ролик!
Пожалуйста!
о это прям то что мне нужно! только компоновать блоки внутри боковой панели. спасибо!!
Пожалуйста)
Шикарный канал , шикарный программист !
Спасибо!
Очень хорошо для строительства сложных дашбордов, интересно а Mansory view можно с помощью этого сделать?
Не думаю, там более сложная логика
попробуй columns
а что за тема у вас в vs выглядит красиво?
Это PurpleSchool Theme
Лайк и подписка на канал!
Спасибо)
супер пупер огонь! лайк и подписка
Спасибо)
Информативно но пожалуйста можете при монтаже убрать чавкание&хлюпание и вздохи смотрел вас с субтитрами
+
Также заказчик: нужна поддержка IE 11
😆
А ещё дают такое требование?)
@@Pax_Roma такие прям думаю что нет. Но вот то что Chrome for Android получил поддержку 16 дней назад - является сигналом того, что использовать это еще рано. Большая доля людей не обновляют свой софт в момент выхода новых версий. Дай бог чтобы через пол года обновились.
Круто, но cqw и cqh не поддерживается Firefox согласно Can I use
К сожалению пока да
Мне кажется вы заблуждаетесь
@@ИгорьВолков-ж6ц в чем именно?
Лисичка подтянется, но факт в том что скорее всего это пока нельзя использовать на проде.
@@Александр-к3с2х В поддержке этих единиц Firefox. На caiuse указано вроде, что поддержка с февраля 2023. В FF Developer она по крайней мере точно есть. Поправьте, если ошибаюсь
Ну не понимаю я такие подходы. Может, я старомодный, но что я вижу? Засунуть весь код в один блок, да еще подгрузить тяжелые шрифты по внешней ссылке (где запросто могут запретить вас по национальному признаку) и выдать какие-то несуразные карточки с перегруженными CSS, от отрисовки которых в браузере процессор будет сходить с ума и включится вентилятор. Куда-то не туда свернул веб. Все это можно было оформить табличной версткой и слоями, тоже адаптивно и с простейшим CSS,