CSS: URL von Links drucken, aber nicht bei Bildern

[Steve van de Grens (roehrmond)]

Wenn man meine Homepage ausdruckt, sollen die URLs von den meisten Links 
sichtbar sein. Etwa so:

> Siehe detaillierte Anleitung (http://irgendwo.de/anleitungen/12345.html)

Dazu verwende ich diesen Style:

@media only print {
    a:link:after, a:visited:after {
       content:" (" attr(href) ") ";
       font-weight:bold;
    }
}

Jetzt habe ich aber auch eine Menge eingebettete Bilder, die man durch 
Anklicken vergrößern kann, bei denen die URL auf dem Papiert nutzlos 
wäre:

<a href ="platine.jpg"><img src="platine.jpg" style="width:10em"></a>

Wie kann ich dafür sorgen, dass die URL bei solchen Bildern nicht 
ausgedruckt wird?

Zur Zeit habe ich allen betroffenen Bildern einen eigenen Style 
"noPrintLinks" zugewiesen, aber lieber wäre mir eine zentral 
automatische Lösung die ohne extra Code in sämtlichen HTML Dateien 
auskommt.

[Steve van de Grens (roehrmond)]

Mir fällte gerade eine Alternative ein:

Wenn ich alle Bilder per CSS anklickbar machen könnte, ohne <a 
href>...</a> herum bauen zu müssen, wäre die Aufgabe auch elegant 
erfüllt.

[Steve van de Grens (roehrmond)]

Ich habe eine Lösung gefunden, klappt aber leider nicht im Firefox.

@media only print {

    a:after, a:after {
        content:" (" attr(href) ") ";
    }

    a:has(> img):after {
        content:"";
    }
}

[Steve van de Grens (roehrmond)]

Die Zeile mit "a:after, a:after" habe ich falsch editiert. Das gehört 
natürlich nicht doppelt gemoppelt.

[Ralf D. (doeblitz)]

Steve van de Grens schrieb:
> Ich habe eine Lösung gefunden, klappt aber leider nicht im Firefox.
>
>

> @media only print {
> 
>     a:after, a:after {
>         content:" (" attr(href) ") ";
>     }
> 
>     a:has(> img):after {
>         content:"";
>     }
> }
>

Ich würde mal die Spezifizität erhöhen.
Ein "!important" ginge theoretisch zwar auch - aber ich hasse es zur 
Atombombe zu greifen. ;-)

@media only print {

    a:link:after, a:visited:after {
        content:" (" attr(href) ") ";
    }

    a:link:has(> img):after, a:visited:has(> img):after {
        content:"";
    }
}

[Steve van de Grens (roehrmond)]

Die Kombo "a:link:after, a:visited:after" hatte ich vorher, macht aber 
in diesem Fall keinen Unterschied zu einfach "a:after". Das deckt 
offenbar beide Fälle ab.

[Steve van de Grens (roehrmond)]

Ich habe gelesen, dass Firefox Version 121 den "has()" Selektor 
unterstützt. Wenn das wirklich stimmt, dann kann es ja so bleiben:

@media only print {
    a:after {
        content:" (" attr(href) ") ";
    }

    a:has(> img):after {
        content:"";
    }
}

Mal sehen, wann diese Version bei Debian (stable) kommt.