CSS inliner
Do czego naprawdę służy CSS inliner
E-mail to nie karta przeglądarki. Gmail, Outlook, Apple Mail i większość podglądów ESP ma własne zasady, który CSS respektuje. `<link rel="stylesheet">` do pliku brandowego często jest ignorowany. Blok `<style>` w `<head>` u jednych klientów zostaje, u innych znika. Najpewniej działa prosty HTML z prezentacją w atrybutach `style` na potrzebnych tagach. CSS inliner robi dokładnie to: struktura w HTML, reguły w CSS — jak na stronie; jeden przebieg kopiuje pasujące deklaracje na elementy. Plik do Mailchimp, GetResponse lub transakcyjnej wysyłki nadal jest HTML-em, ale nie zależy już od poprawnego załadowania osobnego arkusza stylów. Ta strona jest pod ostatni krok: HTML i CSS w osobnych zakładkach (albo import .html + .css), «Ustaw CSS inline», wynik po prawej. Gdy wygląda dobrze — kopiuj, pobierz albo otwórz «Podgląd HTML» na playgroundzie strony głównej, żeby przejrzeć układ przed testową wysyłką.
Zewnętrzny arkusz i osadzony CSS — nie jedno źródło
Wiele inlinerów online zakłada, że CSS już jest w HTML — zwykle `<style>` z narzędzia projektowego. Gdy projekt dzieli się normalnie — `template.html` plus `styles.css` po buildzie, eksport z Figmy lub generator statyczny — zostaje ręczne sklejanie albo CLI, którego używasz dwa razy w roku. Nasz CSS inliner traktuje oba warianty równorzędnie: markup w zakładce HTML, reguły w CSS, albo import do dwóch plików (`.html` i `.css`). CSS z zakładki łączy się z blokami `<style>` w HTML. Na wyjściu HTML z atrybutami `style` inline; tagi `<style>` znikają — tak oczekuje większość workflowów e-mail. To ma znaczenie w newsletterach i mailach transakcyjnych: typografia i przyciski w wspólnym .css, fragmenty HTML od różnych autorów. Bez odczytu zewnętrznego CSS utkniesz, gdy repo wygląda jak prawdziwy projekt.
Przetwarzanie w przeglądarce po załadowaniu — bez konta i kolejki uploadu. `:hover`, `::before` i nierozwiązywalne selektory są pomijane i trafiają do «Uwagi». Proste `@media` są spłaszczane; responsywność w skrzynce nadal różni się od strony — zawsze wyślij prawdziwy test do docelowych klientów. Żeby sprawdzić odstępy lub klasy: «Podgląd HTML» wysyła wynik inline na playground strony głównej — przydatne przed wklejeniem do ESP.
Otwórz CSS inlinerZakładki HTML + CSS
Struktura i prezentacja osobno, jak w repozytorium. Gdy gotowe — ustaw inline i weź plik do wysyłki.
Dwa pliki naraz
Import .html i .css jednym krokiem — mniejsze ryzyko obciętego wklejenia.
Podgląd na stronie głównej
HTML inline w nowej karcie playgroundu przed kopiowaniem do ESP.
CSS inliner do e-maili ze zewnętrznymi arkuszami stylów
Większość narzędzi przepisuje tylko CSS już osadzony w HTML. Tu osobny plik .css i tagi <style> w markupie — w jednym przebiegu — potem kopia, pobranie lub podgląd.
Zewnętrzny .css bez ręcznego łączenia wcześniej
Gdy `email.css` leży obok `template.html`, zaimportuj oba albo wklej do dwóch zakładek. Selektory lądują w atrybutach `style` — format, którego oczekują klienty poczty. Nie musisz wcześniej wklejać arkusza do dokumentu. Sekcje `<style>` w HTML idą w tym samym przebiegu. Po prawej pełny HTML inline tylko do odczytu. Kopiuj z ikony w nagłówku wyniku, pobierz `inlined.html` albo «Podgląd HTML» do playgroundu. Wszystko lokalnie.
- Osobna zakładka CSS — jak w realnym projekcie
- CSS zewnętrzny i <style> w jednym przebiegu
- Uwagi o pominiętych regułach
- Lokalnie w przeglądarce, bez uploadu
Jak ustawić CSS inline w szablonie e-mail HTML
Dodaj HTML i CSS
Szablon w zakładce HTML. Przyciski, typografia, utility w CSS — albo import .html + .css. `<style>` w head może zostać — też zostanie inline.
Kliknij «Ustaw CSS inline»
Pasujące reguły staną się atrybutami style. Sprawdź «Uwagi» dla pominiętych. Po lewej edytujesz dalej, po prawej wynik — uruchom ponownie, jeśli trzeba.
Sprawdź i wyślij
Kopiuj, zapisz lub podgląd na playgroundzie strony głównej. Wklej do ESP, przetestuj w Gmailu i Outlooku, zachowaj zatwierdzony .html.
FAQ CSS inliner
Następna wysyłka — CSS już inline?
Wklej HTML, dodaj CSS zewnętrzny lub osadzony, ustaw inline. Porównaj ze skrzynką testową, potem zapisz lub skopiuj.
CSS inliner
- Zewnętrzny .css i HTML w jednym przebiegu
- Osadzone bloki <style> też
- Podgląd HTML na playgroundzie strony głównej
- No signup; use the tool in the browser
Po inline wyślij prawdziwy mail testowy — klienci poczty zawsze zaskoczą podgląd.
Jeden HTML dla ESP
Raz inline, wklej do kampanii, zarchiwizuj zatwierdzoną wersję.