👩‍💻👩‍💻 Различные (и современные) способы переключения контента

Давайте уделим немного времени рассмотрению Dialog API, Popover API и остальных. Рассмотрим, когда лучше использовать каждый из них в зависимости от требований. Модальные или немодальные? JavaScript или чистый HTML/CSS? Не уверены? Не волнуйтесь, мы разберёмся во всём этом.

Легко ориентироваться на то, что знакомо. Когда речь идёт о переключении содержимого, это может быть display: none или opacity: 0 с использованием JavaScript. Но сегодня веб стал более современным, поэтому, возможно, самое время взглянуть на различные способы переключения содержимого с высоты птичьего полёта — какие нативные API поддерживаются сейчас, их плюсы и минусы, а также некоторые вещи, о которых вы могли не знать (например, псевдоэлементы и другие неочевидные вещи).

Итак, давайте потратим некоторое время на рассмотрение раскрытия (<details> и <summary>), Dialog API, Popover API и прочего. Рассмотрим, как правильно использовать каждый из них в зависимости от требований. Модальный или немодальный? JavaScript или чистый HTML/CSS? Не уверены? Не волнуйтесь, мы расскажем обо всём этом.

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

📱 @dev_notes_ru

#Frontend #PopoverAPI #DialogAPI