Lightbox / Lytebox und W3 Fehler zu rel=

[littbarski]

Hallo zusammen,

ich benutze für die Bildanzeige eine ganz schlichte Lightbox, genauer lytebox.css.

Ich erhalte bei der W3 Validierung ganz viele Fehler (und nicht etwa Warnungen), dass das rel-Attribut falsch verwendet wird. Das ist m.E. aber der Lytebox geschuldet (ich habe das durch einen automatischen Bildergalerie-Generator in den Code bekommen).

Meine Frage dabei ist: Wie "schlimm" ist es, wenn der Test da Fehler zeigt? Ist das eher eine akademische Sache, dass man also lieber valide sein sollte, oder kann das "in echt" Anzeigeprobleme verursachen? Wie ist es also generell um das rel= bestellt, was die reale Anzeige in versch. Browsern und Geräten angeht?

Hier der Fehler: Error: Bad value lyteshow[gallery] for attribute rel on element a: The string lyteshow[gallery] is not a registered keyword.

<a href="wgc_media/photos/bild1.jpg" rel="lyteshow[gallery]" title="Logo"><img s...

[Matthias Apsel]

Hallo littbarski,

Meine Frage dabei ist: Wie "schlimm" ist es, wenn der Test da Fehler zeigt? Ist das eher eine akademische Sache, dass man also lieber valide sein sollte, oder kann das "in echt" Anzeigeprobleme verursachen?

Die Frage lässt sich nicht allgemein, das heißt für beliebige Fehler, beantworten.

Wie ist es also generell um das rel= bestellt, was die reale Anzeige in versch. Browsern und Geräten angeht?

Ich denke, das sollte keine Darstellungsfehler verursachen. Im konkreten Fall kannst du das mMn. ignorieren.

<a href="wgc_media/photos/bild1.jpg" rel="lyteshow[gallery]" title="Logo"><img s...

Wenn du ganz sicher gehen willst (und kannst) ersetze jedes Vorkommen von rel durch data-rel und passe das CSS an.

Bis demnächst
Matthias

[Auge]

Hallo

Ich erhalte bei der W3 Validierung ganz viele Fehler (und nicht etwa Warnungen), dass das rel-Attribut falsch verwendet wird. Das ist m.E. aber der Lytebox geschuldet …

Meine Frage dabei ist: Wie "schlimm" ist es, wenn der Test da Fehler zeigt? Ist das eher eine akademische Sache, dass man also lieber valide sein sollte, oder kann das "in echt" Anzeigeprobleme verursachen? Wie ist es also generell um das rel= bestellt, was die reale Anzeige in versch. Browsern und Geräten angeht?

Hier der Fehler: Error: Bad value lyteshow[gallery] for attribute rel on element a: The string lyteshow[gallery] is not a registered keyword.

<a href="wgc_media/photos/bild1.jpg" rel="lyteshow[gallery]" title="Logo"><img s...

Das Attribut „rel“ soll Beziehungen zwischen den verlinkten Dokumenten verdeutlichen. Es nimmt nur festgelegte Schlüsselworte auf. Die sind im Wiki für das Element link aufgelistet, gelten aber genauso auch für das Element a. Der von Lytebox verwendete Wert gehört, wie die Meldung sagt, nicht zu den erlaubten Werten. Ich weiß ja nicht, was der/die Entwickler mit der Verwendung von rel bezwecken, aber vermutlich würde es genauso gut eine Klasse machen, die das Dokument auch nicht invalidisieren würde.

Mit sehr großer Wahrscheinlichkeit kannst du davon ausgehen, dass die Darstellung davon unbeeinflusst bleibt. Die Wahrscheinlichkeit, dass eine CSS-Regel auf a[rel] matcht, ist sehr gering. Dennoch solltest du den Entwicklern auf die Füße treten, damit die ihr Skript entsprechend umbauen. Oder du wechselst das Skript.

Natürlich mit der Gefahr, vor dem nächsten eingeschleppten Fehler zu stehen. ;-)

Tschö, Auge

[1unitedpower]

Das Attribut „rel“ soll Beziehungen zwischen den verlinkten Dokumenten verdeutlichen. Es nimmt nur festgelegte Schlüsselworte auf. Die sind im Wiki für das Element link aufgelistet, gelten aber genauso auch für das Element a.

Ups, da wird noch auf HTML4-Spec verwiesen. Die Schlüsselworte haben sich in HTML5 geändert. Weiterhin gelten unterschiedliche Regeln für <link>- und <a>-Elemente. https://www.w3.org/TR/html5/links.html#linkTypes

[Matthias Apsel]

Hallo 1unitedpower,

Ups, da wird noch auf HTML4-Spec verwiesen. Die Schlüsselworte haben sich in HTML5 geändert. Weiterhin gelten unterschiedliche Regeln für <link>- und <a>-Elemente. https://www.w3.org/TR/html5/links.html#linkTypes

Danke für den Hinweis. Darf ich dir ein <I> geben?

Bis demnächst
Matthias

[1unitedpower]

Danke für den Hinweis. Darf ich dir ein <I> geben?

Gerne. Was möchtest du mir geben? Ich habe in meiner Verbortheit erstmal in der HTML5 Spec zum i-Element nachgelesen, aber daraus wurde ich auch nicht schlauer :P

[Christian Kruse]

Hallo 1unitedpower,

Danke für den Hinweis. Darf ich dir ein <I> geben?

Gerne. Was möchtest du mir geben? Ich habe in meiner Verbortheit erstmal in der HTML5 Spec zum i-Element nachgelesen, aber daraus wurde ich auch nicht schlauer :P

Eine <I>nitiativstrafe ;-) LG,
CK

[1unitedpower]

Eine <I>nitiativstrafe ;-)

Ich kümmere mich bei Zeiten drum

[littbarski]

Hallo Auge und Matthias,

vielen Dank für eure Einschätzung, die mich fürs erste mal beruhigt. Aber natürlich fände ich es auch schön, wenn da keine Fehler auftauchen würden. Ich habe mir mal die Herstellerseite angesehen: Lytebox

Dort steht, dass ab V5.1 dann class= statt rel= verwendet wurde. Leider nutze ich V3.22 und habe JS und CSS sehr ausgefeilt und lange (Tage) so bearbeitet, bis es mir gefiel. Daher bekomme ich nun ein Riesen-Durcheinander, wenn ich die neue 5.x verwende (es scheint das css dann nicht mehr richtig zu ziehen).

Ich würde also gerne die (auch schlankere) 3.22 weiternutzen und nur dort Änderungen vornehmen. Matthias: Du meintest etwas von Änderung von rel zu data-rel. Im CSS taucht "rel" nirgendwo auf, nur im JS. Gehe ich richtig in der Annahme, dass die von dir vorgeschlagene Änderung dort aber nicht so einfach ist? (ich habe es versucht, im JS zu ändern, aber ohne Erfolg).

[Matthias Apsel]

Hallo littbarski,

Ich würde also gerne die (auch schlankere) 3.22 weiternutzen und nur dort Änderungen vornehmen. Matthias: Du meintest etwas von Änderung von rel zu data-rel. Im CSS taucht "rel" nirgendwo auf, nur im JS. Gehe ich richtig in der Annahme, dass die von dir vorgeschlagene Änderung dort aber nicht so einfach ist? (ich habe es versucht, im JS zu ändern, aber ohne Erfolg).

auch nicht in der Form [rel= ?

Änderungen im JS sind sicher auch nicht weltbewegend. Müsste man sich anschauen.

Bis demnächst
Matthias

[littbarski]

auch nicht in der Form [rel= ?

Änderungen im JS sind sicher auch nicht weltbewegend. Müsste man sich anschauen.

Hallo Matthias,

also ich finde in den beiden CSS-Dateien 0 Ergebnisse mit den Buchstaben rel :). Auch nicht [rel. In der JS Datei aber schon einige (16 Ergebnisse).

Hier liegen die Dateien: Lytebox V3.22

Wenn du also durchs Reinschauen gleich sieht, ob man das ändern kann, gib mir gerne Bescheid. Das soll aber - wirklich - kein Arbeitsauftrag sein. Vielmehr könntest du mir sagen, ob ich das selbst mit Suchen-Ersetzen in irgendeiner Form hinkriegen kann (rel zu data-rel oder aber rel zu class).

[Matthias Apsel]

Hallo littbarski,

Wenn du also durchs Reinschauen gleich sieht, ob man das ändern kann, gib mir gerne Bescheid. Das soll aber - wirklich - kein Arbeitsauftrag sein. Vielmehr könntest du mir sagen, ob ich das selbst mit Suchen-Ersetzen in irgendeiner Form hinkriegen kann (rel zu data-rel oder aber rel zu class).

Wenn du alle ('rel') zu ('data-rel') ersetzt, sollte das JS immer noch funktionieren. Das kann man ja einfach ausprobieren und ggf. auch wieder rückgängig machen.

Nimm einen Editor, der alle Vorkommen in einem Rutsch ersetzen kann.

Das Verwenden der aktuellen Version ist aber mMn. der bessere und sicherere Weg.

Mit dem Ersetzen von ('rel') zu ('class') wäre ich sehr vorsichtig, das würde ich nicht machen.

Bis demnächst
Matthias

[littbarski]

Wenn du alle ('rel') zu ('data-rel') ersetzt, sollte das JS immer noch funktionieren. Das kann man ja einfach ausprobieren und ggf. auch wieder rückgängig machen.

Hallo wieder,

danke - ja, das habe ich nun gemacht und das JS klappt noch. Ich muss das aber nun noch vollständig in der HTML-Datei anpassen und dann nochmal ausgiebig testen. Der erste Eindruck ist aber, dass es funktioniert. Toll!

(natürlich wäre es optimal, die aktuellste Version zu verwenden, aber die ist auch schon wieder von 2012, also auch nicht ganz neu, dann bleibe ich eben bei der noch älteren, wenn die Tests ok sind. Und ich habe wie erwähnt viel Zeit ins CSS investiert, was nur mit der alten Version geht).

[Auge]

Hallo

[Auf der Herstellerseite des Skripts] steht, dass ab V5.1 dann class= statt rel= verwendet wurde. Leider nutze ich V3.22 und habe JS und CSS sehr ausgefeilt und lange (Tage) so bearbeitet, bis es mir gefiel. Daher bekomme ich nun ein Riesen-Durcheinander, wenn ich die neue 5.x verwende (es scheint das css dann nicht mehr richtig zu ziehen).

Das hört sich so an, als hättest du erst in der letzten Zeit diese Arbeit in die Seite gesteckt. Falls das so sein sollte, stellt sich mir die Frage, warum du dann nicht gleich die aktuelle Version des Skripts zur Grundlage gemacht hast. Wenn meine Annahme nicht richtig ist, fällt diese Frage natürlich weg. Aber …

Ich würde also gerne die (auch schlankere) 3.22 weiternutzen und nur dort Änderungen vornehmen.

…, bitte vergiss Folgendes nicht.

Neue Versionen einer Software enthalten im Normalfall nicht nur neue Funktionen, sondern auch Fehlerbehebungen für vorhandene Funktionen und Korrekturen für Sicherheitslücken ^[1]. Es liegt also auch in deinem Interesse, mit dem Umstieg auf die aktuelle Version ^[2] eventuell vorhandene und dir unbekannte Fehler und Lücken loszuwerden. Du solltest dich kurzfristig mit dem Aufbau und den vorhandenen Selektoren der aktuellen Version und auch anderer aktuell gepflegter Skripte beschäftigen, um dir die Möglichkeit zu schaffen, ad hoc darauf umsteigen zu können.

Tschö, Auge

---

1. Zwischen der von dir verwendeten Version 3.22 und der aktuellen Version 5.5 gab es acht weitere Versionen. ↩︎

2. Auch wenn die selbst schon fast vier Jahre alt ist. ↩︎

[littbarski]

Das hört sich so an, als hättest du erst in der letzten Zeit diese Arbeit in die Seite gesteckt. Falls das so sein sollte, stellt sich mir die Frage, warum du dann nicht gleich die aktuelle Version des Skripts zur Grundlage gemacht hast. Wenn meine Annahme nicht richtig ist, fällt diese Frage natürlich weg.

Hi Auge,

danke für deine Überlegungen - meine Seite gibt es seit 2011 und ich habe damals mit einem automatischen Bildergalerie-Generator angefangen, der auf Lytebox aufgebaut hat. Erst seit einem Jahr etwa habe ich so viel Zeit für die Website, dass ich mich in die Technik eindenken kann, und erst seitdem weiß ich überhaupt, dass man das auch ohne den Generator selbst in HTML schreiben kann :). Von daher ist meine umfangreiche Anpassung an CSS und JS doch schon älter. Und ich habe derzeit nun keine W3-Fehler mehr und mobil ist die Seite ja inzwischen auch. Daher bin ich b.a.w. zufrieden. Eine einfache Lightbox sollte ja auch nicht so schnell veralten. Natürlich wäre es mir lieber, die 5er Version zu nehmen, aber dann ist mein ganzes Design futsch leider.