Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Inline CSS => External CSS
Forum PHP.pl > Forum > PHP
kilas88
Witam,

Mam dość nietypowy problem. Potrzebuję zebrać wszystkie wewnętrzne style CSS z dokumentu HTML i zapisać je do zewnętrznego arkuszu CSS.

Podobna propozycja padła dla HTMLPurifier, ale jak widzę nikt się za to nie zabrał:
http://htmlpurifier.org/docs/proposal-css-extraction.txt

Czyli chodzi o taki efekt. Mamy następujący kod:
  1. <div style="text-align:center">Big <span style="color:red;">things</span>!</div>


I chcemy z niego pozyskać taki kod:
  1. <div id="hp-12345">Big <span id="hp-12346">things</span>!</div>

+

Kod
#hp-12345 {text-align:center;}
#hp-12346 {color:red;}


Czy ktoś zna jakąś bibliotekę, która ma podobną funkcjonalność? Samemu trochę by się pisało coś takiego, a jest mi to niezbędnie potrzebne, niestety.
Crozin
Generalnie nie powinno to być w najprostszej formie trudne do napisania. Przy pomocy DOMDocument::loadHTML() możesz operować na dokumencie HTML. Lecisz po wszystkich elementach sprawdzasz czy mają atrybut STYLE, jeżeli tak to:
1. Usuwasz go.
2. Jeżeli element nie ma atrybutu ID dodajesz jakiś tam losowy.
3. Na podstawie danych z pkt. 1 i 2 wygenerowanie treści CSS-a nie będzie trudne.

Pamiętaj tylko, że taka modyfikacja może wpłynąć na kod, ponieważ oba zapisy nie będą równoznaczne. Powinieneś mieć na uwadze, że jakiś kod CSS czy JS może polegać na istnieniu / braku atrybutu STYLE / ID. Dodatkowo CSS w zew. arkuszu ma inną "siłę" niż ten wpisany bezpośrednio w atrybut STYLE.
kilas88
Właśnie robię to co napisałeś, tzn.

  1. $doc = new DOMDocument();
  2. $doc->loadHTML($content);
  3.  
  4. $els = $doc->getElementsByTagName('*');
  5.  
  6. for ($i = 0; $i < $els->length; $i++) {
  7. echo $els->item($i)->getAttribute('style') . '\n';
  8. }

itp itd

W sumie widzę, że nie jest trudno wyodrębnić ten kod CSS. Nie muszę się obawiać o wcześniej nadane zewnętrzne style, gdyż ich po prostu nie ma.

Piszę aplikację, która pobiera książki DOC/DOCX i konwertuje do HTML (przy pomocy Zend_Service_LiveDocx_MailMerge, który niestety wszystkie style wrzuca bezpośrednio w HTML). Czyli całość kodu CSS jest wyłącznie w pliku HTML, a musi być w zewnętrznym pliku CSS (takie mają wymagania książki na Kindle).

Pewnie już ludzie pisali podobne rzeczy (nie ma problemu, który nie został już rozwiązany wink.gif), stąd moje pytanie. Ale ok, dokończę i sam opublikuję. Dziękuję Crozin za sugestię.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.