The CSS stylesheet for Vector (loaded from https://translatewiki.net/w/load.php?lang=fr&modules=ext.echo.styles.badge%7Cext.uls.pt%7Coojs-ui.styles.icons-alerts%7Cskins.vector.styles.legacy&only=styles&skin=vector) now references a missing SVG image for the bullet. And the bullets before items in unordered lists look now different.

It has been recently changed to use now this rule:

@media screen {
 /* ... */
    ul {
        list-style-image: 'images/bullet-icon.svg'
    }
 /* ... */
}

However, the syntax is invalid: the value for "list-style-image" cannot be a 'string', but must be an url('string').

Additionally a relative URL will work only if the image's URL is relative to the location from where the site stylesheet is loaded (https://translatewiki.net/w/load.php), so it is looking for an image from "https://translatewiki.net/w/images/bullet-icon.svg" (which results in a "404 page not found" status). If it does not exist at that location or must come from another site, the URL should be absolute in the global sitewide stylesheet:

@media screen {
 /* ... */
    ul {
        list-style-image: url('https://upload.wikimedia.org/wikipedia/commons/b/bf/Vector-bullet-icon.svg')
    }
 /* ... */
}

Note that you may host a local copy of that small SVG in a static folder on this site instead of using Commons.

That bullet is a black disc ([[File:Vector-bullet-icon.svg|top]]) from "File:Vector-bullet-icon.svg" for the "Vector" skins (legacy and 2021, before the recent change detected since 24 May). There's a different bullet for "Monobook" which is a dark cyan filled square ([[File:Monobook-bullet.svg|top]]) from "File:Monobook-bullet.svg".

But usually in web browsers, there are at least three different bullets defined for unordered lists, depending on their embedding level:

ul { list-style-type: disc }
ul ul { list-style-type: circle }
ul ul ul { list-style-type: square }

These rules will use a disc for the 1st level of unordered list, a circle for the 2nd level, and a square for the 3rd level or higher. Some browsers extend that to allowing easier distinction of higher levels, for example by adding a few more symbols, or rotating these three symbols like this:

ul ul ul ul,
ul { list-style-type: disc }
ul ul ul ul ul,
ul ul { list-style-type: circle }
ul ul ul ul ul ul,
ul ul ul { list-style-type: square }

CSS also includes 2 other special triangular bullets for opening/closing sublists in trees. The triangles are used like arrow heads and are dependant of the current BiDi text direction (the "closed" bullet should be pointing to the Bidi forward "inline" direction, i.e. leftward or rightward for horizontal text layout depending on Bidi direction, or downward for the East-Asian vertical layout; the "open" bullet should be pointing to the forward "block" direction, downward for the horizontal text layout, or leftward for the East-Asian vertical layout). For this reason, custom bullets should not be using triangles or arrow heads, unless their pointing direction is controled by more advanced CSS selectors, or should not even use rectangles or dashes (think about vertical text).

Suitable custom bullets not requiring control of the direction direction could however be asterisks, double circles, double squares, filled square with surrounding hollow, disc with surrounding hollow... They should also avoid using plain black or plain white color if we want them to be visible on the light or dark background. Before that change they were colored in dark cyan, which is correct in msot situations, except if the unordered list is shown on medium cyan/blue/grey backgrounds, where they become difficult to read: you need a color contrasting with the background (by default in browsers they are drawn using the "current" text color, but custom CSS in the SVG would require using a computed color, such as blending the "current" text color with an "opacity" set to about 50%~75%, or reducing the color saturation in HSL or HSV by a 50%~75% factor, or rotating the color hue in HSL or HSV by about ±30°, or some combination of these effects).

These last three are using symbol fonts to display the characters:

• a small U+2022 '•', or larger with U+25FC '●'(for list-style-type: disc)
• a small U+25AA '◦', or larger with U+25CB '○' (for list-style-type: circle)
• a small U+25AA '▪', or larger with U+25A0 '■' (for list-style-type: square)

and by default they are drawn using the "current" text color instead of forcing them to black (Vector skin) or dark cyan (Monobook skin). However web browsers generally map these to an internal font ensuring that their size is the same, and generally slightly bigger than the "small" characters, but still smaller than a letter "o". They are positioned in the "outer" margin, and vertically aligned to the middle of the line (and not on the baseline). The size of these symbols are proportional to the current font size, slightly smaller than lowercase letters (they should be positioned slightly above the alphabetic baseline, and either centered vertically on the "M"-height, or aligned at top of the "x"-height).

By default in the standard Vector skin or the standard Monobook skin, only one "disc" symbol is used. This was the behavior until recently. The former 'images/bullet-icon.svg' may have also been deleted from static resources of this wiki server. So now we see the default symbols of browsers, they are rendered in the "current" text color and no longer statically colored (in black or dark cyan). For example in these unordered lists:

<div style="margin:1px 2em;font-size:120%;line-height:normal;background:#FFF;color:red;padding:0">
* item 1
** item 1.1
*** item 1.1.1
**** item 1.1.1.1
**** item 1.1.1.2
*** item 1.1.2
** item 1.2
* item 2
</div>

You may want to use the "current" color in the SVG rather than using plain "black" (consider the case where this site is viewed with a "dark" view mode on a dark background, a black bullet would not be fine, and that's why in Monobook it was using a dark cyan color (which was also distinctive from default colors for links). And may want to use three symbols (or more), possibly by cycling them as indicated above, to make multilevel lists easier to read by more obvious distinction of level than just their relative indentation.

Apparently we have that version of Vector deployed today in Wikimedia wikis (e.g. Wikipedia or Wiktionnary in all language editions), with the same bug (that was already signaled the previous day in Translatewiki.net support, because this was only detected there and Wikimedia wikis were still not showing the issue with the new version of Vector.css), as the referenced bullet image is missing and we now see the browser-default uncolored bullets (disc, circle and square) as a fallback and also get the same "404 page not found" error when loading pages (this fallback effect is visible now in any unordered list).

So this new stylesheet version was not fully installed as initially intended.

After I made this report on Translatewiki.net (after experiencing it there for a bit more than 24 hours), and then forwarded here one day later on Phabricator (when I detected it too in all public Wikimedia wikis), it has been signaled again by other users on several English Wikipedia's community support pages, with a tracking link added later to pointing here now (similar reports are also appearing on other Wikimedia wikis).

This Phabricator bug report is also tracked now since a few hours by Translatewiki.net Support page (where it was reported for the first time on https://translatewiki.net/wiki/Thread:Support/Bug_in_vector.css:_missing_bullet).