Extrakce CSS

[BlackTree]

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

[Reklama]

[Bugsa]

Však to ukazuje webový prohlížeč přes F12, záložka Elements. Nebo jsem to pochopil špatně?

[Filip Jirsák]

Ř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.

[fortran1986]

Ř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č.