Tipps & Tricks
Browser, HTML, CSS & JavaScript
1.
Semantik
Dachzeilen und Unterzeilen Viele Online-Magazine arbeiten mit Dachzeilen, Untertiteln oder Taglines. Für solche Inhalte stellt HTML keine eigenen Elemente zur Verfügung. Daher stellt sich die Frage: Wie sollten diese Inhalte semantisch korrekt ausgezeichnet werden?
Auf manchen Websites nutzen Entwickler einfach die nächstbesten Überschriften, also h1 bis h6. Auf taz.de sind die Überschriften der Artikel zum Beispiel als h3 ausgezeichnet, die Dachzeilen darüber als h4. Zum einen kommen hier die Überschriften im Quelltext in der falschen Reihenfolge vor (die h3 müsste vor der h4 eingesetzt werden), zum anderen sind die hxElemente auch nicht als Dachzeilen oder Untertitel gedacht. Tatsächlich legen die HTML-Spezi kationen im Abschnitt 4.13.1.Subheadings, subtitles, alternative titles and taglines sogar ausdrücklich fest: „Die Elemente h1-h6 dürfen nicht zur Kennzeichnung von Unterüberschriften, Untertiteln, alternativen Titeln und Taglines verwendet werden; es sei denn, sie sind als Überschrift für einen neuen Abschnitt oder Unterabschnitt gedacht.“Im gleichen Abschnitt liefert die Spezi kation einige Beispiele, wie solche Passagen stattdessen ausgezeichnet werden sollten ( bit. ly/2Q4Qb5k). Wenn die Unterzeilen keinen eigenen Abschnitt einleiten, bieten sich p an:
HTML 5.1 Nightly
A vocabulary and associated APIs for HTML and XHTML
Editor’s Draft 9 May 2013
Analog verläuft es bei Dachzeile, Titel und Unterzeile:
Magazine of the Decade
THE MONTH
The Best of UK and Foreign Media
Manchmal lassen sich Titel und Untertitel mit einem Doppelpunkt zu einem Element zusammenziehen.
The Lord of the Rings: The Two Towers
Oder die Elemente werden zwar in einer hx gesammelt, aber mit einem zusätzlichen span und ggf. eigenen Klassen versehen, um die einzelnen Teile unterschiedlich zu stylen.
Ramones
Hey! Ho! Let’s Go
Diese Variante mit verschiedenen span werden zum Beispiel auf den Seiten von spiegel.de und zeit.de für die Dachzeilen und Schlagwörter genutzt.
Da Elemente wie Dachzeilen und Untertitel recht häu g vorkommen, stellt sich die Frage, warum es dafür eigentlich kein semantisches Element gibt. In den letzten Jahren sind schließlich auch Elemente wie header, main, footer, article, aside und section neu hinzugekommen. Es gibt zumindest einen inof - ziellen Draft aus dem Jahr 2013 für eine Erweiterung von HTML5 um ein Element subhead ( bit.ly/subhead). Die vorgeschlagene Syntax ähnelt sehr der aktuellen Lösung mit den zusätzlichen span:
HTML
Last Updated 8 June 2013
Allerdings ist der Vorschlag nicht über diesen inof ziellen Draft hinaus gekommen.
2.
Neues in CSS Mathematische Funktionen Der aktuelle Draft der CSS Values and Units Modu
le Level 4 sieht einige interessante Funktionen vor. Noch können Sie damit nicht produktiv arbeiten, aber in Zukunft wird es leichter, bestimmte Werte für Elemente festzulegen.
Das bekannteste Beispiel für einen mathematischen Ausdruck ist die calc()- Funktion, die in allen modernen Browsern funktioniert – mit ein paar Abstrichen in den Internet Explorern. width: calc(100% - 40px);
Neu hinzukommen sollen die vergleichenden Funktionen min(), max() und clamp(). Mit min() wählen Sie den kleinsten von mehreren Werten aus. #logo { width: min(50vw, 300px); }
Die Breite des Logos hängt hier von der aktuellen Breite des Viewports ab. Der Wert 50vw entspricht genau der halben Breite des Viewports. Wenn der Viewport breiter als 600px ist, ist das Minimum der Funktion also 300px. Wenn der Viewport jedoch schmaler als 600px wird, dann ist das Minimum 50vw. Effektiv geben Sie über die min()-Funktion also einen maximalen Wert vor. Die max()-Funktion funktioniert analog: h1 { font-size: max(20px, 2rem); }
In diesem Beispiel kommt es darauf an, wie groß die :root font-size ist. Ohne eigene Anpassungen entspricht 1rem dem Wert 16px. Das Maximum von 20px und 2rem ist dann 2rem (also 32px). Wenn der :root-Wert kleiner wird, entspricht irgendwann 20px dem Maximum. Die Schriftgröße entspricht hier also mindestens 20px.
Mit clamp() legen Sie schließlich einen Wertebereich fest. Es gibt drei Werte: das Minimum, der bevorzugte Wert und das Maximum. width: clamp(10px, 4em, 80px);
Hier wird die Breite bevorzugt 4em einnehmen. Sollte 1em aber kleiner als 2.5px oder größer als 20px sein, greifen stattdessen das Minimum von 10px oder das Maximum von 80px.
Mit diesen drei Funktionen ergeben sich neue Möglichkeiten im Responsive Design. Allerdings ist die Unterstützung derzeit noch recht dürftig. Safari unterstützt min() und max() seit Version 11.1. Chrome unterstützt min(), max() und clamp() ab Version 79. Neben diesen drei Funktionen sieht der Editor’s Draft übrigens auch trigonometrische – sin(), cos(), tan(), etc. – sowie exponentielle Funktionen – pow(), sqrt() und hypot() – vor ( bit.ly/364fU3i).
3.
Sicherheit
Autocomplete abschalten
Per Default merken sich Browser Informationen, die Benutzer in Formulare schreiben. Dadurch können sie Felder beim nächsten Mal per Auto ll und Autocomplete füllen. Das ist aber nicht immer erwünscht.
Benutzer können manuell festlegen, dass ein Browser Formulardaten nicht speichern soll. In Firefox zum Beispiel geht das über Einstellungen / Datenschutz & Sicherheit. Dort legen Sie fest, dass Firefox eine Chronik nach benutzerde nierten Einstellungen anlegen soll. Nun entfernen Sie den Haken bei Eingegebene Suchbegriffe und Formulardaten speichern.
Als Webworker können Sie bei eigenen Formularen das Attribut autocomplete="off" nutzen, um dem Browser mitzuteilen, dass die Daten nicht gespeichert werden sollen.
autocomplete="off">
Ob der Browser sich daran hält, ist wiederum eine andere Sache. Bei Log-in-Daten etwa gehen Browser davon aus, dass es grundsätzlich die Sicherheit fördert, wenn Nutzer komplexere Passwörter anle
4.
Modernes Webdesign vs. alte Browser Fallback-Strategien für Layouts mit Flexbox
Flexbox bietet gegenüber Floats einige Vorteile. Für moderne Webprojekte bietet es sich daher an, gleich mit Flexbox zu arbeiten. Falls Sie noch alte Browser unterstützen müssen, reichen ein paar Zeilen Code für eine Fallback-Lösung. G rundsätzlich haben Webworker bereits seit einigen Jahren die Option, Layouts mit Flexbox umzusetzen. Im Gegensatz zu den bewährten Floats ist es bei einer Flexbox nicht mehr nötig, das Floating mit clear aufzulösen. Boxen, die nebeneinander liegen, werden automatisch auf die gleiche Höhe gebracht. Außerdem lassen sich Elemente leicht vertikal zentrieren und können exibel ihre Breite anpassen. Für alle modernen Browser ist Flexbox daher die richtige Wahl für Layouts. Es gibt allerdings immer noch Webprojekte, die auf alte Browser Rücksicht nehmen müssen. Ist es in solchen Fällen besser, doch mit Floats zu arbeiten? Schließlich hat diese Technik doch jahrelang gut funktioniert.
Sie können aber auch bei älteren Browsern einfach Flexbox verwenden. Mit ein paar Zeilen Code bereiten Sie die Inhalte auch für ältere Browser auf. Das Layout wird nicht 1:1 so aussehen, wie in modernen Browsern, aber zumindest werden die Inhalte lesbar sein. 1 Basiscode: Als Ausgangspunkt nehmen wir eine einfache Flexbox mit vier Elementen, die hier in einem Raster von 2×2 angeordnet sind. Das bietet uns den Vorteil, dass die grauen Flächen im Hintergrund gleich hoch werden. .flex { display: flex; flex-wrap: wrap;
justify-content: space-between; } div { margin: 0 0 40px 0; … }
Dadurch ordnen sich die Flexbox-Items automatisch passend zur Breite des Eltern-Containers an. 2 Ältere Syntax: In einigen älteren Browsern lässt sich Flexbox über Vendor Pre xes aktivieren. Sie können einen Autopre xer oder die Website autopre xer.github.io nutzen, um diese Pre xes zu generieren. In unseren Fall ergibt sich: .flex { display: -webkit-box; display: -ms-flexbox; display: flex;
-ms-flex- wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } 3 Alternative Layouts: Bei noch älteren Browsern können Sie mit Inline- Elementen, Floats oder display: table arbeiten. Alle haben ihre Vor- und Nachteile. Die alternativen Layout-Techniken kommen sich mit Flexbox nicht in die Quere. Ältere Browser werden alle Flexbox-Angaben ignorieren. Innerhalb einer Flexbox wiederum werden inline, oat und display: table ignoriert. In unseren Fall entscheiden wir uns für Floats und ergänzen ein: div { float: left; }
In älteren Browsern werden die Teaserboxen nun zumindest nebeneinander angeordnet. Allerdings verschwinden die Abstände zwischen den Boxen, weil justify-content: space-between hier nicht funktioniert. Wir können das lösen, indem wir auf justify-content verzichten und die Elemente mit einem margin versehen. .flex { display: flex; flex-wrap: wrap;} div { float: left; background: #DDD;
width:600px; margin:0 40px 40px 0;} div:nth-child(even) {margin-right:0;}
Nun sieht wieder alles sauber gesetzt aus. Wir müssen nur damit leben, dass in älteren Browsern die Teaserboxen nicht mehr gleich hoch sind. Außerdem benötigen wir nun wieder einen Clear x für die Floats. 4 IE 8: Die aktuelle Lösung funktioniert noch im IE9 (aus dem Jahr 2011), aber nicht mehr im IE8 (aus dem Jahr 2009), weil letzterer die Pseudoklasse nth-child() nicht kennt. Wenn Sie auch noch den IE8 bedienen möchten, könnten Sie mit konkreten Klassen arbeiten. Je nach gewünschtem Layout ist es eventuell auch möglich, einfach allen Teaserboxen den gleichen margin zu geben. Da Sie den IE8 über Conditional Comments direkt ansprechen können, wäre es auch möglich, diesem ein paar ganz eigene Befehle für ein passendes Layout mitzugeben.
gen und diese dann vom Browser eingesetzt werden können. Aus diesem Grund bieten Browser wie Firefox und Chrome, aber auch der Internet Explorer 11, den Nutzern die Option, Log-in-Daten zu speichern, auch wenn die betreffenden Formulare oder einzelne Felder mit einem autocomplete="off" ausgestattet wurden.
Neben autocomplete="off" kann auch der Wert autocomplete="new-password" hilfreich sein. Dieser Wert ist dafür gedacht, dass Browser selbst neue Passwörter anbieten; zum Beispiel, wenn für einen neuen User in einem CMS ein Passwort generiert werden soll. Browser können diesen Wert auch als Hinweis verstehen, das betreffende Feld nicht per Auto ll zu füllen.
Folgt Ihre Website den Web Content Accessibility Guidelines (WCAG), sollten Sie das Autocomplete/ Auto ll aber beibehalten. Andernfalls verstoßen Sie gegen Regel 1.3.5 Identify Input Purpose (Level AA) der WCAG 2.1 ( mzl.la/365ebuF).
5.
Vorschlag für JavaScript
Teile eines Strings austauschen Es kommt des Öfteren vor, dass in einer Programmiersprache Teile eines Strings ausgetauscht werden sollen. Das ist in PHP recht einfach, in JavaScript aber unnötig schwierig.
In PHP nutzen Sie die Funktion str_replace(), um einen Substring in einem String zu ersetzen. $text = "abcd abcde abcdef";
$output = str_replace("abc", "xyz", $text); echo $output; // Ergebnis: xyzd xyzde xyzdef
In JavaScript funktioniert die entsprechende replace()- Funktion etwas anders: const text = "abcd abcde abcdef"; const output = text.replace("abc", "xyz"); console.log(output);
// Ergebnis: xyzd abcde abcdef
In JavaScript wird immer nur der erste Substring ersetzt, alle weiteren Substrings werden nicht verändert. Es gibt mehrere Möglichkeiten, um JavaScript dazu zu bringen, doch alle Substrings zu ersetzen. Zum Beispiel über reguläre Ausdrücke oder indem Sie den String aufbrechen und wieder zusammenfügen: // Regulärer Ausdruck const output = text.replace(/\abc/g, "xyz"); // Oder alternativ: split und join const output = text.split("abc").join("xyz");
Beide Varianten sind nicht besonders elegant. Es gibt einen Vorschlag von Google für eine einfachere Lösung, die Methode replaceAll(): const output = text.replaceAll("abc", "xyz");
Browser unterstützen die neue Methode derzeit leider noch nicht. Allerdings ist replaceAll auf einem guten Weg. Der Vorschlag be ndet sich derzeit auf der Stufe Candidate beim Prozess der Weiterentwicklung von ECMAScript ( bit.ly/2SiMJ8L). V8, Googles JavaScript Engine, bietet seit Version v9.0 eine experimentelle Unterstützung hinter dem Flag --harmonystring-replaceall. Sie können die Methode außerdem über den Next Generation JavaScript Compiler Babel einsetzen ( babeljs.io). Nicolai Schwarz