![]() Testing instructions We'll need screenshots of the magnifying glass icon on the following browsers Chrome Firefox Edge Ie Safari We'll need screenshots in high contrast mode of the following browsers IE Edge Firefox We should probably convert it from using SVG to using CSS shapes. The search icon does not show in High Contrast mode in the latest version of Microsoft Edge. Olivero: Primary nav search icon invisible in High Contrast mode in MS Edge The best solution that I’ve found is using CSS shapes (which seems kinda hacky to me). Well then, you can still change the fill to a specific color within a specific theme classīut that’s problematic because we’re specifying a color, and might not have enough contrast in custom forced color themes There’s like soooo many SVG issues in HC between multiple browsers so issue is css var? but you can use currentColor, right?ĬurrentColor doesn’t work in MS Edge :disappointed: We also can’t use CSS variables in core :disappointed: Inline svg still has issues (which is why i started this convo). I was gonna say inline svg instead of background images, with inline svg, you can set the fill to your theme color using a CSS var (edited) If our icon uses a unicode point which comic sans doesn't provide a glyph for, they get a generic box. It has a posse.The computed font family will be: "Comic Sans". our icon font might break, or might not, depending on what method the user employed to pick their own font.A typical user stylesheet approach is to have something like this ![]() This way leads to Twig template proliferation instead. Such SVG's can have their colours overridden, and currentColor will compute to a system colour. It bloats the compiled stylesheet a bit, but is robust.Another approach would be to embed the SVG icon inside the HTML source, not the CSS. currentColor won't work here, as it usually computes to black because of the SVG exemptions to forced colours.We can get around it by having several extra copies of each SVG, using system colour keywords for their fill. We already do use SVG for the icons, as CSS background images, embedded as data urlsThe snag is that such icons can't have their CSS colour overridden in the page stylesheet, because they are a separate rendering root (or something? I don't grok it all). If the font loading is hanging (slow connection or JS error), users would just see the random irrelevant character you are using to represent the icon. The symbols will either disappear or be replaced by generic "tofu" placeholdersWhat do you mean by the "regular font"? The one specified in our stylesheet? That won't count for toffee when the user overrides it. The symbols will be replaced with whatever the user's chosen font says is at that codepoint. Icon font in general is just a bad idea, why not svg? ![]() That's something users are supposed to be able to do, and browsers provide a UI for it, and I don't want to thwart that.īut if the icon font is using a unicode range that the regular font doesn’t support (which they won’t) it shouldn’t break (edited) Such icons would all break as soon as a user picks their own font. I wonder if it’d make sense to create a small administrative icon font? So many Windows high contrast / forced colors issues in Olivero and Claro. If I haven't reported back in a week or two, feel free to un-assign me and proceed with the approach in the current patch. I have some ideas to tinker with the original SVG, so assigning to myself for that. Please hold off from committing this in a hurry. I'm concerned they could be fragile, but haven't demonstrated any outright disasters yet. ![]() Some speculation and experiments about the robustness of CSS shapes in the face of user stylesheets.Too fragile, particular with regards to users who override the author-specified fonts, which is a completely reasonable user preference. suggested using an icon font, then and I did our best to disavow him of this idea.On Slack today there was a wide-ranging conversation about icons in forced-colours mode, between and myself. Tag1 supports Drupal development! Comments IE11_-_Win7_before_upgrading_ie_Running_-5.png PHP 8.0 & MySQL 5.7 Patch Failed to Apply. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |