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

Add ::-webkit-details-marker #5869

Open
Schweinepriester opened this issue Apr 29, 2021 · 2 comments
Open

Add ::-webkit-details-marker #5869

Schweinepriester opened this issue Apr 29, 2021 · 2 comments

Comments

@Schweinepriester
Copy link
Contributor

Coming from https://css-tricks.com/how-to-animate-the-details-element/

Turn off the default triangle: details summary::-webkit-details-marker { display:none; }. You can't animate that one.

=> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#customizing_the_disclosure_widget

Chrome doesn't support this yet, however, so we also need to use its non-standard ::-webkit-details-marker pseudo-element to customize the appearance in that browser.

The intention seems to be that https://developer.mozilla.org/en-US/docs/Web/CSS/::marker will cover <summary> as well, but doesn't seem to be the case just yet.

https://stackoverflow.com/questions/6195329/how-can-you-hide-the-arrow-that-is-displayed-by-default-on-the-html5-details-e seems to gather some information as well.

Tried to find a spec or some docs like some -webkits have, but didn't yet manage to find anything.

@Malvoz
Copy link
Contributor

Malvoz commented May 26, 2021

The intention seems to be that https://developer.mozilla.org/en-US/docs/Web/CSS/::marker will cover <summary> as well, but doesn't seem to be the case just yet.

It is possible but it's different from:

::-webkit-details-marker {
  display: none;
}

I believe the following approaches are the standardized behaviors:

::marker {
  /* `display: none` doesn't work here. */
  content: none; /* Removes the disclosure triangle, in some browsers. */
}

content isn't supported inside ::marker in Safari (https://bugs.webkit.org/show_bug.cgi?id=204163), surprise surprise. 🙂

Another approach is to change the default display: list-item of the summary element, e.g.:

summary {
  display: inline-block; /* Removes the disclosure triangle. */
}

Or to unset the list-style of the summary element:

summary {
  list-style: none; /* Removes the disclosure triangle. */
}

I think the latter 2 options should be widely supported. Hopefully documentation such as MDN will be updated soon to reflect implementations and best practices.

https://web.dev/css-marker-pseudo-element/ is another resource showing how to customize the disclosure triangle.

@GPHemsley
Copy link

Looks like this is now covered by MDN data:
https://caniuse.com/mdn-css_selectors_-webkit-details-marker

(via mdn/browser-compat-data#10013)

There are no links to a spec or MDN entry, but this contains some contextual pointers:
mdn/browser-compat-data#9869 (comment)

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

No branches or pull requests

4 participants