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

Link styling targets named anchors #1448

Open
donquixote opened this issue Apr 30, 2024 · 0 comments
Open

Link styling targets named anchors #1448

donquixote opened this issue Apr 30, 2024 · 0 comments

Comments

@donquixote
Copy link

donquixote commented Apr 30, 2024

Background: Named anchors

A "named anchor" is a deprecated feature in html that uses an anchor tag (<a>) with the "name" attribute to form a bookmark link destination. The modern replacement is to use the id attribute on another element, and drop the anchor tag.

While deprecated, named anchors can still end up in rich test, if they are copied from elsewhere.
Drupal's text filters or ckeditor may remove the name attribute, but still leave an <a> tag.

Current situation: oe_theme styles

In oe_theme there is a rule that styles every <a> tag in a rich text area.

.ecl a:is([class*=ecl-u-]), .ecl a:not([class*=ecl-],[class*=wt-]), .ecl-link {
    color: #004494;
    margin: 0;
    text-decoration: underline;
}

This also hits named anchors.

Problem

Named anchors that end up in rich text are styled like real links.
This happens even if the name attribute gets removed by text filters or CKEditor.

Other CSS frameworks

In bootstrap there is this CSS to undo the styling of <a> tags.
https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss#L254

// And undo these styles for placeholder links/named anchors (without href).
// It would be more straightforward to just use a[href] in previous block, but that
// causes specificity issues in many other styles that are too complex to fix.
// See https://github.com/twbs/bootstrap/issues/19402

a:not([href]):not([class]) {
  &,
  &:hover {
    color: inherit;
    text-decoration: none;
  }
}

I assume the :not([class]) is to exclude links with no href that trigger some kind of javascript.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant