Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-pseudo] :link/:active[modifier=SourceAnchor] Active href element #11439

Open
wesleyolis opened this issue Jan 5, 2025 · 1 comment
Open
Labels
css-pseudo-4 Current Work

Comments

@wesleyolis
Copy link

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
:link[start-Modifier, [end-Modifier]]
{
background-colour:#blue
}
  1. use :active CSS selector with modifier to style hyperlinks
: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

:active[[DN, PathResolved, Source-Anchor]] {

}

ignoremodifier, basically just skips that part.

Modifiers:

  1. Schema
  2. Domain Name (DN)
    2.2. DN-NPort (
  3. Fully Qualified Domain Name (FQDN)
  4. 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
  5. Parameters
  6. 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.

.menu a:active[active-source-anchor]{
background-colour:#red
}

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

Style the active page.

.menu a:active[DN-NPort]{
background-colour:#red
}

Style the active page, but ignore parameters.

.menu a:active[[DN-NPort, -Paramters]]{
background-colour:#red
}
@BadTrucker99

This comment was marked as spam.

@SebastianZ SebastianZ added the css-pseudo-4 Current Work label Jan 5, 2025
@SebastianZ SebastianZ changed the title [css-pseudo-class-selectors] :link/:active[modifier=SourceAnchor] Active href element [css-pseudo] :link/:active[modifier=SourceAnchor] Active href element Jan 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-pseudo-4 Current Work
Projects
None yet
Development

No branches or pull requests

3 participants