Синхронизация оглавления без JavaScript за 5 минут.

Описание: Изучите современный CSS с помощью моего руководства https://theosoti.com/you-dont-need-js/ и получите скидку 20% в течение ограниченного времени!

Создайте более интерактивную страницу статьи в блоге, используя только HTML и CSS.

В этом видео я покажу, как создать якорные ссылки, плавную прокрутку и реактивное оглавление без JavaScript. Мы используем современные возможности CSS, такие как scroll-behavior, scroll-margin-top, scroll-target-group и :target-current, чтобы оглавление следовало за статьей по мере чтения.

Это хороший пример прогрессивного улучшения: якорные ссылки и плавная прокрутка широко поддерживаются, в то время как синхронизированное оглавление использует более новые возможности CSS с более ограниченной поддержкой.

Поддержка браузеров:
scroll-behavior: https://caniuse.com/css-scroll-behavior
scroll-target-group: https://caniuse.com/mdn-css_propertie...
:target-current: https://caniuse.com/mdn-css_selectors...

...........................................................................................
Ознакомьтесь с моим руководством по современному CSS и получите скидку 40% в течение ограниченного времени!

https://theosoti.com/you-dont-need-js/

Я подготовил бесплатный 7-дневный курс по электронной почте, который поможет вам понять, на что действительно способен CSS сегодня.

https://theosoti.com/email-course/
...........................................................................................

РАЗДЕЛЫ:
00:00 - Введение в оглавление в CSS
00:55 - Якорные ссылки
01:56 - Плавная прокрутка
02:35 - Отступы при прокрутке
03:40 - Реакция оглавления на прокрутку контента
04:30 - Поддержка браузеров

#css #html #webdevelopment #frontend #front #frontenddevelopment