[csswg-drafts] [css-pseudo-class-selectors] :link/:active[modifier=SourceAnchor] Active href element (#11439)

wesleyolis has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-pseudo-class-selectors] :link/:active[modifier=SourceAnchor] Active href element ==
Hi,

I would like to propose the following improvement to the: active selector which fits in with: visited, :link, and active, to address a shortcoming. The final form names, and symbols, used are not important, but the modifier behaviours and functionality is which would need to be incorporated to prevent the need for preprocessing of page generation or use of javascript post-page rendering for traditional web applications. The ability to look into the styles pre-render and not an onready post document load, would improve the responsiveness for most basic websites. This leads to further proposals for javascript, which is the registration of CSS style selector that calls a javascript call back method.

* 5.11.2 The link pseudo-classes: :link and :visited

**Proposal:**
Either using :link or: active selector, introduce similar to the attribute selector and modify the parameter, to allow the following combinations and behaviours, which would enable the style of specific links and elements that cause navigate to the current page or to the current active anchor. 
**The most important of these combinations is Active-Source-Anchor**
Instead of using an href, attribute selector, which is not a design handles variations in relative file paths and all added complexity also 

Default modifier behaviour is start-modifier=anchor
Cases:
1. Use:link to style different forms of hyperlinks
```.css
:link[start-Modifier, [end-Modifier]]
{
background-colour:#blue
}
```
2. use :active CSS selector with modifier to style hyperlinks
```.css
:active[start-Modifier, [end-Modifier]]
{
background-colour:#blue
}
```

EBNF, further modifiers

[end Modifier] is optional, otherwise always start with and run to the end for a match.
[start-Modifier] => replaced by an array of modifiers [DN, PathResolved, Anchor] 
[start-Modifier] => [[[Negation]Modifier, [Negation]Modifier, [Negation]Modifier]]
i.e 
```.css
:active[[DN, PathResolved, Source-Anchor]] {

}
```
ignoremodifier, basically just skips that part.


Modifiers:
1. Schema
2. Domain Name (DN)
2.2. DN-NPort (
4. Fully Qualified Domain Name (FQDN)
5. Port
6.1 Path, exact path 
6.2 PathN(n), where n is an integer that specifies the path relativeness i.e -1,+1
5.3 PathResolved, once relativeness has been resolved
7. Parameters
8. Anchor (Current normal :active behaviour)
8.2. **Active-Source-Anchor**, take precedence over Source-Anchor, would only be available on :active selector modifier
8.3 Source-Anchor


**Examples:**

Style the pair of paired behaviour elements to gather.
Active menu item and the active item it has set focus to.
```.css
.menu a:active[active-source-anchor]{
background-colour:#red
}

.menu a:active{
background-border:#orange
}
```


Style the active page.
```.css
.menu a:active[DN-NPort]{
background-colour:#red
}
```
Style the active page, but ignore parameters.
```.css
.menu a:active[[DN-NPort, -Paramters]]{
background-colour:#red
}
```



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11439 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 5 January 2025 07:25:43 UTC