Pewnie Ci się to zdarzyło. Kopiujesz ładnie ostylowany blok — kartę tytułową, kolorowe wyróżnienie — i wklejasz do edytora WeChat albo CMS. Czasem trafia, wyglądając dokładnie dobrze. Innym razem ląduje jako goły tekst z zerwanym całym projektem. To samo działanie, inny wynik, i wydaje się losowe. Nie jest. Różnicą jest to, czy skopiowałeś inline HTML.
Zrozumienie tej jednej idei czyni wklejanie ostylowanej treści przewidywalnym zamiast loterią.
Czym właściwie jest inline HTML
Style webowe mogą mieszkać w dwóch miejscach. W normalnej stronie style siedzą w osobnym arkuszu stylów, a HTML tylko odwołuje się do nich nazwą klasy: <div class="title-card">. Div sam w sobie nic nie znaczy — projekt mieszka w pliku CSS gdzieś indziej.
Inline HTML wkłada style do wnętrza samego elementu: <div style="background:#2b6cb0; color:#fff; padding:16px; border-radius:8px">. Wszystko potrzebne do wyrenderowania bloku podróżuje razem z blokiem. Nie ma zewnętrznego pliku, od którego trzeba zależeć.
Ta różnica to cała historia tego, dlaczego niektóre wklejenia zachowują projekt, a inne nie. Gdy wklejasz do edytora, edytor nie dostaje arkusza stylów strony źródłowej. Jeśli projekt mieszkał w tym arkuszu, znika — dostajesz gołą strukturę, czyli zwyczajnie wyglądający tekst. Jeśli projekt był inline, idzie razem, a blok renderuje się poprawnie.
Dlaczego WeChat i bogate edytory tego potrzebują
Edytor WeChat jest surowy. Usuwa zewnętrzne arkusze stylów i filtruje mnóstwo stylowania. Blok, który polegał na klasie zdefiniowanej gdzie indziej, nie ma na czym się oprzeć, gdy trafi do WeChat. Wiele edytorów tekstu sformatowanego i pól wklejania CMS zachowuje się tak samo — oczyszczają to, co wklejasz, i zostawiają tylko atrybuty inline.
Więc niezawodnym sposobem na przeniesienie ostylowanego bloku do tych edytorów jest skopiowanie go jako inline HTML, gdzie style są samowystarczalne. Wtedy nawet surowy edytor ma wszystko, czego potrzebuje, by pokazać blok tak, jak zaprojektowano.
Jak działa kopiowanie bloku „z formatowaniem"
Nowoczesne przeglądarki mają Clipboard API, które potrafi umieścić w schowku bogatą treść — HTML z formatowaniem — a nie tylko zwykły tekst. Gdy narzędzie kopiuje blok „jako inline HTML", używa tego API, by umieścić samowystarczalny znacznik bloku w Twoim schowku. Potem wklejasz (Ctrl/Cmd+V) do edytora, a ponieważ style były inline i schowek niósł HTML, blok pojawia się ostylowany.
Żeby to zadziałało, muszą być prawdziwe dwie rzeczy:
- Znacznik musi mieć style inline, żeby żaden zewnętrzny plik nie był potrzebny.
- Schowek musi nieść go jako HTML, a nie jako zrzut nawiasów ostrych w zwykłym tekście.
Zrób oba dobrze, a wklejenie „po prostu działa". Rozmiń się z którymś, a dostajesz zwykły tekst albo ścianę widocznego kodu.
Robimy to bez ręcznej edycji kodu
Mógłbyś w zasadzie wziąć ostylowany blok i ręcznie zinlineować każdy styl — przenieść reguły każdej klasy do atrybutu style="" na każdym elemencie. Dla czegokolwiek poza trywialnym blokiem to nużące i podatne na błędy, zwłaszcza przy kartach SVG, gdzie style są rozproszone po wielu węzłach.
Narzędzie, które to obsługuje, jest łatwiejsze. Narzędzie do wyodrębniania modułów układu w IMG.DIY wyodrębnia ostylowane bloki z wklejonej treści WeChat i daje każdemu przycisk kopiowania, który umieszcza go w schowku jako inline HTML przez Clipboard API. Klikasz kopiuj, przełączasz się do edytora WeChat (albo swojego CMS, albo pola tekstu sformatowanego), wklejasz, a blok zachowuje formatowanie. Bez ręcznego inline'owania, bez naprawiania zepsutego znacznika.
Szybka lista kontrolna wklejania
Gdy ostylowane wklejenie się nie uda, przejdź przez to:
- Skopiowałeś inline HTML czy zrzut ekranu/zwykły tekst? Tylko inline HTML wkleja się jako działający ostylowany blok.
- Wklej do normalnej treści edytora, a nie trybu „kod źródłowy" czy „zwykły tekst", który może usunąć albo zescape'ować znacznik.
- Sprawdź blok w podglądzie. Własny podgląd WeChat pokazuje, jak blok faktycznie wyrenderuje się na telefonie — potwierdź tam przed publikacją.
- Jeśli kolory wyglądają źle, przekoloruj przed kopiowaniem. W narzędziu możesz kliknąć kolor i zmienić go wszędzie w bloku, więc kopiujesz go już w kolorach swojej marki.
Jeden uczciwy limit warty powtórzenia: narzędzie takie jak to kopiuje i porządkuje bloki — to narzędzie do wyodrębniania, a nie projektant szablonów od zera, i nie potrafi pobrać artykułu po adresie URL (przeglądarki blokują międzywitrynowe pobieranie stron WeChat, więc wklejasz treść). W tych granicach to inline HTML jest tym, co pozwala ostylowanemu blokowi przetrwać podróż z jednego edytora do drugiego z nienaruszonym projektem.
Gdy zobaczysz, jak blok wkleja się idealnie kilka razy, wcześniejsza losowość nabiera sensu: nigdy nie była losowa. Zawsze chodziło o to, czy style podróżowały wewnątrz bloku.