ABBUC-JHV 2019

am Sa, 26.10.2019 (in 3 Tagen, ab 09:00 Uhr)
mehr

Willkommen bei atarixle

Diese Seite behandelt die ATARI-8-Bit-Computerserie und speziell die Benutzeroberflächen "BOSS-XL", "BOSS-XE" und "BOSS-X", die hier als Freeware erhältlich sind.

Blog

Okt08

... letzter Blog-Eintrag

Der CSS-backdrop-filter, 5. Update.

Willkommen, Firefox, in der Familie der Browser, die backdrop-filter unterstützen!
Laut https://developer.mozilla.org/de/docs/Web/CSS/backdrop-filter#Browser_Kompatibilit%C3%A4t wird diese CSS-Eigenschaft schon in der nächsten Version von Firefox (derzeit am 08.10.2019 schreibe ich diese Zeilen in Firefox 69.0.2) Einzug halten und verfügbar sein, sobald man einen Schlüssel in der erweiterten Konfiguration setzt - also noch nicht final, aber schon in Arbeit: From version 70: this feature is behind the layout.css.backdrop-filter.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. Nun bin ich ja gespannt, ob und welchen Prefix ich nutzen muss, um meine bisherigen Backdrop-Filter Firefox-kompatibel zu machen und welche Performance-Einbußenes hierbei geben kann.
Nachtrag: es sei erwähnt, dass der oben genannte Schalter den backdrop-filter lediglich freischaltet, so dass eine CSS-Weiche, zum Beispiel @supports(backdrop-filter:none {...}), funktioniert. Um wirklich etwas zu sehen, musste ich auch noch den Schalter gfx.webrender.enabled auf true setzen. Nur unter Windows ist dieser Schalter standardmäßig aktiviert.
Microsoft hatte ja eigens für den alten Edge-Browser (also nicht Chromium-Edge) eine klevere Methode entwickelt, das Suft-Erlebnis nicht zu beeinträchtigen: die Bereiche ohne aufwändigen Backdrop-Filter werden normal gezeichnet, die Bereiche mit größerem Rechenaufwand für langsame Grafikkarten werden langsamer berechnet. Sieht man sich das Scrolling genauer an, so scrollt der normale Bildbereich auf meiner Seite in gewohnten 60 Bildern pro Sekunde, während der Bereich z.B. hinter der Menüleiste auf meinem langsamen Tablet-PC mit nur 7 Bildern pro Sekunde aktualisiert wird. In Chrome und Chromium(-Edge) ist dieses Verhalten leider (noch?) nicht implementiert und bringt z.B. auf meinem NetBook mit Intel GMA945 enorme Geschwindigkeitseinbußen bis hin zur Unbenutzbarkeit mit sich.
Aber dieser Rechner ist uralt und bereits die nächste Generation Intel-GPUs (z.B. X3100) meistert die Königsklasse backdrop-filter:blur(...); mit Bravur.

Größtes Update für mich persönlich: Chrome 76 hat endlich den stabilen und vollständig unterstützten CSS backdrop-filter.
Nachdem Update von gestern (5.8.19) und unter Android heute (6.8.19) ist die Funktion standardmäßig eingeschaltet.

Update vom 24.5.19: offensichtlich wird seit dem Umstieg von Microsoft-Edge auf den sogenannten "Chromium-Edge" kräftig an der CSS-Eigenschaft "backdrop-filter" gearbeitet. In Chrome 76 (derzeit im Dev-Channel) mit aktiviertem Experimental Web Platform features (chrome://flags/#enable-experimental-web-platform-features) funktioniert er nahezu fehlerfrei. Dies dürfte u.a. daran liegen, dass MS-Edge in den Versionen 17 und 18 diesen Filter bereits final implementiert hatte (auch wenn's in Version 18 Fehler bei der Darstellung gibt). In Chromium-Edge will man sicherlich mit diesem Feature keinen Schritt rückwärts machen wollen. Somit wird auch Google-Chrome davon profitieren, welcher derzeit in Version 74 bereits die Fortschritte beim backdrop-filter zeigt, nachdem er jahrelang unberühert blieb. Hier gibt es lediglich bei vergrößert dargestellten Webseiten (Strg + bzw. Cmd +), so wie auf HiDPI-Displays (auf welchen Webseiten in der Regel 2fach vergrößert Dargestellt werden) Fehler: der Bereich, auf den der backdrop-filter angewendet wird, wird nicht mit dem Element vergrößert.

Doch von vorn:
Auf der Fujiama 2016, als ich auf Mathy's Mac blickte, erstaunte mich etwas doch gar sehr.
In meinem Artikel "OS X 10.10 sieht aus wie Ubuntu 10.10" beschrieb ich den Blur-Effekt, den OS X anwendet, um eine gewisse Transparenz, die den Menüs und der Menüleiste vorbehalten war, auf alle Anwendungsfenster zu bringen und somit das farbliche Thema des vom Benutzer gewählten Hintergrundbild auf die gesamte Oberfläche zu übertragen.
In vielen Anwendungen, zum Beispiel Finder und Safari, scheint nicht nur der Desktop-Hintergrund durch den Fensterrahmen, sondern auch die Inhalte. So schimmern Datei- und Ordner-Symbole beim herunter-scrollen durch die Menü- und Titelleiste des Finders und die Web-Inhalte durch die des Safari.

Doch was mich nun auf Mathy's Bildschirm so erstaunt hatte, war, dass dort auch Web-Inhalte durch eine Menüleiste schimmerten, die selber Teil des Web-Inhalts war.
Erst habe ich meinen Augen nicht getraut und gedacht, Apple mache hier wieder sein ur-eigenes Ding. Doch das konnte nicht sein.
In der Tat ist es so, dass es in CSS mittlerweile das Attribut backdrop-filter (zu Deutsch etwa Filter für den durchscheinenden Hintergrund) gibt, der alle Inhalte betrifft, die hinter einem transparenten Bild (z.B. einem PNG, aber auch GIF) oder einer halbdurchlässigen Farbe (z.B. rgba(0, 0, 0, 0.5)) erscheinen.
Man kann den Hintergrund einfärben, invertieren, in Graustufen oder Monochrome verwandeln und auch verschwimmen lassen. Es lassen sich alle bekannten Filter des gleichnamigen Attributs filter anwenden.
Eine sehr schöne Demonstration dieses Filters war auf der Download-Seite von elementary.io zu sehen, von der man damals Version 0.3 des gleichnamigen Linux-Systems herunterladen konnte.
Dieser Filter ließ die gesamte Webseite im Hintergrund dimmen und verschwimmen, nur das Download-Fenster darüber war hell und scharf zu sehen.
Das wurde damals aber so implementiert, dass das Download-Fenster ein eigenständiges Objekt außerhalb der Elemente im Hintergrund war und es in die Mitte des Browser-Fensters positioniert wurde.

der Blur Effekt auf der Apple-iTunes-Seite Nun war ich ja schon immer ein Freund von Blur-Effekten und wollte ihn auch für meine Webseite nutzen.
Doch leider, obwohl diverse Informationen und Forum-Posts im Internet über ein Jahr alt sind und der Safari dieses Attribut bereits vollständig unterstützt, bleibt die Implementierung bei allen anderen Browsern noch aus.
Google Chrome bietet eine frühe Implementierung des Backdrop-Filters, doch es ist eine Glückssache, ob die Apple-iTunes-Seite, die diesen Filter nutzt, richtig angezeigt wird.
Auf meinem Computer war es so, dass die Seite ohne Hardware-Beschleunigung genau einmal richtig angezeigt wurde und auch beim Scrollen funktionierte. Danach nie wieder.
Noch unverständlicher scheint mir, dass der Backdrop-Filter zwar auf den Entwicklerseiten von Mozilla ausführlich beschrieben und mit Bildern anschaulich gemacht wird, es dort aber keinerlei Bemühungen zu geben scheint, diesen zu implementieren.
Welcher Browser den Backdrop-Filter unterstützt, kann man auf caniuse.com/#feat=css-backdrop-filter nachlesen.
Dort findet man auch weiterführende Links zu Diskussionen und Beschreibungen.

Doch wer mich kennt, weiß, dass mir das nicht reicht und dass ich einen solch langen Artikel über den Backdrop-Filter nicht geschrieben hätte, wenn ich nicht auch etwas zu zeigen hätte.
Wie oben bereits erwähnt, bietet der Google Chrome eine Vorschau auf das, was da irgendwann mal kommen möge, welche zwar nicht perfekt implementiert, aber zumindest schon genutzt werden kann, wenn man einige Regeln beachtet.
So funktioniert der Backdrop-Filter offensichtlich sehr gut mit dauerhaft fixierten Objekten, also jenen, dessen Attribut position nicht plötzlich durch JavaScript von static auf fixed geändert wird. Entweder ist es die ganze Zeit static (statisch, es bleibt da, wo es durch den Textfluss hingehört), oder es ist fixed (bleibt also an einer Position unabhängig auf dem Bildschirm stehen).
Auch kann fehlerfrei es mittels der Pseudo-Klasse :hover eingeschaltet werden. Zwei Elementen habe ich das Attribut backdrop-filter:blur(20px); gegeben:
Eines ist die Copyright-Leiste ganz unten. Das andere ist die Bildunterschrift auf diversen Event-Seiten.
Diese Elemente habe ich so gestaltet, dass sie mit dem Google Chrome auch fehlerfrei dargestellt werden.

Doch wie könnt Ihr nun den Effekt sehen?
Nun, zunächst müsst Ihr die frühe Implementierung dieses Filters einschalten:

  • Sucht im Google Chrome (oder Chromium) mit Strg+F nach "platform", nachdem Ihr die Seite "chrome://flags/" (oder "about:flags") aufgerufen habt.
  • Aktiviert dort "Experimentelle Webplattform-Funktionen".
  • Startet den Webbrowser neu.

Nach dem Neustart solltet Ihr den Effekt bemerkten können.
Scrollt dazu durch meine neu gestaltete Titelseite mit den farbigen Kacheln und Ihr könnt das Farbenspiel in der Copyright-Leiste beobachten.
Blur-Effekt auf meiner Startseite
Auf den Event-Seiten, zum Beispiel die des letzten AIB-Treffens, fahrt Ihr mit dem Mauszeiger über eines der Fotos und Ihr könnt den Effekt in der Bildunterschrift sehen.
Blur-Effekt auf meiner Startseite

Die Anwendung des neuen Backdrop-Filter auf meiner Webseite brachte auch einige Änderungen des Designs mit sich.
So musste ich den Schatten über der Copyright-Leiste entfernen, da dieser sonst ebenfalls den Backdrop-Filter anwendet - zweifellos noch ein Bug. Das Hintergrundbild ist durchlässiger als bisher.
Dadurch wirkt die Copyright-Leiste nun schwerer lesbar, wenn man die Seite in Google Chrome ohne den Filter (Standard-Einstellung) betrachtet.
Da Firefox diesen Filter bisher gar nicht implementiert hat, habe ich den Firefox von diesem Experiment ausgeschlossen.
Firefox-Benutzer sehen bis auf weiteres die bisherige Version der Copyright-Leiste (dunkel und mit Rahmenschatten).
Wer mit dem Firefox versucht, einen Backdrop-Filter auf meiner Seite zu entdecken, kann das auf den Event-Seiten tun und sich die Bildunterschriften anschauen. Dort habe ich keine Browser-Weiche eingebaut.

fehlerhaft dargestellter Blur-Effekt auf der Apple iTunes Seite Kleiner Nachtrag: während die Apple-iTunes-Seite gefühlt nur jedes hundertste mal beim herunter Scrollen richtig angezeigt wird, scheint Seite des Apple iPad Pro immer richtig angezeigt zu werden.
Solange man noch nicht herunter gescrollt hat, wird allerdings der Backdrop-Filter auch auf den umliegenden Rahmen angewendet, diesen Fehler macht der Google Chrome auf beiden Apple-Seiten. korrekt dargestellter Blur-Effekt auf der Apple iPad Pro Seite

Hier noch ein paar farbige Felder, um den Backdrop-Filter-Effekt zu beobachten (nach unten scrollen und auf die dunkle Copyright-Leiste achten).

Eine kleine Testseite für den Backdrop-Filter könnt Ihr hier aufrufen.

Neuigkeiten

April072018

Homepage-Pflege:
So eben habe ich jede Menge neuer Events aus dem ABBUC-Kalender in meine ICS-Datei übernommen.
Meine iCal-Datei könnt Ihr in Thunderbird oder Apples iCal/Kalender abonnieren. Auch ist ein Abo mit iCalSync 2 unter Android möglich.

... aktive ABBUC-Forenthemen
Hohlbuchsen für 1050 / XF551
heute um 08:42 Uhr von Erhard
Von DOS 2.x direkt auf Kassette kopieren?
gestern um 21:29 Uhr von luckybuck
Sondermagazine, Liste mit Inhalten
gestern um 18:13 Uhr von Koronis64
XF551 manual
gestern um 13:06 Uhr von Sleepy
Incognito (für 800er) bei Lotharek
gestern um 12:58 Uhr von andymanone
Abbuc in Berlin
vorgestern um 12:26 Uhr von nortobor
Suche: Jaguar-Spiel
vor 3 Tagen um 14:18 Uhr von andymanone
ABBUC Magazine - Unterschiede Downloads vs. Diskversand
vor 3 Tagen um 12:21 Uhr von Erhard
Software Wettbewerb 2019
vor 3 Tagen um 10:24 Uhr von Erhard
After-JHV-Treffen
vor 3 Tagen um 01:38 Uhr von Jac
ABBUC Legomännchen
vor 4 Tagen um 23:16 Uhr von slx
Erledigt: B: Atari 1029 Drucker
vor 5 Tagen um 06:24 Uhr von atarixle
Erledigt: B: Star LC10(C)
vor 6 Tagen um 06:44 Uhr von Lastic
81. RETRO-AKTIV Treffen in Kaiserslautern (25.10.2019)
vor 1 Woche um 15:19 Uhr von Blader
Suche Atari 130 XE mit Floppy
vor 1 Woche um 12:21 Uhr von Prodehl
PRO(C) ATARI Ausgabe #14 - jetzt vorbestellen
vor 1 Woche um 11:44 Uhr von powersoft
Was ist das? "Freezer Replay"
vor 1 Woche um 10:59 Uhr von tfhh
ABBUC in eigener Sache
vor 1 Woche und 1 Tag um 17:31 Uhr von GoodByteXL
Joystick-Tester
vor 1 Woche und 3 Tagen um 12:23 Uhr von Franky
LYNX 2 rechtsseitig defekt brauche euren Rat
vor 1 Woche und 4 Tagen um 20:00 Uhr von Cash
The!Ramdisk für The!Cart
vor 1 Woche und 4 Tagen um 13:23 Uhr von janzh
Erledigt: Biete: PC-Relais-Karte für Parallelport
vor 1 Woche und 4 Tagen um 12:46 Uhr von Stefan
Der Norden taut auf - neue Regionalgruppe am Start
vor 1 Woche und 4 Tagen um 08:58 Uhr von Zaxxon-HH
Biete: Monitor, CRT-Portable, DVD-Player, Tuner
vor 1 Woche und 5 Tagen um 20:44 Uhr von Stefan
RETROpulsiv 14.0 am 9. u. 10.11.19
vor 1 Woche und 6 Tagen um 22:38 Uhr von Stefan
Magazin 138 ist da!
vor 1 Woche und 6 Tagen um 00:57 Uhr von skriegel
Atari arbeitet an einer neuen Spielekonsole
vor 2 Wochen um 21:25 Uhr von atarixle
SIO Splitter
vor 2 Wochen um 15:04 Uhr von Erhard
Tastaturfolien für den XL demnächst erhältlich
vor 2 Wochen um 09:39 Uhr von Montezuma
Suche 800XE Gehäuseoberteil
vor 2 Wochen um 09:11 Uhr von imagodespira
ABBUC-Veranstaltungskalender

Okt26

ABBUC-JHV
in 3 Tagen, ab 09:00 Uhr

Bürgerhaus Süd, Hans-Senkel-Platz 1, 45699 Herten

Die 34. Jahreshauptversammlung
Event-Link : www.abbuc.de

ABBUC-Veranstaltungskalender

Nov09

ABBUC in Berlin
in 2 Wochen und 3 Tagen, ab 12:00 Uhr

Berlin, Johannestal

mehr Informationen unter http://www.abbuc.de/~atarixle/AIB/ und im ABBUC-Forum unter http://www.abbuc.de/community/forum/viewtopic.php?f=17&t=8635

Inhalt

... weitere News
erfahrt, was es Neues auf dieser Homepage gibt
ABBUC in Berlin
ABBUC in Berlin (AIB) ist unsere neue Regionalgruppe, die sich alle acht Wochen in Berlin trifft.
Fujiama
das mittlerweile größte Atari-8-Bit- und auch markenoffene Treffen des Landes
Blog
... weil's jeder macht. Hoffentlich vernachlässige ich dadurch nicht meine News-Seite
Software
über meine Software: BOSS, HTML-Viewer, Datenbank...
Tipps & Tricks
Ein paar kleine Spielereien mit dem ATARI, die nichts mit Spielen zu tun haben, manchmal aber ganz nützlich sein können.
downloads
was alles zum kostenlosen Download bereitssteht
Events
vergangene und kommende ATARI-Veranstaltungen, die ich besuchte und besuchen werde
Standards
Einige Hinweise zu Turbo-BASIC und mehreren DOS-Versionen
Links
Was gibt es sonst noch im Internet
Sitemap
Komplettübersicht über alle Seiten
E-Mail
meine E-Mail-Adresse