Opened 22 hours ago
Last modified 21 hours ago
#36853 assigned Bug
Technical 500 email styling broken in Gmail due to :where() CSS selector
| Reported by: | Andrea Zanotto | Owned by: | Andrea Zanotto |
|---|---|---|---|
| Component: | Error reporting | Version: | 5.1 |
| Severity: | Normal | Keywords: | technical_500 email css gmail accessibility |
| Cc: | Andrea Zanotto | Triage Stage: | Unreviewed |
| Has patch: | yes | Needs documentation: | no |
| Needs tests: | no | Patch needs improvement: | no |
| Easy pickings: | yes | UI/UX: | yes |
Description
After upgrading to Django 5.1, I noticed that the exception emails sent via AdminEmailHandler (the "yellow debug page") are rendering without styles in Gmail. The emails appear with a white background and no formatting, whereas in previous versions (Django 4.2), they rendered correctly with the classic yellow background.
I investigated the technical_500.html template and found that the issue is caused by the use of the :where() CSS pseudo-class, which was introduced in recent updates to the template's internal styling.
Specifically, this line in the <style> block:
CSS
body > :where(header, main, footer) { border-bottom:1px solid #ddd; }
Gmail's CSS parser (and several other email clients) does not support the :where() pseudo-class. When the parser encounters this syntax, it frequently invalidates the surrounding style block or halts CSS processing, causing the remaining styles (including the background colors) to be ignored.
Steps to Reproduce
Configure AdminEmailHandler in a Django 5.1 project.
Trigger a server error (500).
Open the resulting email in the Gmail web interface.
Observed Result: The email has a plain white background; styling is broken.
Expected Result: The email should render with the standard yellow background and formatted tables.
Verification I manually edited the template to remove the offending line: body > :where(header, main, footer) { border-bottom:1px solid #ddd; }
After removing this specific selector, the email rendered correctly in Gmail with all styles applied.
Proposed Solution Replace the :where() selector with standard CSS selectors to ensure compatibility with email clients, which often have older or stricter CSS parsers.
Change:
CSS
body > :where(header, main, footer) { border-bottom:1px solid #ddd; }
To:
CSS
body > header, body > main, body > footer { border-bottom:1px solid #ddd; }
(Or simply header, main, footer if the direct child specificity isn't strictly required).
Change History (2)
comment:1 by , 21 hours ago
| Has patch: | set |
|---|
comment:2 by , 21 hours ago
| Owner: | set to |
|---|---|
| Status: | new → assigned |