Come mostrare solo alcune parti con i CSS per la stampa?

Question

Ho una pagina con molti dati, tabelle e contenuti. Voglio fare una versione di stampa che mostrerà solo pochissime cose selezionate.

Invece di scrivere un'altra pagina solo per la stampa, stavo leggendo la funzione CSS per "@media print".

Innanzitutto, quali browser lo supportano? Poiché questa è una funzionalità interna, è OK se solo gli ultimi browser lo supportano.

Stavo pensando di etichettare alcuni elementi DOM con una classe "stampabile", e in pratica di applicare "display: none" a tutto tranne quegli elementi con la classe "stampabile". È fattibile?

Come ottengo questo?

EDIT: Questo è quello che ho finora:

<style type="text/css"> 
@media print { 
    * {display:none;} 
    .printable, .printable > * {display:block;} 
} 
</style> 

ma nasconde tutto. Come faccio a rendere visibili quegli elementi "stampabili"?

EDIT: Cercando ora l'approccio negativo

<style type="text/css"> 
@media print { 
    body *:not(.printable *) {display:none;} 
} 
</style> 

Questo sembra buono in teoria, ma non funziona. Forse "non" non supporta il css avanzato ...

Answer 1

Inizio here. Ma in fondo quello che stai pensando è l'approccio corretto.

Grazie, Ora la mia domanda è in realtà divenire: Come faccio ad applicare i CSS per una classe e tutti i suoi DISCENDENTE ELEMENTI? In modo che io possa applicare "display: block" a qualsiasi cosa si trovi nelle zone "stampabili" .

Se un elemento è impostato su display:none;, anche tutti i relativi figli saranno nascosti. Ma in ogni caso. Se si desidera uno stile da applicare a tutti i bambini di qualcos'altro, effettuare le seguenti operazioni:

.printable * { 
    display: block; 
} 

che si applicherebbe lo stile a tutti i bambini della zona "stampabile".

Answer 2

Quasi tutti i browser lo supportano. Potrebbe essere vantaggioso utilizzare l'attributo media sul tag link.

Utilizzare display: none; in alcune delle vostre regole sarebbe un modo appropriato per gestire la situazione.

Answer 3

Un modo semplice:

<style> 
    .print-only{ 
     display: none; 
    } 

    @media print { 
     .no-print { 
      display: none; 
     } 

     .print-only{ 
      display: block; 
     } 
} 
</style> 

Answer 4

sono arrivato qui perché ero curioso di stampa di un grafico generato da chart.js. Volevo solo stampare il grafico direttamente dalla pagina (con un pulsante che fa un 'window.print') senza tutti gli altri contenuti della pagina.

Quindi, mi sono avvicinato utilizzando la tecnica dalla risposta qui: Why can't I override display property applied via an asterisk?.

Devi applicare l'asterisco all'elemento "corpo", non solo da solo. Quindi, utilizzando l'esempio CSS che il PO (Nathan) ha aggiunto alla domanda, ho cambiato in questo:

<style type="text/css"> 
@media print { 
    body * {display:none;} 
    .printable, .printable > * { 
    display: block !important; 
    } 
} 

aggiungendo poi che la classe 'stampabili' al grafico stesso, come in

<canvas id="myChart" class="printable" width="400" height="400"></canvas> 

che ha eliminato tutti gli elementi della pagina sul risultato di stampa, tranne il grafico quando il pulsante 'stampa' viene cliccato (tramite questo):

<script> 
    myChart.render(); 
    document.getElementById("printChart").addEventListener("click",function(){ 
     window.print(); 
    });  
</script> 

Così, forse questo aiuterà tutti coloro che ottiene a questa domanda attraverso i googles.

Answer 5

suggerisco di nascondere elemento che non stampare

Html

<h1 class="no-print" >Welcome Just Screen</h1> 
<div> I want print this section :)</div> 
<div class="no-print">It's display only on screen</div> 

Css

@media print {  
.no-print { 
    display: none; 
}