#36853: Technical 500 email styling broken in Gmail due to :where() CSS selector
-------------------------------------+-------------------------------------
Reporter: sipa-echo-zaoa | Type: Bug
Status: new | Component: Error
| reporting
Version: 5.1 | Severity: Normal
Keywords: technical_500 email | Triage Stage:
css gmail accessibility | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
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).
--
Ticket URL: <https://code.djangoproject.com/ticket/36853>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion visit
https://groups.google.com/d/msgid/django-updates/0107019b9cdb3707-b0e43b39-eac7-4c73-8b9f-d4c4569a0360-000000%40eu-central-1.amazonses.com.
