Круто. Увидел в видео несколько хаков, о которых даже и не догадывался. Спасибо, Вадим!

Не знаю кто вы, я подписался на каналы про программирование, прошел 50 уроков по Java от автора Alishev, тут появились вы... Скажу вам, вы очень приятная личность! Просто очень, очень приятный голос и фейс ))). Вадим, у вас будет свыше миллиона... Да вы и сами это знаете.

Вот конечно ссылка на всю карточку меня немножко удивила 👍 Вроде все логично и понятно. А додуматься ох как сложно. Спасибо за новые знания 😄

@trewerguli1727

2 жыл бұрын

Не ссылка, а ховер на всю карточку

Благодарю! Хорошо что сейчас image-set уже отлично поддерживается браузерами)

aspect ratio имба!

Столько хаков в одном видео) Спасибо Вадим!)

Друг мой! Ты не даешь мне стареть!

Очень круто! Фишек 5 за одно видео. Пойду играться

Хоть и быстро. Но приятно и понятно. Спасибо

Помнится задавался вопросом, как сделать в css с картинками то же, что и в html. А вот теперь, наконец, я нашел ответ. Спасибо)

Большое спасибо за выпуск, aspect-ratio очень полезное открытие.

Выглядит круто! Спасибо большое за уроки, много интересного для себя почерпнул)

Отлично как всегда! Жду про отношение сторон

Вадим, это гениально )!

Первый раз узнал об Avif сегодня! В восторге от размеров. Теперь жду когда же все браузеры догадаются. Но благо сейчас сафаря webp стал поддерживать

Клёво-клёво, спасибо, Вадим👏 Очень жду видео про aspect ratio.

Люблю ваши видео, ну очень!

Спасибо за открытие скуша))

это шедеврально))))

Как раз сегодня делал карточку из нескольких дивов, и была необходимость сделать всю ее ссылкой. Обернул в тег а, все заработало, но ведь семантически не правильно... а тут пример. коротко и доступно. Спасибо!

@user-zh5kg2op4h

2 жыл бұрын

На самом деле нет никакой проблемы обернуть всё в тег a. Спецификация HTML это вполне допускает. Только не забывайте, что внутри a не может быть других a или других интерактивных элементов: кнопок, полей и так далее. (Это может быть неудобно, когда, например, в блоке есть маленькая подсказка. Тогда надо как-то вместе совмещать.) Так что смотрите как вам удобнее.

@pepelsbey

2 жыл бұрын

Семантически всё правильно - можно оборачивать карточки в ссылки. Другое дело, что в таком случае в содержимое ссылки попадают лишние элементы из карточки и её описание становится перегруженным для скринридеров.

@user-et2me5vv4d

2 жыл бұрын

Я добавляю ссылку и растягиваю ее абсолютом поверх всей карточки. В итоге ссылке нет лишних элементов + добавляю текст с классом visually-hidden, чтобы ссылка была доступной.

Вадим, хотел вас попросить рассказать о адаптивной вёрстке с использованием vw и vh. За ранее спасибо!

Добрый день! Как раз разбирался с картинками для Retina дисплеев Спасибо!

как всегда, очень понятно и доходчиво! всегда жду Ваши видео! спасибо!

Очень доступно. Приятно слушать. Всё по делу без лишнего мусора. Спасибо за контент!

Спасибо за Ваши ролики, очень интересно и доступно!

Круто! Спасибо! Респект и уважуха.

Спасибо вам большое за ваш труд! Вы делаете этот мир лучше)

Спасибо за Вашу работу. Ценно!

я всегда создавал отдельный variable для aspect ratio и задавал высоту и ширину через calc. Очень жду видео про aspect ratio теперь)

Спасибо за видео, как всегда все круто и понятно

Спасибо, восхитительно!

Вадим, классно, как всегда!

Отличная подача материала 👍

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

спасибо за видео, очень круто

лучший как всегда!

Спасибо, годно.

супер верстка, хочу быть таким же

Спасибо большое! Очень полезно и интересно :3

Великолепно, спасибо!

Вау. Круто. Спасибо !

Большое вам спасибо очень интересно

Я все ещё не могу понять - как на такой превосходный контент да подписано ~30к подписчиков? Желаю роста! Это заслужено! ✊

@pepelsbey

2 жыл бұрын

Подпишитесь, станет больше :)

@viktor_kost

2 жыл бұрын

@@pepelsbey обижаете) как только узнал - так сразу и подписался)

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

@pepelsbey

2 жыл бұрын

Велком! И спасибо, буду продолжать )

Очень спасибо.😁

Супер!

Круто!

Печально что только сейчас на работе разрешили флексы... А этого мне долго на практике не видать) разве что для себя что-то сверстать. Спасибо)))

@Zagir08

2 жыл бұрын

Привет. Как я понял вы работали на float???!! Зачем!?

@windomizer

2 жыл бұрын

@@Zagir08 Видимо, чтобы жизнь сладкой не казалась :D

👍👍

Очень круто! Но кто поставил дизлайк?

@pepelsbey

2 жыл бұрын

Может я сам? 😱

Здравствуйте Вадим! Спасибо большое, что Вы есть ) Очень многому у Вас научился. Терзает меня один момент касательно способа с псевдо-элементом ссылки. Нуждаюсь в Вашем профессиональном мнении ))) Не ломает ли такой способ доступность для пользователей с мышкой. Ведь нельзя, при желании выделить и скопировать текст ссылки, придеться лезть в девтулзы для этого. Спасибо заранее!

@pepelsbey

2 жыл бұрын

Если у вас задача сделать всю карточку кликабельной, то у вас нет выбора - текст будет выделить сложно. Только если пользователь не знает, что можно зажать альт и начать выделение с ним - тогда получится.

Авиф - выкатывает со дворов 😉

"..., кроме Firefox, которым никто не пользуется ..." ачёвсмысле? Я вот только его и использую. Или... я - никто?))

@pepelsbey

2 жыл бұрын

Я тоже! Нас двое )

@VladimirMiroshnichenko64

2 жыл бұрын

я в таких случаях говорю так "Есть статистика, а есть погрешность. Так вот вы даже не погрешность" :)

Вау, открыл для себя много нового, обидно, что всё еще нет никакого прогресса в поддержке image-set

@pepelsbey

Жыл бұрын

Кажется полная поддержка (как в Firefox) будет в следующей версии Chrome (скоро) и в следующей версии Safari (никто не знает когда, но думаю скоро) caniuse.com/css-image-set

Top, Right, Left, Bottom можно заменить одним свойством inset:0;👍

Вот только aspect-ratio до сих пор не поддерживается в Safari, что сводит на нет его использование. На данный момент он есть там только в превью будущей версии. В случае сафари это означает, что пока человек не перейдет на новую версию Mac OS он будет сидеть на старой версии сафари, т.к. там нельзя обновить браузер отдельно от ОС.

@pepelsbey

2 жыл бұрын

Вы неправы, Safari всё-таки обновляется на предыдущих версиях macOS. Например, Safari 14 работает на 10.11-10.14, то есть совместим с macOS, вышедшей в 2018 году. Другое дело, что некоторые возможности, которые зависят от самой ОС, могут в браузере отстутствовать: кодеки, форматы шрифтов и графики.

Вадим, имеет значение расширение картинки jpg или jpeg? У меня в Sqoosh при оптимизации получается расширение только jpg. Большое спасибо за работу.

@pepelsbey

Жыл бұрын

Расширение .jpg совместимо со старыми ОС, есть даже расширение .htm для таких случаев. Но это очень, очень старые ОС, вроде MS-DOS. Так что никакой практической разницы сегодня нет.

@TamaraNikolaevna

Жыл бұрын

@@pepelsbey Спасибо

Мода на backgraund-image возвращается или c object-fit что-то не так?

@pepelsbey

2 жыл бұрын

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

Класс, в can i use показано 96% у данного свойства, так его можно или нет использовать?

@pepelsbey

2 жыл бұрын

Конечно! Только с типом пока не получится

@user-cl9yc1tw2i

2 жыл бұрын

@@pepelsbey Вадим, а объясните пожалуйста, где брать все эти картинки? Допустим есть картинка, где мне взять эту же картинку в двукратном разрешении? Вопрос может быть элементарный, но я не знаю(

Этот хак иногда глючит. Height:auto не отрабатывает и картинки искажаются. Я потупил денёк, и пришёл к выводу: можно убрать width, height, css к картинке и добавить одно css свойство aspect-ratio

@pepelsbey

2 жыл бұрын

Ну это не хак, это обычный CSS. Не стоит отказываться от атрибутов width и height, они очень полезны при загрузке - браузер сразу знает, сколько отдать места для картинок, знает их соотношение сторон. Ну и «иногда глючит» звучит как магия, лучше бы разобраться и понять. Может есть демка?

@nir0pilot

2 жыл бұрын

@@pepelsbey демки нет, но там использовался js-плагин slick, который, возможно, как-то влиял, и турболинки из rails. при некоторых прогрузках страниц фото решительно деформировались, но не всегда - как фишка ляжет. С вычисленным aspect-ratio pagespeed перестает ругаться на отсуствие width/height, чего я и добивался.

@pepelsbey

2 жыл бұрын

Жаль, что вы не разобрались, в чём проблема. Добавлять aspect-ratio в стилях - слишком «далеко», браузеру это нужно понимать в разметке.

А в какой программе переводят здесь картинку из png в jpeg?

@pepelsbey

2 жыл бұрын

Это Squoosh squoosh.app/, все ссылки всегда есть в описании

11:03 не совсем понял, на юзеров лисы предлагается забить?

@pepelsbey

2 жыл бұрын

А вы посмотрите на демку в Firefox: там вполне WebP 2x pepelsbey.github.io/playground/63/

@TheBubaololo

2 жыл бұрын

@@pepelsbey Вадим, вы золотой человек

Проверил в опере, хроме, лисе и осле, везде отображается кроме ie. Нужно ещё добавить обычный фолбэк background-image: url(...). Вы забыли про это или это массовый протест против ослов?)

@pepelsbey

2 жыл бұрын

Да, вы правы, для лучшей совместимости можно добавить ещё и фолбэк для IE

Как вставить image-set в место где использованы множественные фоны? Т.е. у меня две картинки которые нужно прописать в image-set. Не получается. Или это невозможно?

@pepelsbey

8 ай бұрын

Функция image-set() - это, по сути, замена url(), то есть если вы можете прописать несколько картинок в свойстве background-image через запятую с помощью url(), то аналогично можно и с image-set().

Перезалил видео? Лайк мой куда дел?))) 😂😂😂 Вадим, есть предложение для следующего ролика))) предложения принимаешь? )) 🧙‍♂️🚀🐱‍👤🏍😁🐱‍🏍

@pepelsbey

2 жыл бұрын

Перезалил, там ошибка была ( Заявки не принимаю, а идеи выслушаю ;)

@dimovich85

2 жыл бұрын

Хотел тоже самое написать) я тоже днем хотел видос глянуть, но что-то не давал ютуб

Спасибо за видео! Почему при background-image: -webkit-image-set( url(../../../assets/images/header@1x.webp) 1x, url(../../../assets/images/header@1x.jpg) 1x) хром подгружает ( смотрю в "Network") header@1x.jpg , почему не header@1x.webp ?

@pepelsbey

2 жыл бұрын

Посмотрите внимательнее на синтаксис с MIME-типом и браузерную поддержку, я об этом рассказываю в видео.

А что же делать с lazy load? Как к этой красоте прикрутить отложенную загрузку изображений? При чем нужен правильный lazy, при котором в src будет не пустота а реальное изображение?

@pepelsbey

Ай бұрын

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

Можете объяснить про "двухкратный экран"? Что это значит?

@pepelsbey

2 жыл бұрын

Это когда на один логический пиксель приходится четыре физических. Они же ретиновые экраны или HiDPI

Теперь вопрос если к тэгу img я задаю класс , то получаю что если браузер выбирает изображение из sours то класс и стили css не подтягиваются , class="cover__users-ava" - задаёт позицию абсолют и координаты, если удалить source то всё работает

@pepelsbey

Жыл бұрын

Браузеры выбирают подходящие картинки из source и ставят их в img, так что должно сработать. Попробуйте то же самое, но со ссылкой на CodePen с демкой, чтобы можно было понять, в чём ваша проблема.

@Beyond-the-transcendent

Жыл бұрын

@@pepelsbey ладно, сяб, значит просто баг синтаксиса.

Вы играли когда-нибудь в майнкрафт?

@pepelsbey

2 жыл бұрын

Нет, я плохо понимаю зачем люди играют в компьютерные игры, ведь можно поверстать )

По поводу "никто не пользуется Firefox": я уже год как использую его как основной браузер, потому что в Chrome у меня лагает KZread видео качеством выше 720 (внезапно), хотя у меня 1660 super с аппаратной поддержкой всех необходимых кодеков. А в Firefox ничего не нагает, даже 4К. Возможно,проблема в Хроме в том, что у меня включена скорость воспроизведения 2x по-умолчанию, но в FF всё на этой скорости всё прекрасно работает. P.S. Если FF постигнет судьба Opera и Edge, это будет катастрофа :(

6:50 picture -- class?

А что делать с тем, чтобы w3c валидатор не ругался на это свойство?

@pepelsbey

2 жыл бұрын

Не использовать CSS-валидатор W3C, он оторван от реальности

@svet0v

2 жыл бұрын

@@pepelsbey а как тогда проверять валидна ли верстка?

@pepelsbey

2 жыл бұрын

HTML-валидатор вполне имеет смысл, валидность стилей лучше проверять линтерами, вроде Stylelint

@svet0v

2 жыл бұрын

@@pepelsbey а есть какое-то подтверждение того, что на валидность стилей в валидаторе w3c не имеет смысл обращать внимания, чтобы я со спокойной совестью мог image-set пользоваться?

авиф ауф

Squoosh все же передавливает фото и качество падает да прописать 2х под респонс

Кто дизлайк поставил? Кто этот дивергент))

зачем нам нужно свойство, которое нигде не работает кроме firefox? и тут я, кто смотрит это видео с firefox....

@pepelsbey

2 жыл бұрын

И тут я, который залил это видео в Firefox. Может быть нас всё-таки много? )

@isvladxxe

2 жыл бұрын

Firefox единственный кто нормально выводит звук с ютуба на системы 7.1 звука в Linux ( в win вроде костылем можно везде сделать) хром задействует только 2 передних канала ((