İçeriğe atla

E-posta için CSS satır içi

CSS'i bir stil bloğundan satır içi stil özelliklerine taşıyarak e-posta istemcilerinde korunmasını sağlar.

Giriş
Çıkış

E-posta için CSS satır içi

Çoğu e-posta istemcisi — özellikle Gmail'in web arayüzü — <style> bloğunda yazılan CSS'i yok sayar veya kaldırır. Çözüm, her kuralı hedefleyen öğeye satır içi style="" özelliği olarak taşımaktır ve bu araç tam olarak bunu yapar: <style> bloğu içeren HTML'i yapıştırın ve aynı işaretlemeyi satır içi stiller ile geri alın, kampanya veya işlem şablonuna yapıştırmaya hazır.

Birleştirme varsayılan olarak CSS özgüllüğünü dikkate alır; böylece, #footer kuralı düz bir a'dan daha önce gelebilir, kuralın stil sayfasında daha sonra görünse bile — "Seçici özgüllüğünü dikkate al" seçeneğini kapatıp yalnızca kaynak sırasına göre birleştirin. Satır içi yapılamayan kurallar — medya sorguları, :hover, diğer at-kurallar — asla sessizce bırakılmaz: "Satır içi yapılamayan kuralları tut" bunları kırpılmış bir <style> bloğunda tutar, "Orijinal <style> bloğunu kaldır" ise bu bloğun sonunda yayılıp yayılmayacağına karar verir. "Eski width/bgcolor özelliklerini ekle" genişlik, yükseklik ve arka plan rengini eski Outlook sürümlerinin beklediği düz özellikler için yansıtır, "Kullanılmayan sınıfları ve ID'leri kaldır" artık hiçbir şey tarafından başvurulmayan seçicileri temizler ve "Çıktıyı küçült" kalan beyaz alanı daraltır.

Seçici desteği tür, sınıf, ID ve öznitelik seçicilerini ve ayrıca soy ve çocuk birleştiricilerini kapsar — gerçek e-posta stil sayfalarının kullandığı desenler. Öğenin kendi mevcut style="" özelliği, tarayıcıların başlangıç kuralını uyguladığı şekilde, birleştirmeye giren her şeyi geçersiz kılar. "Desteklenmeyen özellik uyarılarını göster" etkinleştirildiğinde, birçok istemcinin yok saydığı özellikler — float, position: fixed, dönüştürmeler, box-shadow — çıktının üstündeki bir yorum olarak işaretlenir; böylece test göndermeden önce bunları yakalaybilirsiniz.

Her şey yerel olarak tarayıcınızda çalışır: yapıştırdığınız HTML hiçbir yere yüklenmez. Sonucu kopyalayın, .txt dosyası olarak indirin veya temizlemeye devam etmek için doğrudan başka bir araca gönderin.

FAQ

E-posta için neden CSS'i satır içi yapmam gerekiyor?
Birçok e-posta istemcisi — özellikle Gmail'in web arayüzü — <head> bölümünden <style> bloklarını kaldırır veya tamamen yok sayar, ancak öğedeki bir style="" özelliğini dikkate alır. Satır içi, tüm HTML-e-posta endüstrisinin dayandığı geçici çözümdür.
Medya sorguları ve :hover kurallarına ne olur?
Bunlar tek bir öğeye satır içi yapılamaz; bu nedenle varsayılan olarak bunu okuyan istemciler için kırpılmış bir <style> bloğunda tutulur — "Satır içi yapılamayan kuralları tut" seçeneğini kapatıp bunları yerine bırakmak için.
Seçici özgüllüğünü (specificity) doğru şekilde işliyor mu?
Evet. Bir ID seçici, bir sınıf seçicisini geçersiz kılar; bu da bir tür seçiciyi geçersiz kılar — kuralların görünme sırasına bakılmaksızın bir tarayıcı aynı kuralları kullanır. "Seçici özgüllüğünü dikkate al" seçeneğini kapatıp kaynak sırasına göre birleştirmeye dönün.
Width/bgcolor özelliklerinin amacı nedir?
Bazı eski Outlook sürümleri Word motorunu kullanarak tabloları işler ve arka planlar ve boyutlandırma için satır içi CSS'i yok sayar. "Eski width/bgcolor özelliklerini ekle" bu değerleri bu istemcilerin saygı gösterdiği düz HTML özniteliklerine yansıtır.
HTML'im hiçbir yere yükleniyor mu?
Hayır. CSS satır içi işlemi tamamen tarayıcınızda çalışır — e-posta şablonunuz hiçbir zaman cihazınızı terk etmez.