Monday 4 September 2023

GMAIL Removing CSS STYLE (and referencing classes)

I'm sending emails using PHP in WordPress, there seem to be many issues with email clients in general (as a quick google will confirm).

In  GMAIL in 2023, if it doesn't like anything at all it will drop the complete "style" block (all CSS).  It will also update the email's HTML to remove any references to the dropped styles.

To check your email's HTML in general, click the Gmail messages "..." menu and choose "Show Original".  That will open up a new window, you can copy/paste the HTML you sent and run it through online HTML and/or CSS validators to check for obvious issues.

You can use Chrome's debug tools (<F12>) to find the source code and use <Ctrl><F> to search for something you expect to find in the CSS contents), if you don't find it, then you know it has been removed.

In my case, I'd fixed any issues reported but it still happened.  I went to the old standby binary tree debugging, where you keep removing code until it starts working, then keep inserting/deleting bits until you identify the style the line(s) causing the issue.

In my case, it would appear that it didn't like the incorrect important tag "!Important" (that the validators didn't pick up), fixing it solved the issue (it should have been "!important").

<style>.OrderInvoice table, .OrderInvoice th, .OrderInvoice td
{
    border: 2px solid black;
    padding: 5px;
    border-width: thin;
    border-collapse: collapse !Important;
}</style>

No comments: