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

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 พ.ย. 2024

ความคิดเห็น • 149

  • @viktormoskalev2269
    @viktormoskalev2269 3 ปีที่แล้ว +38

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

  • @it2341
    @it2341 3 ปีที่แล้ว +6

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

  • @Dukhevych
    @Dukhevych 3 ปีที่แล้ว +35

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

    • @kirillriman3611
      @kirillriman3611 3 ปีที่แล้ว +2

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

    • @Dukhevych
      @Dukhevych 3 ปีที่แล้ว

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

    • @gavrstanislav999
      @gavrstanislav999 3 ปีที่แล้ว

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

    • @Запискисамоучки
      @Запискисамоучки 3 ปีที่แล้ว +1

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

  • @KIperad
    @KIperad 3 ปีที่แล้ว

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

  • @risovye_polya
    @risovye_polya 3 ปีที่แล้ว

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

  • @romanpopov8836
    @romanpopov8836 3 ปีที่แล้ว +1

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

  • @ihopeingod1
    @ihopeingod1 2 ปีที่แล้ว +1

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

  • @MrShnaiderTV
    @MrShnaiderTV 3 ปีที่แล้ว +1

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

  • @egorshnel986
    @egorshnel986 3 ปีที่แล้ว

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

  • @KlinovAS
    @KlinovAS 3 ปีที่แล้ว +1

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

  • @NOX_69RUS
    @NOX_69RUS 3 ปีที่แล้ว

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

  • @rasulturganov3421
    @rasulturganov3421 3 ปีที่แล้ว

    Круто!!

  • @YellowPanamka
    @YellowPanamka 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว +1

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

    • @YellowPanamka
      @YellowPanamka 3 ปีที่แล้ว

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

  • @rendalf256
    @rendalf256 3 ปีที่แล้ว

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

  • @ГеоргийЖуравлев-к2ъ
    @ГеоргийЖуравлев-к2ъ 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

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

  • @ms77grz
    @ms77grz 3 ปีที่แล้ว

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

  • @wimanen
    @wimanen 3 ปีที่แล้ว +15

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

  • @Stas-ir3gh
    @Stas-ir3gh ปีที่แล้ว

    Спасибо

  • @lenaryan
    @lenaryan 3 ปีที่แล้ว +61

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

  • @eldarda
    @eldarda 3 ปีที่แล้ว +1

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

  • @DennisS-h4b
    @DennisS-h4b 3 ปีที่แล้ว

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

  • @olegivanov6231
    @olegivanov6231 3 ปีที่แล้ว

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

  • @artemsdobnikov259
    @artemsdobnikov259 3 ปีที่แล้ว

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

  • @Secrets-YoutubeRu
    @Secrets-YoutubeRu 3 ปีที่แล้ว

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

  • @vadymliesin9219
    @vadymliesin9219 3 ปีที่แล้ว +1

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

  • @aliaksandrk3338
    @aliaksandrk3338 3 ปีที่แล้ว

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

  • @Disorrder
    @Disorrder 3 ปีที่แล้ว

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

  • @constantinerafikov
    @constantinerafikov 3 ปีที่แล้ว

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

  • @maghicugi7418
    @maghicugi7418 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

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

    • @АлександрБанин-ь4х
      @АлександрБанин-ь4х 3 ปีที่แล้ว

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

  • @evgeny_mdr
    @evgeny_mdr 3 ปีที่แล้ว +2

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

  • @zapiski_verstalshika
    @zapiski_verstalshika 3 ปีที่แล้ว +1

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

  • @kirillkononov5094
    @kirillkononov5094 3 ปีที่แล้ว

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

  • @vm5786
    @vm5786 3 ปีที่แล้ว

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

  • @EirikUa
    @EirikUa 3 ปีที่แล้ว

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

  • @a.osethkin55
    @a.osethkin55 3 ปีที่แล้ว

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

  • @zalexstudios
    @zalexstudios 3 ปีที่แล้ว

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

  • @NicolaFrunza
    @NicolaFrunza 3 ปีที่แล้ว

    Super

  • @AbraKadabra000
    @AbraKadabra000 3 ปีที่แล้ว

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

  • @MrVertu01
    @MrVertu01 3 ปีที่แล้ว

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

  • @Илья-с1л6э
    @Илья-с1л6э 3 ปีที่แล้ว

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

  • @xcrashful
    @xcrashful 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

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

  • @asmix7328
    @asmix7328 3 ปีที่แล้ว

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

  • @шмяка
    @шмяка 3 ปีที่แล้ว

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

  • @АндрейГоловкин-и5й
    @АндрейГоловкин-и5й 3 ปีที่แล้ว

    Круть)

  • @YevhenZhuchenko
    @YevhenZhuchenko 3 ปีที่แล้ว +2

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

  • @rnikolaenkov
    @rnikolaenkov 3 ปีที่แล้ว +1

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

  • @timurkhudiyev
    @timurkhudiyev 3 ปีที่แล้ว

    Шикарно)

  • @development76
    @development76 3 ปีที่แล้ว

    Крутооо!!!

  • @mpcomp12
    @mpcomp12 3 ปีที่แล้ว +1

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

  • @мэйз-у9ю
    @мэйз-у9ю 3 ปีที่แล้ว +6

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

  • @nshebeko
    @nshebeko 3 ปีที่แล้ว

    огонь жду!

  • @Chetanoo
    @Chetanoo 3 ปีที่แล้ว

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

  • @ivanmalenko356
    @ivanmalenko356 3 ปีที่แล้ว +1

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว +3

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

  • @DienelEsida
    @DienelEsida 3 ปีที่แล้ว

    Браво

  • @EvgenichTalagaev
    @EvgenichTalagaev 3 ปีที่แล้ว

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

  • @GilyazovAydar
    @GilyazovAydar 3 ปีที่แล้ว

    Кайф

  • @it_doc2319
    @it_doc2319 3 ปีที่แล้ว

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

  • @KlinovAS
    @KlinovAS 2 ปีที่แล้ว

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

    • @semerset
      @semerset 2 ปีที่แล้ว

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

  • @Junckovski
    @Junckovski 3 ปีที่แล้ว +1

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

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

    • @Junckovski
      @Junckovski 3 ปีที่แล้ว

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

  • @POEOneLove
    @POEOneLove 3 ปีที่แล้ว

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

  • @gavrstanislav999
    @gavrstanislav999 3 ปีที่แล้ว +12

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว +11

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

  • @СуликДжун
    @СуликДжун 3 ปีที่แล้ว +1

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว +2

      teejungle.net/

  • @macgera
    @macgera 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว +1

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

    • @macgera
      @macgera 3 ปีที่แล้ว

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

    • @АлександрБанин-ь4х
      @АлександрБанин-ь4х 3 ปีที่แล้ว

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

  • @XATADOM
    @XATADOM 3 ปีที่แล้ว

    Дякую

  • @МаксимМельник-ч2о
    @МаксимМельник-ч2о 2 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  2 ปีที่แล้ว

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

    • @МаксимМельник-ч2о
      @МаксимМельник-ч2о 2 ปีที่แล้ว

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

  • @IvanLukyanets
    @IvanLukyanets 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว +1

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

  • @k.safonov
    @k.safonov 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว +1

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

  • @yslpn
    @yslpn 3 ปีที่แล้ว +4

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

  • @Black1991Star
    @Black1991Star 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว +1

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

  • @GuiderWGM
    @GuiderWGM 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

      teejungle.net/

  • @burnspirt
    @burnspirt 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

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

  • @eldarda
    @eldarda 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว +1

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

  • @volodymyrkorniienko8670
    @volodymyrkorniienko8670 3 ปีที่แล้ว

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

  • @irustv7674
    @irustv7674 3 ปีที่แล้ว +1

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

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

    • @irustv7674
      @irustv7674 3 ปีที่แล้ว

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

  • @aprinciple9559
    @aprinciple9559 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว +1

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

  • @popuguytheparrot_
    @popuguytheparrot_ 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

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

  • @Sacar666
    @Sacar666 3 ปีที่แล้ว

    С 1 апреля

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

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

  • @levsonc
    @levsonc 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

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

  • @UbivanKenobi-q6y
    @UbivanKenobi-q6y 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

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

  • @ПакоОфициальный
    @ПакоОфициальный 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

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

  • @k.ayvazov
    @k.ayvazov 3 ปีที่แล้ว +1

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว +1

      teejungle.net/

  • @dmtr_ptrv
    @dmtr_ptrv 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

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

  • @ЯрославДмитриев-ю1ю
    @ЯрославДмитриев-ю1ю 3 ปีที่แล้ว +1

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

  • @Dukhevych
    @Dukhevych 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

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

    • @Dukhevych
      @Dukhevych 3 ปีที่แล้ว

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

    • @yura3d3d
      @yura3d3d 3 ปีที่แล้ว

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

  • @alienspro
    @alienspro 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

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

  • @astranik
    @astranik 3 ปีที่แล้ว +1

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว +3

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

    • @astranik
      @astranik 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว +3

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

    • @dmitry.gashko
      @dmitry.gashko 3 ปีที่แล้ว

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

  • @thecatwrites9731
    @thecatwrites9731 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

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

    • @thecatwrites9731
      @thecatwrites9731 3 ปีที่แล้ว

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

  • @KDevJS
    @KDevJS 3 ปีที่แล้ว +2

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

      Всё всерьёз!

  • @it2341
    @it2341 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

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

    • @it2341
      @it2341 3 ปีที่แล้ว

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

  • @dobramorda9818
    @dobramorda9818 ปีที่แล้ว

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

  • @deevue_sews
    @deevue_sews 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว +1

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

  • @MaksymMinenko
    @MaksymMinenko 3 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  3 ปีที่แล้ว

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

  • @КостянЕрмаков-е9ю
    @КостянЕрмаков-е9ю 3 ปีที่แล้ว +1

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

  • @SuperTRISTAN888
    @SuperTRISTAN888 2 ปีที่แล้ว

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

    • @pepelsbey
      @pepelsbey  2 ปีที่แล้ว +1

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