Last modified: 2014-09-13 13:14:57 UTC
Created attachment 10279 [details] Screenshot of en.wikipedia.org on iPad 3 with Retina display Monobook and Vector skins set a bluish-cyanish bullet image for default ul/li list items. This looks nice on traditional low-resolution screens, but is visibly pixelated on high-res displays like the iPad with Retina display, or when zooming in or printing. Recommend using an SVG if possible, with PNG fallback.
A problem here is that we have no cross-browser way to provide SVG + PNG fallback for list-style-image :( We could either go with just SVG and leave other browsers with regular list-style-type: disc (or 'square' for Mononook), or try to use a background-image here, which will cause problems where people overrode the core style (e.g. for FA/GA badges on interwiki list on Wikipedias).
*** Bug 62954 has been marked as a duplicate of this bug. ***
Is a CSS-only solution a possibility? <style> @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { li { position: relative; } li::before { content: ""; border-radius: 3px; border: 3px solid #00528c; position: absolute; left: -13px; top: 8px; } } </style>
That's interesting, but has the same drawbacks in what I described in comment 1.
is there reason that this isn't actually just a basic unicode character because we're worried some fonts might not have a basic round bullet? like so -> •
The original reason was probably IE6 support :) Someone should totally cross-reference our browser support matrix with their CSS support and come up with a gracefully-degrading way of doing this better.
IE6 doesn't support <li> with • ?
I assume you mean a "•" inserted using ::before pseudo-elements? It doesn't support these, yes. The default list style is of course something looking just like this, but it's not possible to change the color of the "list marker" independently of the color of list item text without using additional HTML elements, and I think the point here is the color.
Should I change the bug to "Stop using IE6?" But seriously, we'll add a basic dot character to the wikifont, should be able to solve this right.?
Most icons are supplemented with SVG versions. Though since this is just a basic circle, do we even need an image here? What about the default 'circle' style? Or if we want a custom color, we could use a pseudo-element with the circle as textual character. * http://stackoverflow.com/a/5308785/319266 * http://stackoverflow.com/a/4288590/319266 * http://zekefranco.me/css/change-color-of-bullets/
This was attempted in 502fffe3bf2cb6a8fccb8059436a038e21153596, but that way doesn't work. If anyone ever works on this, that is one way not to do it. ;)
