Wiki-Seite falsch verlinkt?
JimKnopf
- selfhtml-wiki
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
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
Servus!
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
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
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
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
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
Moin moin,
Danke!
Gruß... JimKnopf
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
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
Servus!
Die ganze Seite ist unübersichtlich.
Ich hab's jetzt …
Herzliche Grüße
Matthias Scharwies