В чем разница между :focus-within и :has(:focus)? [закрыто] ⇐ CSS

[Anonymous]

Похоже, что :focus-within можно заменить на :has(:focus). Они оба были добавлены в один и тот же проект спецификации уровня 4, так что все не так просто».

Код: Выделить всё

:focus-within

было невозможно до того, как был реализован :has()». Итак, есть ли разница между ними?
Читая MDN, я обнаружил, что :focus-within должен работать с теневыми элементами DOM (прямая цитата: «Это включает в себя потомков в теневых деревьях»), а поскольку :has(:focus) работает только с плоским деревом, это было бы допустимым различием. Однако я не смог четко воспроизвести это и спецификацию утверждает:

Псевдокласс ... применяется к ..., а также к элементу (или псевдоэлементу), чей потомок в плоском дереве (включая узлы, не являющиеся элементами, такие как текстовые узлы) соответствует условиям сопоставления :focus.

Явное упоминание «плоского дерева» без упоминания «теневого дерева» противоречит утверждению MDN.
Одно отличие is :focus-within также включает в себя элемент, на котором вы фокусируетесь (несмотря на слово «внутри», которое подразумевает, что оно нацелено только на дочерние элементы). Однако, если вам нужно сопоставить текущий элемент и его дочерние элементы, вы можете использовать &:focus, &:has(:focus) (или :is(...), если вы не используете вложенность CSS), что делает предложение более семантическим, чем :focus-within.
An пример :focus-within и того, как :has(:focus) может заменить его: «Перейти к содержимому»:
HTML:

Код: Выделить всё

Skip to the [url=#main]content[/url] or [url=#footer]footer[/url].

CSS (

Код: Выделить всё

:focus-within

):

Код: Выделить всё

.skip-link {
transform: translateY(-100%);

&:focus-within {
transform: translateY(0%);
}
}

CSS (

Код: Выделить всё

:has(:focus)

):

Код: Выделить всё

.skip-link {
transform: translateY(-100%);

&:has(:focus) {
transform: translateY(0%);
}
}

Есть ли другие различия?


Подробнее здесь: https://stackoverflow.com/questions/786 ... d-hasfocus