Twenty Nineteen: Added URL in :after styles for print.css is unreliable

[kjellr]

The print styles for Twenty Nineteen include a little snippet meant to append the URL to links so it's visible when printed:

a[href^=http]:after {
    content: " < " attr(href) "> ";
}

Via: ​https://themes.trac.wordpress.org/browser/twentynineteen/1.2/print.css#L85

This snippet is based on recommendations in this article:

​https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/

In practice, this appears to be fairly unreliable. In testing, @Joyously and I only see those URLs sporadically, and haven't been able to pin down why.

More details: ​https://github.com/WordPress/twentynineteen/issues/609#issuecomment-439489841

If these rules aren't working correctly, I suggest we remove them from the theme.

[laurelfulford]

Thanks for moving this over, @kjellr!

I did a bit of investigation because, honestly, this was totally bugging me!

It looks like these styles are the culprit:

/* Remove image filters from featured image */
  .image-filters-enabled *:after {
    display: none !important;
}

... which explains why it was only working sometimes -- if the image filter wasn't enabled, that class wouldn't be present.

I think this should be fixable by making the selector more specific (assuming the !important has to stay):

/* Remove image filters from featured image */
  .image-filters-enabled .site-featured-image:after {
    display: none !important;
}

... but just let me know if I'm missing something here!

--

Edited to correct my bad CSS suggestion :D

[kjellr]

🎉 Great sleuthing, @laurelfulford. That was exactly correct. I've attached a patch that applies some more specific styles down in that portion of the file. (I also snuck in a tiny fix for the featured image overlay in post lists while I was in there).

Thanks!