Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Keith Ostertag
Keith Ostertag
16,619 Points

Help needed with using @counter-style with custom symbols to change list-style using CSS

I'm attempting to use a custom set of symbols for a list-style. I'm attempting to follow the syntax at https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style

All files are in the same directory (test.html, test.css, and bolt3.png) so I don't think the problem is file access.

The syntax page at MDN doesn't state if the symbol needs to be a certain size or type. My symbol file, bolt3.png is a png file and the symbol it contains is 32px x 32px. I've also tried this using a smaller image file of 16px x 16px with the same results.

I'm getting the fallback list-style of normal bullets instead of using my custom symbol.

Here's relevant sections of my sample html and css files, as minimal as possible for simplicity:

test.html:

<link rel="stylesheet" href="test.css">
<div class="main_container">

<ul>tile of list
<li> line 1 </li>
<li> line 2 </li>
<li> line 3 </li>
<li> line 4 </li>
</ul>

test.css

@counter-style bolt {
  system: fixed;
  symbols: url(bolt3.png) url(bolt3.png) url(bolt3.png) url(bolt3.png);
  suffix: " ";
  }
  .main_container {
  list-style: bolt;
  line-height: 3em;
}

Thanks if you can show me what I'm doing wrong here, Keith

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Keith,

I'm not sure if you're only experimenting here or trying to use this in production but it's too early for that.

I don't know if you checked the browser compatibility table on that page but firefox is the only browser that currently supports it. There's also a footnote which mentions that image symbols aren't currently supported. There's a link to the bug report as well.

Here's the caniuse page which contains similar info: http://caniuse.com/#feat=css-at-counter-style

Aside from using images, the only other mistake I see that would prevent this from working is that the list-style needs to be applied to the ul but you've applied it to the container div.

If you target the ul and change the symbol to something else then it should work in firefox.

If your intention is to repeat the same image then you would be better of using system: cyclic and then only 1 image symbol, once it's properly supported.

If you use fixed and run out of symbols then decimal numbering will take over. cyclic will repeat your symbols over and over.

One way you could implement this now is to remove your list-style, add some left-padding to your list items and then apply your image as a background and position it in the padding area. This will kind of fake the list-style you're trying to achieve.

Keith Ostertag
Keith Ostertag
16,619 Points
Keith Ostertag
Keith Ostertag
16,619 Points

Hi Jason-

Thanks for your thorough and helpful answer.

Funny, I had been applying the list-style to the ul but was getting numbers instead of bullets! Since I knew that to be wrong for a ul I had tried applying it up the chain and was surprised to then be getting bullets as the fallback ...

I do know how to solve this by using the image as background, as you mention, but that method didn't work in my particular case.

Thanks also for pointing out the system:cyclic option, missed that somehow.

This was just an exercise for me to learn various methods. Gawd, not checking the compatibility chart cost me hours! But I did learn a few things...

Thank you very much for taking the time to correct me.

Keith

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

So when you were getting the numbers is when it was working correctly.

It's ok for a ul to have numbered list items. Whether that's a good idea or not is another matter. List items can have any list-style-type regardless of whether they are inside a ul or an ol

The description for the fallback descriptor explains that it will ultimately fall back to the decimal style if nothing else works out. In your case, since images aren't supported yet and you didn't provide a fallback, it has to ultimately fall back to decimal style.

From the description for the fallback descriptor:

If there are either no fallback systems described or if the chain of fallback systems are unable to represent a counter value, then it will ultimately fall back to the decimal style.

So firefox won't fall back to the default disc type in its own stylesheet because it's following the specification.

Running this in Chrome will produce bullets (disk type) because it hasn't implemented this feature yet. It will ignore the @counter-style and ultimately fall back to the default disk type in its own stylesheet.