[csswg-drafts] css-li-marker (#11862)

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

== css-li-marker ==
I recently became aware of the `li::marker` pseudo-element for customizing list markers, while working on similar capabilities for my project, PhilterPaper/Perl-PDF-Builder (PDF::Builder on CPAN). There are some things I'd like to do in HTML/CSS to customize a list marker, but seems to be very difficult with the way it was implemented in `li::marker` (and much easier the way I did it in PDF::Builder). I apologize if this has been covered earlier -- please point me to the appropriate discussion if you wish to close this ticket.

Maybe I'm missing something, but it does not appear to be possible to use HTML `style=` attributes to customize a list marker. Everything is fixed in a `<style>` CSS entry. This isn't too bad for setting an entire `<ol>` or `<ul>` styling, where I can use a selector such as `ol#colored li::marker { }`, although I can't use just `style=`, and I have to make a new entry in `<style>` just for this list.

The big problem is when I want to address individual list items and modify their markers, such as:
```
<html>
 <head>
  <title>List Markers</title>
  <style>
    ul#colored li::marker { color: red; }

    li.red li::marker { color: red; }
    li.yellow li::marker { color: yellow; }
    li.green li::marker { color: green; }
  </style>
 </head>
 <body>
  <h3>unmodified list</h3>
  <ul>
   <li>regular black discs</li>
   <li>run of the mill</li>
  </ul>
  <h3>list with red bullets</h3>
  <ul id="colored">
   <li>red discs</li>
   <li>attention-getter</li>
  </ul>
  <h3>list with multicolored bullets</h3>
  <ul>
   <li class="green">green discs everything is "go" on this project</li>
   <li class="yellow">yellow discs mean there are issues to address</li>
   <li class="red">red discs mean Houston, we have a problem</li>
   <li>default black discs: status unreported</li>
  </ul>
 </body>
</html>
```
The "multicolored bullets" come out black. Should this work? I tried the current releases of Firefox, Chrome, and Edge, and none of them gave colored bullets. I tried `li.red ::marker { }` too, in case it couldn't find `li::marker` as a child of `li.red`, but no success. It would be really useful to be able to address individual bullets in such a manner.

The way I implemented it in PDF::Builder was twofold:
1. an implicit `<marker>` element is added in front of all `<li>` elements, or the user can explicitly give a `<marker style="properties">`.
2. properties for markers get their own names (e.g., `marker-color`) so that an entire list may be thus styled in `<ul style="properties">` or `<ol
style="properties">` without stepping on the _color_ of the list item text.
```
<html>
 <head>
  <title>List Markers</title>
 </head>
 <body>
  <h3>unmodified list</h3>
  <ul>
   <li>regular black discs</li>
   <li>run of the mill</li>
  </ul>
  <h3>list with red bullets</h3>
  <ul style="marker-color: red;"> <!-- can't be color:, as item text would be red! -->
   <li>red discs</li>
   <li>attention-getter</li>
  </ul>
  <h3>list with multicolored bullets</h3>
  <ul>
   <marker style="marker-color: green;"><li>green discs everything is "go" on this project</li>
   <marker style="marker-color: yellow;"><li>yellow discs mean there are issues to address</li>
   <marker style="marker-color: red;"><li>red discs mean Houston, we have a problem</li>
   <li>default black discs: status unreported</li>
  </ul>
 </body>
</html>
```
In PDF::Builder, I have only simple selectors for CSS (element name, class name, or id), with no pseudo-elements or hierarchies. Marker properties need to get unique names, so as not to interfere with other elements.

Anyway, I hope you find this interesting as a different approach to customizing list markers. I'm about to release this, but could change it to be
more consistent with standard CSS, if it is possible to address individual list markers, and even better, if it can be done through an HTML `style=`
attribute.


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


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

Received on Friday, 7 March 2025 14:55:09 UTC