XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   Eltern-Element ausblenden (http://xhtmlforum.de/showthread.php?t=73640)

cloned 22.10.2018 09:30

Zitat:

Zitat von AndreasB (Beitrag 553063)
Wie in der Ausgangsfrage geschildert geht es mir um das Nachbilden eines nicht existierenden CSS-Selektors.

Angenommen es gäbe Vorfahrenselektoren, nehmen wir das Symbol Δ, dann wäre das so ein - fiktiver - CSS-Selektor:


Vielleicht liegen die Gründe auch in den programmiertechnischen Schwierigkeiten, sonst gäbe es vielleicht längst in CSS einen Vorfahren-Selektor.

Es gibt diesen Selektor schon in der neuen CSS Spezifikation (als Entwurf), er ist nur noch in keinem Browser implementiert.
Er lautet :has() und lautet zb so: a:has(img), spricht alle a Tags an die ein Bild enthalten.

Warum es den Selektor bis jetzt nicht gibt ist performance: https://snook.ca/archives/html_and_c...rent-selectors

Zitat:

Zitat von AndreasB (Beitrag 553063)
https://codepen.io/fermion/pen/JmZNPw

Das funktioniert, da werden alle Container ausgeblendet.

Würdest Du diesen Code als am stabilsten für den beschriebenen Zweck (Nachbilden eines Vorfahren-Selektors) empfehlen?


Es funktioniert, also ist es stabil genug. Mehr Anforderungen an einen 3-Zeiler gibt es nicht. Man kann lediglich das DRY Prinzip noch anpassen und Codezeilen zusammenfassen
Code:

element=document.querySelectorAll('.kind');
element.forEach((i) => {
i=i.parentNode.parentNode.parentNode;
i.style.display='none';
});

Zitat:

Zitat von AndreasB (Beitrag 553063)
Die semantische Qualität des HTML SPON ist leider immer noch unterirdisch schlecht.
Denn ansonsten gäbe es weder DIV-Suppen bei SPON, keinen kilometerlangen redundanten Code und natürlich hätte jeder Vorschau-Container zu Spiegelplus das Klassenattribut "ssplus" und solche Hacks wie wir sie gerade versuchen zu entwickeln wären völlig überflüssig.

Ich reibe mir bei der absolut grottigen Qualität des Codes des SPON-CMS immer wieder verwundert die Augen.
Wer verantwortet bloß so einen Mist.
Miserabel wartbar.

Ich glaube du hast eine falsche Vorstellung was eine div Suppe ist. divs sind nichts böses und schlechtes und spiegel hat auch keine div Suppe.
Welchen "redundanten Code" meinst du? Artikel wiederholen sich und demzufolge auch das HTML..?
Mein Punkt ist aber folgender: Grottenschlecht ist der Code nicht, verbessern kann man an jedem Code etwas, das hat dieser Beruf an sich. Es gibt nie die eine, richtige Lösung.
div Suppe ist das keine, es werden überall die semantisch korrekten Elemente verwendet.
Du hast Recht, das hat jetzt nichts mit deinem ursprünglichen Thema zu tun, aber solche unqualifizierten Falschaussagen kann ich nicht hier stehen lassen.
Und nein, weder lese ich spiegel noch arbeite ich dafür.

AndreasB 22.10.2018 11:40

@cloned
Danke für den Hinweis zu dem Selektor ":has", der als Entwurf vorliegt, das war mir entgangen.
Danke auch nochmal für Deine und Bastians Hilfe für den Code.
Die noch ausstehende Aufgabe, das Ding in Greasemonkey zum Laufen zu bringen, löse ich bestimmt noch.

Zur Qualität des HTML von spiegel.de:
Jede andere Aussage von Dir hätte ich mich gewundert ;)
Wir haben zu manchen Dingen offenbar fundamental verschiedene Auffassungen.
Es erstaunt mich, dass Du diesen Code "verteidigst". Ich könnte Dir zig konkrete Beispiele nennen, warum genau ich den Code als schlecht bezeichne.
Aber das würde zu nichts führen. Und hier wäre es offtopic.
Eine sinnvolle Diskussion müsste sowieso erst klären, welche abstrakten Merkmale wir beide für Hochwertigkeit heranziehen.
Schon dabei lägen wir vermutlich völlig auseinander.

cloned 22.10.2018 12:40

Zitat:

Zitat von AndreasB (Beitrag 553068)
Zur Qualität des HTML von spiegel.de:
Jede andere Aussage von Dir hätte ich mich gewundert ;)
Wir haben zu manchen Dingen offenbar fundamental verschiedene Auffassungen.
Es erstaunt mich, dass Du diesen Code "verteidigst". Ich könnte Dir zig konkrete Beispiele nennen, warum genau ich den Code als schlecht bezeichne.
Aber das würde zu nichts führen. Und hier wäre es offtopic.
Eine sinnvolle Diskussion müsste sowieso erst klären, welche abstrakten Merkmale wir beide für Hochwertigkeit heranziehen.
Schon dabei lägen wir vermutlich völlig auseinander.

Das stimmt, das ist hier offtopic. Ich verteidie den Code weniger als ich deine Falschaussage, dass es sich um eine div suppe handelt, richtig stelle. Darum ging es mir. Nicht um "hochwertigkeit". Das habe ich lediglich in einem Nebensatz angesprohen.
Also nochmal für alle, die mitlesen: Der code von Spiegel ist keine div suppe sondern lediglich der zu erwartende outcome wenn man an so einem großen Projekt (inklusive Datenbankanbindung) arbeitet.

AndreasB 22.10.2018 13:15

Ich widerspreche Deiner Aussage, dass es sich um keine DIV-Suppe handelt.

Es werden sowohl vermeidbare DIVs ausgegeben als auch DIVs verwendet, wo Elemente "mit Semantik" existieren. Dito für SPANs.


Ich widerspreche auch Deiner Aussage, dass ein großes CMS mit angebundener Datenbank zwingend solchen minderwertigen und extrem länglichen Code ausgeben muss.
Es ginge viel prägnanter, wenn denn die CMS-Verantwortlichen Interesse an der Ausgabe von modernem und prägnantem HTML hätten.
Gerade bei einem so großen Anbieter, der viele Fachkräfte allein für die Webtechnik beschäftigt, wo also ein riesiges Budget existiert, ist das ein Armutszeugnis.


Allein die vielen Attribute und Werte, die mühelos durch elegante CSS-Selektoren überflüssig würden, zeigen, wie wenig Lust die Verantwortlichen haben, modernen Code auszugeben.

Solltest Du das doch diskutieren wollen, können wir dazu einen neuen Thread aufmachen.

cloned 22.10.2018 14:08

Zitat:

Zitat von AndreasB (Beitrag 553071)
Solltest Du das doch diskutieren wollen, können wir dazu einen neuen Thread aufmachen.

Von mir aus gerne, sofern ich Zeit dafür habe beteilige ich mich daran.
Eine Frage nur:

Zitat:

Zitat von AndreasB (Beitrag 553071)
Es werden sowohl vermeidbare DIVs ausgegeben als auch DIVs verwendet, wo Elemente "mit Semantik" existieren. Dito für SPANs.

Wo? Hast du ein konkretes Beispiel dafür?

AndreasB 22.10.2018 15:28

Ich habe zum Thema "Kritik der Qualität des HTML-Codes von spiegel.de" einen neuen Thread eröffnet.


https://xhtmlforum.de/73659-kritik-d...ost553081.html

AndreasB 24.10.2018 19:00

@basti


Ich ziehe mal Dein Greasemonkeyskript aus dem anderen Thread hierher, weil es hier ontopic ist:


Code:

// ==UserScript== // @name        Spiegel+ ausblenden // @author      Andreas // @include      *spiegel.de* // @noframes // @grant  GM_getValue // @grant  GM_setValue // @grant  GM_addStyle // @grant  GM_xmlhttpRequest // @version      2.0 // @require https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js // ==/UserScript==  console.log('Script is running')  $(document).ready(function(){  console.log('ready have fired');  //ele=document.getElementsByClassName('spplus')[1];  element=document.querySelectorAll('.spplus'); element.forEach((i) => { i=i.parentNode; i=i.parentNode; i=i.parentNode; inp=i.outerHTML; inp=inp.indexOf('class="teaser'); if(inp!=-1){  console.log('kill');  i.style.display='none'; }else{  console.log('no kill'); } }); });
Ganz herzlichen Dank.
Es funktioniert.


Sieht ziemlich kompliziert aus.


ist der Code, wo das Class-Attribut "teaser" angegeben wird, zwingend nötig?


Ich habe durch Ausprobieren diverse Zeilen entfernt, es funktioniert immer noch:


Code:

// ==UserScript==
// @name        Spiegel: Vorfahren ausblenden
// @author      Andreas
// @include      *spiegel.de*
// ==/UserScript==

//Spiegel Plus
element=document.querySelectorAll('.spplus');
element.forEach((i) => {
i=i.parentNode;
i=i.parentNode;
i=i.parentNode;
i.style.display='none';
});

//Fußball
element=document.querySelectorAll('[href*="/sport/fussball/"]');
element.forEach((i) => {
i=i.parentNode;
i=i.parentNode;
i=i.parentNode;
i.style.display='none';
});


Das ist wirklich richtig geil.
Endlich kann ich auch Elemente rauskicken, die sich per CSS nicht treffen lassen.




Ich suche ja nach einer möglichst universellen Lösung (auch nicht nur für spiegel.de) für Userscripts in Firefox, wo ich entweder ein oder mehrere Eltern angeben kann:


Darf ich bitte noch etwas zum Pseudo-Klasse "has" stellen?


Auf https://developer.mozilla.org/en-US/docs/Web/CSS/:has steht:


Zitat:

The :has() pseudo-class takes a selector list as an argument. In the current specification :has is not marked as part of the live selector profile, which means it can not be used within stylesheets; only with functions like document.querySelector().
Bedeutet dies, dass man es in einem Userscript (in Greasemonkey) einsetzen könnte?

basti1012 25.10.2018 13:17

Bei meinen Script konnte sicher noch was raus. Zb mitclass teaser habe ich nur gemacht weil es auch ein Eltern gab was <ul> hatte , irgendwo anders auf der Seite. Dann hätte er auch was anderes geblockt was vieleicht gar nicht geblockt werden sollte.Deswegen habe ich mich nur an denn Quellcode gehalten den du mal hier irgendwo gepostet hattest.wenn deine änderungen jetzt alles das blocken wie du es ja haben willst ist doch gut.
Ich hatte gestern auch keine große lust mehr auf Spiegel.de weiter rum zu spielen weil hatte da nur probleme auf der Seite. Aber das wäre jetzt hier wieder offtopic

wegen dein has() mußt du mal an besten testen. has() gibt es ja schon länger in Js aber halt im Css noch nicht. denke das es bei Greasmonkey eigentlich gehen müßte. Aber ohne testen kann ich das auch nur vermuten, weil Greasmonkey hat sowieso sein eigenleben schlimmer als tampermonkey finde ich

AndreasB 25.10.2018 14:11

Wie müssten denn bitte - unabhängig von Greasemonkey - der komplette Code für die Anwendung von "has" lauten?
Am besten mit dem Beispiel ".ssplus" und drei Eltern.


Ich verstehe leider anhand developer.mozilla.org nicht, wie der Code lauten müsste.


Am coolsten wäre übrigens ein Skript, welches die Verwendung von typischer CSS-Syntax erlaubt.
Aber das ist vermutlich mit JS nicht hinzukriegen.

.ssplus < * < * < *

"<" sei der fiktive Eltern-Selektor

.ssplus _ .teaser

"_" sei der fiktive Vorfahren-Selektor.

cloned 25.10.2018 15:03

Hier siehst du, welche Browser bereits :has unterstützen:

https://developer.mozilla.org/en-US/..._compatibility

und

https://caniuse.com/#feat=css-has

Wie man hier gut sehen kann ist diese Funktionalität noch nicht implementiert, demzufolge kannst du sie noch nicht verwenden.

Greasemonkey verwendet auch "nur" JS, kann also auch nur die Funktionen der Browser verwenden.
Beispiel wäre also zB div:has(> * > * .ssplus)

Eine Anmerkung zu dem Skript von basti noch anstatt mittels outerhtml die Klasse abzufragen würde ich nativ classlist von JS empfehlen

Auch habe ich bereits angemerkt dass .parentNode auch hintereinander angewandt werden kann und nicht jedesmal einer neuen (derselben) Variable zugewiesen werden muss.

Edit: Danke auch Andreas für den Hinweis dass :has dann nur in JS funktionieren wird, das hätte ich sonst wahrscheinlich übersehen wenn es denn einmal benutzbar wird.


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:54 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023