React Frontend Developer

Question 1

В чем разница между display: none и visibility: hidden?

Accepted Answer

• display: none полностью удаляет элемент с веб-страницы, как если бы его не существовало. Он не занимает места в макете, и элементы после него сдвигаются, чтобы занять его пространство.• visibility: hidden скрывает элемент, но оставляет его место на странице. Элемент всё ещё занимает пространство в макете, но не виден пользователю.

Question 2

Чем отличается скрытие элементов с помощью opacity, visibility и display: none?

Accepted Answer

opacity: 0 делает элемент невидимым, но он продолжает занимать место и реагировать на события. visibility: hidden также скрывает элемент, сохраняя его место в layout, но события мыши не срабатывают. display: none полностью удаляет элемент из потока документа, освобождая занимаемое место.

Question 3

Остается ли элемент в DOM при display: none?

Accepted Answer

Да, элемент остается в DOM при display: none.Он просто исключается из layout и не отображается на странице.Элемент не занимает место и не участвует в рендеринге.DOM-узел при этом сохраняется.

Question 4

Как скрытие элемента влияет на DOM и поток документа?

Accepted Answer

Свойство display: none полностью удаляет элемент из потока документа, он не занимает места и невидим. Свойство visibility: hidden делает элемент невидимым, но он продолжает занимать место в потоке. Оба свойства не удаляют элемент из DOM-дерева, но display: none исключает его из рендеринга.

Question 5

Как скрытые элементы влияют на SEO?

Accepted Answer

Скрытые элементы, как правило, не индексируются поисковыми системами, если они полностью скрыты с помощью CSS (display: none). Однако, если элемент скрыт, но его содержимое все еще доступно для чтения (например, через visibility: hidden), поисковые роботы могут его проиндексировать. Использование скрытых элементов для манипуляции SEO может привести к санкциям.

Question 6

Для чего используется pointer-events: none?

Accepted Answer

Свойство pointer-events: none отключает обработку событий мыши и касаний для элемента. Это значит, что элемент не будет реагировать на клики, наведение или другие действия указателя. Часто используется для временного отключения кнопок, создания оверлеев или для того, чтобы сделать элемент "прозрачным" для взаимодействия с нижележащими элементами.

Вопросы React Frontend Developer