Problem z czytaniem kodu html przez różne Poczty Mailowe

pytanie zadane 29 lipca 2024 w HTML i CSS przez OsKaRaStYYY Nowicjusz (130 p.)

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table cellpadding="0" cellspacing="0" width="300" style="border-collapse: collapse; width: 300px; ">
        <tr>
            <td width="140" style="padding: 0; text-align: center;">
                <img src="logo.png" alt=" Logo" style="display: block; width: 140px; height: auto; margin: 0 auto;">
            </td>
            <td width="2" style="padding: 0; background-color: #222F60; width: 2px; height: 60px;"></td> 
            <td width="140" valign="top" style="padding: 0; text-align: center;">
                <table cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
                    <tr>
                        <td style="font-size: 12px; line-height: 14px; color: #222F60; text-align: center;">
                            <strong style="font-size: 18px;">imienazwisko</strong><br>
                            właściciel<br>
                            <a href="tel:00000000" style="color: #222F60; text-decoration: none;">numer</a><br>
                            <a href="mailto:mail" style="color: #222F60; text-decoration: none;">mail</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="3" style="width: 300px; height: 33px; padding: 10px 0; text-align: center;">
                <img src="pasekdolny.png" alt="Decorative Graphic" style="display: block; width: 300px; height: 33px; margin: 0 auto;">
            </td>
        </tr>
        <tr>
            <td colspan="3" style="font-size: 11px; line-height: 12px; color: #222F60; text-align: center; margin: 2px">
                <div>
                    <a href="https://maps.app.goo.gl/adres" style="color: #222F60; text-decoration: none;">adres</a><br>
                    <a href="https://rejestr.io/krs/rejestr" style="color: #222F60; text-decoration: none;"> KRS: 0000000, REGON: 0000000, NIP: 00000000</a><br>
                    <a href="mailto:mail" style="color: #222F60; text-decoration: none;">mail</a>, 
                    <a href="mailto:mail" style="color: #222F60; text-decoration: none;">mail</a><br>
                    <a href="https://facebook.com/nazwafirmy" style="color: #222F60; text-decoration: none;">Facebook</a> | 
                    <a href="https://pl.linkedin.com/in/linkdoprofilu" style="color: #222F60; text-decoration: none;">LinkedIn |</a>
                    <a href="https://stronawww" style="color: #222F60; text-decoration: none;">www.adcolors.pl</a>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="3" style="padding: 10px 0;">
                <div style="border-top: 1px solid #222F60; width: 300px; margin: 10px auto;"></div>
            </td>
        </tr>
        <tr>
            <td colspan="3" style="font-size: 9px; line-height: 11px; color: #222F60; text-align: center;">
                klauzula rodo
            </td>
        </tr>
    </table>
</body>
</html>

Hej, tworze stopkę mailową w HTML i inline CSS i napotykam problem którego nie rozumiem. Na gmailu i thunderbirdzie moja stopka wyświetla sie tak jak powinna, ale na outlooku i mailach iphonowych totalnie sie wszystko rozjeżdża, grafiki mimo że im zapisałem na sztywno wielkość nagle sie dziwnie skalują nawet nie do tych wielkości które one same posiadają, niektóre style nie są nawet pokazywane, przeszukiwałem internet by zrozumieć czemu to wystepuje ale nic nie znalazłem, często problemem jest czytanie stylów zapisanych w CSS ale dlatego używam inline CSS i zapisuje to w kodzie html co naprawiło błędy na niektórych e-mailach lecz nie na wszystkich. Jeśli ktoś miał podobny problem to dajcie znać jak go naprawiliście. Podsyłam też kod ale zmieniłem tam poufne informacje na to co tam sie znajduje, dla prywatności.

2 odpowiedzi

odpowiedź 29 lipca 2024 przez Panelinio Stary wyjadacz (10,640 p.)

Właśnie problem w tym, że nie każdy klient pocztowy tak samo renderuje style. Sam walczyłem ze stworzeniem stopki tak, aby wszędzie tak samo wyglądała.

Rozwiązaniem dla mojego problemu było użycie tagów style powyżej oraz inline rozmiary obrazów.

<style>
@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap');
*
{
    font-family: "Reddit Sans", sans-serif;
}
table
{
    padding-left: 20px;
}
#t2 tr
{
    height: 30px;
}
.td2
{
    width: 30px;
}
<!--I tak dalej-->
</style>
<table id="t2">
    <tbody>
        <tr>
            <td class="td2"><img src="" width="20" height="20"/></td>
            <td></td>
        </tr>

No i ja też nie użyłem tagów html i head

odpowiedź 30 lipca 2024 przez VBService Ekspert (256,600 p.)
edycja 30 lipca 2024 przez VBService

Jak sam słusznie zauważyłeś u pewnej ilości klientów pocztowych panuje "średniowiecze" w obsłudze prawidłowo kodu html5, czy css3, czy nawet css2.
Kolejna sprawa, sam zauważyłeś, że najlepszą opcją do tworzenia layout-u mail-a jest użycie znacznika <table>, tu dodam od siebie, żeby korzystać z "wbudowanych" atrybutów tego znacznika oraz można zagnieżdżać ten znacznik dla uzyskanie jeszcze lepszego efektu np.

<table border="0" cellpadding="0" cellspacing="0" width="100%"
       style="border-collapse: collapse !important;">
  <tr>
    <td align="center">
      <img src="https://placehold.co/300x50/000000/ffffff/png?text=Logo&font=Roboto" alt="Logo" width="300" height="50"
           style="display: block; width: 300px; height: 50px;">
    </td>
  </tr>
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" width="100%"
             style="border-collapse: collapse !important;">
        <tr>
          <td>&nbsp; &nbsp;</td>
          <td align="left" valign="middle"
              style="font-size: 14px; font-family: Arial, sans-serif; color: #333;">
            <dl>
              <dt>Nazwa Twojej firmy</dt>
              <dt>Adres linia 1</dt>
              <dt>Adres linia 2</dt>
              <dt>Telefon: (123) 456-7890</dt>
              <dt>Email: info@example.com</dt>
            </dl>
          </td>
          <td align="center" style="padding: 20px 0;">
            <a href="https://facebook.com" style="margin-right: 10px;">
              <img src="https://placehold.co/24x24/0000ff/ffffff/png?text=F&font=Roboto" alt="facebook" width="24" height="24"
                   style="display: block; width: 24px; height: 24px;">         
            </a>
            <a href="https://twitter.com" style="margin-right: 10px;">
              <img src="https://placehold.co/24x24/00bbff/0000ff/png?text=X&font=Roboto" alt="Twitter" width="24" height="24"
                   style="display: block; width: 24px; height: 24px;">
            </a>
            <a href="https://linkedin.com">
              <img src="https://placehold.co/24x24/0055ee/000000/png?text=In&font=Roboto" alt="LinkedIn" width="24" height="24"
                   style="display: block; width: 24px; height: 24px;">
            </a>
          </td>
          <td>&nbsp; &nbsp;</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

IMO, bezpieczniej jest używać css niż css2, czy css3. (Difference between CSS version)

BTW, sprawdź: Essential Tips and Tricks for Coding HTML Emails

komentarz 1 sierpnia 2024 przez Comandeer Guru (607,060 p.)
edycja 1 sierpnia 2024 przez Comandeer

IMO, bezpieczniej jest używać css niż css2, czy css3. (Difference between CSS version)

Nie przesadzajmy już. Wszystko zależy, jaki jest target, i co tak naprawdę chcemy użyć. Lepiej jest sprawdzać per ficzer.

Dodatkowo dawno nie widziałem tak złego artykułu, jak ten podlinkowany.

CSS allows better content accessibility, flexibility, and control over the presentation characteristics of web pages.

W jaki sposób CSS poprawia dostępność treści, skoro odpowiada za warstwę prezentacji? CSS wpływa na dostępność w mocno ograniczonym zakresie.

CSS3, the advanced version of CSS […]

To nie jest "bardziej zaawansowana" wersja. Ba, samo rozróżnienie na CSS i CSS3 nie ma za dużo sensu. Przez długi czas powtarzano, że numeracja nie ma sensu, bo CSS jest po prostu nieustannie rozwijany (podobnie do HTML, który jest "żywym standardem"). Ostatnio zaczęto dyskusje nad przywróceniem terminu CSS4, ale wyłącznie jako informacji dla webdevów. Oficjalnie CSS dalej nie ma numerów.

Zatem CSS3 i CSS to to samo. To miałoby więcej sensu, gdyby artykuł mówił o CSS1 i CSS3. Tylko że IMO to rozróżnienie i tak nie ma sensu – bo nie istnieje na rynku przeglądarka, która by obsługiwała CSS1… A to oznacza, że CSS i tak jest interpretowany zgodnie z nowymi zasadami, które pojawiły się w późniejszych wersjach standardu.

One of the most significant advancements in CSS3 is the splitting of CSS standards into separate modules, making it simpler to learn and use.

W jaki sposób nauka CSS-a jest prostsza z powodu modularyzacji specyfikacji? Przecież te moduły linkują między sobą, np. definicja animation-delay z CSS Animations odsyła do definicji jednostek czasu ze specyfikacji CSS Values and Units. Dodatkowo taka specka od jednostek i wartości jest – nomen omen – bezwartościowa bez innych specyfikacji. Ten podział jest głównie dla twórców standardów i przeglądarek, żeby ułatwić implementację nowych ficzerów. Używanie CSS-a też nie jest prostsze, bo ostatecznie i tak sprowadza się do tego, czy przeglądarki wspierają dane ficzery.

Ta tabelka porównująca CSS z CSS3 też jest całkowicie bezsensowna. Np. w jaki sposób CSS3 zużywa mniej pamięci, niż CSS1? Ktoś to sprawdził? A jeśli tak, to jak…? Odpalił Netscape'a i porównał z obecnym Chrome? Rzeknę więcej: jest spora szansa, że jest całkiem odwrotnie – że to obecny CSS jest bardziej pamięciożerny niż dawny. W sensie – generowanie tekstu z półprzezroczystym gradientem brzmi jak o wiele bardziej obciążające niż generowanie tekstu w jednolitym kolorze z palety kilkunastu/kilkudziesięciu dostępnych kolorów. Tak samo obecne systemy layoutu raczej są bardziej obciążające, niż… brak systemów layoutu.

Co więcej, systemy layoutu (flexbox, grid) nawet nie są wspomniane na liście nowości w CSS3. Zamiast tego jest… stylowanie borderów. To artykuł z 2024 o CSS-ie z 2005 roku. To nawet nie jest śmieszne. Inna rzecz, że to śmierdzi GPT na kilometr – liczne powtórzenia, gładkie zwroty i absolutny brak jakichkolwiek konkretów.

komentarz 1 sierpnia 2024 przez VBService Ekspert (256,600 p.)

CSS1 i CSS3. Tylko że IMO to rozróżnienie i tak nie ma sensu – bo nie istnieje na rynku przeglądarka, która by obsługiwała CSS1… A to oznacza, że CSS i tak jest interpretowany zgodnie z nowymi zasadami, które pojawiły się w późniejszych wersjach standardu.

Ale tu chodzi o niektóre aplikacje do obsługi poczty, które niekoniecznie korzystają z "silników" takie jakie są "używane" w przeglądarkach i jak użyjesz jakiegoś ficzera, który został oficjalnie dopiero wprowadzony wraz np. css3, to może nie zadziałać takie ustawienie css zgodnie z Twoim oczekiwaniem (sam kiedyś miałem taki problem z outlook-iem, czy thunderbird-em).

komentarz 1 sierpnia 2024 przez Comandeer Guru (607,060 p.)

Ale klienty pocztowe też nie obsługują CSS1, one obsługują wybrane ficzery z CSS-a. Dlatego, jak wspominałem, lepiej jest sprawdzać per ficzer.

Poza tym to nijak nie zmienia tego, że to rozróżnienie nie ma sensu – zwłaszcza w kontekście tego artykułu.

komentarz 1 sierpnia 2024 przez VBService Ekspert (256,600 p.)

Lepiej jest sprawdzać per ficzer.

nie znałem tego tools-a, ciekawa sprawa, dzięki za link.

BTW, IMO najlepiej nie przesadzać z tym html-em w email-u i nie "tworzyć" jakiś wydumanych "wodotrysków".

komentarz 1 sierpnia 2024 przez VBService Ekspert (256,600 p.)

Nawet w podanym przez Ciebie linku widać np. jak "cienki" jest outlook pod Windows-a.

komentarz 1 sierpnia 2024 przez Comandeer Guru (607,060 p.)

No tak, ale słabe wsparcie dla CSS-a nie jest równoznaczne ze wsparciem dla CSS w wersji 1. Gdyby tak było, nie obsługiwałby word-break czy nie miał częściowego wsparcia dla @font-face.