⁣CSS навигация без JS: psevdokoordinaty i otstupy pod hatkoj

Два svojstva - ::target-text i scroll-margin - reshayut problemy yakorej, hash-kollizij i pryachego pod headeron na storone HTML/CSS. Na proizvodstvennykh sajtah s dinamicheskim kontentom ili dizajn-sistemami chasto ignorirujut ony, vyodja JS-koostili i narushayut stabilnost layouta.

Podsvetka fragmenta bez ID
Psewdoelement ::target-text v Chrome 131+ pozvolyaet podsvetit tekst, na kotoryj ssylayetsya cherez #:~:text=. Eto rabotaet bez ykornej i bez skriptov. Naprimer, sdelat' link:
/#:~:text=nuzhnyj+tekst
Ili s kontekstom:
#:~:text=nachalo-,do,-konec
CSS minimalen:

::target-text {
  background-color: yellow;
  color: black;
}

Minus: net podderzhki v Firefox i Safari. No kak progressivnoe uluchshenie dlya Chromium - otlichno.

Otstup pod hatkoj s scroll-margin
Fixed header pyatatet zagolovok pri perekhode po #id. Ranshe eto trebovalo padding na bloke ili JS-vychisleniya. S scroll-margin yor sam znayet svoj otstup:

.anchor {
  scroll-margin-top: 80px;
}

Rabotaet s lyubymi hosh-ssylkami i scrollIntoView(). Dlya dublikatov ID - ne dublikat. Esli vtoraja vstrechaetsya, navigatsiya lomaetsya.

Tipovaya oshibka i trade-off
Chertaya sozdavat' mnogo ykorej v HTML, sozdayut kollizii dublikatov ID. Reshenie: ispolzovat ::target-text dlya podsvetki teksta bez privyazki k ID. No uchyot, eto progressivnoe uluchshenie: dlya polzovatelej v Firefox nichego ne podsvetitsya. Zachem? Dlya medijnyh sajtov, e-commerce, gde nado delegirovat' kontekst v URL.

Prakticheskij sovet
Combo-priem dlya stabilnosti:

.anchor {
  scroll-margin-top: 80px;
}
:target {
  outline: 2px dashed blue;
}
::target-text {
  background: rgba(255, 255, 0, 0.5);
}

scroll-margin i :target mozhno bez straktha v production. ::target-text - kak bonus dlya Chrome, no bez eto ne lomat.

Vyvod:
S zamenoj JS-ykorej na scroll-margin i ::target-text ty poluchish predskazuemyj layout bez bagov ot paddingov i bez poteri dostupnosti.