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 Andrea Zanotto, 21 hours ago

Has patch: set

comment:2 by Andrea Zanotto, 21 hours ago

Owner: set to Andrea Zanotto
Status: newassigned
Note: See TracTickets for help on using tickets.
Back to Top