Style-Mover – zamiana stylów ze znacznika <style> na atrybuty inline w HTML

Style-Mover to narzędzie napisane w Pythonie, które przetwarza plik HTML i przenosi wszystkie reguły CSS z wewnętrznego znacznika <style> do atrybutów style w odpowiadających im elementach HTML. Program oferuje również kilka opcji transformacji tekstu oraz raportowania.

Narzędzie jest przydatne do tworzenia samodzielnych plików HTML, które są łatwo przenośne i poprawnie renderują się w środowiskach, w których zewnętrzne ani osadzone arkusze stylów nie są obsługiwane – na przykład w niektórych klientach poczty elektronicznej czy określonych komponentach webowych.

GitHub:github.com/IgorBrzezek/Style-Mover

Do czego służy Style-Mover?

Style-Mover rozwiązuje problem przenoszenia stylów CSS z bloku <style> bezpośrednio do elementów HTML. Przydaje się w wielu scenariuszach:

• Poczta e-mail – większość klientów poczty (np. Outlook, Gmail) ignoruje bloki <style> lub obsługuje je tylko częściowo; style inline działają wszędzie.
• Systemy CMS i szablony – niektóre systemy zarządzania treścią usuwają znaczniki <style> przy wklejaniu treści; dzięki Style-Mover styling zostaje zachowany.
• Komponenty webowe i frameworki – w niektórych środowiskach (np. Shadow DOM) zewnętrzne style nie są widoczne; inline style zawsze działają.
• Archiwizacja stron – plik HTML z wbudowanymi stylami jest w pełni samodzielny i nie zależy od zewnętrznych zasobów.

Jak to działa – mechanizm wewnętrzny

Style-Mover działa w następujących krokach:

1. Odczytuje plik HTML i przetwarza go za pomocą biblioteki BeautifulSoup.
2. Znajduje znacznik <style> i parsuje zawartość CSS za pomocą biblioteki cssutils.
3. Dla każdej reguły CSS (selektora) znajduje odpowiadające elementy w drzewie HTML za pomocą metody select().
4. Jeśli element ma już atrybut style, nowe właściwości są z nim łączone (z nadrzędnością nowych wartości).
5. Po przetworzeniu wszystkich reguł znacznik <style> jest usuwany.
6. Usuwane są wszystkie atrybuty class, ponieważ nie są już potrzebne.
7. Wynikowy kod HTML jest zapisywany do pliku wyjściowego.

Wymagania

• Python 3.7 lub nowszy
• Biblioteki: BeautifulSoup4 (pip install beautifulsoup4), cssutils (pip install cssutils)

Instalacja i uruchomienie

Sklonuj repozytorium i zainstaluj wymagane biblioteki:

git clone https://github.com/IgorBrzezek/Style-Mover.git
cd Style-Mover
pip install beautifulsoup4 cssutils

Program uruchamiasz z linii poleceń:

python smover.py -i <plik_wejściowy> [opcje]

Opcje wiersza poleceń – szczegółowy opis

Style-Mover oferuje kilka opcji sterujących jego działaniem:

-h, –help

Wyświetla komunikat pomocy z listą wszystkich opcji oraz informacją o autorze.

-i, –input <plik>

(Wymagana) Określa ścieżkę do wejściowego pliku HTML, który ma być przetworzony.

-o, –output <plik>

(Opcjonalna) Określa ścieżkę dla wyjściowego pliku HTML. Jeśli ta opcja nie zostanie podana, program utworzy nowy plik, dodając przyrostek _styled do nazwy pliku wejściowego (np. index.html -> index_styled.html).

–capitalic

Dostosowuje wielkość liter w nagłówkach od <h1> do <h5>. Logika działania:

• Pierwsze słowo nagłówka jest zawsze pisane wielką literą.
• Słowa napisane w całości wielkimi literami (np. akronimy) są zachowywane.
• Słowa z mieszaną wielkością liter (np. PowerPoint) są zachowywane.
• Wszystkie pozostałe słowa są konwertowane na małe litery.

–ascii [nazwa_klasy]

Znajduje wszystkie elementy HTML z określoną klasą i zawija ich treść w znacznik <pre>. Jest to przydatne do zachowania formatowania bloków kodu.

• Jeśli podano nazwę klasy (np. --ascii my-code-class), program przetworzy elementy z tą klasą.
• Jeśli użyto opcji bez argumentu (samo --ascii), domyślnie targetuje elementy z klasą code-block.

–stat

Wyświetla w konsoli statystyki po przetworzeniu pliku. Pokazuje liczbę zastosowań każdej właściwości CSS (np. color, font-size) do elementów HTML.

-b, –batch

Włącza tryb cichy (batch). Żadne komunikaty nie są wyświetlane w konsoli. Jeśli podczas przetwarzania wystąpią błędy, zostaną zapisane do pliku smover.err w tym samym katalogu.

Przykłady użycia

1. Podstawowe użycie

Przetwarza plik my_page.html i zapisuje wynik jako my_page_styled.html:

python smover.py -i my_page.html

2. Określenie pliku wyjściowego i dostosowanie wielkości liter w nagłówkach

python smover.py -i input.html -o output.html --capitalic

3. Konwersja określonej klasy na blok preformatowany i wyświetlenie statystyk

python smover.py -i document.html --ascii custom-code --stat

4. Uruchomienie w trybie cichym dla zautomatyzowanego skryptu

python smover.py -i template.html -b

Jeśli wystąpi błąd, sprawdź plik smover.err.

5. Praca z domyślną klasą code-block

python smover.py -i tutorial.html --ascii

Program owinie w znacznik <pre> wszystkie elementy z klasą code-block.

6. Pełne przetwarzanie z wieloma opcjami

python smover.py -i article.html -o article_final.html --capitalic --ascii code --stat

Przenosi style, dostosowuje wielkość liter w nagłówkach, owija elementy z klasą code w znaczniki <pre> i wyświetla statystyki.

Co się dzieje z atrybutami class?

Po przeniesieniu stylów do atrybutów style wszystkie atrybuty class są usuwane z dokumentu. Nie są już one potrzebne, ponieważ ich jedynym zadaniem było łączenie elementów z regułami CSS. Usunięcie ich oczyszcza kod i zapobiega konfliktom z ewentualnymi zewnętrznymi arkuszami stylów.

Zatrzymywanie programu

Program działa w trybie konsolowym i kończy się automatycznie po przetworzeniu pliku. W przypadku błędów krytycznych (np. brak pliku wejściowego) wyświetla stosowny komunikat i kończy działanie.

Podsumowanie

Style-Mover to proste, ale bardzo przydatne narzędzie dla każdego, kto pracuje z kodem HTML i potrzebuje przenieść style z bloku <style> do atrybutów inline. Dzięki wykorzystaniu sprawdzonych bibliotek (BeautifulSoup, cssutils) działa stabilnie i radzi sobie z różnorodnie sformatowanym kodem.

Bogaty zestaw opcji – regulacja wielkości liter w nagłówkach, obsługa bloków kodu, statystyki i tryb cichy – sprawia, że sprawdzi się zarówno w ręcznej pracy, jak i w zautomatyzowanych procesach przetwarzania dokumentów HTML.

Jest to szczególnie cenne narzędzie dla twórców szablonów e-mail, administratorów CMS oraz programistów potrzebujących czystego, samodzielnego kodu HTML z wbudowanymi stylami.

Źródła: github.com/IgorBrzezek/Style-Mover