CSS inliner
CSS inliner gerçekte ne işe yarar
E-posta bir tarayıcı sekmesi değil. Gmail, Outlook, Apple Mail ve çoğu ESP önizlemesi hangi CSS'in geçerli sayılacağına kendi kurallarını uygular. Marka CSS dosyanıza işaret eden `<link rel="stylesheet">` sık sık yok sayılır. `<head>` içindeki `<style>` bloğu bazı istemcilerde kalır, bazılarında silinir. Her yerde en güvenilir yol, sunumu ilgili etiketlerde `style` özniteliği olarak yazılmış sade HTML'dir. CSS inliner tam bunun için: yapıyı HTML'de, kuralları CSS'te web'deki gibi tutarsın; tek geçişte eşleşen bildirimler ilgili öğelere kopyalanır. Mailchimp, Brevo veya işlemsel e-posta hattına yapıştırdığın dosya hâlâ HTML'dir ama artık ayrı bir stil sayfasının doğru yüklenmesine bağlı değildir. Bu sayfa o geçiş için: HTML ve CSS ayrı sekmelerde (veya .html + .css birlikte içe aktar), «CSS'i satır içi yap», sonucu sağda gör. Tamamsa kopyala, indir veya test göndermeden önce düzeni tıklayarak kontrol etmek için ana sayfadaki playground'da «HTML önizleme»yi aç.
Harici stil sayfası ve gömülü CSS — tek kaynak değil
Birçok çevrim içi inliner, CSS'in zaten HTML içinde olduğunu varsayar — genelde tasarım aracından export edilmiş bir `<style>`. Proje normal şekilde ayrıldığında — build sonrası `template.html` artı `styles.css`, Figma teslimi veya statik site üreticisi — dosyaları elle birleştirir veya yılda iki kez ihtiyaç duyduğun bir CLI çalıştırırsın. CSS inliner'ımız her iki durumu da eşit giriş sayar: işaretleme HTML sekmesinde, kurallar CSS sekmesinde; veya en fazla iki dosya (`.html` ve `.css`) birlikte içe aktar. Sekmedeki CSS, HTML'deki mevcut `<style>` bloklarıyla birlikte uygulanır. Çıktı, eşleşen öğelerde satır içi `style` öznitelikleri olan HTML'dir; `<style>` etiketleri kaldırılır — çoğu e-posta iş akışının beklediği format budur. Bu fark bültenler ve yaşam döngüsü mailleri için geçerlidir: tipografi ve düğmeler ortak CSS dosyasında, HTML parçaları farklı yazarların elinden. Harici CSS okunmazsa, depo gerçek bir projeye benzediğinde takılırsın.
İşlem yüklendikten sonra tarayıcıda çalışır — hesap yok, yükleme kuyruğu yok. `:hover`, `::before` ve çözülemeyen seçiciler atlanır ve «Notlar»da listelenir. Basit `@media` blokları satır içi için düzleştirilir; gelen kutusundaki duyarlı davranış siteden farklıdır — hedef istemcilerde mutlaka gerçek test gönder. Boşlukları veya sınıfları kontrol etmek için: «HTML önizleme» satır içi çıktıyı ana sayfa playground'una gönderir — ESP'ye yapıştırmadan önce işe yarar.
CSS inliner'ı açHTML + CSS sekmeleri
Depodaki gibi yapı ve sunum ayrı. Hazır olunca satır içi yap ve gönderime hazır dosyayı al.
İki dosya tek işlemde
.html ve .css'i birlikte içe aktar — iki yapıştırmanın kesilme riski azalır.
Ana sayfada önizleme
ESP'ye yapıştırmadan önce satır içi HTML'i playground'da yeni sekmede aç.
Harici stil sayfalarını kabul eden e-posta CSS inliner
Çoğu araç yalnızca HTML'e gömülü CSS'i yeniden yazar. Burada ayrı .css dosyası ve işaretlemedeki <style> etiketleri — tek geçişte — sonra kopyala, indir veya önizle.
Harici .css — önce elle birleştirmek zorunda değilsin
`email.css` `template.html` yanındaysa ikisini içe aktar veya iki sekmeye yapıştır. Seçiciler `style` özniteliklerine yazılır — posta istemcilerinin beklediği biçim. Aracın dokunması için stil sayfasını önce belgeye gömmen gerekmez. HTML'deki `<style>` bölümleri de aynı geçişte işlenir. Sağ panel tam satır içi HTML'i salt okunur gösterir. Çıktı başlığındaki simgeden kopyala, `inlined.html` indir veya playground için «HTML önizleme». Her şey yerelde kalır.
- Gerçek proje düzeni için ayrı CSS sekmesi
- Harici CSS + <style> tek geçişte
- Atlanan kurallar için notlar paneli
- Tarayıcıda yerel, yükleme yok
HTML e-posta şablonunda CSS'i satır içi yapma
HTML ve CSS ekle
Şablonu HTML sekmesine yapıştır. Düğme, tipografi, yardımcı sınıflar CSS sekmesinde — veya .html + .css birlikte içe aktar. Taslakta head'de `<style>` varsa bırak; o kurallar da satır içi olur.
«CSS'i satır içi yap»
Eşleşen kurallar style özniteliği olur. Atlananlar için «Notlar»a bak. Solda düzenlemeye devam, sağda sonuç — gerekirse tekrar çalıştır.
Doğrula, gönder
Kopyala, kaydet veya ana sayfa playground'unda önizle. ESP'ye yapıştır, Gmail ve Outlook'ta test et, onayladığın .html'i sakla.
CSS inliner SSS
Sıradaki gönderim için CSS hazır mı?
HTML yapıştır, harici veya gömülü CSS ekle, satır içi yap. Test kutusuyla karşılaştır, sonra kaydet veya kopyala.
CSS inliner
- Harici .css ve HTML tek geçişte
- Gömülü <style> blokları dahil
- Ana sayfa playground'unda HTML önizleme
- No signup; use the tool in the browser
Satır içi sonrası gerçek test gönder — posta istemcileri önizlemeyi yener.
ESP için tek HTML
Bir kez satır içi yap, kampanyaya yapıştır, onaylı sürümü arşivle.