⚙️ Что такое свойство visibility в CSS и зачем оно используется?

visibility — это CSS-свойство, которое управляет видимостью элемента, но при этом не удаляет его из документа. Оно позволяет скрывать элементы без изменения их занимаемого пространства.

➡️ Пример:

<div class="box">Этот блок всегда виден</div>
<div class="box hidden">А этот скрыт, но занимает место</div>

<style>
  .box {
    width: 200px;
    height: 50px;
    border: 1px solid black;
    text-align: center;
    line-height: 50px;
  }

  .hidden {
    visibility: hidden; /* Элемент становится невидимым, но остаётся на месте */
  }
</style>

🗣 В этом примере:

• visibility: hidden; скрывает элемент, но он по-прежнему занимает место в разметке.
• display: none; убирает элемент полностью (в отличие от visibility).

Это свойство помогает управлять интерфейсом без изменения структуры страницы.

CodeBase | Frontend | #CSS

⚙️ Что такое свойство pointer-events в CSS и зачем оно используется?

pointer-events — это CSS-свойство, которое управляет тем, может ли элемент реагировать на клики, наведение и другие события мыши. Оно позволяет делать элементы "прозрачными" для взаимодействия пользователя.

➡️ Пример:

<button class="disabled-btn">Нажми меня</button>

<style>
  .disabled-btn {
    background-color: gray;
    color: white;
    pointer-events: none; /* Элемент игнорирует клики */
    cursor: not-allowed;
  }
</style>

🗣 В этом примере:

• pointer-events: none; делает кнопку некликабельной, но оставляет её видимой.
• Это удобно для отключения кнопок, слоёв с анимацией или создания "сквозных" элементов.
• Значение pointer-events: auto; возвращает стандартное поведение.

Свойство pointer-events полезно для дизайна UI, управления интерактивностью и создания анимаций.

CodeBase | Frontend | #CSS