使用CSS隱藏HTML電子郵件模板中的替換值

我的ITSM應用程序可以使用模板發送HTML電子郵件，但它使用[keyword1]這樣的關鍵字進行簡單替換，我想濫用其中的（非空）存在來動態顯示或隱藏某些數據。使用CSS隱藏HTML電子郵件模板中的替換值

例如模板可能是：

<body> 
    <span>some label: [keyword1]</span> 
</body>

由於大多數電子郵件客戶端將不能運行任何客戶端腳本和我ITSM替代引擎非常有限不過，我覺得我可以用CSS選擇器與隱藏跨度，如果它有一些（任何）類，並且該類將被設置爲實際替換值。

我想出了CSS：

span {visibility: visible; display: block; } 
span[class|=''] {visibility: hidden; display: none; }

然後在HTML模板體：

<table cellpadding="0" cellspacing="0" border="0" align="center"> 
    <tr> 
    <td width="200" valign="top"><span class="[something]">[something]</span></td> 
    <td width="200" valign="top"><span class="">empty class value</span></td> 
    <td width="200" valign="top"><span>span without class</span></td> 
    </tr> 
</table>

這樣的想法是，如果更換令牌值存在，它會因此被指定爲類跨度保持可見，但如果它不是類名將是空的，因此隱藏跨度。沒有任何課程的跨度也是可見的。這在測試概念時正常運行，並且隱藏「空白類值」跨度，但在實際的電子郵件客戶端Outlook 2010中不起作用。

除了創建正確模板時這種方法很麻煩這一事實，因爲任何跨度任何類都將隱藏任何人都可以提出如何實現這一目標？

編輯：我已經改變了主題，以更好地反映問題

來源

2016-06-09 Max OfLondon

不幸的是，你必須內聯你所有的樣式 - 這就是如果Outlook支持你正在使用的CSS規則。這是因爲自2007年以來，Outlook使用Word作爲其渲染引擎，而不像以前那樣使用IE。 –

在這種情況下，解決方案可能是微不足道的。由於取代值可以是空的所有需要做的是空類即：

span[class=""] {visibility: hidden; display: none; }

任何其他值將顯示爲每默認跨度風格，包括那些沒有使用類選擇。但是，Outlook不支持selector。

所以我能想到的唯一方法就是實現這一點，就是在替換標記前加上一些東西。如果替換值爲空，那麼只有前綴將留在類名中。因此

最終溶液是：

// in CSS 
span.hide {visibility: hidden; display: none; } 
// then in HTML template body 
<span class="hide[somekey1]">Label: [somekey1]</span>

我與積極的效果進行測試。

來源

2016-06-10 14:15:36

您使用CSS3，這是Outlook太先進了。

我甚至不確定你的[class|='']選擇器是幹什麼的; [foo|='bar']表示屬性foo必須使用連字符分隔的值列表，並且bar必須是第一個，因此[class|='']將匹配<span class="-thing">或者它將匹配任何span和class屬性，而不管其內容如何。

我想你想是後者，那麼你不妨做它的CSS2方式：

span {visibility: visible; display: block; } 
span[class] {visibility: hidden; display: none; }

還要注意的是visibility: hidden刪除元素，但保持它的地方，而display: none完全刪除元素，而不保持其間距。您可能可以刪除兩個visibility聲明。

我沒有Outlook來確認這一點，但與以前使用的CSS3代碼相比，您應該對此代碼有更多的好運。

來源

2016-06-09 17:38:05

感謝亞當，這似乎是合理的。我明天會測試和更新。 –

使用CSS隱藏HTML電子郵件模板中的替換值

回答

相關問題