#frontend #css #property #contain #CSSContainment

👩‍💻 CSS свойство contain

CSS Containment используется для оптимизации и открытия возможностей стилизации путём изоляции элементов от остальной части страницы. Различные значения contain (size, paint, layout и т. д.) обеспечивают различные преимущества и компромиссы.

Назначение CSS свойства contain (CSS Containment) двояко:

✅ Оптимизация
✅ Возможности стилизации

Когда мы применяем contain к элементу, мы изолируем его (и его потомков) от остальной части страницы, и эта изоляция открывает все возможности. Существуют различные типы изолирования, выполняющие разные задачи, и мы рассмотрим каждый из них.

🖥 Читать статью

📱 @dev_notes_ru

👩‍💻 CSS Веерное раскрытие с grid и @property

Веерное раскрытие — это расширяющаяся анимация, при которой группа предметов появляется один за другим, рядом друг с другом, как будто их выкладывают из стопки. Как правило, при этом наблюдается едва уловимое подпрыгивание.

Эффект обычно достигается за счёт тайминга и позиционирования каждого элемента по отдельности с очень жёстко заданными значениями. Однако это может оказаться очень трудоёмкой задачей. Можно сделать всё немного проще, если позволить родительскому контейнеру элементов сделать это за нас.

🖥 Читать статью

📱 @dev_notes_ru

#frontend #css #grid #property