6 ms·

Custom Bullets with CSS:Marker

46 points by oedmarap 6y ago

vosper 6y ago
So... I can see why these ought to be styleable, but what are the uses for this apart from the cute ones on this page? Is there a usability or accessibility problem with markers that can now be addressed? Are we mostly going to see this used to make the markers match the site styling? Perhaps for better emphasis?
- deleted 6y ago
  [deleted]
- RobertKerans 6y ago
  Yeah, just a small quality of life improvement to make it easier to match styling. Anything that makes it easier to do that without needing to fiddle around with removing the list style (then using ::before or whatever to reapply custom style) is kinda nice, and makes the intent of the CSS author a bit clearer. Not a huge thing tho
benatkin 6y ago
I'm surprised Google is embedding Glitch here. Besides being an odd choice, I couldn't get it to view source the first time and it took more than 5 seconds to view source the second time.
sequoia 6y ago
The embedded glitch things all over the place are unwelcome on this page. This is demonstrating features of HTML and CSS within a webpage ffs, do you really need to embed another system a half dozen times? Doesn’t work well at all on my iOS/Safari (weird scrolling/layout, doesn’t preload so I’m scrolling to a blank page). All these embeds to show a webpage, on a webpage. C’mon folks use your noodles here.
- contravariant 6y ago
  Is this why loading it launches a ridiculous number of requests that seem to run afoul of some of my security settings?
  - achn 6y ago
    What tool do you use to control this?
    - contravariant 6y ago
      Firefox. In particular it's developer tools (Ctrl+Shift+E)
gwern 6y ago
https://www.caniuse.com/css-marker-pseudo https://www.caniuse.com/css-marker-pseudo 18% support. It's going to be a long time before you can rip out all those list marker CSS hacks. :(
- onion2k 6y ago
  Won't that jump to about 60% a few days after the Chromium based browsers have updated though? It's only 18% now because Chrome, Edge and Chrome for Android aren't ready yet. Thats still far too low to use it without a fallback, of course, but it's high enough to justify using it as a progressive enhancement.
  - gwern 6y ago
    I don't know about how fast it'll go to 60%, but what's the 'progressive enhancement' about it? You still have to implement and debug the old list markers, and you'd use the new elements to do just the same thing, so why bother until you can rip out the old code and replace it entirely?
bennettfeely 6y ago
Learn the best practices in web development on a site that makes 408 HTML requests with 43 MB of resources, and has popups. Chrome inspector says it took my Macbook 1.3 minutes to finish loading.
- Igelau 6y ago
  I followed the one author's blog link: https://nerdy.dev/ https://nerdy.dev/ It says he enjoys 'minimalism'. I keep seeing this from UX people with these baroque monster websites, is that just a meaningless buzzword now?
  - RobertKerans 6y ago
    If they're specifically just UX designers and it's clearly minimalist design, then maybe not. If they're actually listing engineering skills, then hard yes.
  - bennettfeely 6y ago
    Adam posts a lot of good tips and tricks and is an expert in all things CSS. My criticism was more directed at the performance of the web.dev website which I'm sure is out of his control.
  - unicornporn 6y ago
    > is that just a meaningless buzzword now? Very much, yes. If anything that word is now a warning sign. Thanks mr. minimal nerdy dev for having me download a minimal 9 MB auto playing header video over my mobile plan on your landing page[1]. This[2] is a better example of "minimalism" (I have to wash my mouth now). Notice something? Not a single mention of the word "minimal" in the entire article. Aaand, developer tools says it's 84 KB of data. Compare that to the the 13800 KB of the nerdy.dev landing page. Funny, [2] seems to be 164 times "more minimal" than [1]. [1] https://nerdy.dev/ https://nerdy.dev/ [2] https://cheapskatesguide.org/articles/low-bandwidth-hosting-tips.html https://cheapskatesguide.org/articles/low-bandwidth-hosting-...
    - 6y ago
The_rationalist 6y ago
I putted the bullets on ::before in order to make them stylable or even a :first-letter but that's an improvement!
- SippinLean 6y ago
  "Before" and "after" refers to the position relative to the content. The bullets aren't part of the content.
  - The_rationalist 6y ago
    I don't understand your point, could you expand it?
    - raihansaputra 6y ago
      I think what he's saying is that the pointers should not be in the ::before/::after part as it is not part of the content. The page displays that the new ::markers would be displayed before the ::before tag. It's definitely a usable hack to have the pointer in the ::before section, but it should not be the way from the start. In between the <ul>'s should be just the displayed content, not the pointer.
pdnell 6y ago
Using Safari on iOS 14, none of the fun emoji examples worked so...
pupppet 6y ago
1995 me is very jealous, better late than never I guess.

46 points by oedmarap 6y ago

So... I can see why these ought to be styleable, but what are the uses for this apart from the cute ones on this page? Is there a usability or accessibility problem with markers that can now be addressed? Are we mostly going to see this used to make the markers match the site styling? Perhaps for better emphasis?

deleted 6y ago
[deleted]
RobertKerans 6y ago
Yeah, just a small quality of life improvement to make it easier to match styling. Anything that makes it easier to do that without needing to fiddle around with removing the list style (then using ::before or whatever to reapply custom style) is kinda nice, and makes the intent of the CSS author a bit clearer. Not a huge thing tho

benatkin 6y ago

I'm surprised Google is embedding Glitch here. Besides being an odd choice, I couldn't get it to view source the first time and it took more than 5 seconds to view source the second time.

sequoia 6y ago

The embedded glitch things all over the place are unwelcome on this page. This is demonstrating features of HTML and CSS within a webpage ffs, do you really need to embed another system a half dozen times? Doesn’t work well at all on my iOS/Safari (weird scrolling/layout, doesn’t preload so I’m scrolling to a blank page). All these embeds to show a webpage, on a webpage. C’mon folks use your noodles here.

contravariant 6y ago
Is this why loading it launches a ridiculous number of requests that seem to run afoul of some of my security settings?
- achn 6y ago
  What tool do you use to control this?
  - contravariant 6y ago
    Firefox. In particular it's developer tools (Ctrl+Shift+E)

gwern 6y ago

https://www.caniuse.com/css-marker-pseudo https://www.caniuse.com/css-marker-pseudo 18% support. It's going to be a long time before you can rip out all those list marker CSS hacks. :(

onion2k 6y ago
Won't that jump to about 60% a few days after the Chromium based browsers have updated though? It's only 18% now because Chrome, Edge and Chrome for Android aren't ready yet. Thats still far too low to use it without a fallback, of course, but it's high enough to justify using it as a progressive enhancement.
- gwern 6y ago
  I don't know about how fast it'll go to 60%, but what's the 'progressive enhancement' about it? You still have to implement and debug the old list markers, and you'd use the new elements to do just the same thing, so why bother until you can rip out the old code and replace it entirely?

bennettfeely 6y ago

Learn the best practices in web development on a site that makes 408 HTML requests with 43 MB of resources, and has popups. Chrome inspector says it took my Macbook 1.3 minutes to finish loading.

Igelau 6y ago
I followed the one author's blog link: https://nerdy.dev/ https://nerdy.dev/ It says he enjoys 'minimalism'. I keep seeing this from UX people with these baroque monster websites, is that just a meaningless buzzword now?
- RobertKerans 6y ago
  If they're specifically just UX designers and it's clearly minimalist design, then maybe not. If they're actually listing engineering skills, then hard yes.
- bennettfeely 6y ago
  Adam posts a lot of good tips and tricks and is an expert in all things CSS. My criticism was more directed at the performance of the web.dev website which I'm sure is out of his control.
- unicornporn 6y ago
  > is that just a meaningless buzzword now? Very much, yes. If anything that word is now a warning sign. Thanks mr. minimal nerdy dev for having me download a minimal 9 MB auto playing header video over my mobile plan on your landing page[1]. This[2] is a better example of "minimalism" (I have to wash my mouth now). Notice something? Not a single mention of the word "minimal" in the entire article. Aaand, developer tools says it's 84 KB of data. Compare that to the the 13800 KB of the nerdy.dev landing page. Funny, [2] seems to be 164 times "more minimal" than [1]. [1] https://nerdy.dev/ https://nerdy.dev/ [2] https://cheapskatesguide.org/articles/low-bandwidth-hosting-tips.html https://cheapskatesguide.org/articles/low-bandwidth-hosting-...
  - 6y ago

The_rationalist 6y ago

I putted the bullets on ::before in order to make them stylable or even a :first-letter but that's an improvement!

SippinLean 6y ago
"Before" and "after" refers to the position relative to the content. The bullets aren't part of the content.
- The_rationalist 6y ago
  I don't understand your point, could you expand it?
  - raihansaputra 6y ago
    I think what he's saying is that the pointers should not be in the ::before/::after part as it is not part of the content. The page displays that the new ::markers would be displayed before the ::before tag. It's definitely a usable hack to have the pointer in the ::before section, but it should not be the way from the start. In between the <ul>'s should be just the displayed content, not the pointer.

pdnell 6y ago

Using Safari on iOS 14, none of the fun emoji examples worked so...

pupppet 6y ago

1995 me is very jealous, better late than never I guess.