tag:forum.selfhtml.org,2005:/self LIGHTBOX Umsetzung mit CSS3 - was meint ihr zu folgendem Ansatz? – SELFHTML-Forum 2013-12-03T09:50:53Z https://forum.selfhtml.org/self/2013/dec/2/lightbox-umsetzung-mit-css3-was-meint-ihr-zu-folgendem-ansatz/1596084#m1596084 M&M 2013-12-02T21:34:31Z 2013-12-02T21:34:31Z LIGHTBOX Umsetzung mit CSS3 - was meint ihr zu folgendem Ansatz? <p>Hallo,<br> bei meinem Versuch, ein in einer html-Datei integriertes Bild ERST DANN ZU LADEN, sobald es durch das Aufklappen eines Reiter/Tab AUCH SICHTBAR wird (die Inhalte dieses Reiters/Tabs sind dabei per default auf display:none; gesetzt und sollen mit dem CSS3 :target Selector durch display:block; "aktiviert" werden) bin ich auf folgende Umsetzungsidee gestoßen:</p> <p>http://timkadlec.com/2012/04/media-query-asset-downloading-results/</p> <p>Kurze Schilderung der dort vorgestellten Idee:</p> <p>Dort wird propagiert, die als background-image ausgedrückten images würden verlässlich solange ignoriert (und daher NICHT geladen!), solange das parent <div>-tag auf display:none; gesetzt ist; erst durch display:block; würden sie dann verlässlich geladen ["Test Three: Background Image, Parent Object Set to Display None"].</p> <p>Spinnt man diesen Gedanken weiter, so ließe sich alleine durch CSS3 eine Lightbox zur Darstellung von Bildern realisieren, sogar die Integration einer "Wird geladen" - Anzeige wäre möglich, indem man den <div>-tag des darzustellenden (Hintergrund)Bildes in einen <div>-tag mit einem lediglich wenige kb großen Hintergrundbild (z.B. zentriertes "Wird geladen.gif") packt und dieses mit einer entsprechend niedrigeren z-index Eigenschaft versieht...</p> <p>Ich bin seit jeher Verfechter des KISS-Prinzips, daher sind mir komplexe Einbindungen dort ein Dorn im Auge, wo sie nicht unbedingt notwendig und daher vermeidbar sind (spreche da vor allem javascript-Lösungen unter Einbindung einer jquery Bibliothek an, speziell AJAX Ansätze [!] finde ich besonders amüsant; ==> warum eigentlich nicht mit Spatzen auf Kanonen schießen / oder war's gar umgekehrt?! :)</p> <p>Doch wehe wehe, wenn ich an das Ende sehe -<br> im Hintergrund höre ich bereits euch KritikerInnen raunen...</p> <p>Da es aber wohl in keinem anderem Forum so viele auf ihrem Gebiet hochgradig qualifizierte und kompetente Leute gibt wie hier, möchte ich doch an euch herantreten und mal schüchtern nachzufragen, was ihr von dieser Umsetzungsidee haltet:</p> <p>Ist die These, die Hintergrundbilder würden erst durch display:block; des parent <div>-tags geladen, haltbar?</p> <p>Was spricht gegen diese Vorgehensweise?</p> <p>Gibt es (unter der KISS-Prinzip-Prämisse) bessere Möglichkeiten, Bilder erst mit "Aktivierung" eines <div>-tags zu laden?</p> <p>Vielen Dank,<br> MM.</p> <p>(P.S.: Natürlich weisen Hintergrundbilder kein alt-Attribut auf, dies scheint mir aber speziell im Hinblick auf die dominante Präsenz mobiler Endgeräte einen vernachlässigbarer Faktor darzustellen)</p> https://forum.selfhtml.org/self/2013/dec/2/lightbox-umsetzung-mit-css3-was-meint-ihr-zu-folgendem-ansatz/1596086#m1596086 1UnitedPower http://bricklandblog.blogspot.de/ 2013-12-02T22:29:44Z 2013-12-02T22:29:44Z LIGHTBOX Umsetzung mit CSS3 - was meint ihr zu folgendem Ansatz? <p>Meine Herren,</p> <p>verwechseln Sie nicht <a href="http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut-neu.html" rel="nofollow noopener noreferrer">Tag und Element</a>.</p> <p>Der imho. einzige Vorteil dieser Variante ist es, dass sie auch ohne JavaScript funktioniert. Und es ist natürlich eine tolle Spielerei.</p> <p>Für den Produktiveinsatz gibt es aber eine handvoll Nachteile, die dagegen sprechen:</p> <p>Wie handhabst du das Schließen der Diashow? Ich nehme an, es wird irgendwo ein a-Element geben, dass auf den leeren Anker (#) verweist. D.h. dass nach dem Schließen immer zum Seitenbeginn gesprungen wird, das ist Usability-technisch nicht besonders wünschenswert. Ist das base-Element im head der HTML-Datei gesetzt kann es sogar dazu führen, dass eine ganz andere Seite nach dem Schließen angefordert wird, wenn nicht besonders darauf Acht gegeben wird.</p> <p>Die Dokument-Struktur verliert an Semantik, es ist nicht nur das fehlende alt-Attribut, sondern auch das fehlende img-Element. Weder Benutzer die auf einen Screenreader angewiesen sind, noch Suchmaschinen-Bots können großartig Rückschlüsse auf die Intention dieser Struktur schließen. Das Bild ist offenbar Teil des Inhalts und nicht des Designs, weshalb es auch dort manifestiert sein sollte. Bei deinem Vorschlag handelt es sich deshalb m.M.n. um keine erstrebenswerte Implementation einer Diashow, sondern um einen unschönen Hack.</p> <p>Der Aufwand für eine Navigation (zurück, weiter) ist deutlich höher, da für jedes Bild zusätzlich mindestens zwei a-Elemente angelegt werden müssen, die auf das nächste bzw. vorherige Bild in der Sequenz verweisen.</p> <p>Gerade wenn du Smartphones unterstützen möchtest, solltest du alternative Bedienmöglichkeiten in Erwägung ziehen, zum Beispiel einen Bildwechsel durch Swipen.</p> <p>Darüber hinaus bist du sehr eingeschränkt bei den Übergangen von einem Bild zu nächsten. Du schaffst es bestimmt noch eine Einfliegen von rechts zu implementieren, aber beim zurück navigieren fliegt das vorherige Bild wieder von rechts ein. Das wirkt unnatürlich.</p> <p>Letztlich sind die Konfigurationsmöglichkeiten geringer als bei einer potenziellen JS-Implementation. Wenn mit hoher Wahrscheinlichkeit davon ausgegangen werden kann, dass die Bilder geöffnet werden, macht es u.U. Sinn sie vorzuladen und nicht erst bei Bedarf nachzuladen. Mit JavaScript ließe sich das problemlos umsetzen.</p> <p>mfg</p> <ul> <li>1UP</li> </ul> https://forum.selfhtml.org/self/2013/dec/2/lightbox-umsetzung-mit-css3-was-meint-ihr-zu-folgendem-ansatz/1596085#m1596085 T-Rex t-rexchen@web.de 2013-12-03T09:50:53Z 2013-12-03T09:50:53Z LIGHTBOX Umsetzung mit CSS3 - was meint ihr zu folgendem Ansatz? <blockquote> <p>Ich bin seit jeher Verfechter des KISS-Prinzips</p> </blockquote> <p>Der bin ich auch!<br> Dank jquery und diverser Plugins ist es jedoch ein Kinderspiel sowas einzubauen.</p> <p>Deine verlinkte Seite kenne ich und ich hab sie gekonnt verdrängt :). Mein Argument war immer die Semantisch richtige Einbindung von Bildern. Für mich gibt es zwei arten von Bildern.<br> Bilder die zum Content gehören. Diese sollten mit img eingebunden werden.<br> Und Hintergrundbilder (z.B. Button oder Icons). Diese sollten mittels Zitronenlimonade(Sprite)-Image eingebaut werden.</p> <p>Gruß<br> background-image: url("dino/T.rex");</p>