Wiki-Seite falsch verlinkt?

[JimKnopf]

Moin moin,

wenn ich unter der Überschrift Browser-Entwicklertools auf HTML & CSS mit dem Seiteninspektor untersuchen klicke, lande ich bei HTML/Tutorials/Einstieg und nicht etwa bei Grundlagen/Webprojekte/testen oder Arbeiten mit dem Seiteninspektor.

Ist das so beabsichtigt?

Gruß... JimKnopf

[Matthias Scharwies]

Servus!

Moin moin,

wenn ich unter der Überschrift Browser-Entwicklertools auf HTML & CSS mit dem Seiteninspektor untersuchen klicke, lande ich bei HTML/Tutorials/Einstieg und nicht etwa bei Grundlagen/Webprojekte/testen oder Arbeiten mit dem Seiteninspektor.

Ist das so beabsichtigt?

Nein, ist geändert! Danke!

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

@JimKnopf

Browser

Die ganze Seite ist unübersichtlich.

Daneben gibt es den Glossar-Artikel Renderingengine

Das war früher mal wichtig zu erklären, warum IE5 und Firefox andere Ergebnisse hatten. Evtl. könnte man das zusammenzufassen.

Hättest du Lust, da mal Hand anzulegen?

Evtl mit einem Link zu User-Agent-Kennung?

Herzliche Grüße

Matthias Scharwies

[JimKnopf]

Moin moin,

eigentlich finde ich die Seite gar nicht schlecht. Ich verspüre jetzt nicht den Drang, daran etwas zu ändern. Es ist auch ein Thema, zu dem ich nur wenig Fachwissen mitbringe - ich fürchte wenn ich daran Hand anlege, würde ich es eher verschlimmbessern.

Wenn ich im Wiki unterwegs bin, dann in aller Regel weil ich etwas dazulernen möchte. Wenn ich dabei über etwas stolpere, was mir unstimmig vorkommt, dann stelle ich das per Forums-Beitrag zur Diskussion - jedenfalls wenn ich mir nicht sicher bin, wie man damit umgehen sollte. Offensichtliche Tippfehler korrigiere ich auch sofort.

Ich finde SelfHTML ist eine tolle Sache, ich nutze es gerne, und ich freue mich, wenn ich einen kleinen Beitrag dazu leisten kann.

In diesem Fall war ich auf der Suche nach einem HTML-Tool, das mir zu einem HTML-Dokument eine alphabetisch geordnete Liste aller vorkommenden Klassennamen erzeugt. An der Liste könnte ich schnell erkennen, ob ich mich irgendwo bei einem Klassennamen vertippt habe - dann würden zwei nahezu gleichlautende Name in der Liste auftauchen. Außerdem könnte ich leicht überprüfen, ob ich alle Klassennamen in meinem Style Sheet berücksichtigt habe. Bis jetzt habe ich das Tool noch nicht gefunden... Wenn es soetwas gibt, fände ich einen Hinweis im Wiki sehr hilfreich. Ich nehme mal an, ich bin nicht der einzige, der so ein Tool gerne hätte.

Gruß... JimKnopf

[Matthias Scharwies]

Servus!

Ich finde SelfHTML ist eine tolle Sache, ich nutze es gerne, und ich freue mich, wenn ich einen kleinen Beitrag dazu leisten kann.

Vielen Dank für das Lob und vielen Dank für die Anregung.

In diesem Fall war ich auf der Suche nach einem HTML-Tool, das mir zu einem HTML-Dokument eine alphabetisch geordnete Liste aller vorkommenden Klassennamen erzeugt. An der Liste könnte ich schnell erkennen, ob ich mich irgendwo bei einem Klassennamen vertippt habe - dann würden zwei nahezu gleichlautende Name in der Liste auftauchen.

In ~guten~ /manchen Code-Editoren wird gekennzeichnet, wo andere Vorkommen dieser Attribute erscheinen.

Du könntest mit einem selbstgeschriebenen JS alle class-Attribute erfassen und die vorkommenden Werte dann in einem Array sortieren. Das müsstest du aber wohl selbst tun.

Ich persönlich arbeite mit WordPress und ärger mich über die Unzahl an Klassen und Ids - in privaten Projekten versuche ich so wenig Klassen wie möglich zu verwenden und wenn ich dann class="warnug" verwende, gibt es eben keine Formatierung. Da merkt man's dann auch.

Herzliche Grüße

Matthias Scharwies

[JimKnopf]

Hallo Matthias,

vielen Dank für den Tipp. Unglücklicher Weise habe ich mit JavaScript überhaupt keine Erfahrung. Ich habe mich schon gefragt, ob ich Lust hätte, das Tool in C oder C++ zu schreiben. Aber vor dem Code zum Parsen des Markup schrecke ich zurück. Wenn ich eine C-Bibliothek mit einem fertigen Parser-Modul o.ä. hätte, stünden die Chancen besser.

Gruß... JimKnopf

[Camping_RIDER]

Aloha ;)

vielen Dank für den Tipp. Unglücklicher Weise habe ich mit JavaScript überhaupt keine Erfahrung. Ich habe mich schon gefragt, ob ich Lust hätte, das Tool in C oder C++ zu schreiben. Aber vor dem Code zum Parsen des Markup schrecke ich zurück. Wenn ich eine C-Bibliothek mit einem fertigen Parser-Modul o.ä. hätte, stünden die Chancen besser.

Oder du änderst, dass du mit JavaScript keine Erfahrung hast 😉

Mit JS ist die Aufgabe tatsächlich einfach zu lösen, z.B. so:

let cns = [];
document.querySelectorAll('*').forEach(elm => {
  elm.classList.forEach(cn => {
  	if (!cns.includes(cn)) {
    	cns.push(cn);
    }
  });
});
cns.sort();
console.log(cns);

Der Code ist eigentlich ziemlich selbst-sprechend, damit hast du dann schonmal die erste JavaScript-Erfahrung gesammelt.

Wenn du das so auf die Seite packst bekommst du über deine Konsole (F12) die Klassennamen präsentiert.

Grüße,

RIDER

[JimKnopf]

Moin moin,

Danke!

Gruß... JimKnopf

[Rolf B]

Hallo JimKnopf,

In diesem Fall war ich auf der Suche nach einem HTML-Tool, das mir zu einem HTML-Dokument eine alphabetisch geordnete Liste aller vorkommenden Klassennamen erzeugt. An der Liste könnte ich schnell erkennen, ob ich mich irgendwo bei einem Klassennamen vertippt habe

Das ist aber nur ein Drittel der Miete. Denn du kannst Dich auch im CSS vertippen. Eine vollständige Lösung müsste also die Stylesheets durchnudeln, darin alle Regeln finden und dort die Selektoren nach Klassenselektoren durchforsten. Brrr.

Was dann noch hinzukommt, ist die Verwendung von Klassen in JavaScript. Du kannst im Script Klassen hinzufügen und entfernen und mit Hilfe von Klassen nach Elementen suchen.

Aber, was auch immer es wert ist, diese Funktion sollte Dir ein Array mit allen im HTML verwendeten Klassen liefern. Die Sortierung ist case-insensitive.

function findAllClasses() {
	const classes = new Set();
  for (const node of document.querySelectorAll("[class]")) {
	  for (const classname of node.classList.values()) {
	    classes.add(classname);
    }
  }
  const collator = new Intl.Collator("de-de", { sensitivity: 'accent'});
  return [...classes.values()].sort((a,b) => collator.compare(a,b));
}

Im einfachsten Fall setzt Du diese Funktion in ein <script> Element am Ende deines Body und fügst dahinter noch einen Aufruf ein:

console.log(findAllClasses());

In der Browserkonsole erscheint dann die Klassenliste.

Rolf

[JimKnopf]

Moin moin,

Danke. Funktioniert auf den ersten Blick genauso gut wie Camping_RIDERs Vorschlag.

Ich habe auch schon einen Fehler damit gefunden und ich habe noch lange nicht alles überprüft. Etwas mehr als ein Drittel der Miete ist es schon: Mein HTML-Code ist insgesamt 7,9 MB groß, der CSS-Code nur 23 kB. Und JavaScript verwende ich (bisher) nicht. Aufgrund des Mengenverhältnisses könnte man also sagen: ca. 99,7 % der Miete.

Gruß... JimKnopf

[Matthias Scharwies]

Servus!

Browser

Die ganze Seite ist unübersichtlich.

Ich hab's jetzt …

• mal neu erklärt. Ist das so verständlich?
• die Links zu den Browsern sortiert und unter Weblinks zusammengefasst.

Herzliche Grüße

Matthias Scharwies