Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 51 из 53 · 12 мин
content-visibility, contain, will-change, clip-path и практика фильтров и object-fit.
На моём старом телефоне каталог листается рывками.
Браузер рисует все сто карточек сразу. Скажем ему: «рисуй, только когда видно».
content-visibilitycontent-visibility: auto — браузер пропускает отрисовку блоков за экраном.containcontain: layout paint — изменения внутри не заставят пересчитывать всю страницу.will-changewill-change: transform — заранее подготовить слой. Ставь точечно, не на всё подряд.clip-pathclip-path: circle(50%), polygon(…), ellipse(…).<style>
.bean { width: 70px; height: 90px; background: #7c3f1d; clip-path: ellipse(40% 50% at 50% 50%); }
</style>
<div class="bean"></div>Самая быстрая отрисовка — та, которой нет: content-visibility: auto для длинных страниц.
Задай .menu article content-visibility: auto, а распроданной .sold — filter: grayscale(1).
Задай .card img width: 100%, aspect-ratio: 4 / 3 и object-fit: cover.
Выберите один ответ.
Что ускорит открытие страницы со ста карточками?
Выберите один ответ.
Как заполнить рамку фотографией без искажений, обрезав лишнее?
Проверяем состояние обучения…