21.07.11

Webdesignbezogene Notizen zu Safari 5.1 unter Lion

Ordentliche Gradients-Notation and more

Safari 5.1 ist wieder auf aktuellem WebKit-Stand. Das bedeutet z.B. dass man ab jetzt für CSS-Gradients nur noch eine Notation (die richtige) beachten muss.

-webkit-gradient(linear, ...)
statt wie bisher
-webkit-linear-gradient(...)

Full Screen API

Safari unterstützt jetzt die Full Screen API. Zuerst von Mozilla vorgeschlagen und schon etwas länger in Chromium am Start.

elem.webkitRequestFullScreen();

elem könnte hier z.B. ein Video-Element sein; muss es aber nicht. Es funktioniert mit so ziemlich allem. Mit den neuen Fullscreen-Apps in Lion hat das ganze übrigens herzlich wenig zu tun.

Overflow-Scrolling

Dieser Bounce-Effekt beim Scrollen, der von iOS nach Lion übernommen wurde, den gibt es auch im Safari 5.1, zumindest, wenn man auf dem Mac unterwegs ist. Aufgrund seiner Erscheinung vermute ich aber mal schwer, dass es den auch unter Windows gibt.

Jedenfalls ist dieser Effekt für viele Anwendungen ziemlich nervig. Vor allem für manche Webapps, die mehrere scrollbare Bereiche (Elemente, denen overflow:scroll oder overflow:auto zugewiesen wurde) haben. Die einzelnen Bereiche bouncen nicht und daran lässt sich derzeit auch nichts verändern. Der gesamte Dokumenten-Body bounct aber ganz gehörig. Und das selbst dann, wenn er sowieso nur eine Höhe von 100% hat und damit selbst überhaupt nicht scrollbar sein müsste. Umgehen lässt sich das Problem, indem man eben diesem Body ein overflow: hidden; schenkt.

A propos einzelne scrollbare Bereiche. Diese Bereiche kommen leider nicht in den Genuss der neuen fancy Scrollbars unter Lion. Genaugenommen kommen diese Bereiche nun in den Genuss gar keiner Scrollbars mehr. Jap, richtig gehört. Standardmäßig gibt es die einfach nicht mehr. Das eröffnet natürlich eine Menge Probleme. Glücklicherweise unterstützt Safari ::-webkit-scrollbar. Nach meiner kurzen Recherche bin ich mir aber recht sicher, dass sich damit allein keine Lion-Scrollbars nachbauen lassen. Mit ein bisschen JavaScript-Magie sollte das aber kein Problem sein.

Auto-Hyphenation

Juhu. Safari unterstützt -webkit-hyphens: auto;.

Nicht wirklich Safari, aber doch relevant: Leicht modifiziertes Schriftenrendering

Lion rendert Schrift anders. Ich weiß nur noch nicht warum und wie.

Kleine Anmerkung noch: Das placeholder-Attribut

Ich bin mir ziemlich sicher, dass das nicht neu ist – bestimmt gabs das schon in Safari 3.0 o.ä. Es ist mir einfach aufgefallen: Der Safari verhält sich nicht standardkonform. Eigentlich sollte der Placeholder-Text verschwinden, sobald der Fokus auf dem entsprechenden Formularelement liegt. Im Safari verschwindet er erst, wenn man etwas getippt hat.

User agents should present this hint to the user, after having stripped line breaks from it, when the element’s value is the empty string and the control is not focused (e.g. by displaying it inside a blank unfocused control).

11.05.11

-webkit-margin-collapse

Ich bin gerade über diesen Smashing-Magazine-Artikel gestolpert, in dem es um CSS-Zukunft mit Webkit geht. Hängengeblieben bin ich bei -webkit-margin-collapse, was a) ich noch nicht kannte und b) sich vielversprechend anhörte.

Here is a property with a quite limited practical use, but it is still worth mentioning.

Der Autor des Artikels hat vermutlich CSS noch nie benutzt, sonst wüsste er die Eigenschaft zu schätzen. Kollabierende Außenabstände sind ein Krampf, was vor allem daran liegt, dass sich dadurch verschachtelte Container seltsam verhalten. Wenn man collapsing-margins mit dieser neuen Eigenschaft deaktivieren kann, ist das also mal grundsätzlich als positiv zu bewerten.

Es bleibt immer noch mein anderer Kritikpunkt an den collapsing margins: Dass es sie nur in der Vertikalen gibt und nicht horizontal. Wer hat sich diesen Blödsinn ausgedacht?

11.04.11

Suche in Chrome per type=search anmelden

Wahrscheinlich nichts großartig neues, aber wahrscheinlich auch nichts, was schon jeder weiß: Wer für seine seitenspezifische Suche ein input-Element mit dem Typen „search“ verwendet, bekommt neben einem coolen appligen Style auch ein weiteres Bonbon. Der Chrome-Browser merkt sich jede Suchbox, die er einmal zu Gesicht bekam und registriert sie für zukünftige Suchen über die Adressleiste.

Will man schnell mal etwas bei z.B. Youtube suchen, muss man nur „youtube“ in die Adresszeile tippen, haut kurz auf den Tabulator und hui, man hat ein Suchfeld, mit dem man einzig auf Youtube.com sucht. Lange dachte ich, das funktioniere nur für hart einkodierte Websites wie z.B. Amazon, Ebay oder eben Youtube. Quatsch, das funktioniert für alle Seiten, deren Suchfeld wie folgt gemarkupt ist.

<input type="search">

Hat man die Seite einmal besucht, merkt sich der Browser die Suchfelder und legt sich unter der Haube das Funktiönchen zurecht.

22.02.11

Die HTTP-Zwischenablage

Eigentlich schade, dass dieses Blog hier nur noch sehr unregelmäßig mit frischen Inhalten besät wird. Und wenn, dann sind das nur solche Spacko-Einträge wie dieser hier. Naja, ist immer noch mein Blog, also geht mal schön sterben.


Jedenfalls benutze ich seit kurzem eine schicke Mac-App. Man wählt irgendeine Datei aus und drückt „alt + c“ (oder irgend eine andere definierbare Kombination). Im Gegensatz zum guttenbergesken „cmd + c“ kommen die Daten da nicht so in das einfache Clipboard. Sondern in das Internet! Meine Mama sagt dazu CloudApp, aber ich sag’ dazu HTTP-Zwischenablage!

Die URL zu der Ressource wird dann in das (OS-)Clipboard gelegt und kann schön einfach verteilt werden. Noch schneller funktioniert das mit Screenshots. Die muss man nur ganz normal schießen und zwei Sekunden später steht die URL per „cmd + v“ bereit. Awesome! Denn das ist es doch, was man mit 99% aller Screenshots anstellen möchte: Man will sie verschicken.

7.02.11

Postprivacy

Ich habe mal ein wenig über das Ende der Privatheit nachgedacht und bin zu folgender Gedankenfolge gelangt:

  1. Es wird immer einfacher für jedermann, alles über jeden in Erfahrung zu bringen
  2. FACE IT!

thread closed

Neuere Artikel

Flattr

Blogrolle

Podroll

Soziale Netzwerke

Twitroll

PromoteJS

JS String .toUpperCase