E-posta için Satır İçi Stiller

Birçok e-posta istemcisi — en kötü örneklerden biri Mayıs 2016'dan önceki web Gmail olmak üzere, günümüzde hâlâ birçok mobil uygulama — <style> bloklarını ve haricî stil sayfalarını kaldırır veya yeniden yazar. Satır içi style="..." öznitelikleri, her istemcide korunması garanti edilen tek CSS biçimidir.

Satır içi stilleri elle yazmak sürdürülebilir değildir. E-postayı normal <style> etiketleri ve sınıf adlarıyla yazın, ardından gönderimden önce derleme zamanında her kuralı eşleşen öğenin style özniteliğine kopyalamak için bir satır içi dönüştürücü (Juice, Premailer, mjml) çalıştırın.

Satır içi stiller, !important dışında en yüksek özgüllüğe sahiptir. Satır içi bir değeri geçersiz kılmak isteyen medya sorgusu, her özellikte !important kullanmalıdır; aksi hâlde @media bağlamından bağımsız olarak satır içi bildirim kazanır.

Satır içi dönüştürücüler yalnızca tek tek öğelerle eşleşen kuralları kopyalar; @media blokları düzleştirilemeyeceği için <style> etiketi içinde kalır. Bu sorun değildir: Gmail ve diğer temizleyiciler satır içi stilleri olduğu gibi bırakır, <style> etiketlerine saygı duyan istemciler de medya sorgularını bunların üzerine uygular.

Bazı istemciler kısa yazımda sorun çıkarır: font: 14px/1.4 Arial tamamen yok sayılabilir. Her özelliğin bağımsız olarak çalışması veya başarısız olması için uzun biçimi (font-family, font-size, line-height) kullanın.

Karanlık mod, birçok istemcide renkleri otomatik olarak tersine çevirir. Metin kapsayıcılarında color ve background-color değerlerini açıkça ayarlamak, siyah metin üzerine siyah arka plan gibi felaketleri önler. Bu ikisini daima birlikte kullanın.

Boyutlandırma için px kullanın. rem, vh ve vw tutarsız biçimde desteklenir. Tam genişlikte düzenler için tablolarda yüzdeler işe yarar; iç tablolarda ve hücrelerde mutlak piksel genişlikleri istemciler arasında aynı şekilde oluşturulur.

@font-face aracılığıyla kullanılan web yazı tipleri Apple Mail, iOS Mail ve Thunderbird'de çalışır; ancak Outlook ve Gmail'de çalışmaz. Satır içi değer olarak web güvenli bir yığın (Arial, Helvetica, sans-serif) kullanın ve @font-face'i yalnızca destekleyen istemciler için aşamalı geliştirme amacıyla ayırın.

Bir div üzerindeki satır içi background-image modern istemcilerde çalışır, ancak Outlook tarafından yok sayılır. Outlook için bgcolor değerini yedek olarak ve koşullu VML <v:rect> kullanın; böylece tam görsel eşdeğerlik mümkün olmasa bile her istemci görsel olarak eşdeğer bir arka plan oluşturur.

Satır içi stiller tarayıcı önizlemesinde doğru görünür; ancak Gmail, Outlook veya iOS Mail'de farklı görünebilir. Kampanyayı göndermeden önce her önemli istemciyi doğrulamak için Litmus, Email on Acid veya ücretsiz Mailtrap önizlemelerini kullanın.

Varsayılan istemci stillerini etkisizleştirmek için <style> etiketine küçük bir sıfırlama ekleyin (body üzerinde margin: 0, tablolarda line-height: 100%, görsellerde border: none). Yalnızca <style> etiketinin dikkate alındığı yerlerde uygulamak istiyorsanız bunu bir medya sorgusunun içine alın.

HTML e-postalarındaki medya sorguları neden her özellikte !important kullanılmasını gerektirir?

E-postalarda, istemcilerin stilleri temizlemesine karşı koyabilmek için satır içi stiller gerekir; ancak yazar stillerini normalde <style> içinde tanımlayıp derleme sırasında satır içine alın. Satır içi özgüllüğü aşmak için medya sorgularının içinde !important kullanın, kısa gösterimler yerine uzun biçimli özellikleri tercih edin, color ve background-color değerlerini açıkça belirleyin, px birimlerini kullanın ve göndermeden önce gerçek istemcilerde test edin.