nicht angemeldet
Bei der Überarbeitung unseres Flexbox-Tutorials kam die Sprache auf Spickzettel, die die wichtigsten Eigenschaften und Werte übersichtlich auf einer Seite zusammenfassen. Sie ersetzen keine Dokumentation, helfen aber dabei, häufig benötigte Informationen schnell wiederzufinden.
Social Media, Werbe-Popups, man wird geflutet mit Anzeigen für Geräte, die mit ganz wenig Strom, ohne Lärm und ohne Wanddurchbruch (a.k.a. Split-Klimagerät) oder Abluftschlauch (a.k.a. Monoblock-„Klimagerät“) für kühle Luft sorgen sollen.
So wie damals, als die Gaspreise hochgingen, einem diese Steckdosen-Miniheizer aufgeschwatzt werden sollten, die für fast umsonst das ganze Haus heizten 😡
ES. IST. ZUM. [MK]OTZEN.
Von Rolf B
Im Mai 2021 veröffentlichten wir unser Dark Mode-Tutorial. Nach fünf Jahren war es an der Zeit einmal zu schauen, wie aktuell die Inhalte und Beispiele denn überhaupt noch sind.
HTML5 brachte viele neue Elemente, darunter 2009/10 auch einen Aufklappmechanismus mit details und summary, der nur mit HTML funktionierte.
Leider steckte der Teufel im Detail:
Viele Anwendungsfälle erforderten dann doch den Einsatz von JavaScript. 😟
Mittlerweile gibt es viele neue Pseudoelemente und ein „altes“ HTML-Attribut, die reine HTML- und CSS-Lösungen ermöglichen.
Zeit unseren Wiki-Artikel wieder zu überarbeiten und erneut vorzustellen:
Discord – die Plattform für Gamer und andere Menschen, die sich per Video austauschen möchten – steht seit Monaten in der Debatte.
Unter diesem Motto startete Stefan Münz 1995 seine Dokumentation. Damals erforderte das HTML und einen Webspace – heute benötigt man PHP und eine Datenbank, wenn nicht gar Docker und Node.js.
Einfacher scheint das Posten auf sozialen Plattformen, wo sich Gleichgesinnte treffen und vernetzen und keine besonderen Kenntnisse erforderlich sind. Allerdings ähneln diese heute oft walled gardens – abgeschlossenen Bereichen, die Schranken zum freien Internet aufbauen und deren Regeln von Big Tech ohne Berücksichtigung unseres Rechtsverständnisses aufgestellt wurden.
Seit Januar 2026 fordern immer mehr Europäer eine Abkehr von Big Tech, die sich nicht um Demokratie, Datenschutz und Kundenwünsche kümmern.
Deshalb möchte ich in den kommenden Wochen einige Aspekte des Fediverse mit freien, dezentralen Alternativen vorstellen.
Das menschliche Auge reagiert instinktiv auf Bewegung. Deshalb sind Animationen eine gute Möglichkeit, Aufmerksamkeit auf wichtige Bereiche deiner Webseite zu lenken und Interesse zu erregen.
Aber was sind „die Standards“ denn überhaupt?
Und tun das die Browser-Hersteller selbst denn auch?
Im Namen des Vereins SELFHTML e.V. wünsche ich allen Mitgliedern, Förderern und Freunden des Vereins ein frohes Weihnachtsfest und ein beruflich wie privat erfolgreiches neues Jahr.
Damit verbunden natürlich auch Zeit der Erholung; der Druck, sich wegen fehlender Geschenke und Aufmerksamkeiten in den Trubel der verkaufsoffenen Sonntage stürzen zu müssen, ist vorbei. Dafür kann man sich dann schon mal auf die meist noch stressigeren Umtauschaktionen vorbereiten.
Mittlerweile hat sich SVG als das Format für Icons und Cliparts durchgesetzt. Es gibt genügend Bibliotheken im Netz; ich verwende oft Wikimedia Commons.
Selbst zu zeichnen führt oft zu klareren Strukturen mit wenigen, bewusst ausgewählten Elementen, die sich anschließend leichter mit CSS formatieren lassen.
Bereits am 17. hatten wir ToDo-Listen thematisiert. Dabei soll es heute aber nicht um DOM-Manipulation, sondern um Zweck und Zwang dieser Listen gehen.
Wir benutzen das SELF-Wiki ja selbst zum Nachschauen und Stöbern. Ärgerlich, wenn wir auf Lücken und veraltete Inhalte treffen.
Noch ärgerlicher, wenn Links ins Leere laufen. Manche Seiten werden verschoben, andere gar gelöscht.
… in der Dauerschleife?
Wenn ich eine Tüte Chips aufmache, und das gute Glutamat rieche, schaltet sich mein Verstand aus und ich greife immer wieder in die Tüte, bis sie leer ist.
Das ist im Grunde eine Schleife, wie man sie aus der Programmierung kennt:
„Solange Chips in der Tüte sind, greife hinein.“
Der „Fehler“ im Algorithmus ist, dass keine Abbruchbedingung wie „Ich habe genug gegessen“ eingebaut ist. Der Algorithmus ist also sehr effektiv, aber schlecht kontrolliert.
1964 schockte Joseph Weizenbaum die Welt mit ELIZA, einem der ersten Programme zur Sprachverarbeitung, das mit Menschen in normal wirkendem Textdialog kommunizieren konnte.
Die bekannteste Variante hieß DOCTOR und imitierte einen Rogers’schen Psychotherapeuten – also jemanden, der die Aussagen des Gesprächspartners in Fragen umformt. So fühlten sich die Menschen ernst genommen und begannen frei zu erzählen.
Auch dieses Jahr hatten wir eigentlich vor, einen Adventskalender anzubieten, überlegten aber lange, auf welchem Gebiet wir mit den Language Learning Models überhaupt noch mithalten können.
Viele Fragen im Forum drehen sich nicht mehr um best practices, sondern wie man eben diesen einen Abstand reduzieren könne.
„Liebes SELFHTML, ich habe inzwischen in KI einige Anfragen […] gestellt.
[…]
Da ich meine Anwendung schnell realisieren möchte, ohne stundenlang oft ausschweifenden Text in Selfhtml lesen zu müssen, werde ich mich (sic) jetzt tatsächlich von KI helfen lassen.“
Gabriele am 22.11.2025
"Hilfe, ich glaub' mein MacBook ist kaputt, ich kann nicht bestellen!"
Seit Mai hatten wir monatliche Treffen über Senfcall und sonst nur gemailt, jetzt sollte eine ordentliche Übergabe gemacht werden und dazu war ein persönliches Treffen notwendig. Dafür trafen wir uns letztes Wochenende in den Hannover Docks im Backwerk und konnten einiges anpacken.
Zeilenumbruch ist ein längst gelöstes Problem. Oder doch nicht?
Immerhin nur 15 Monate später gibt es eine Neuauflage des Offline-Wikis.
Bereits 2020 wollten wir uns in Mannheim treffen und das 25-jährige Jubiläum feiern. Wegen Corona wurde der Frühjahrstermin in den Oktober geschoben, die Inzidenzen sorgten aber trotzdem für Absagen.
Nun wollten wir es fünf Jahre später noch einmal wagen. Mannheim war erneut gesetzt, um Stefan Münz zumindest entfernungsmäßig entgegen zu kommen.
Gastbeitrag von Thomas J Sebestyen
30 (Dreißig) Jahre?!?
Sind das wirklich schon 30 Jahre?
Unfassbar!
Was aber für mich noch unfassbarer ist: ich war ein Teil davon.
Gastbeitrag von Stefan Münz:
Mittlerweile hat nicht nur SELFHTML eine lange Tradition - nein, auch meine Beiträge zu den Jubiläen werden immer mehr. Vor zwanzig Jahren, zum zehnten Geburtstag (Kindergeburtstag, ha!), beschrieb ich, wie ich in den 90ern über CompuServe ins Internet fand, und wie ich die erste wilde Zeit im Web als Erklärbär erlebte (Wie alles begann).
Für die Mitgliederversammlung 2025, die im Rahmen des diesjährigen SELF-Treffens am 24.05.2025 stattfindet, möchte ich hier vorab den Jahresbericht des Vorstands veröffentlichen.
Dabei blicken wir nicht nur auf die letzten zwei - sondern wegen des Jubiläums auf 30(!) Jahre SELFHTML zurück!
SelfHTML wird 30 – ein Web-Urgestein feiert Geburtstag
SelfHTML gehört zu den ganz Großen der deutschsprachigen Weblandschaft – und das seit 1994. Wer sich in den Nullerjahren HTML, CSS oder JavaScript beigebracht hat, ist an dieser Seite kaum vorbeigekommen. Grund genug, dieses Jubiläum mit einer eigenen Folge zu feiern!
In dieser Revision spricht Schepp mit Matthias Scharwies – aktiver Maintainer, Mitgestalter der Community und einer der Menschen, die SelfHTML bis heute weiterentwickeln. Wir sprechen über die Geschichte, die Gegenwart und die Zukunft einer der traditionsreichsten Dokumentationen rund ums Web.
Vieles beim Webdesign ist völlig logisch und selbstverständlich.
Logischerweise vergisst man genauso selbstverständlich die Feinheiten, wenn es darauf ankommt.
Ein weiterer Fall aus dem Nähkästchen des alten Programmierers…
Aus der Rubrik „Das Nähkästchen des alten Programmierers“.
Oder: Wie dumm man sein kann…
input type="date" Elemente stellen ihr Datum in einer valueAsDate Eigenschaft bereit. Wehe dem, der das Date-Objekt darin falsch behandelt.
Heute - am 31.03. - ist World Backup Day - Anlass für einige Gedanken.
Reichte ganz früher eine Spindel mit CDs, ist heute schon das Einsortieren von Dokumenten und Medien aus den Bereichen Familie, Freizeit und Beruf eine Lebensaufgabe. Andererseits kosten Festplatten nur einen Bruchteil gegenüber früher und Cloud-Dienste speichern Deine Daten sogar kostenlos!
In Mastodon kann man Text nicht formatieren - oder doch? @aardrian warnt vor der Verwendung dekorativer Unicode-Schriften in Social Media - ich habe dazu einen Wiki-Artikel geschrieben:
Der Pi Day wird jährlich am 14. März gefeiert. Der März ist der 3. Monat, im Amerikanischen sieht das Datum also wie 3/14 aus.
Das war für uns Anlass genug, unsere Seite Math.PI auf Aktualität zu überprüfen.
Da es bisher nur wenige Zeilen JavaScript waren - es ist ja „nur“ eine Konstante, die man auslesen und für Berechnungen nutzen kann - sollen nun einige Beispiele mit SVG und MathML visualisiert werden.
Es gibt nur zwei Tage im Jahr,
an denen man nichts tun kann:
gestern und morgen!
Dalai Lama
Kommentieren ist für diesen Artikel deaktiviert.
Dieses Jahr hatten wir es mit drei Mitgliederversammlungen - im real life, aber auch online - ein bisschen übertrieben; es gab aber auch viel zu besprechen.
Allerdings steht nächstes Jahr unser großes Jubiläumstreffen vor der Tür! Vom 23. - 25.05.2025 wollen wir 30 Jahre SELFHTML feiern.
Ende September nutzten wir die zentrale Lage Würzburgs, um uns für ein Wochenende zu treffen und den Stand der Dinge zu besprechen.
Ach wie war doch ehedem
Das Table Layout so bequem
Ein schneller vertical-align
Ausrichten kann so einfach sein.
Im Juni '23 wurde vorgeschlagen, den bestehenden Discord-Server mit Text-Kanälen zu erweitern. Wir, d.h. der Vorstand stimmten zu und wollten das beobachten. Wichtig war uns persönlich, dass dies von anderen aus dem Verein übernommen werden sollte, um nicht bisher Aktiven noch mehr aufzubürden.
Nach knapp einem Jahr ist es nun Zeit für ein Fazit:
Letztes Wochenende trafen wir uns in Hannover, um einerseits das ganz normale jährliche Treffen mit Mitgliederverammlung und einem Workshop zu unserem immer noch anstehenden Wiki-Makeover durchzuführen und andererseits das 20-jährige Jubiläum des Vereins zu feiern, der am 21.05.2004 gegründet wurde.
Im Forum kommt es immer wieder zu rhetorischen Fragen, deren Antwort aus Sicht des Fragenden schon feststeht:
Hallo zusammen,
endlich ist es mal wieder gelungen, dass Offline-Wiki zu aktualisieren. Der Stand ist jetzt der vom 12. April 2024, und es ist um über 100MB gewachsen.
In der Netzgemeinde hat sich der Begriff des Cookie-Terror-Banners längst etabliert. Hintergrund ist eine EU-Vorgabe, dass Seitenbetreiber nur dann Cookies auf dem Gerät ihrer Besucher speichern dürfen, wenn diese dem zustimmen.
Die CSS Conditionals 5 Spezifikation entwickelt sich. Aber sie haben ein Problem: SASS
Eigentlich sollten alle Fragen, die es je zu Navigationen geben könnte, bereits in unserer Doku beantwortet worden sein.
Allerdings haben sich die Anforderungen über die Jahre immer wieder geändert, sodass es Zeit für eine Bestandsaufnahme und Komplett-Überarbeitung wurde:
Auf unserer MV im November fielen uns unerklärliche Werte in unserer Farbpalette auf. Die Recherche dazu führte zu einer umfassenden Neubearbeitung unserer Wikiseiten zu Farbangaben und Farbpaletten:
Im Oktober stellten wir die neuen Popover-Boxen vor, mit der die open-ui.org Tooltipps und Popover vereinheitlichen wollten. Schon da wunderte ich mich über die schnelle Umsetzung der sinnvollen Vorschläge durch die Browserhersteller. Verständlich wird dies, wenn man sieht, dass viele Mitglieder der Initative Google-Mitarbeiter sind.
.jpg?v=63870612272)
In den letzten Jahren sprach ich immer wieder von Krisen und Umbruch - mittlerweile scheint das schon normal zu sein.
Andererseits zeigte die Ungewissheit im Spätsommer auch, was es alles Gutes gab.
Auch HTMLHell von Manuel Matuzović hat dieses Jahr einen Adventskalender, der sich - anders als der Name vermuten lässt - für semantisches HTML und ein barrierefreies, benutzerfreundliches Web einsetzt.
Am 02. Dezember fand ich dort den empfehlenswerten Artikel „You don't need JavaScript for that“ von Kilian Valkhof, von dem ich hier die Kernaussage übersetzt wiedergeben möchte:
Adventskalender 2023
Heute, am 30.11., ist wieder Blue Beanie Day; ein Aktionstag, um auf die Wichtigkeit von Webstandards aufmerksam zu machen. Er wird seit 2007 jährlich am 30. November begangen und wurde von Douglas Vos ins Leben gerufen.
.jpg?v=63868278611)
Am 24.-26.11.2023 fand das jährliche SELF-Treffen in Mainz statt. Im Vorfeld gab es Stimmen, dass man die Gelegenheit zu einer Diskussion nutzen sollte, ob der Verein heute noch handlungsfähig sei und ob es nicht besser sei, ihn jetzt in Ruhe abzuwickeln. Trübe Stimmung im trüben Novemberwetter - als mich Felix plötzlich auf eine rote Ampel hinwies. Das Mainzelmännchen zauberte uns ein Lächeln ins Gesicht!
Diese Frage, ob SELFHTML heute angesichts sinkender Frequnzen im Forum noch relevant - also bedeutsam und wichtig sei - stellen wir uns immer wieder. Dabei taucht dann auch die Suche nach der Zielgruppe auf, die wir angeblich aus den Augen verloren hätten, bzw. die es gar nicht mehr gäbe.
Kommentieren ist für diesen Artikel deaktiviert.
Aufklappbare Infoboxen gehören zu den immer wieder gefragten UI-Elementen. Bis jetzt wurden sie mit viel CSS und sogar JavaScript nachgebaut, bzw. gab es in diversen Frameworks voneinander abweichende Implementierungen.
Jetzt gibt es eine Native Umsetzung in HTML, die von der open-ui.org entworfen und zur Standardisierung vorgeschlagen wurde:
Ich hatte ja im März eine Zwischenbilanz für das erste Quartal gepostet.
Hier kommt nun die ursprünglich für Juni geplante - leider etwas verspätete - Zwischenbilanz, was im 2. und 3. Quartal angepackt wurde!
Geschachtelte CSS Regeln waren früher ein Anwendungsfall von CSS Präprozessoren. Aber nun schlägt das Imperium zurück!
Die Selektion von HTML-Elementen mit der CSS Pseudoklasse :nth-child() wird schwierig, wenn die Elemente noch zusätzlich über Klassen- oder Attributselektoren eingegrenzt werden sollen und die Kindelement-Zählung nur innerhalb der zusätzlichen Selektoren stattfinden soll.
Um das zu lösen, wurde bereits 2011, im ersten Entwurf der CSS Selectors Level 4 Spezifikation, die Pseudoklasse :nth-match() vorgeschlagen.
Lesen Sie hier, was daraus wurde.
Herzlichen Glückwunsch! Mit WordPress haben Sie das erfolgreichste CMS installiert, dass sich ohne viel Kenntnisse des Anwenders in nur 8 Minuten fast von selbst installiert.
Kann man das auch individuell mit CSS gestalten? - Ja, klar!
ChatGPT ist in aller Munde und trotzdem muss manchmal trotzdem doch der (menschliche) Fachmann ran.
Unser Wiki besteht mittlerweile aus über 8.000 Seiten, davon 2.742 Artikeln. Andererseits entwickelt sich die Welt von HTML und CSS immer weiter.
Vor einem Jahr schreckte ein Urteil des Landgerichts München Seitenbetreiber auf: Eine ungefragte Einbindung von Google-Fonts stellt eine Verletzung des Persönlichkeitsrechts durch Datenschutzverstoß dar.[1]
Eigentlich hatte ich in Mails und Briefen dieses Jahr „ruhige und hustenfreie Zeit“ gewünscht.
Nicht jeder hatte vorher gehustet und nicht jeder - wenn auch die meisten - braucht die Ruhe. Deshalb einen „frohen“ Gruß an alle!
Auch in diesem Jahr möchte SELFHTML wieder einen Adventskalender für die Community anbieten.
In unserem Forum und in den eingehenden Emails ist uns aufgefallen, dass es sich bei den Themen häufig nicht um cutting-edge-technologies für early-adopter, sondern um den ganz normalen Wahnsinn handelt, den man eigentlich doch auch selbst gewusst hat.
Teil 2 unserer Makeover-Serie
Die bis 2022 im SELF-Wiki verwendete Linkfarbe #2673bf hat auf weißem Hintergrund einen Kontrast von 4.90:1, was für großen Text ausreicht, für kleinen Fließtext jedoch nicht akzeptiert werden kann. Auf farbigen Hintergünden ist der Kontrast noch schlechter.
Als das CSS untersucht wurde, fiel auf, dass die Farbe der Linktexte bei :hover zu orange (auf weiß! - Kontrast 3.33:1) wechselte.
Am 14. September wurde unser Wiki ein Achtel Jahrhundert (12,5 Jahre) alt! In unserer Vereins-Chronik gibt es einen Überblick mit vielen Screenshots aus vergangenen Jahren.
Wir wollten das unrunde Jubiläum zum Anlass für ein Makeover nehmen, das auf der Mitgliederversammlung 2021 beschlossen wurde.
Oft steht man vor einem Problem und kommt nicht weiter, da man gar nicht weiß, was genau nicht funktioniert. Und falls man dann doch den Kern des Problems entdeckt hat, ist es gar nicht so einfach ohne Kenntnis des passenden Fachbegriffs eine Lösung im Netz zu finden.
… oder war es nie weg?
In seinem Artikel Roundup of Recent Document Outline Chatter auf css-tricks gibt Geoff Graham die neuesten Entwicklungen um den document-outline-algorithm wieder.
Erst darauf hingefiebert und dann fast vergessen - seit gestern ist der Internet Explorer Geschichte.
Aus einer unverfänglichen Frage im Forum (Warum soll die Navigation im Quelltext neuerdings über dem Haupttext stehen?) entwickelte sich ein umfangreicheres Projekt, das noch nicht ganz abgeschlossen ist:
Vor wenigen Tagen starb Stephen E. Wilhite an Covid. Er wurde als Erfinder des GIF-Grafikformats berühmt. Das Graphics Interchange Format, kurz GIF ist ein Grafikformat für Bilder mit einer Farbpalette von max. 256 Farben, inkl. einer „Transparenzfarbe“. Es erlaubt eine verlustfreie Kompression der Bilder.
Besonders interessant: Es können mehrere (übereinanderliegende) Einzelbilder in einer Datei abgespeichert werden, die dann als Animationen interpretiert werden.
Die Doku beschrieb von Anfang an nicht nur den Soll-Zustand der Spezifikationen, sondern eben auch die tatsächlich vorhandene Browserunterstützung.
Die ersten Versionen waren geprägt von der Zeit der Browserkriege, in der manche proprietären Elemente eben nur in einem Browser funktionierten. Heute ist die Anzeige dieser Browserunterstützung lange nicht mehr so wichtig wie früher, da selbst völlig neue Features oft sehr schnell von allen Browsern übernommen werden. Die schnelle Versionierung im Wochenabstand (bald haben Chrome und Firefox die 100 erreicht) wirkt im Vergleich zur Vergangenheit paradiesisch.
Mit dem Ende des Internet Explorer und dem kommenden Makeover wird nun auch die im Wiki verwendete Vorlage:Iconset beerdigt.
Schon seit mehreren Jahren hat SELFHTML einen Twitter-Kanal, auf dem Gunnar Bittersmannn (@g16n) News und Interessantes über Webdesign, Technologie und Typografie retweeted.
CSS revolutionierte die Gestaltung von Webseiten. Leider gab es aber große Inkonsistenzen zwischen den verschiedenen Browsern. Während der Internet Explorer bei Listen die Einrückungen über margin vornahm, verwendeten die anderen Browser dafür padding. Grund genug, alle Browser-Einstellungen in einem CSS-Reset zurückzusetzen:
Weihnachtsbrief 2021
Warten, zählen, hoffen, bangen …
2021 war wieder ein Jahr des Wartens und Zählens. Nicht Wetter und Unternehmungslust bestimmten, ob man rausdurfte. Es wurden Inzidenzen verglichen, Statistiken analysiert und die Tage bis zum Ende der Quarantäne oder zum erhofften Impftermin gezählt.
Wenn es darum geht, deutsche Quellen für Barrierefreiheit zu nennen, landet man unwillkürlich immer wieder bei denselben Menschen und Firmen. Eine von den sehr aktiven ist die tollwerk GmbH aus Nürnberg mit einem tollen Blog über Barrierefreiheit.
Gerade in deutscher Sprache gleicht das Zusammentragen von Informationen zur Barrierefreiheit einem Puzzlespiel. Die Informationen sind verstreut und zusammenhängende Sammlungen sind rar. (Eine schöne Sammlung dazu findet sich übrigens bei uns im SELF-Wiki) ;-)
Manuel ist nach eigenen Angaben zur Barrierefreiheit gekommen, weil er sich an einem Wettbewerb beteiligt hat, bei der ein barrierefreies Produkt abgegeben werden sollte und seine Einreichung war nicht barrierefrei.
Automatisierung war bereits an Tag 9 ein Thema. Die Tools selber sind in der Regel auf Englisch und hier soll es nur um deutsche Quellen gehen.
Im Grunde kann man Testverfahren unterscheiden in
Jede Methode hat ihre Vor- und Nachteile. Automatische Tests scheitern an Aufgaben wie „Macht ein Alternativtext Sinn“, machen aber keine Fehler - sie finden aber wirklich jedes Bild ohne Alternativ-Text.
Seit jeher veranlasst die Europäische Union sogenannte Harmonisierungen. Dabei geht es darum, die unterschiedlichen Gesetze in der Union zu vereinheitlichen. So wird es für einen Spanier leichter eine Dienstleistung in Skandinavien anzubieten oder für einen deutschen Hersteller etwas in Osteuropa zu verkaufen. Natürlich profitieren auch alle Bürger davon. Denn sie können sich darauf verlassen, dass viele aus dem Heimatland bekannte Regeln auch im Rest der EU gelten.
Für viele Arbeitnehmerinnen stellt sich gar nicht in erster Linie die Frage, wie man als Mensch mit Behinderungen oder (chronischen) Erkrankungen eine barrierefreie Arbeitsumgebung beantragt oder sogar beim Arbeitgeber einfordert.
Heute, am 30.11., ist wieder Blue Beanie Day; ein Aktionstag, um auf die Wichtigkeit von Webstandardsaufmerksam zu machen. Er wird seit 2007 jährlich am 30. November begangen und wurde von Douglas Vos ins Leben gerufen.
Der diesjährige Adventskalender ist der Barrierefreiheit gewidmet - ein Thema für alle, das jeden und alle angeht. Warum ist das so?
