A presentation at Tech Talk @ Tagesspiegel by Gunnar Bittersmann
30 JAHRE SELFHTML
altes SELFHTML-Logo
Mannheimer Quadrate
neues SELFHTML-Logo
Da fehlt doch was‽ Ja. Aber was davon ist zwingend notwendig?
richtige Antwort: die Angabe der Sprache im lang-Attribut
Bei einigen HTML-Elementtypen sind End-Tags nicht zwingend erforderlich; dazu gehört auch p. Bei manchen HTML-Elementtypen sind auch Start-Tags nicht zwingend erforderlich; so bei html, head und body.
Die Zeichencodierung muss nur angeben werden, wenn eine andere als UTF-8 verwendet wird (was man nicht tun sollte).
Erforderlich hingegen ist die Angabe der Sprache des Seiteninhalts. Die HTML-Spezifikation verlangt das nicht, aber die WCAG (Web Content Accessibility Guidelines) tun das.
Wievielen Nutzern kommen barrierefreie Webseiten zugute?
richtige Antwort: 100%
Barrierefreiheit kommt allen Nutzern zugute. Jeder kann situationsbedingt (bspw. laute Umgebung, grelles Licht auf dem Monitor) oder temporär (bspw. Hand gebrochen) eingeschränkt sein.
Welche der Farbangaben ist ungültig?
richtige Antwort: rgba(102 51 153 255)
HSL ist ein für Menschen intuitiver handhabbares Farbmodell, basierend auf Farbwert, Farbsättigung und Helligkeit, das in CSS mit der hsl()-Funktion verwendet werden kann.
rgba() ist jetzt ein Synonym zu rgb(); beides kann mit und ohne Angabe des Alpha-Kanals verwendet werden.
#639F ist die Kurzschreibweise für #663399FF (#663399 mit Angabe des Alphakanals).
Bei der neuen Syntax werden R-, G- und BWerte durch Leerzeichen getrennt, zwischen diesen und dem Alpha-Wert steht aber ein /.
Welches Element gab es nie im HTMLStandard?
richtige Antwort: marquee
blink und dir gab es mal; meter gibt’s immer noch.
marquee wurde zwar von Browsern implementiert, hat aber nie Einzug in den offiziellen Standard gehalten.
Wird heutzutage noch Layout mit <table> gemacht?
richtige Antwort: für HTML-Mails ist Tabellenlayout immer noch erforderlich
Einige E-Mail-Clients verstehen CSS immer noch nur rudimentär, sodass man bei HTMLMails tatsächlich immer noch mit Layouttabellen arbeiten muss. Aber nicht vergessen, diese als solche zu kennzeichnen: <table role=”presentation”>
Eine Frage zu Fragezeichen: Was davon ist kein gültiges JavaScript?
richtige Antwort: const title = (document.querySelector(‘h1’) ? document.querySelector(‘h1’).textContent) : document.title;
?. ist der optional chaining operator. Während document.querySelector('h1').textContent einen Fehler werfen würde, wenn kein h1-Element vorhanden ist, läuft document.querySelector('h1')?.textContent ohne Fehler durch und ergibt undefined.
?? ist der nullish coalescing operator und wirkt ähnlich wie ||: wenn der erste Ausdruck nicht null oder undefined ist, wird dieser zurückgegeben, andernfalls der zweite.
? : ist der conditional (ternary) operator. Wenn die Bedingung vor ? erfüllt ist, wird der erste Ausdruck (zwischen ? und :) zurückgegeben, andernfalls der zweite.
Hier hat sich allerdings ein Syntaxfehler eingeschlichen: die Klammern sind falsch gesetzt.
Wieviele HTML-Elementtypen gibt es?
richtige Antwort: über 100
Gegenwärtig sind es etwa 140.
:where(.box.box) { background: red }
:is(.box, div:first-child) { background: yellow }
.box { background: green }
@layer box { #box { background: blue } }
Welche Angabe gewinnt? Welche Hintergrundfarbe hat das <div id=”box” class=”box”>?
richtige Antwort: gelb
:where() tut dasselbe wie :is(), aber mit Spezifität 0.
:is() wirkt nicht mit der Spezifität des jeweiligen Matches, sondern mit der des Selektors in den Klammern mit höchsten Spezifität; in dem Fall mit der von div:first-child (1 Klasse, 1 Elementtyp).
Das nachfolgende .box hat geringe Spezifität, die vorige Angabe wird also nicht überschrieben.
Regeln in Layern, die nicht !important sind, sind in der Kaskade weiter unten als Regeln nicht in Layer. (!important-Regeln sind weiter oben.)
Gelb gewinnt.
In welchem Jahr erschien ein Artikel von John Allsopp, der den Gedanken von responsivem Webdesign propagierte?
richtige Antwort: 2000 ⚪
Der Artikel „A Dao of Web Design“ von John Allsopp erschien im April 2000 auf A List Apart. Auf diesen Artikel bezog sich Ethan Marcotte in seinem 10 Jahre später ebenfalls auf A List Apart erschienenen Artikel „Responsive Web Design“.
Welches HTML-Element sollte verwendet werden, um zusammengehörige Radiobuttons zu gruppieren?
richtige Antwort: fieldset.
Dadurch wird bei den Radiobuttons von Screenreadern nicht nur das label vorgelesen, sondern zusätzlich auch das legend-Element, sodass verständlich wird, worauf sich die Optionen denn eigentlich beziehen.
Welche dieser Personen gilt als Pionier des Internets?
richtige Antwort: Vince Cerf
Tim Berners-Lee hat das World Wide Web entwickelt (HTTP, HTML, den ersten Browser), was eine Anwendung des Internets ist, so wie E-Mail und Newsgroups, die es damals gab.
Vince Cerf hat TCP/IP entwickelt – das Protokoll, mit dem über Kabel verbundene Computer miteinander sprechen können, und damit ein Grundbaustein des Internets.
Beim W3C20 Anniversary Symposium 2014 traten beide gemeinsam auf: Tim Berners-Lee mit T-Shirt „I didn’t invent the Internet“ auf der Vorderseite und „I invented the Web“ auf der Rückseite; Vince Cerf mit „I didn’t invent the Web“ auf der Vorderseite und „I invented the Internet“ auf der Rückseite.
(Fotos davon)
Wieviel ist 2 * (1 + 1 + ‘1’) (in JavaScript)?
richtige Antwort: 42
Die Antwort auf alle Fragen.
In der Klammer werden die +-Operatoren von links nach rechts abgearbeitet. 1 + 1 ergibt 2; bei 2 + ‘1’ werden die Typen der Operanden angeglichen, die Zahl 2 wird in den String ‘2’ umgewandelt, der Operator + steht dann für die Verkettung: ‘2’ + ‘1’ ergibt ‘21’.
Der *-Operator steht für keine StringOperation; die Typumwandlung erfolgt zu Zahlen: ‘21’ wird als Zahl 21 gedeutet. 2 * 21 ergibt 42.
Welche benannte Farbe wurde auf Betreiben der Web-Community in den CSS-Standard aufgenommen?
richtige Antwort: rebeccapurple
2014 starb die sechsjährige Tochter von Eric Meyer an Krebs. Ihr zu Ehren wurde ihre Lieblingsfarbe lila nach ihr benannt.
Was lässt sich auch ohne Media-Query umsetzen?
richtige Antwort: beides
Mit Flexbox und auch mit Grid (repeat()-Funktion) ist es möglich, dass der Browser die Anzahl der Spalten je nach zur Verfügung stehender Breite selbst bestimmt, ohne dass man dazu per Media-Query Breakpoints setzen muss. Mit color scheme: light dark und der light-dark()-Funktion lässt sich Hell- und Dunkelmodus auch ohne prefers-color-scheme-Media-Query umsetzen.
Kann man <div class=”0”> verwenden?
0 ist dasselbe wie keine Klasse zu setzenrichtige Antwort: ja, aber zum Stylen müsste man schlecht lesbaren CSS-Code verwenden
Bezeichner für Klassen und IDs, die mit einer Ziffer beginnen, sind in HTML jetzt erlaubt.
Nicht erlaubt sind führende Ziffern bei Klassenund ID-Selektoren in CSS; dort müsste die führende Ziffer escapet werden: für class=”0” wäre der Selektor .\30, für id=”007” wäre es #\30 07.
Das ist schlecht lesbarer (d.h. schlecht wartbarer) CSS-Code, deshalb sollte man führende Ziffern in Klassen- und ID-Bezeichnern doch besser vermeiden.
button { appearance: none; border: none; outline: none; quotes: none; }
Welche Angabe ist falsch?
richtige Antwort: outline
Man darf bei interaktiven Elementen nicht outline entfernen (es sei denn, man implementiert eine andere Anzeige des FokusStatus), ansonsten ist bei Tastaturbedienung nicht erkennbar, wenn der Button (Link, …) den Fokus hat.
die Geschichte von SELFHTML und ein Quiz
The following resources were mentioned during the presentation or are useful additional information.
auf webarchive.org
auf webarchive.org
Podcast: der Schepp im Gespräch mit Matthias Scharwies (SELFHTML e.V.)
Podcast: der Schepp und Rodney Rehm im Gespräch mit Matthias Scharwies und Gunnar Bittersmann (SELFHTML e.V.)
erstes Posting im SELFHTML-Forum
Forum-Software von Christian Kruse
Gastbeitrag von Stefan Münz
Artikel von 2005 aus Anlass des 10-jährigen Bestehens von SELFHTML
by John Allsopp on A List Apart, 2000-04-07
by Ethan Marcotte on A List Apart, 2010-05-25
A presentation at Smashing Conference Antwerp 2023 Jam Session by Gunnar Bittersmann
