Rava: Frage zum Wiki-Artikel „Stylesheets_einbinden“

problematische Seite

Hallo, ich möchte eine Seite von 5theguardian.com lokal speichern, allerdings nur den Textabschnitt und nicht die ganze Rahmenhandlung rechts daneben oder darunter, so habe ich bisher den HTML Code des eigentlichen Inhalts kopiert, und schaue mir den Header der Gesamtdatei an. Dort findet sich massig CSS Code, den ich in einer externen CSS Datei einbinden will um den bei zukünftig gespeicherten Dateien nicht jedes Mal im Artikel selbst zu haben. Aus

<style>[css-code]</style>

wird im Orginal also einfach

<link rel="stylesheet" href="../guardian_stylesheet.css">

und den eingeschlossenen

[css-code]

kopiere ich nach ../guardian_stylesheet.css .

Aber was mache ich mit den ganzen style Anteilen welche "class" oder "data-emotion=" dabei haben? Der Artikel "Stylesheets einbinden" sagt leider nichts dazu.

Beispiel:

<style class="webfont">

oder

<style data-emotion="

Ich denke, den eingeschlossenen CSS code einfach in ../guardian_stylesheet.css zu verschieben wird etwas brechen auf der lokalen html-Seite, da ja die Attribute class="webfont" usw fehlen?

Möglicherweise wird einiges vom Seitendesign auch über JavaScript <script> gesteuert, aber das gehört nicht hierher da JS erstmal nichts mit CSS zu tun hat.

Viele Grüße, Rava

  1. problematische Seite

    Hallo Rava,

    Klassen an HTML Elementen kann man für zwei Zwecke verwenden:

    • Zum Selektieren von CSS Styles
    • Zum Selektieren mittels JavaScript

    Allein für sich tut eine Klasse gar nichts. D.h. wenn Du class Attribute vorfindest, musst Du prüfen, ob sie in Style-Regeln auftauchen. Man erkennt sie dort am vorangestellten Punkt. Beispiel:

    p.self {
       color: red;
    }
    
    <p class="self">Hier ist Selfhtml</p>
    

    Zu Klassenselektoren findest Du im Wiki was.

    Ein <style> Element mit einer Klasse dran ist allerdings ungewöhnlich. Das deutet darauf hin, dass sie durch JavaScript hinzugefügt wurde und mit der Klasse etikettiert wurde, um einfach prüfen zu können, ob sie schon da ist. Oder es gibt JavaScript, das ein style-Element mit dieser Klasse sucht, um darin per CSSOM (CSS Objektmodell) herzumzufuhrwerken. Ähnliches würde ich bei data-emotion vermuten. Eine Auswirkung auf die Bedeutung oder Priorität der Styleregeln in diesen style-Elementen hat eine Klasse oder ein data-Attribut jedenfalls nicht.

    Zu den Data-Attributen: damit ist es ähnlich. Sie sind primär dazu da, von JavaScript verarbeitet zu werden (über das dataset-Property der HTML Elemente), aber man kann sie mittels des Attributselektors auch für CSS Regeln nutzen:

    h1[data-emotion] {
       color: black;
    }
    

    findet ein h1 Element, das ein data-emotion-Attribut besitzt. Mit h1[data-emotion=sad] findet man ein Element, das traurig ist.

    Analog kann man in JavaScript man mit

    const style1 = document.querySelector('style.webfont');
    const style2 = document.querySelector('style[data-emotion=sad]');
    

    die style-Elemente mit der jeweiligen Klasse oder dem data-Attribut finden.

    Wozu das nun genutzt wird und wie Du das bei deinem Datenraubzug verwenden kannst oder musst, kann ich Dir nicht sagen. Bitte prüfe sehr genau die rechtliche Situation, bevor Du die gespeicherten Daten für irgendwas nutzt.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      Hallo Rolf,

      es sollte also kein Problemsein wenn ich das Klassenelement einfach weglasse.

      Bitte prüfe sehr genau die rechtliche Situation, bevor Du die gespeicherten Daten für irgendwas nutzt.

      Ich nutze sie nur als Lokale Sicherung, damit ich es eben so nachlesen kann wie es am Tag des Auffindens war (und weil manchmal Artikel aus dem Netz verschwinden…), ich habe nie vor das irgendwie sonst zu verwenden oder gar weiterzugeben.

      Grüße Rava

      1. problematische Seite

        Hallo Rava!

        Es sollte also kein Problem sein wenn ich das Klassenelement einfach weglasse.

        Normalerweise nicht.
        Aber die entfernte Klasse kann problematisch werden, wenn an das Style-Element per JavaScript o.ä. (falls es da etwas anderes gibt 😉) angesprochen wird und an den Inhalt etwas drangehängt / entfernt wird.

        Au revoir,
        Samuel Fiedler