Technical 500 email styling broken in Gmail due to :where() CSS selector

[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).

[Jacob Walls]

Thanks, TIL. Noting that this selector addressed a review comment where your proposal was ​mentioned as the other alternative, so let's have it.

[Jacob Walls <jacobtylerwalls@…>]

In 0a98333:

Fixed #36853 -- Fixed technical 500 and 404 email CSS support.