Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 10
Без наглядных примеров всё это не понятно что делает. Тем более описано это таким "предельно ясным" языком.
Чем contain: paint отличается от overflow: hidden? Чем contain: size отличается от простого указания width и height?
Добавлен скриншот из исходной статьи. На нём заметна огромная экономия времени работы.
Присоединяюсь!
Попробовал поэксперементировать с поведением contain: size.
Поведение почти 1 в 1 как у строго заданных width/height. Однако наткнулся на кое-что странное:
https://jsfiddle.net/z3x4sev3/
В Chrome 52.0.2743.116 элемент с display: inline-block и contain: size по умолчанию вертикально выравнен по baseline (слева элемент с contain: size, справа элемент с height: 0, зеленым обозначен их общий родитель):
А вот как замерить производительность с данным свойством и без него я честно говоря не понимаю.
При анимации как вызывающих relayout свойств (font-size, padding), так и не вызывающих (background-color) у одного элемента из 6 тысяч время layout и paint примерно одно и то же не зависимо от установки свойства contain: size на анимируемый элемент (у всех элементов фиксированный width и height). Та же ситуация и с анимацией одновременно 2 тысяч элементов (что с contain: size на каждом, что без него, разницы нет)
Поведение почти 1 в 1 как у строго заданных width/height. Однако наткнулся на кое-что странное:
https://jsfiddle.net/z3x4sev3/
В Chrome 52.0.2743.116 элемент с display: inline-block и contain: size по умолчанию вертикально выравнен по baseline (слева элемент с contain: size, справа элемент с height: 0, зеленым обозначен их общий родитель):
А вот как замерить производительность с данным свойством и без него я честно говоря не понимаю.
При анимации как вызывающих relayout свойств (font-size, padding), так и не вызывающих (background-color) у одного элемента из 6 тысяч время layout и paint примерно одно и то же не зависимо от установки свойства contain: size на анимируемый элемент (у всех элементов фиксированный width и height). Та же ситуация и с анимацией одновременно 2 тысяч элементов (что с contain: size на каждом, что без него, разницы нет)
Это статья-перевод, просто north-elbrus почему-то это не указала. Почитал оригинал, у Пола Льюса написано не сильно понятней. Полагаю, теперь кому-то надо сделать разбор полетов по этому свойству)
Данное свойство нужно для ограничивания стилей в определенном слое.
Например если у вас есть различные виджеты, подгружаемые с другого сайта. Чтобы стили сайта не распространялись на виджет, можно будет прописать ему contain (contain content)
Также можно использовать для скрытых на экране элементов, чтобы браузер отрисовывал их только когда они видны (contain paint)
Например если у вас есть различные виджеты, подгружаемые с другого сайта. Чтобы стили сайта не распространялись на виджет, можно будет прописать ему contain (contain content)
Также можно использовать для скрытых на экране элементов, чтобы браузер отрисовывал их только когда они видны (contain paint)
CSS-стили, предназначенные исключельно для оптимизации производительности — интересный поворот.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
CSS Containment