Extrakce CSS

Extrakce CSS
« kdy: 21. 08. 2020, 11:19:05 »
Ahoj,

hledám nějaký nástroj - postup jak jednoduše extrahovat css použitá v kodu. Myšleno tak, že mám HTML a CSS . V HTML najdu nějaký blok kodu, kkterý mě zajímá a z něj bych chtěl jednoduše vytáhnout vše co ho ovlivňuje v CSS. Našel jsem zatím jen extraktor, který vytáhne jen názvy CLASS / ID ale ne už jejich hodnoty. Častečně pak taky v inspect pomocí Copy CSS ale to kopíruje zaprvé jen po jednom a nekopíruje například to že <h1> ovlivňuje v CSS h1{} bez class.  Máte nějaký tip?  Díky


Bugsa

Re:Extrakce CSS
« Odpověď #1 kdy: 21. 08. 2020, 13:07:53 »
Však to ukazuje webový prohlížeč přes F12, záložka Elements. Nebo jsem to pochopil špatně?

Re:Extrakce CSS
« Odpověď #2 kdy: 21. 08. 2020, 13:15:39 »
Řekl bych, že z popisu není úplně jasné, co chcete. Chcete to dělat jednorázově třeba v developer tools v prohlížeči? Nebo na to chcete nějaký automat pro dávkové zpracování? Chcete vytahovat informace jen z HTML, nebo i z CSS?

Pokud chcete jen z HTML vytáhnout vše, co ovlivňuje CSS, jsou to obvykle jen tři atributy – id, class a style. Dále to ale samozřejmě může ovlivňovat hierarchie dokumentu (předchozí a nadřazené uzly DOMu) a jakékoli další atributy (CSS má atributový selektor).

Pokud by vám stačilo vytahat ty tři atributy (id, class, style), je asi nejjednodušší převést HTML na XHTML a pak použít XSLT (nebo XQuery nebo samotné XPath, záleží na požadovaném výstupu.

Re:Extrakce CSS
« Odpověď #3 kdy: 28. 08. 2020, 21:23:06 »
Řekl bych, že z popisu není úplně jasné, co chcete. Chcete to dělat jednorázově třeba v developer tools v prohlížeči? Nebo na to chcete nějaký automat pro dávkové zpracování? Chcete vytahovat informace jen z HTML, nebo i z CSS?

Pokud chcete jen z HTML vytáhnout vše, co ovlivňuje CSS, jsou to obvykle jen tři atributy – id, class a style. Dále to ale samozřejmě může ovlivňovat hierarchie dokumentu (předchozí a nadřazené uzly DOMu) a jakékoli další atributy (CSS má atributový selektor).

Pokud by vám stačilo vytahat ty tři atributy (id, class, style), je asi nejjednodušší převést HTML na XHTML a pak použít XSLT (nebo XQuery nebo samotné XPath, záleží na požadovaném výstupu.

Tak to ste veľmi zjednodušili. Pretože dosť často sa používa selector priamo na elementy, prípadne kombinácie viacerých tried / elementov, prípadne XPath. Alebo aj toto:

Kód: [Vybrat]
article + article {
    margin-top: 25px;
}

nehovoriac o vnáraní a hierarchii elementov. Na základe samotného id a class teda nezistíte skoro nič.