CSS

An diesem Morgen – an einem Sonntagmorgen – ist mir Safari Mobile schon ziemlich auf den Keks gegangen:

• Im article > footer der neuen Frontends wurde die font-size immer mit 19px kalkuliert.
• Die font-size in main > header > detail > summary wurde bei aufgeklappten Details angepasst.

Vanadium und Vivaldi haben nicht derlei Zicken gemacht. Hat vermutlich weniger mit den Browsern als der Auflösung der Geräte zu tun.

Lösung ist -webkit-text-size-adjust: none;. Das mag allerdings auch ein wenig darauf hindeuten, dass in dem CSS ein tieferes Problem begraben liegt, da das Phänomen beim gleichen Layout mit dem alten CSS nicht aufgetreten ist.

The Cascade – vormals ein Newsletter, jetzt ein Blog.

Der Newsletter war immer wieder ein Quelle interessanter und meist neuer Aspekte und Tips zu CSS.

Es hat gedauert, aber nun habe ich dem Blog auch endlich ein Gallery-Feature für Einträge verpasst. Bei der Zahl der Fotos im Journal war wirklich an der Zeit.

Alternativ ginge nur ein Papst über Wordpress um dann mit dem unsäglichen Blockeditor eine Galerie zu erstellen. Aber das ist mir zu kompliziert mit Gutenberg.

Die Anordnung erfolgt per CSS Grid, was verblüffend einfach ist. Ich brauchte kaum irgendwas "Spezielles" und benutze nur ein sehr einfache grid-template-columns. Der Rest ging fast von allein.

A Complete Guide to CSS Grid ist ein fantastischer Einstieg.

---

Aus der Serien "Eins ist anders und gehört nicht hierher".

CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.

CSS Reference – A free visual guide to the most popular CSS properties

Über Nico bin ich auf die potentielle sIFR Alternative Cufón aufmerksam geworden:

• Exploring Cufón, a sIFR alternative for font embedding ~ Authentic Boredom
• Cufón test page: FF Kievit Pro

Ja, scheiße! Genau darauf habe ich gewartet. Für mich hatte CSS schon immer zu wenig Logikanteil, sodass ich lieber im Backendcode herumgehackt habe. Das kann sich mit CSS3 bald ändern, dann kann ich endlich an Einheiten und Werten ein wenig herumrechnen…

Im SELFHMTL Weblog wurde es verraten.

Auch eine Handvoll Links, die ich regelmäßig heraussuchen muss. Verschiedene Methoden, Überschriften mehr oder weniger barrierefrei durch Grafiken zu ersetzen:⁣

• Jens Meiert – Übersicht: Image Replacement Techniken
• Mezzoblue: Revised Image Replacement
• Ryznar Design: Image Repalcement Methods

⁣Wenn's nicht floaten soll, greife ich idR. auf die Original Gilder/Levin method zurück.

A List Apart: Articles: CSS Swag: Multi-Column Lists

Peter weist auf CSS-Technik-News auf eine weitere Lösung von .paeng hin CSS Layouts mit zwei Spalten gleiche Höhe zu realisieren:

• Beispiel 1
• Beispiel 2

In diesem Zusammenhang könnte auch column-swapping aus dem Satzansatz CSS Lab von Interesse sein.

fiftyfoureleven.com: Sliding Doors Meets CSS Sprites

eine Demo Seite mit eingebettetem CSS Quellcode.

Das kann sich doch nur um einen üblen Scherz handeln. Bei manchen Artikeln auf ALA kann man nur den Kopf schüttlen, so auch bei diesen schlimmen Machwerk, das den Gebrauch von CSS in HTML EMails näher bringt.

Ich halte den Gebrauch von HTML in EMail schon mehr als fragwürdig, aber das Chaos dann auch noch mit CSS aufpeppen zu wollen ist Dummheit.

Ich habe durchaus Verständnis, wenn ein Unternehmen einen schönen Newsletter an den Mann Kunden bringen möchte. Aber da gibt es doch wesentlich elegantere Möglichkeiten.

Da fällt mir bspw. der Newsletter von Warp Records ein, der als Text inkl. einer URL auf eine Internetseite mit dem akt. Newsletter verschickt wird. Die Vorteile einer solchen Lösung liegen klar auf der Hand, der Kunde sieht genau das was er sehen soll, da das Erstellen von HMTL Dokumenten für Browser dann doch noch einfacher ist als für unzählige MUAs, die womögliche nichteinmal HTML darstellen können. So hat jeder Kunde die Möglichkeit den Newsletter zu lesen und nicht nur jene mit der passenden Emailsoftware. Ein aus Marketingsicht sicherlich nicht uninteressantes Argument, oder 😉

!!! Do not use HMTL in Email !!!

1. CSS Sprites – ein Artikel von Dave Shea auf ALA: Imageslicing mit CSS ohne Javascript.
2. Vom gleichen Autor: Positioning and the Cascade

mit dicken Rändern und negativem Einzug. Ein dreispaltiges CSS-Layout mit Spalten in voller Höhe, vorgestellt im CSS-Technik Weblog.

Beispiele für dreisplatiges Layout gibt es diverse, aber idR haben die Spalten eine voneinander unabhängige Höhe, was z.T. gewaltig saugt.

• Little Boxes
• CSS-Design: 3 Spalten klassisch
• Layout ohne Tabellen

Frage ich mich eigentlich nicht!

A List Apart: Why Don’t You Code For Netscape?

Interessanter ist die Frage, warum manche Surfer mit Netscape 4 unterwegs sind. Man muß ja Heute schon gewisse Anstrengungen unternehmen, um NC4 zu nutzen, zumindest eine Installation der Software über sich ergehen lassen. Wenn man also NC4 installiert kann es sicherlich nicht der Grund sein, daß man unbedingt einen Browser mit dieser abartigen Renderengine haben möchte, weil sie so oboslet ist und den tollsten Murks macht. Vermutlich geht es darum einen anderen Browser als MSIE5/6 zu haben. Legitim, das möchte ich auch;) Wenn man nun aber diese Abneigung gegen die vorinstallierte Software hat, hat man sicherlich auch genug Einblick in die Materie, um sicher zu wissen wo NC4 einzuordnen ist und wie es um Alternativen steht. Ist dies nicht der Fall, sollte man sich ersthaft Gedanken über seine Motivation und den Ursprung dieser Entscheidung machen!

Man entscheidet sich nun trotzdem für NC4, dann kennt man doch auch die Konsequenzen und solage man den Inhalt einer Seite sehen kann, möge man sich doch bitte in Schweigen hüllen. Ein halbwegs gut gemacht Seite, die Gebrauch von XHMTL und CSS(2) macht, ist nicht unlesbar von Netscape, sie macht visuell halt nur nicht viel her.