Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Browser werden immer besser

Mittwoch, 28. September 2016

Moderne Browser - in Verbindung mit CSS3 - ersparen dem Webworker immer mehr Arbeit.

Aktuelles Beispiel:
position:sticky

Die Aufgabenstellung:

Ein bestimmtes Element einer Webseite - typischerweise eine Navigation - soll immer sichtbar, und damit nutzbar - sein. Bisher erforderte diese Aufgabenstellung den Einsatz von JavaScript plus CSS. Und beides musste sehr genau aufeinander abgestimmt werden. Probleme mit unterschiedlichen Monitorgrößen (Stichwort RWD) waren vorprogrammiert.
Ein Beispiel mit der bisher nötigen Technik zeigt diese Demo

"position:sticky" erledigt nun diese Aufgabe mit einer einzigen CSS Anweisung. Auf intelligente Weise.

Browser Unterstützung:

  • Unterstützt wird "position:sticky" von allen modernen Browsern.
  • Wie nicht anders zu erwarten: Microsoft-Produkte kennen das Feature nicht.
  • Im Chrome-Browser muss dazu unter chrome://flags "experimental Web Platform features" enabled werden.
  • Schön, dass iOS das Feature unterstützt. Gerade auf iPads kann das sehr hilfreich sein.

Eine Anmerkung: Einen ähnlichen Effekt kann man natürlich auch mit position:fixed erreichen. Allerdings ist position:fixed bei weitem nicht so flexibel. Es fixiert einen Bereich immer in Relation zum Viewport, also zum Browserfenster. Im schlimmsten Fall kann position fixed dazu führen, dass Elemente nicht mehr sichtbar/nutzbar sind. Nämlich dann, wenn der fixierte Bereich größer ist als das Browserfenster. Wenn es sich um eine Navigation handelt, dann wäre das der GAU!
position:sticky fixiert in Relation zum übergeordneten Container, und greift nur, wenn es benötigt wird. Die Fixierung wird bei Bedarf durch Scrollen aufgehoben. Das Risiko einer nicht nutzbaren Navigation wird dadurch zuverlässig vermieden.

Wenn dein Browser das Feature unterstützt (und das Browserfenster klein genug gezogen wird), dann kannst du die Funktion hier auf der Seite in Aktion sehen. Und wenn nicht: dann ist die Navigation natürlich dennoch nutzbar.

Nachtrag 16.10.2016

Im aktuellen Chrome Version 54 mit "experimental Web Platform features" enabled, und ebenso Opera, ist die Umsetzung von position:sticky leider buggy. Na ja, es heißt dort ja auch zu Recht "experimental".
Aber es gibt Abhilfe: Ein Polyfill namens stickyfill.js als jQuery-Plugin. stickyfill bei Github
Alles, was es dazu braucht:

<script src="/scripts/stickyfill.min.js"></script>
 
<script>
$('#menuwrapper').Stickyfill();
</script>

Und damit klappt's jetzt auch auf IE 9+ und Edge.


Noch mehr Komfort beim Copy & Paste

Samstag, 3. September 2016

Eine weitere Komfortsteigerung nach dem 1-Klick-Markieren hat Opera im Köcher (derzeit nur in der Developer Branch V. 41 zu bewundern Version 40+):

Screencast: Opera zeigt sofort nach dem Markieren einen Button zum Kopieren (und Suchen).

Sehr pfiffig!

(PS: Der Suchen-Button öffnet übrigens eine Suche nach dem markierten Text mit der Standardsuchmaschine.)


Code automatisch markieren zum copy & paste

Donnerstag, 1. September 2016

Die Darstellung von Codeschnipseln auf meiner Site habe ich in letzter Zeit ja in mehreren Schritten optimiert. (Hoffentlich verbessert, und nicht verschlimmbessert.)

  1. Den Container mit dem Codeschnipsel scrollbar machen
  2. Die Scrollbar permanent sichtbar machen
  3. Zeilen abwechselnd einfärben

Jetzt ein weiterer Schritt zu Verbesserung der Usability:

Den ganzen Codeschnipsel mit einem Klick markieren zum copy & paste

Folgende Anweisung im CSS bewirkt das (im Beispiel für das <code> Element:
code {
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
}

Das funktioniert in fast allen modernen Browsern. (Crome 53+, Firefox 43+, Safari 9+, Opera)
Ältere Browser, die das Feature nicht unterstützen, ignorieren die CSS Angabe einfach.


Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE