CSS: svh, lvh, dvh - новые единицы измерения

Подписаться 23 тыс.

Просмотров 39 тыс.

50% 1

✏️ Разберем новые единицы измерения CSS: svh, lvh и dvh, попутно поговорим об vw, vh, vmin и vmax и о проблеме, которая теперь решается иначе.
🔴 Timeline:
▶ 00:00 | Введение
▶ 00:09 | Существующие единицы измерения: vw, vh, vmin, vmax
▶ 00:23 | Единица vw
▶ 00:39 | Единица vh
▶ 00:52 | Единица vmin
▶ 01:04 | Единица vmax
▶ 01:29 | Секция во всю высоту экрана
▶ 02:33 | Применение vh
▶ 02:54 | Проблемы существующих единиц измерения
▶ 03:34 | Как проблему решали ранее
▶ 05:03 | Единица svh
▶ 05:20 | Единица lvh
▶ 05:37 | Единица dvh
▶ 05:58 | Решение проблемы vh с помощью dvh
▶ 06:44 | Возможные проблемы dvh единиц
▶ 07:02 | Браузерная поддержка новых единиц измерения
▶ 07:14 | Заключение
📚 Полезные ссылки:
➖ Спецификация по svh: www.w3.org/TR/css-values-4/#s...
➖ Спецификация по lvh: www.w3.org/TR/css-values-4/#l...
➖ Спецификация по dvh: www.w3.org/TR/css-values-4/#d...
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #css

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

9 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 155

@AleksanderLamkov 5 месяцев назад

📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

@andrrrew 11 месяцев назад

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

@O01 10 месяцев назад

Идеальная подача материала, спасибо автору! Никакой воды, чётко, по делу. В минуту (а то и меньше) рассказывается то, на что у многих уходит по 10-20 минут с водой, и лишней ненужной информацией. Отступления (как проблему решали ранее, и т.д) сделаны в тему, поскольку у многих и правда возникают такие наводящие вопросы. Желаю автору развития в данном деле, и аудитории побольше.

@alexeyfladarov5200 11 месяцев назад

Мега кайфовый эмбиент на фоне

@sallyjaquel5125 10 месяцев назад

настолько хорошая подача материала, что я узнал за 8 минут больше, чем за всю пару

@user-cp4bv5wf1o 11 месяцев назад

Отличная подача, прекрасная дикция, и максимум пользы менее чем за 8 мин. Подписка и лайк! Удачи в развитии канала!

@alexb.2616 10 месяцев назад

Классная серия. Фоновая мызыка прямо знатно подобрана под масштаб костылей :) Функция debounce - огонь!!!

@shoxruX_wantxo 10 месяцев назад

ляяя как ютуб узнал о моей проблеме и выдал тебя в рекомендации, спасибо теперь все решено

@krs_83 4 месяца назад

В поддержку канала. Красава!

@user-hl6zy9kf6n 11 месяцев назад

Оо, класс! Вроде и мелочь, а так поможет. Кстати, меня музыка на заднем фоне что-то в тревогу отправила))

@AleksanderLamkov 11 месяцев назад

Спасибо! Про музыку - учту. Ещё экспериментирую с жанрами. Возможно эмбиент - не лучший выбор для образовательного контента :)

@BOIH_CBETA 11 месяцев назад

Нормальная музыка 😅 Каждому не угодишь

@michaelkamko 7 месяцев назад

Спасибо, бро! Некоторые моменты я не знал. Идеальная подача без воды. Спасибо.

@1NortGod 11 месяцев назад

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

@17u5h 10 месяцев назад

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

@crazyshow4209 10 месяцев назад

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

@MrGish09 10 месяцев назад

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

@Ivanfwit 10 месяцев назад

очень круто и понятно, особенно интересно таким как я, кто пока не силен в js..))

@zubenkopetrovich4573 11 месяцев назад

я так люблю когда в css выходит какое-то крутое нововведение, и людям приходиться ждать несколько лет, что бы браузеры смогли его поддерживать💀

@AleksanderLamkov 11 месяцев назад

Объективно говоря, CSS в последние годы набрал обороты и многие фичи браузерами обкатываются гораздо быстрее, чем раньше.

@adeptiworks 10 месяцев назад

@@AleksanderLamkov только раньше у нас был IE который тормозил прогресс, а теперь его место занял Safari на айфонах

@enco_m 10 месяцев назад

@@adeptiworksие не тормозил прогресс. Он просто не сооблюдал никакие стандарты, потому что микрософту было плевать

@maksonix 11 месяцев назад

ОЧЕН КРУТО СПАСИБО подписка!

@daniil2704 11 месяцев назад

Классно! Очень понятно пояснил, даже про vmin, vmax напомнил, я о них знал, но как то не использовал и забыл. Лайк 👍 Интересная тема новых фич :)

@daniil2704 11 месяцев назад

А вообще удивительно, что apple со своим safari, опять не затянули добавление фичи на годы, заставляя разработчиков страдать 😁

@maxet2374 10 месяцев назад

здорово что вся суть уменьшается в меньше чем 10 мин. все понятно

@MrStoikiy 10 месяцев назад

Наконец то!! Спасибо за ролик. Сколько боли было пережито с разными версиями айфонов и их нижним баром...ох. Помню делал кастыльную реализацию несколько лет назад с скрытым контейнером который занимал некоторую высоту и при скроле исчезал :D

@igorlu 11 месяцев назад

спасибо, все как оно должно быть, коротко и ясно.

@m_mallk 10 месяцев назад

Добавлено 5 дней назад, ого Как же вовремя выпустил видео! Ты прям читал мои мысли, слушать то, что я искал много времени, балдеж для ушей и глаз) а особенного для мозга, ахахахах Я уже 2 недели пытаюсь решить проблему с адресной строкой в браузере на смартфонах, думал я один такой, кто заметил подобное поведение на этих устройств. Причем, Я самостоятельно искал причину несовпадения размеров, сначала думал что это каким то чудесным образом связано с нижней навигационной панелью смартфонов(что изначально и казалось для меня бредом), но после проверок понял, что оказывается из за адресной строки браузера(не судите, я учусь, поэтому не знаю всего) Я хотел для своего сайта сделать максимум 100vh без скроллов основной страницы вертикально и горизонтально. Я даже уже нашел решение через JavaScript, о котором как раз ты тоже рассказал, но теперь понял в чем минус данного способа. Спасибо тебе большое за такой актуальный, и к тому же качественный контент!

@itsolegdesco 10 месяцев назад

Классное видео. Остальные видосы тоже крутые! Подписка однозначно)

@Predict-of-Success 11 месяцев назад

случайно наткнулся на это видео, жалко не увидел его раньше, через js костыль делал под телефон везде высоту

@Bit_Maximum 11 месяцев назад

Спасибо!

@dplaystudios7834 11 месяцев назад

Неужели я нашел реально что то полезное для работы, а не индусов 😂

@promoabys 10 месяцев назад

Хороший контент, спасибо

@kirillkononov5094 10 месяцев назад

Классное объяснение, подписался. И музыка отличная в тревогу не отправляет

@-Vladimir-- 9 месяцев назад

Подписка, лайк, респект. Очень хорошая подача и объяснение, очень надеюсь, что и js co временем появится.

@user-uy8yt7ku4w 10 месяцев назад

Привет! Отличное видео, только одна маленькая поправка: слово "height" произносится как "хайт", не "хейт".

@tsssssssss1 11 месяцев назад

Как можно не любить CSS? ❤

@goldencrusher1494 10 месяцев назад

Познавательно, спасибо!

@constyak9031 11 месяцев назад

топ контент, красавчик.

@front_praxis 11 месяцев назад

Спасибо ! Подписка )

@Gruberhoff 10 месяцев назад

"хэйт" это ненависть, а "хайт" - это высота.

@AleksanderLamkov 10 месяцев назад

Спасибо, учту :)

@Serega5j 10 месяцев назад

Круто) Быстро же отреагировали команда W3C на эту проблему и выпустили апдейт.

@paqstd-yt 10 месяцев назад

Отличное видео! Хорошая подача материала

@ThomasLinkzat 10 месяцев назад

Круто. Продолжай

@basil200110 11 месяцев назад

Интересное видео! Спасибо большое. Я правда не особо фанат фронтенда, да и вцелом веба, но тут было интересно, без воды, с хорошими примерами. Жди бума подписчиков - хорошо делаешь!

@user-sz8lo7vu9b 10 месяцев назад

Спасибо)

@yakovlimanskiy5238 10 месяцев назад

красавчик!

@user-rb3sw3ku6t 9 месяцев назад

Спасибо за видео. Познавательно и интересно. П.С. - вроде много верстал, а проблем с мобильными устройствами не наблюдал...

@alexandrnemcov4840 10 месяцев назад

Подписался, жду новых видео с нетерпением)

@pyroboomka4587 10 месяцев назад

Каеф, в свое время такие же костыли с --vh и transition: height делал чтобы фуллскрин модалку открыть в сафари. Мобильные браузеры это отдельный котел в аду, рад что dvh вроде решает все это.

@gleb_ 11 месяцев назад

Очень здорово! Сам недавно посмотрел на эти нововведения и тут в рекомендациях всплыло - решил глянуть, может что упустил. Интересно было бы послушать про динамический размер шрифта, если есть что сказать :0)

@AleksanderLamkov 11 месяцев назад

Про динамический размер шрифта не так много информации могу дать, буквально одна формула vw через calc и парочка рекомендаций. Скорее это будет часть общего гайда про работу с заголовками :)

@kirasukadura 11 месяцев назад

Оч полезно, спасибо)

@durko_o 10 месяцев назад

Всё супер, фоновая музыка немного сбивает)

@STELLS541 10 месяцев назад

Оч крутой видос и новые фичи)

@bambalbino 11 месяцев назад

Прикольно. Не знал. Подписался

@user-sj5in5lt8s 10 месяцев назад

красота!

@naysy3169 11 месяцев назад

Видео полезное, спасибо! (Музыкальное оформление имхо не соответствует контенту, акцентирует не на единицах измерения в css, а на бренности и временности всего сущего ))

@michaelmironenko455 11 месяцев назад

Согласен, можно и без музыки вовсе. Например оставить бодрую музычку только во вступлении и в конце секунд на 10-15, чтобы задать позитивное настроение в начале и послевкусие, что ты узнал что-то новое и жизнь твоя стала совсем другой :)) А в середине без музыки.

@AleksanderLamkov 11 месяцев назад

Спасибо за критику касаемо музыки, это безумно полезно! Обязательно учту этот момент.

@AleksanderLamkov 11 месяцев назад

@@michaelmironenko455 хорошая идея, спасибо!

@michaelmironenko455 11 месяцев назад

@@AleksanderLamkov Не за что, а тебе спасибо за полезный контент!

@dimass67 7 месяцев назад

@@AleksanderLamkov а мне понравилась фоновая

@dopetag 10 месяцев назад

Классное видео, но музыкальный фон бы убрать. У каждого ведь уже играет своя музыка на фоне, когда смотришь туториалы :)

@AleksanderLamkov 10 месяцев назад

Спасибо! Про музыку - принял к сведению. В следующих подобных роликах учел этот момент :)

@Nomikama 11 месяцев назад

Событие resize не такое уж и страшное как думают или подносят некоторые разработчики - оно так часто срабатывает только из-за того, что сам разработчик дергает эти размеры постоянно и декоратор debounce тут лишний имхо. У обычного пользователя событие срабатывает всего пару раз: 1. при изменении высоты той же панели; 2. при повороте телефона. Браузеры на ПК ещё меньше (при условии, что пользователь намеренно это зачем-то не делает). Такая озабоченность с debounce и частым вызовом более характерна для события scroll т.к. он вызывается даже на стороне обычного пользователя очень часто и там уже можно это дело оптимизировать через debounce или throttle. Вообще радует, что ввели единицы измерения для CSS под это дело. Главное, чтобы браузеры не ввели что-то новое, пока у этих единиц поддержка не стала ~97% и не пришлось придумывать новые костыли.

@AleksanderLamkov 11 месяцев назад

Интересные мысли, спасибо. Микрооптимизации в виде debounce на resize в большинстве случаев и вправду могут быть излишни. Но у меня всё же был случай, когда банальный ресайз окна на десктопе приводил к падению фпс сайта до 1-2 на несколько секунд, что выглядело очень уж неприятно. Но там были сложнее вычисления, чем window.innerHeight * 0.01 :)

@Disorrder 10 месяцев назад

Очень сильно зависит от проекта. Если у тебя, скажем, канавас с 3д сценой на миллион полигонов и юзер решил ресайзнуть окно мышкой, то такая оптимизация будет уместна. Или если несколько графиков или что-то ещё тяжёлое, что рендерится медленнее, чем 30 фпс

@Nomikama 10 месяцев назад

@@Disorrder В canvas используются другие оптимизации, которые нужны для вычислений, например, кеширование. Если речь идет про FPS, значит мы про использование requestAnimationFrame, который выполняется ~60 раз в секунду. Смысла оптимизировать его через debounce попросту нет т.к. перед ререндером выполняются вычисления для отрисовки и они подхватят новый размер экрана. Единственный кейс - это разве что остановить анимацию пока не прекратят ресайзить, в других случаях requestAnimationFrame вызывается ещё чаще, чем пользователь вызывал бы событие resize. Опять же, в основном умышленным частым ресайзом занимаются в 99% другие разработчики. Если вы хотите при анализе вашего сайта показать им как у вас оптимизированно все - дело в ваше, но иногда чрезмерная оптимизация для каких-то маловероятных кейсов может вредить обычному пользователю (например, ожидание перерисовки при повороте экрана т.к. debounce использует setTimeout, который ждет очищение стека и он не гарантирует, что функция в нем будет выполнена именно через то время, которое указано в нем).

@Disorrder 10 месяцев назад

@@Nomikama а ты точно правильно прочитал мой комментарий? Я же не просто так упомянул 3д графику, ещё и на миллион полигонов. Если ты ресайзишь камеру, то у неё меняется соотношение сторон, меняется разрешение текстур, меняются все шейдеры, всё это может стриггерить множество тяжёлых операций, которые не происходят каждый кадр. Даже 2д графики лагают при ресайзе вьюпорта. Поиграйся с plotly, например, добавь туда пару сабчартов, хотя бы 1000 точек в данные, посмотри как он себя ведёт при ресайзе. Добавь штук 6 таких на страницу и увидишь, как они зависают. И нет, мышкой ресайзят не только разработчики. Есть банальные режимы типа полноэкранный/оконный/ф11. Иногда хочется экран на 2 части разделить, чтобы браузер был с одной стороны, а с другой что-то ещё. В целом, наверное, ничего страшного, если оно лагает при ресайзе, уже все к этому привыкли. Но если есть возможность простым способом это оптимизировать, то почему бы это не сделать? Мы уже текста написали больше, чем нужно кода для реализации

@Nomikama 10 месяцев назад

@@Disorrder Я не исключал ресайз полностью. Разделение экрана, полноэкранный - это действие на раз-два, а не тот ресайз из-за которого делают debounce. Как он вообще поможет в этом случае, если только не закликивать эти режимы? При включении режима полного экрана или разделения все равно потребуется перерисовка. Опять же, в основном только разрабы триггерят ресайз очень много раз, как показывали тут на примере. Смотря ютбут ты же не включаешь полноэкранный режим и не выключаешь его каждые 5 мс.

@rinatgabbazov4520 10 месяцев назад

Неплохо. Подписался

@BROnik 9 месяцев назад

Подскажите пожалуйста что за тулзы вы используете для теста на мобилки, как на 5:10 и дальше

@AleksanderLamkov 9 месяцев назад

Привет! Это запись экрана с реального устройства. Включил live-server в IDE и с телефона, подключенного к той же вайфай сети, подключился к адресу лайв-сервера в локальной сети.

@BROnik 9 месяцев назад

@@AleksanderLamkov понятно, спасибо, думал какой-то эмулятор прост)

@jacktwinn 11 месяцев назад

аллилуя

@MrGentleAlex 10 месяцев назад

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

@antonjust3503 10 месяцев назад

Видос топ, но фоновый музон это просто психодел какой-то))))

@AleksanderLamkov 10 месяцев назад

Хех, сколько людей уже момент про музыку отметили :) В следующих видео решил сделать полностью без неё, посмотрю реакцию зрителей.

@user-fk8vw1xy6b 11 месяцев назад

CSS свойтва будет ? grid не понял я, обьясните пожалуйста

@AleksanderLamkov 11 месяцев назад

По CSS на канале будет отдельный курс для начинающих. Запущу его после завершения текущего курса по HTML. Это видео, конечно, не для новичков. Мне просто спонтанно пришла идея рассказать о новых фишках CSS, о которых никто (вроде бы) на русскоязычном ютубе пока не рассказывал :)

@Human-de8nf 11 месяцев назад

Объясните новичку. Я только только начинаю погружаться в фронтенд. Каким образом происходит использование этих обновлении в css ? Они уже там имеются и не надо не чего нового или как то надо указать в html?

@AleksanderLamkov 10 месяцев назад

Нужно ориентироваться на браузерную поддержку функциональности на caniuse.com/viewport-unit-variants. Если тебя она устраивает, то можно смело применять. Указывать в HTML ничего не нужно. По моему мнению, если сайт разрабатывается с адекватным ТЗ, где четко указано требование что-то вроде "5 последних версий браузера" и, разумеется, если нет необходимости поддерживать IE, то, например, фичу из этого видео применить можно без особых проблем. Плюс можно подстраховаться, если прописать так называемые "фоллбэки", резервные CSS-свойства: сначала то, что точно работает в большом количестве браузеров, например, 100vh, а затем то, что работает в 89% браузерах, 100dvh, к примеру. А ещё есть "полифиллы", обычно JS-библиотеки, которые автоматически преобразовывают код из нового синтаксиса в старый. Но это всё можно завести, если использовать сборщики проектов.

@TrueWebDev 11 месяцев назад

Вместо debounce лучше использовать throttle, так у тебя функция выполняется сразу и потом не чаще n раз в секунду

@AleksanderLamkov 10 месяцев назад

Да, возможно это было бы лучше. Спасибо за заметку! Вообще, я руководствовался такой логикой: юзер ресайзит окно и во время ресайза он потенциально готов к тому, что интерфейс может быть поломан, а после окончания ресайза важно, чтобы всё встало на свои места. Поэтому выполнение обновления --vh через debounce, которое произведется только после того, как пройдет последняя итерация события resize, не шибко повлияет на UX, а в конечном итоге результат будет как надо и всё встанет на свои места. С throttle же получается так, что --vh начинает обновляться мгновенно, а затем гарантированно раз в n времени. Получается, что функция через throttle выполняется гораздо чаще, чем через debounce. P. S. если кому-то будут нужны эти функции, вот их реализация на JS: debounce: github.com/aleksanderlamkov/webpack-template/blob/main/src/js/utils/debounce.js throttle: github.com/aleksanderlamkov/webpack-template/blob/main/src/js/utils/throttle.js

@TrueWebDev 10 месяцев назад

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

@ndiuky 10 месяцев назад

Я знаю что этот канал стрельнёт

@NeoCoding 11 месяцев назад

продолжайте все красиво подаете. не понял нафигв lvh если это то же что vh ?

@AleksanderLamkov 11 месяцев назад

На мой взгляд, vh - менее стабильная единица, чем lvh. LVH гарантирует высоту без интерфейсных плашек браузера, а VH - нет.

@NeoCoding 11 месяцев назад

@@AleksanderLamkov ну так без плашек же это и есть vh

@AleksanderLamkov 11 месяцев назад

@@NeoCoding мы немного напутали, о svh наверное речь идет, именно эта единица на vh похожа. Small Viewport Height - высота без плашек. Разница между VH и SVH всё же есть. Посмотри эти примеры на мобильном устройстве: 100vh - tppr.me/ue02z (песочница - codepen.io/aleksander-lamkov/pen/dyQmPWd) 100svh - tppr.me/kpHpq (песочница - codepen.io/aleksander-lamkov/pen/yLQKyoY) С svh высота баннера получается адекватной, с vh - нет. Ну и вдогонку lvh и dvh: 100lvh - tppr.me/NIdam 100dvh - tppr.me/hhLeE

@legendofpain1x915 10 месяцев назад

Я не думаю что кто-то будет ресайзить окно браузера как мы это делаем в devtools, так что нет смысла писать дебаунс для этого, оно сработает тогда когда пользователь повернет экран и все (я про event 'resize')

@AleksanderLamkov 10 месяцев назад

Когда использую 34'' монитор, то постоянно перетаскиваю окошки браузера и подгоняю их размеры так, чтобы всё уместилось. Не думаю, что я один такой. Да даже на 16'' ноуте регулярно в сплит-режиме приходится ресайзить окна.

@jeststk3257 10 месяцев назад

Все здорово, но в конце видео на сайте caniuse стало понятно, что новых единиц измерения на самом деле в 6 раз больше. А это значит, что все равно придется идти в гугл и этого видео недостаточно :с

@AleksanderLamkov 10 месяцев назад

Ага, их около 20 штук. Вдобавок к рассмотренным на видео есть ещё все те же единицы, но про ширину (зачем? неужели у мобильных браузеров есть плашки на всю высоту, съедающие часть ширины вьюпорта?), а также единицы из разряда "наибольшее/наименьше среди svh и svw" (как часто требуется задавать размерность исходя из минимальной/максимальной ширины / высоты?) В общем, среди всех новых единиц, лишь svh, lvh и dvh, имхо, заслуживают внимания, т. к. их применение на практике очевидно. С остальными, к сожалению, пока не знаю, что делать, кроме как демонстрировать синтетические абстрактные примеры.

@avirtum 10 месяцев назад

Улыбнуло с resize, который сильно нагружает браузер )))

@AleksanderLamkov 10 месяцев назад

Ну, не сам ведь resize, а то, что внутри него может происходить :) Вспоминаю, как на одном проекте на ресайзе вычисляли размеры и положение элементов под масонри сетку, и пока через debounce это не прогнали, сайт хряхтел при малейшем ресайзе окна браузера...

@denison25 10 месяцев назад

А что за музыка на фоне

@AleksanderLamkov 10 месяцев назад

Ох. Сложно сказать... Исходники уже удалил (бедный мой ноут на 500 гигов памяти и видосы в 4к). Но вообще, я генерировал плейлист через сервис uppbeat.io/ по ключевым словам 'coding lesson' и мне какой-то эмбиент выдало в результатах.

@xyzimusic 11 месяцев назад

а как давно эти штуки вышли?

@AleksanderLamkov 11 месяцев назад

Как со многими фичами CSS - сложно сказать. Ещё 1.5 года назад в черновике идея этих единиц обсуждалась. На данный момент фича на стадии 'Working Draft'. Уверен, что % поддержки станет ещё выше в ближайшие месяцы.

@snekbaev 11 месяцев назад

в первый раз тут, несколько комментов: музыка не нужна, вообще никакая (могут смотреть как на 1х, так и на 2х, а самое главное она не несет никакой полезной нагрузки); аудио дорожку погромче; нет-нет посматривай в камеру, особенно когда что-то объясняешь; height - не хейт/хэйт, а хАйт.

@AleksanderLamkov 11 месяцев назад

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

@snekbaev 11 месяцев назад

@@AleksanderLamkov да без проблем, с опытом почувствовать себя увереннее (ваш кэп). Для данного формата образовательной (все же более, чем развлекательной) направленности музыка будет мешать - твоя цель максимально эффективно донести до нас суть с достаточным "мясцом", при этом удерживать фокус, но не перегружать/отвлекать его. Насчет пресности - решай содержательностью, подачей и хронометражем материала :)

@idrisveliev 6 месяцев назад

У вас на канале кроме html, css больше ничего нет? А почему?

@AleksanderLamkov 6 месяцев назад

Привет! Канал создан относительно недавно, скоро будет и JS и всё остальное :)

@idrisveliev 6 месяцев назад

@@AleksanderLamkov у вас объясняете тему очень широко. Удачи вам

@evilballer 10 месяцев назад

А что за редактор кода?

@AleksanderLamkov 10 месяцев назад

WebStorm

@evilballer 10 месяцев назад

@@AleksanderLamkov спасибо

@zmmr013 10 месяцев назад

Не влияла функция вычисления размера вьюпорта на производительность. Какой обычный пользователь, особенно на мобилах, ресайзит окно по 1 пикселю, так, чтобы функция могла нагрузить? Никакой. Однако, такие части вёрстки в js пихать все равно костыль.

@AleksanderLamkov 10 месяцев назад

На мобилках не ресайзят, а вот на большом экране десктопа - вполне.

@zmmr013 10 месяцев назад

@@AleksanderLamkov это редкость среди большинства пользователей. Частый ресайз окна браузера

@elja6750 11 месяцев назад

Ужасный костыль, пришедший в css из-за мобильных браузеров. Ибо нехрен элементам управления влиять на высоту viewport вообще - вот это устранять надо было.

@pryanik150 11 месяцев назад

Маководы опять не учитывают наличие скроллбара(

@alexyalinc530 10 месяцев назад

Я только одного не могу понять, почему сами мобильные браузеры не делают viewport динамичным, зачем это сайту вычислять. Накостыляли браузеры, а парятся разработчики. Ну это правда тупо выглядит) То есть браузер добавил какую-то область поверх сайта, пусть сожмёть viewport и всё. Зачем сайту парится, что браузер делает хрень xD

@mrnsky 10 месяцев назад

ок тупо везде делаем dvh и не знаем проблем. :D

@NewUser78654 10 месяцев назад

Я занимаюсь айти достаточно давно - администрирование, веб, программирование. И я скажу, что такие нововведения это плохо. Мнение, не поддерживаемое большинством. Но большинство и не имеет хорошего опыта, практики, обучения. Но хватит себе льстить - ближе к делу. Основная проблема нового в айти - это поддержка старого. Внедряется новая фича, технология, способ, метод, фреймворк, паттерн...и не прекращается поддержка старого. Вторая проблема - технологий, способов, приемов для решения одной задачи становится несколько. Пример, близкий вам. На собеседовании вас попросят сверстать страницу. Если вы сверстаете с использовании новых единиц, вам скажут, что не все браузеры их поддерживают. Вы говорите 89% - это хорошо, но это только ваше оценочное суждение. Нет ни рекомендаций, ни спецификаций. Если вы сверстаете с использованием "старых" единиц, вам скажут, что вы не знаете новые фишки, ваша верстка не современная. Это только пример. Если бы были только одни единицы или при выходе новых браузеры прекратили поддержку старых единиц, никто ничего не смог бы вам сказать. Технологии, единицы, методы и подходы множатся в геометрической прогрессии. JS лезет в бекэнд, CSS заменяет костыли JS. Формируются новые требования, подходы, архитектурные решения. Возможно, сейчас вам это мнение кажется надуманным, но это вопрос времени и опыта. Новшество не только влияет на код, но и влияет на индустрию, на отрасль, на людей, на их командную работу, на взаимоотношения, в конце концов на дедлайн проекта (новая фича - работай быстрее). Всё взаимосвязано.

@AleksanderLamkov 10 месяцев назад

Я согласен со многими вашими тезисами. Если бы браузеры отсекали устаревшие технологии и не боялись "сломать интернет", то нам, как разработчикам, жилось бы проще. Но положение дел, когда W3C и коммьюнити вечно генерирует идеи по решению фундаментальных проблем и "переизобретает" фичи лучше, чем стагнация отрасли.

@Omniscient2 10 месяцев назад

Музыку не меняйте пожалуйста❤

@gregplittjunior8313 11 месяцев назад

тупо решил мою проблему отдуши

@pavel-6700 10 месяцев назад

Всё было бы супер, если бы не эта фоновая музыка

@dmitriikapustin3384 11 месяцев назад

да сколько можно этих переменных

@AlexisKmetik 11 месяцев назад

Критика, ибо смотрят те кто потом на собесы ходят и приходится такую дичь выбрасывать. Костыль который показан в начале это п*&^ц, кроме того что есть safe-area-insets, есть ResizeObserver не смейте для таких вещей использовать дебаунсы и еще следующий кто кинет подобный костыль в useEffect будет всю жизнь голый редакс писать, пока пальцы не отсохнут. По этим новым единицам мнение одно это вроде как спасение, но использовать я это бы не стал нигде, ибо дерготня контента, плывущие отступы и прочие прелести больше нервов попортят, уже вроде как все забили на проблему и пользователи привыкли.

@AleksanderLamkov 10 месяцев назад

Большое спасибо за ценнейшую критику и информацию! Про safe-area-insets не знал, поизучаю. Если разберусь, запишу видео :) Про ResizeObserver вместо debounce - да, имеет место быть. Согласись, ведь каждую задачу можно решить несколькими способами. Дебаунс - лишь один из них. Возможно, не самый оптимальный, но так я делал на одной из предыдущих работ (приложение на ванилле) и это было лучше, чем ничего. Про то, что "пользователи привыкли" - тут как посмотреть. Разрабатывал банковское веб-приложение где в модалке снизу были кнопки а-ля "продолжить оформление кредита", на современных iOS мобилках с плашкой снизу проскроллить до них не получалось. Главная задача модалки фактически не отрабатывалась. Подобное часто вижу в менюшках и модалках. К такому не надо привыкать, надо лечить такой UI.

@user-lf6fk1fm6r 5 месяцев назад

Я так и не поняла в чем разница? Что автор прогнал не известно)

@AleksanderLamkov 5 месяцев назад

svh - small viewport height, высота экрана без элементов интерфейса браузера lvh - large viewport height, высота экрана, включающая элементы интерфейса dvh - dynamic viewport height, подстраивающаяся под отсутствие / наличие элементов интерфейса браузера высота вьюпорта

@ancubic1549 10 месяцев назад

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

@AleksanderLamkov 10 месяцев назад

Спасибо за замечание, учту!

@vasiliyrusin 10 месяцев назад

Все таки не debonce а throttle.

@AleksanderLamkov 10 месяцев назад

Спасибо за поправку! Да, в некоторых случаях троттлинг подходит лучше. Но конкретно для этого случая я следовал такой логике: во время ресайза юзер потенциально готов к тому, что интерфейс может выглядеть не идеально и обновлять vh через троттлинг регулярно в n-единицу времени тут кажется не лучшим решением, гораздо «выгоднее» после остановки юзером ресайза окна спустя n-единицу времени один раз произвести ре-калькуляцию нового значения vh. Для этой цели и был использован дебаунс.

@vasiliyrusin 10 месяцев назад

@@AleksanderLamkov Да, Вы совершенно правы debounce и правда выгоднее, но так как это CSS анимация, мы можем позволить себе чуть больше динамики при сравнительно небольших технических затратах. throttle сделает анимацию плавнее, а количество вызовов, ну допустим с 1 увеличится до 50. И хоть это и в 50 раз больше работы, я абсолютно уверен что нагрузка изменяется на столько незначительно, что в профейлере это будет даже незаметно.

@Rama-kz2zx 11 месяцев назад

Он не мог пояиться год назад

@palkan2590 11 месяцев назад

верстальщик

@andryzirka3940 10 месяцев назад

Очень не наглядные примеры. Лучше б с появлением динамической клавиатуры на смарфоне при клацанье на input. Нельзя свойство которое сделаное для смартфона показывать в браузере тестирования...

@AleksanderLamkov 10 месяцев назад

Я показывал запись экрана с реального мобильного устройства (iPhone 13 mini), это не эмулятор. Про input - да, согласен, было бы нагляднее, но я не встречал в своей практике задачу, когда отталкиваясь от наличия экранной клавиатуры нужно было как-то менять высоту интерфейса.

@WERWOLION 11 месяцев назад

Эти единицы старые как моя бабушка. Нужно писать модные единицы но никак не новые. Новые единицы это единицы от размера контейнера.

@AleksanderLamkov 11 месяцев назад

Возможно. Однако по сontainer queries и их единицы измерения уже много кто на русскоязычном ютубе рассказал. Про вьюпорт-единицы по большей части знает меньше людей, как мне кажется.

@virtuoz-ru 10 месяцев назад

Хорош 👍

@javascript.frontend 11 месяцев назад

хорошая подача

@channeldsr9983 10 месяцев назад

Есть совет получше: забейте на динамические элементы в браузерах

@gift.albooms 11 месяцев назад

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

@AleksanderLamkov 10 месяцев назад

Согласен! dvh надо применять аккуратнее. А вот svh точно без каких-либо неприятных UX ощущений уже можно применить, например, в хиро-секциях / баннерах на всю высоту при наличии fixed / sticky шапки. Об этом примере в видео не рассказал, но может кому будет полезно: 100vh - tppr.me/ue02z (песочница - codepen.io/aleksander-lamkov/pen/dyQmPWd) 100svh - tppr.me/kpHpq (песочница - codepen.io/aleksander-lamkov/pen/yLQKyoY) С svh высота баннера получается адекватной, с vh - нет.

@31danmaster31 10 месяцев назад

Только firefox их пока не поддерживает

@AleksanderLamkov 10 месяцев назад

Поддерживает ещё с версии 101 (см. caniuse.com/viewport-unit-variants ).

@sh1ki17 10 месяцев назад

нуу, я бы сказал что эти переменные это костыли, а js наоборот здравый подход...

@AleksanderLamkov 10 месяцев назад

Ну, считаю что вопросы стилизации в первую очередь нужно решать силами CSS, все таки JavaScript не для этого, надо разграничивать их зоны ответственности. CSS-переменные - это мощная особенность языка, с ними можно делать очень крутые вещи. Когда-нибудь запишу полноценный гайд по ним, где попробую доказать их годность и преимущества перед JS-решениями :)

@divside 10 месяцев назад

А с чего бы вдруг они "новейшие"....? "я фронтенд-инженер из компании VK" - понял почему новейшие.

@AleksanderLamkov 10 месяцев назад

Эти новшества лишь недавно стали поддерживаться относительно большим % браузеров (89%), поэтому, да, это "новейшие". Если подушнить, то можно всё, что вышло из начальной стадии "черновика" спецификации считать "старьем". Про нападки относительно моего места работы - умно, совсем не токсично, зрело. Хорошего дня :)