niekompatybilny CSS

Niekompatybilny CSS to reguły stylów nieobsługiwane przez część klientów pocztowych, np. flexbox w Outlooku.

Niekompatybilny CSS w wiadomościach e-mail

Niekompatybilny CSS to reguła arkusza stylów, której konkretny klient pocztowy nie interpretuje zgodnie ze specyfikacją CSS albo w ogóle ją pomija. W praktyce problem dotyczy głównie wiadomości HTML, ponieważ e-mail nie jest wyświetlany przez jeden wspólny silnik renderujący. Ten sam kod może być przetwarzany przez przeglądarkę internetową, aplikację mobilną, webmail albo program desktopowy, a każdy z tych klientów ma własny zakres obsługiwanych właściwości, selektorów i sposobów dziedziczenia stylów. O niekompatybilności mówimy więc nie wtedy, gdy CSS jest formalnie błędny, lecz wtedy, gdy efekt wizualny zależy od funkcji niedostępnej w używanym środowisku.

Typowym przykładem są układy oparte na display:flex i display:grid. W nowoczesnych przeglądarkach pozwalają one budować responsywne kolumny, ale w części programów pocztowych mogą zostać zignorowane lub obsłużone niepełnie. Szczególne znaczenie ma Microsoft Outlook dla systemu Windows, którego klasyczne wersje desktopowe wykorzystują silnik edytora Microsoft Word do renderowania HTML wiadomości. Nie zapewnia on takiej samej obsługi CSS jak współczesne silniki przeglądarek, dlatego właściwości pozycjonowania, układu, tła czy rozmiaru mogą zachowywać się inaczej niż w Chrome, Firefoxie lub Edge.

Jak powstaje różnica między kodem a wyglądem wiadomości

W wiadomościach e-mail bezpieczniejszą podstawę układu stanowi często tabela HTML z komórkami <table>, <tr> i <td>, ponieważ starsze i ograniczone silniki pocztowe od dawna obsługują ten model. Nie oznacza to, że każda właściwość zastosowana w tabeli zadziała identycznie. W zależności od klienta style zapisane w zewnętrznym arkuszu mogą zostać usunięte, atrybuty CSS mogą być filtrowane, a deklaracje umieszczone w sekcji <head> mogą zostać zmienione albo pominięte. Z tego powodu style odpowiedzialne za podstawowy wygląd często umieszcza się bezpośrednio w atrybucie style elementu, czyli w tak zwanym stylu inline.

Problemy powodują również selektory zależne od struktury dokumentu, pseudoklasy, właściwości position, elementy tła oraz część technik responsywnych wykorzystujących zapytania medialne. Klient może wyświetlić tekst i obrazy, ale pominąć @media, przez co wersja mobilna pozostanie w układzie przeznaczonym dla szerokiego ekranu. Innym przypadkiem jest ograniczona obsługa obrazów tła lub ich brak przy wyłączonym pobieraniu grafik. Wtedy tekst umieszczony na tle może stać się nieczytelny, jeśli projekt nie zawiera koloru zastępczego oraz wystarczającego kontrastu.

Testowanie CSS w różnych klientach pocztowych

Ocena zgodności wymaga sprawdzenia gotowej wiadomości w rzeczywistych środowiskach, a nie tylko otwarcia pliku HTML w przeglądarce. Należy porównać co najmniej wersję webmailową, aplikację mobilną oraz program desktopowy używany przez odbiorców. Warto testować zarówno szeroki ekran, jak i wąski ekran telefonu, a także sytuację, w której obrazy są zablokowane. Podczas kontroli sprawdza się szerokość kolumn, zawijanie tekstu, odstępy, kolory, kontrast, widoczność przycisków i zachowanie linków. Każdą różnicę trzeba powiązać z konkretną deklaracją CSS albo fragmentem struktury HTML, ponieważ samo stwierdzenie „wiadomość wygląda inaczej” nie wskazuje przyczyny.

Praktycznym sposobem ograniczenia ryzyka jest przygotowanie wersji bazowej, która pozostaje czytelna bez nowoczesnych właściwości, a następnie dodawanie ulepszeń dla klientów obsługujących bardziej zaawansowany CSS. Taki model nazywa się progresywnym ulepszaniem. Jeżeli display:flex nie zostanie rozpoznane, elementy powinny nadal mieć sensowny układ oparty na tabeli, szerokości blokowej albo naturalnym przepływie dokumentu. Przycisk powinien pozostać zwykłym działającym linkiem, a nie wyłącznie elementem zależnym od tła, gradientu lub pseudoelementu. Do testów można używać narzędzi podglądowych odwzorowujących wiele klientów, lecz wynik warto potwierdzić na urządzeniu i w programie występującym w konkretnej organizacji.

Naprawa układu zależnego od nieobsługiwanych reguł

Naprawę zaczyna się od rozdzielenia stylów niezbędnych od dekoracyjnych. Najpierw trzeba zapewnić prawidłową strukturę HTML, czytelny tekst, działające odnośniki i układ, który nie rozpada się po pominięciu części deklaracji. Następnie można zastąpić problematyczne kolumny tabelą, przenieść kluczowe style do elementów inline, ustawić kolory awaryjne oraz dodać bezpieczne szerokości i odstępy. Właściwości takie jak width, padding, background-color, font-family i font-size należy dobierać z uwzględnieniem sposobu, w jaki dany klient interpretuje tabele i style dziedziczone. Nie wolno zakładać, że deklaracja odrzucona przez jeden silnik zostanie zastąpiona dokładnie takim samym efektem jak w przeglądarce.

Jeżeli niekompatybilny CSS występuje w szablonie używanym przez stronę internetową, formularz kontaktowy albo system wysyłający powiadomienia, pomocna jest analiza kodu źródłowego wiadomości oraz porównanie go z wynikiem po przejściu przez konkretną usługę pocztową. Trzeba sprawdzić, czy problem powstaje już podczas generowania HTML, czy dopiero po jego oczyszczeniu przez klienta. Na komputerze można dodatkowo zweryfikować, czy błąd nie wynika z lokalnych ustawień programu, nieaktualnej aplikacji, wyłączonego pobierania obrazów albo dodatku modyfikującego zawartość. Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów i komputerów PC, dlatego może sprawdzić środowisko użytkownika, działanie programu pocztowego oraz podstawową konfigurację potrzebną do prawidłowego wyświetlania wiadomości.