Netzwerk & Smart Home Tipps & Tricks
Typografie HTML, CSS, JavaScript,
1. Farbschema Farbtöne variieren mit HSL Webentwickler definieren die nötigen Farben einer Website oft über Hexadezimalwerte. Allerdings verstehen Browser auch andere Farbsysteme, die in bestimmten Fällen die Arbeit erleichtern.
Neben Hexadezimalwerten (# FFF) und konkreten Farbnamen ( white) können Browser auch mit RGBWerten arbeiten. Zusammen mit dem Alphakanal lassen sich Farbwerte über rgba() angeben, was zu transparenten Farben führt, etwa: div { background-color: rgba(200, 0, 0, 0.5); } Daneben ist auch eine Notation im Format HSL bzw. HSV möglich. Die Buchstaben stehen für Hue (Farbwert), Saturation (Farbsättigung) und Lightness bzw. Value (Hellwert, auch Dunkelstufe). Der Farbwert entspricht dabei dem Farbwinkel auf einem Farbkreis: 0° für Rot, 120° für Grün, 240° für Blau. Die Sättigung und der Hellwert können jeweils Werte von 0% bis 100% annehmen. Der Vorteil dieser Schreibweise: Sie können über den dritten Wert schnell hellere Farbtöne erstellen – ohne Photoshop oder andere Tools bemühen zu müssen. .color1 { color: hsl(300, 100%, 30%); } .color1-light { color: hsl(300, 100%, 40%); } .color1-lighter { color: hsl(300, 100%, 50%); } Auch bei hsl() ist es möglich, die Farbe um einen Alphakanal zu ergänzen, so dass sich hsla() ergibt. Diese CSS3 Colors werden von allen modernen Browsern ab Internet Explorer 9 unterstützt. .color1 { color: hsla(300, 100%, 30%, 0.5); } 2. Webfonts Schriften tauschen mit font-display Es kann Nutzer nerven, wenn eine Webseite keinen Text anzeigt, weil die Schriften noch nicht geladen wurden. Wer dieses Verhalten nicht mit JavaScript kontrollieren möchte, kann auf die CSS-Eigenschaft font-display zurückgreifen. Wenn Browser eine Webseite anzeigen sollen, für die noch Webfonts heruntergeladen werden müssen, gibt es zwei Möglichkeiten, damit umzugehen: Entweder, der Browser zeigt erst einmal nichts an, bis der Webfont zur Verfügung steht. Das ist als FOIT bekannt – Flash of Invisible Text. Oder aber, der Browser zeigt die Webseite zunächst in einer Standardschrift an und tauscht die Schriften aus, sobald die Webfonts geladen wurden. Dieses Verhalten nennt sich FOUT – Flash of Unstyled Text. Manche Leute bevorzugen bei ihren Projekten FOIT, andere FOUT. Beide Optionen haben ihre Nachteile. Webentwickler, die dieses Umschalten der Schriften genauer kontrollieren möchten, können JavaScript und die Font Loading API einsetzen. Mittlerweile wird aber auch die CSS-Eigenschaft font-display von den meisten modernen Browsern unterstützt, über die sich das Verhalten simpler und direkt in CSS definieren lässt. Außen vor sind hierbei die alten Internet Explorer und Edge. Sie können die Eigenschaft aber trotzdem problemlos einsetzen. Moderne Browser interpretieren die Eigenschaft, ältere Browser bleiben bei ihrem Standard-Verhalten. Die Eigenschaft font-display akzeptiert fünf Werte: auto: Das entspricht dem Standard-Verhalten des Browsers. In den meisten Fällen ist das Verhalten ähnlich zu block.
block: Hierbei zeigt der Browser den Text erst dann an, wenn die Webfonts geladen wurden. Das führt zu einem FOIT. swap: In diesem Fall zeigt der Browser den Text zunächst im Fallback-Font an und tauscht diesen gegen den Webfont, sobald dieser geladen wurde. Das führt zu einem FOUT. fallback: Diese Option ist ein Kompromiss. Der Browser versteckt den Text zunächst für etwa 100ms. Wurde der Webfont bis dahin nicht heruntergeladen, wird ein Fallback-Font genutzt. Der Fallback-Font wird ausgetauscht, sobald der Webfont heruntergeladen wurde. Dieser swap findet allerdings nur in einem gewissen Zeitraum (etwa 3s) statt. optional: Funktioniert ähnlich wie fallback. Aber der Browser erhält hier mehr Freiheiten und kann selbst entscheiden, ob der Webfont überhaupt genutzt wird, abhängig von der Geschwindigkeit der Verbindung. Nutzer, die zum Beispiel mobil unterwegs sind, werden hierbei nicht unbedingt den Webfont sehen. Welche Option in Frage kommt, wird vom Projekt abhängen und davon, wie „wichtig“der Webfont ist.
3. Formulare Selectboxen stylen Vor Jahren war es noch recht schwierig, Selectboxen vernünftig und konsistent in verschiedenen Browsern zu gestalten. Meist hat man es einfach bei der Standardausgabe belassen oder eine hübschere Version mit JavaScript gebastelt.
Nun hat sich Scott Jehl von der filament group die Mühe gemacht, eine Lösung für gestaltete Selectboxen zu finden, die mehr Gestaltungsspielraum bietet und trotzdem in möglichst vielen Browsern gut aussieht. Seine Lösung ist erstaunlich robust – aber natürlich müssen Entwickler auch hier bei den älteren Internet Explorern 8 und 9 Abstriche machen. Das Grundgerüst beinhaltet folgenden Code: <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> select { display: block; font-size: 16px; font-family: sans-serif; font-weight: 700; color: #444; line-height: 1.3; padding: .6em 1.4em .5em .8em; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; border: 1px solid #aaa; box-shadow: 0 1px 0 1px rgba(0,0,0,.04); border-radius: .5em; appearance: none; background-color: #fff; background-image: url("arrow.svg"), linear-gradient(to bottom, #ffffff
0%,#e5e5e5 100%); background-repeat: no-repeat, repeat; background-position: right .7em top 50%, 0 0; background-size: .65em auto, 100%; } Das CSS ist leicht gekürzt. Der entsprechende Artikel von Scott Jehl enthält den kompletten Code samt einiger Erklärungen, etwa zum Verlauf im Hintergrund oder dem Pfeil am rechten Rand ( bit.ly/2F7NxGW). Damit spricht nun nichts mehr dagegen, die Selectboxen beim nächsten Projekt etwas aufzupeppen.
4. Privatsphäre Facebook Container Bekanntlich sammelt Facebook jede Menge Daten über seine Nutzer. Wer trotzdem nicht auf Facebook verzichten möchte, sollte sich bemühen, seine Daten bestmöglich zu schützen. Zum Beispiel mit dem Facebook Container für Firefox.
Die Erweiterung sorgt dafür, dass die eigene Identität auf Facebook in einem separaten Container-Tab isoliert wird ( mzl.la/2FbnZbP). Nach der Installation meldet die Erweiterung Sie zunächst von Facebook ab und löscht die Facebook-Cookies. Sie können sich dort