Тёмный

Новые единицы измерения CSS: cqw, cqh, cqi, cqb, cqmax, cqmin 

Анна Блок
Подписаться 102 тыс.
Просмотров 31 тыс.
50% 1

🔥 23 января (далее 13 марта) стартует обучение по базовой и продвинутой по верстке и JavaScript ❤️ Скидка 10% за заявку 👉 forms.gle/Q5uKoU9HCX3Tmg6g6
Наш сайт с обучениям - frontendblok.com/
В этом видео на простых примерах разбирём возможности новых единиц измерения: cqw, cqh, cqi, cqb, cqmax, cqmin.
Дока про единицы измерения CSS Container - www.w3.org/TR/css-contain-3/#...
Практика CSS Container - • Верстаем сайт с CSS Co...
Пример №1 - codepen.io/anna_blok/pen/ZEjpjXN
Пример №2 - codepen.io/anna_blok/pen/VwBK...
Таймкоды:
00:00 Вступление
00:27 Задачки по JS в Телеграм
00:43 Скидка 10% на обучение
02:18 Про cqw и cqh
06:07 Про cqmin и cqmin
08:06 Пример cqmin и cqmin
09:50 Про cqi
11:41 Добавляем clamp()
16:23 Про поддержку единиц измерения
16:58 Про cqb
🔵 Дзен - zen.yandex.ru/annblok
🔵 ВК - tpverstak
🔵 Telegram - t.me/tpverstak
🔵 Чат Telegram - t.me/tpverstakchat
🔵 Instagram - / annblok
🔵 TikTok - / annblok_webdev
🔴 Задать вопрос - frontendhelp.me/ru
🔴 Обучение - frontendblok.com/

Опубликовано:

 

31 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 107   
@p_boyko
@p_boyko Год назад
Отвернуться на полгода нельзя... Понапридумывали тут) Спасибо!
@andreylagno2372
@andreylagno2372 Год назад
время не стоит на месте.это же не жизнь в средневековье
@eugenegrosmanis
@eugenegrosmanis Год назад
😄 точно
@MegaPupizoid
@MegaPupizoid Год назад
@@andreylagno2372 В средневековье за такое сожгли бы
@user-fl6dd6fk1p
@user-fl6dd6fk1p Год назад
Ти справжня молодчинка. Дякую за таку корисну інформацію. Цікаве відео.
@user-dw2tc4cq9x
@user-dw2tc4cq9x Год назад
Век живи - век учись! И конца знаниям нет...
@yuritian8830
@yuritian8830 6 месяцев назад
У меня нет подходящих матов, чтобы выразить своё восхищение!!!
@LostInspector
@LostInspector Год назад
Это просто мега полезный урок! Я раньше думал, что с емами и ремами всё просто, а тут открыл для себя много нового.
@marinagor
@marinagor Год назад
классно так рассказано, все понятно, что другие источники больше не нужны)
@goldsmallfish6732
@goldsmallfish6732 Год назад
Спасибо. Вопросов по новым единицам измерения действительно много.
@sashabest1479
@sashabest1479 Год назад
Для новичков это будет продуктивная информация, как знать, возможно кому-то попадется задание с такими измерениями.
@fiaskomen8320
@fiaskomen8320 Год назад
Я несколько единиц измерения уже проверил, но с удовольствием посмотрю остальные. СпасибО!
@user-wl7kt4su9x
@user-wl7kt4su9x Год назад
Канал просто бомба. Автор рассказывает очень интересно, коротко и заинтересованно. Мне очень нравится.
@user-olena_shatun
@user-olena_shatun Год назад
А я думала это очень сложно и непонятно, но после вашего видео в голове все систематизировалось и стало на свои места
@veles8431
@veles8431 Год назад
Все как всегда понятно и подробно показала мне нравится ролик.
@user-pb5rx3hj2r
@user-pb5rx3hj2r Год назад
Довольна интересно, очень полезное видео для тех кто хочет заниматься разработки веб сайтов)
@anastasiakotova2664
@anastasiakotova2664 Год назад
Очень ясно и понятно рассказываете, каких либо вопросов не возникло, спасибо большое)
@user-pb6le8kc8p
@user-pb6le8kc8p Год назад
Отличный обзор.Оченьпросто и доходчиво объяснил ,самое то чтобы отточить свои навыки .Жду выхода новых Ваших видео .
@sergeymickolaenko1161
@sergeymickolaenko1161 Год назад
Замечательное видео, приятно слушать настоящего профессионала!
@elinalara1752
@elinalara1752 Год назад
Очень четко и с обращением внимания на детали. Вы не перескакиваете с одного на другого и очень удобно по вашим занятиям разбираться.
@user-hs7fi5se4f
@user-hs7fi5se4f Год назад
Понятно и просто всё объяснили , видео получилось информативным и полезным.
@user-hs9my8yb3j
@user-hs9my8yb3j Год назад
Как быстро всё развивается, не успеваешь за всем следить. Спасибо за видео, кратко и по теме.
@Mimokrorodil
@Mimokrorodil Год назад
Вот именно. Хочется задать вопрос: А зачем это все? Какая конечная цель? Интернет - обоюдоострая бритва, и пока что большинству людей она просто режет руки.
@user-px3my8ko1d
@user-px3my8ko1d Год назад
Благодарю за отличное разъяснение о новых единицах измерения CSS...
@Dragin_work
@Dragin_work Год назад
новички, обязательно проверяйте все новые возможности через can i use, чтобы потом клиент не пришел к вам почему в сафари не работает к примеру, и придется все переписывать
@DerAleksey
@DerAleksey Год назад
Какая удобная штучка для адаптивности)
@JeanaUchiha
@JeanaUchiha Год назад
Спасибо, что делитесь своими знаниями и помогаете во всем разобраться так просто и без заумных объяснений
@user-bf5uz7qg3n
@user-bf5uz7qg3n Год назад
благодарю за информативный ролик, доходчиво все объяснили
@user-we1ty5iy6y
@user-we1ty5iy6y Год назад
Видео полезное, спасибо, ещё круто выглядит освещение фона (голубое/красное), подскажешь, плз, что используешь?
@assoigor
@assoigor Год назад
Спасибо Анна, оч выручаешь, у самого времени не хватает на всё, ориентируюсь на тебя!! Всё новое, изменения и пр. в вебе узнаю сейчас от тебя!! еше раз спасибо!! ps: иии ты сама такая классненькая, симпатичная, приятная, и чемто притягательная), что тоже залипаешь и от этого) Спасибо и за это)
@global7649
@global7649 Год назад
вот вы дрочеры. вам информация нужна или баба накрашенная?
@rashvmatrix9387
@rashvmatrix9387 Год назад
Обучаюсь вместе с вами и благодаря вам. Большая благодарность за новые уроки.
@seokmin5112
@seokmin5112 Год назад
Очень полезно, спасибо, что делитесь такой информацией. Один из лучших уроков, которые я смотрела
@user-kr8vy3pp6b
@user-kr8vy3pp6b Год назад
Спасибо, мало времени для изучения и разбора, но с тобой это понятнее и быстрее
@dimalukashenko4865
@dimalukashenko4865 Год назад
Хорошее видео, спасибо за труд!
@gabber3502
@gabber3502 Год назад
Информация очень полезная,доходчиво и понятно разъясняете и наглядно показываете.
@user-rk2tt8uc4j
@user-rk2tt8uc4j Год назад
отличное видео очень позитивное и веселое . спасибо
@doremirex
@doremirex Год назад
В FF пока не работает, в iOS работает только с версии 16.0. Через годик можно будет смело юзать :) А пока увы... А видео отличное, спасибо!👍
@andreasshev5748
@andreasshev5748 Год назад
Анна, огромное спасибо за выпуск!
@astorina_irina9907
@astorina_irina9907 Год назад
Было очень полезно, спасибо 😀
@tanyamatvienko664
@tanyamatvienko664 Год назад
Вау какие полезные знания, спасибо большое что вы поделились
@rabirai8136
@rabirai8136 Год назад
Спасибо за ролик Анна узнал много нового для себя.
@viktordybach8763
@viktordybach8763 Год назад
Очень понятный, информативный обзор. Спасибо
@user-nz7ln3hl5k
@user-nz7ln3hl5k Год назад
А чем отличается height 10cqh от height 10%?
@PearlDpUa
@PearlDpUa Год назад
Это для тех кто очень любит адаптивность) Хотя мне всегда хватало и % обычных.
@jonsmith9748
@jonsmith9748 Год назад
Это все круто и полезно, но как опытный верстала скажу так, это все можно будет использовать минимум только через два 3 года, так как не все браузеры еще поддерживают, я не говорю о мобильный браузеров по типу Safari
@SergeyNavrocky
@SergeyNavrocky Год назад
Это очень Крутая функция, но этого добиться можно и другими способами на данный момент
@user-wt5po1fs8j
@user-wt5po1fs8j Год назад
Хороший и обширный, интересный видео информационный обзор, отличный канал которому желаю удачи и дальнейшего развитие и продвижения каналу.
@lanstromedamusic4976
@lanstromedamusic4976 Год назад
Да, у меня как раз множество вопросов)
@robereds245
@robereds245 Год назад
как говорится тяжело в учении за то легко в бою!
@D_Stolyarova
@D_Stolyarova Год назад
спасибо за видео! очень информативно и полезно. 👍👍👍 Жаль что пока поддержка не высокая, ну подождем...
@Milkyway20239
@Milkyway20239 Год назад
Хорошее видео
@alexandrdeveloper7005
@alexandrdeveloper7005 Год назад
Осталось начать делать адаптивные сайты без медиа запросов
@Xyjail
@Xyjail Год назад
Всё хорошо. Если разобраться, то будет довольно удобно. Но пока нет 99% поддержки, пускай будут "в уме")))) А пока пользуемся "rem" и небольшим читом)))) :root { font-size: 62.5%; }
@igorfinkovsky2714
@igorfinkovsky2714 2 месяца назад
max и min в начале на фото указано что берется максимальное между i и b. а словами сказано что w и h
@user-lm7qw6bi6m
@user-lm7qw6bi6m Год назад
Хочу начать свой путь в IT с PHP+SQL, Что вы можете сказать про выбор языка? Все рекомендуют Python+Django+Flask, но мне не нравится питон.
@kolya69rus
@kolya69rus Год назад
Спасибо за познавательное видео. и девушка красивая ))
@user-kp1bc6ci3t
@user-kp1bc6ci3t Год назад
CSS очень полезная программа со множеством возможностей..! Нужно изучать однозначно..!
@addRossi
@addRossi Год назад
когда и умная и красивая ❤
@user-ct2dv3vr1n
@user-ct2dv3vr1n Год назад
Честно говоря обо многих единицах я и не слышал. Как вы все это держите в голове. Хотя с другой стороны по вам видно, вам это направление нравится.
@michaelkamko
@michaelkamko Год назад
Мегаполезная штука, которой давно не хватало (например, чтобы вписать квадрат в резиновый блок). И супер красивая девчоночка, которая пишет коды - это КРУТО😻👍
@loolupuloolupu3246
@loolupuloolupu3246 Год назад
Ни разу программисток не встречал? 😂
@michaelkamko
@michaelkamko Год назад
@@loolupuloolupu3246 встречал редко (сам учился на программиста, где в группе были 3 девушки). Красивых - еще реже. Таких красивых как автор канала - первый раз))
@farmlingarchontas2216
@farmlingarchontas2216 Год назад
А это сложная тема однако. Ну в любом случае я выжат как лимон... и еще вернусь сюда.
@mixamixa-no3ct
@mixamixa-no3ct Год назад
Доброго времени суток , увидел ваш блок , если возможно как можно с вами связаться?
@annblok_webdev
@annblok_webdev Год назад
Email для связи указан в блоке "О канале"
@Kumanez1
@Kumanez1 Год назад
вопрос: почему vscode не видет cqw и container-type ну и все что с этим связано?
@annblok_webdev
@annblok_webdev Год назад
Потому что их поддержка в браузерах относительно недавно стала появляться. Также когда-то и с гридами было.
@Kumanez1
@Kumanez1 Год назад
@@annblok_webdev а есть ли какие сроки их добавления?
@grom5849
@grom5849 Год назад
Я правильно понял, что это оптимизация fr и/или %?) Container size Я ещё не видел.. Спасибо за видео!
@annblok_webdev
@annblok_webdev Год назад
fr используется только в grid, связи с cq мало, но близко к процентам. Только в отличии от % можно более тонко работать с адаптивом. Рекомендую посмотреть практику, чтобы разобраться в этом - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Ly0U1Yy2OHI.html
@user-fine7
@user-fine7 Год назад
з Felx-ми тоже работает или только з Grid-ми?
@annblok_webdev
@annblok_webdev Год назад
С чем угодно можно совместить
@CityGorsk
@CityGorsk Год назад
Обучение в вашей школе индивидуальное или онлайн конференция с группой людей?
@annblok_webdev
@annblok_webdev Год назад
Есть индивидуальный тариф и возможность обучения с куратором
@Orbit_504
@Orbit_504 Год назад
Сколько стоит курс для начинающих?
@ftinkere
@ftinkere Год назад
Понавыдумывают тут, а нам разбирайся как это работает в разных контекстах
@user-bh5ro3ms9l
@user-bh5ro3ms9l Год назад
Отличное видео однако, теперь CSS не тёмный лес для меня
@user-FedorVorobyev
@user-FedorVorobyev Год назад
Ну вот на простых примерах разобрали возможности новых единиц измерения: cqw, cqh, cqi, cqb, cqmax, cqmin. Но почему я так ничего и не понял?))
@ARTEMFOREVER
@ARTEMFOREVER Год назад
знание сила. и дается очень тяжело.🍉 ( 17:47 - что это за программа?)
@annblok_webdev
@annblok_webdev Год назад
Инспектор в Google Chrome
@abdul-malikibragimov9562
@abdul-malikibragimov9562 Год назад
как я понял, cqi дублирует vw, тогда не вижу смысла вводить данные единицы измерения...или я что-то упустил?
@annblok_webdev
@annblok_webdev Год назад
Отличия всё же есть. Можете посмотреть практику с этими единицами - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Ly0U1Yy2OHI.html
@user-gz7mj1qj6h
@user-gz7mj1qj6h Год назад
Очень непонятная для меня тема) Но ведь я "динозавр")))
@olegivanov6231
@olegivanov6231 Год назад
Сделай пожалуйста видео про isolation. Общий смысл понятен, но всё равно не очень понятно, а на русском языке толком нет никакого объяснения. Точнее про mix-blend-mode всё понятно, но с использованием z index не очень, какой тут практическое применение
@Rexschwert
@Rexschwert Год назад
Жду коллаба с Андреем Блоком
@user-gl8jc7pf2h
@user-gl8jc7pf2h Год назад
Впервые вижу такую космическую внешность)
@yuliapetrova7974
@yuliapetrova7974 Год назад
Вам надо педагогом быть. Отлично преподаете.
@ImmortalBest
@ImmortalBest Год назад
css это конечно хорошо, но кучеряшки более hot ☺
@_dannkiffer_8452
@_dannkiffer_8452 Год назад
Еее
@user-qb7cm8zy1q
@user-qb7cm8zy1q Год назад
Посмотрел на превью и не понял почему Ева Элфи записывает видео по css...
@user-ik4ch7wl3l
@user-ik4ch7wl3l Год назад
нет ничего хуже адаптивных шаблонов, потому что они зависят от размера окна браузера, а не от размера экрана. С чего бы на компьютерах при изменении окна всё должно подстраиваться под него и уменьшаться? Яркий пример фигового адаптивного дизайна - ютуб, где когда хочешь чуток сузить окно, чтобы на другой половине что-то было другое, то уменьшается размер видео, и всё в самом видео становится меньше, хотя хотелось просто развернуть браузер на полэкрана с сохранением размера видео. Из-за этой адаптивности такая возможность браузера как пользовательский масштаб работает некорректно и идёт лесом. Всё потому, что разработчик подумал за пользователя. Я уж не говорю о том, что изменение окна самого браузера на таких сайтах ведёт к тому, что меняется расположение блоков, они начинают прыгать с одного привычного места на другое, менять свои размеры и размеры текстов, рождая в голове мысль о глючности сайта. Поэтому хочется надеяться, что некоторые из представленных новшеств исправят ситуацию
@krauter_roman
@krauter_roman Год назад
Ань, хотелось бы услышать Вас без подготовки текста 😉
@VIJana79
@VIJana79 Год назад
Как по мне, для блоков - бесполезное нововведение, с этим прекрасно справлялись проценты. А вот для плавной сены текста - это крутое дополнение.
@user-fv4xc4qp2h
@user-fv4xc4qp2h Год назад
А так почему не проценты?
@annblok_webdev
@annblok_webdev Год назад
По смыслу это ближе к vw и vh
@castiliOR
@castiliOR Год назад
Насколько я понял, данная фича в Mozilla Firefox не будет работать, пока что
@annblok_webdev
@annblok_webdev Год назад
Там уже доступны обновы, используйте новую версию
@castiliOR
@castiliOR Год назад
@@annblok_webdev понял, спасибо за ответ =)
@indigosay
@indigosay Год назад
К сожалению, не получил внятного представления)
@webschoolru778
@webschoolru778 Год назад
Аня вещает на молодых верстальщиков) Лично мне удобней дедовские %))
@dll220
@dll220 Год назад
Зачем же цвет изучаемого элемента циан? Кровь из глаз (((
@pavelkubin1541
@pavelkubin1541 Год назад
Учитывая, что ChatGPT уже заменяет фронтендеров, какой смысл тратить время на изучение JavaScript?
@user-lc6hz3tn2d
@user-lc6hz3tn2d Год назад
А колір норм можно було вибирать, бо це перда.
@alephzero7808
@alephzero7808 Год назад
Да какого хрена они все меняют без конца,задолбали уже придурки.На жизнь времени не останется,на семью.Зрение теряется.Вот какого, спрашивается, хрена,менять все то,что прекрасно работало?
@efremandre
@efremandre Год назад
ваще не понятно, для чего нужен этот container-type
@tonalmotions
@tonalmotions Год назад
как ты себе представляешь свою жизнь в путинской россии через два месяца? вам нужно знать больше об остальном мире?
Далее
Sprinting with More and More Money
00:29
Просмотров 26 млн
g-squad assembles (skibidi toilet 74)
00:46
Просмотров 11 млн
Sprinting with More and More Money
00:29
Просмотров 26 млн