id	summary	reporter	owner	description	type	status	component	version	severity	resolution	keywords	cc	stage	has_patch	needs_docs	needs_tests	needs_better_patch	easy	ui_ux
36853	Technical 500 email styling broken in Gmail due to :where() CSS selector	Andrea Zanotto	Andrea Zanotto	"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)."	Bug	closed	Error reporting	5.1	Normal	fixed	technical_500 email css gmail accessibility	Andrea Zanotto Marijke Luttekes	Ready for checkin	1	0	0	0	1	1