#45944 closed defect (bug) (fixed)
Twenty Nineteen: Added URL in :after styles for print.css is unreliable
Reported by: | kjellr | Owned by: | karmatosed |
---|---|---|---|
Milestone: | 6.6 | Priority: | low |
Severity: | normal | Version: | 5.0.3 |
Component: | Bundled Theme | Keywords: | has-patch needs-testing commit |
Focuses: | css | Cc: |
Description
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.
Attachments (2)
Change History (15)
#3
@
6 years ago
🎉 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!
#7
@
7 months ago
@sabernhardt just noting you added 'needs-refresh' is that confirmation you tested and found the patch had issues? I wanted to check.
#8
@
7 months ago
The patch applies today, so I think my complaint might have only been the use of spaces instead of tabs in the Sass file. I should have explained the needs-refresh
keyword either way, but noticing any problem with the CSS would have required a comment and/or screenshots.
@
7 months ago
Refreshed patch using tabs instead of spaces, .scss only. The .css file needs to be built.
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:
... 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):... but just let me know if I'm missing something here!
--
Edited to correct my bad CSS suggestion :D