My simple question is if there is a work around that lines the text correct on Safari?
My wild guess is that this flex fails on Safari.
display: flex; <------ Does not work on Safari?
No need for head and body in JSFiddle. Codepen and JsFiddle are about the same. The difference is that JSFiddle tells you more what is wrong and I find it easier to format. And you have to save to refresh the fiddle. It is most a personal preference IMO.
Looking deeper into this and there seems to be some issues with Details/Summary and Safari behaviours and others have suggested using an inner element instead. (Although it does seem to work ok on Safari IOS).
There’s a timely article here that may be of interest and has a link to display problems (Lea Verou).
When I get back from my break in a couple of weeks I’ll have to do more testing on this
As you called it your mainnav then it should be a nav element. Also as this is one list you shouldn’t really have multiple uls as that doesn’t make semantic sense. It should be one ul for the top level and nested uls for the second level as is the general practice for dropdown type menus.
This gives semantic structure and a more readable html in order to understand the structure. I’m not keen on lots of svgs in the markup when they could be in the css and out of the way (especially when they are basically eye candy).
I had a quick re-jig of the css and used css instead of svg but of course svg would look a little nicer but there’s no reason why they can’t be in the CSS instead.
The html is much cleaner and less likely to get broken but there is still the issue of keyboard users to contend with as you removed the outline making it impossible to navigate with the keyboard (a color change or similar would do but to remove it altogether is a cardinal sin :)).
As I said I just did this for fun and exercise and I don’t expect you to change your finished product now that you’ve moved on with it. It just may be of interest in passing.
Yes if there are many icons then yes you probably need to use the svg in the html method as you will have more control over their fill and stroke colors although you could do them as background svg sprites it’s probably not worth the extra effort.
I would still use the structure I showed but add your svg into the mix. As the svgs are all the same size (and they all should be) then you can simplify the css without using flex and just place the images into the space as required. Either method is ok but the simpler the better.
There is still the question about keyboard accessibility to consider and also what happens if text runs to more than one line (or if restricted to one line you would need to control the overflow).