[selectors] Relax `|=` to also match value parts separated by spaces
selectors-5Closed as Retracted
There's a common use case to match class names with prefixes. To handle this, authors very often use the pipe equals attribute selector (`|=`). So they use selectors like `[class|="prefix"]`. Though that selector was mainly created for matching `lang` attribute values. So using this operator means the value can either be exactly the given value or can begin with the value immediately followed by a hyphen, e.g. `en`, `en-US`, `en-GB`, etc. I.e. `[class|="prefix"]` does _not_ match, in case the class is somewhere in the middle, e.g. `class="first prefix-second"`.
Due to that restriction, authors instead sometimes fall back to some combination of `[class^="prefix-"], [class*=" prefix-"]`. Though that's rather hacky for the given use case.
Therefore, in #10001 the suggestion came up to relax `|=` to also match after spaces, meaning it would work as before but also match prefixes on whitespace-separated values.
Note that this loosening up of the matching is a little different to the wildcard solution resolved on in #10001 in that it also matches values that are not followed by a dash when they exactly match the given value.
So `[class|="prefix]` would match `class="prefix"`, `class="prefix-foo"`, and `class="foo prefix-bar"` (but not `class="prefixfoo"`), while the wildcard solution (currently) requires the value to be hyphenated.
This of course requires web compatibility, which seems to be given from the research that was done so far, see https://github.com/w3c/csswg-drafts/issues/10001#issuecomment-2589079152 and following comments.
Sebastian
关闭于 7 天前 6 条评论