webd posts

I figured out why Firefox 91+ seemed to break some CSS rendering for me (as I blogged about a few weeks back): high contrast mode. I've used the accessibility setting "Increase Contrast" on Mac OS for some time to make it easier to see some interface elements. Apparently, via Firefox 91 release notes, "Firefox now automatically enables High Contrast Mode when 'Increase Contrast' is checked on MacOS".

The recent Firefox Developer Edition update (91.0b6) seems to have broken CSS rendering or something. Continue reading post "#3459"

I only went a little over my 10GB hot spot limit for my first month on the new plan and the first without T Mobile's coronavirus related unlimited data upgrade. Continue reading post "#2959"

With T Mobile's free unlimited data upgrade ending June 30th, but no end in site for my working from home, I upgraded my plan to their "Simply Prepaid Unlimited Plus" level. Continue reading post "#2911"

Crazy Mac IE 5 bugs with the HTML class attribute: If you have a space after any class in the attribute, it will treat any CSS class selector that contains that string at its beginning as a match for the element. Continue reading post "IE 5 Mac class attribute with space bug"

At Cogneato, we've been using icon fonts for at least a couple years now. We recently started using SVG icons for a new part of our CMS that allows clients to pick icons from large collections for use in their content. Working with SVG's is a bit different than with icon fonts, so I created some helper code to make it easy to get them in place, have proper accessibility, and

I like icon fonts fairly well, but there are some advantages to using SVG icons. For us, we were wanting to allow clients to pick from a large selection of icons from within our CMS. Requiring downloads of giant icon sets so they could have a large selection but only show a few on a page would be very bandwidth inefficient, and managing loading the set(s) a particular client wanted to use would be complicated. Unless they use a lot on a single site, cherry-picking each icon should use less bandwidth. This is easy to do with SVG's.

There are many ways to use SVG's, but when you need to be able to change colors based on context as we do, inlining SVG elements is the only (practical¹) way. With them, you can use fill: currentColor; to use the text color of the container, which we need. Many SVG tutorials use SVG sprite-sheets and then inline spartan SVG elements that contain little other than the <use> element to reference icons from the sheet, saving size for repeated icons and potentially allowing the sprite-sheet to be cached. However, sheets have the same bandwidth management issues as the icon fonts. So I went with direct DOM insertion.

I am very excited about this. Last week I asked Nadia, a girl from my Web II cl…