Custom Bullets with CSS:Marker | Hacker News Reader

Custom Bullets with CSS:Marker

web.dev

46 pointsoedmarap23 comments

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.

I followed the one author's blog link: 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?

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.

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.

> 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/

[2] https://cheapskatesguide.org/articles/low-bandwidth-hosting-...

It took me a while to figure out that I had to click the button on the gaudy header to scroll down. When the article previews started bouncing in sporadically, I scrolled back up to get my bearings. I went too far and accidentally scrolled into the gaudy header again. You can scroll into it but you can't scroll out of it.

This is Haunted House design. I enter through fog, things jump out at me, the paths are hidden, and they vanish behind me.

> This is Haunted House design. I enter through fog, things jump out at me, the paths are hidden, and they vanish behind me.

Haha, HHD (Hounted House Design) is now officially a thing.

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.

Is this why loading it launches a ridiculous number of requests that seem to run afoul of some of my security settings?

What tool do you use to control this?

Firefox.

In particular it's developer tools (Ctrl+Shift+E)

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?

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

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. :(

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.

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?

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.

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

"Before" and "after" refers to the position relative to the content. The bullets aren't part of the content.

I don't understand your point, could you expand it?

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.

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

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

Reply on news.ycombinator.com