In particular, I maintain two sites with plugins that insert a body class "social-stream" and another where a menu has a class of "social-menu." The above CSS within Simple Social Icons targets those elements as well, which of course causes chaos on the sites.
Making this more specific so it doesn't target elements outside the plugin would be a tremendous improvement as I know lots of other people use "social-something" as a CSS selector for various sites.
This CSS in particular is a problem for sites using certain themes, plugins, or any code that inserts a class beginning with "social-":
[class^="social-"], [class*=" social-"] { display: inline-block; width: 1em; height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor; }In particular, I maintain two sites with plugins that insert a body class "social-stream" and another where a menu has a class of "social-menu." The above CSS within Simple Social Icons targets those elements as well, which of course causes chaos on the sites.
Making this more specific so it doesn't target elements outside the plugin would be a tremendous improvement as I know lots of other people use "social-something" as a CSS selector for various sites.
.simple-social-icons [class^="social-"], .simple-social-icons [class*=" social-"] { display: inline-block; width: 1em; height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor; }