CSS: URL von Links drucken, aber nicht bei Bildern

Monk Gast #7565539
Lesenswert?
• ▲
▼

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:

1
 
@media only print {

2
 
    a:link:after, a:visited:after {

3
 
       content:" (" attr(href) ") ";

4
 
       font-weight:bold;

5
 
    }

6
 
}

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:

1
 
<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.

Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
Beitrag #7565748 wurde von einem Moderator gelöscht.
Ralf D. #7566219
Lesenswert?
• ▲
▼

Steve van de Grens schrieb:

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

1
 
> @media only print {

2
 
> 

3
 
>     a:after, a:after {

4
 
>         content:" (" attr(href) ") ";

5
 
>     }

6
 
> 

7
 
>     a:has(> img):after {

8
 
>         content:"";

9
 
>     }

10
 
> }

11
 
>

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

1
 
@media only print {

2
 


3
 
    a:link:after, a:visited:after {

4
 
        content:" (" attr(href) ") ";

5
 
    }

6
 


7
 
    a:link:has(> img):after, a:visited:has(> img):after {

8
 
        content:"";

9
 
    }

10
 
}
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Monk Gast #7567905
Lesenswert?
• ▲
▼

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

1
 
@media only print {

2
 
    a:after {

3
 
        content:" (" attr(href) ") ";

4
 
    }

5
 


6
 
    a:has(> img):after {

7
 
        content:"";

8
 
    }

9
 
}

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

Antwort Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt. Bitte hier nur auf die ursprüngliche Frage antworten, für neue Fragen einen neuen Beitrag erstellen.

Formatierung
  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] – Link zu einem Artikel
  • Verweis auf einen anderen Beitrag: Rechtsklick auf dessen Beitrags-ID (#8078628), „Adresse kopieren“, in den Text einfügen

Mehr zur Formatierung

Längeren Sourcecode als Anhang, nicht in den Text. JPG nur für Fotos und Scans; Zeichnungen und Screenshots als PNG oder GIF. Siehe Bildformate.

Dein Name und deine E-Mail-Adresse

Schon registriert? Anmelden

Wird nicht angezeigt. Wir schicken dir einen Link; sobald du damit bestätigst, erscheint dein Beitrag.

Mit dem Abschicken legst du einen kostenlosen Account an und erkennst die Nutzungsbedingungen und die Datenschutzerklärung an.