web-dev-qa-db-fra.com

L'impression CSS @media ne fonctionne pas du tout

Je lutte depuis des heures maintenant pourquoi l'impression @media ne fonctionne pas, je recherche sur Google même sur ce site et rien n'y fait, c'est pourquoi je poste cette question. Je le teste sur Google chrome aperçu avant impression (ctrl p) mais j'ai également imprimé sur la page et il reste vide.

J'ai essayé de créer un fichier CSS séparé et également un style CSS intégré dans la page.

Voici mon code

En-têtes

<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />

HTML

<div id="bruikleenovereenkomst">
    <div id="blo_header">

    </div>

    <div id="blo_side_top"></div>
    <div id="blo_side_bottom"></div>
</div>

Styles normaux CSS

div#bruikleenovereenkomst {
    width:595px;
    height:842px;
    background-color:#fff;
    position:relative;
}

div#blo_header {
    width:100%;
    height:125px;
    background-color:#FBE983;
    z-index:9
}

div#blo_side_top {
    width:57px;
    height:420px;
    background-color:#B6CAE5;
    position:absolute;
    right:0;
    top:0;
    z-index:99;
}

div#blo_side_bottom {
    width:57px;
    height:420px;
    background-image:url(../images/leaflet.png);
    background-repeat:no-repeat;
    position:absolute;
    right:0;
    bottom:0;
    z-index:99;
}

Styles d'impression CSS (print.css) Remarque: le div # bruikleenovereenkomst n'est qu'un bloc noir pour les tests.

@media print{

    body {
        margin:0;
    }

    h1#logo {
        display:none;
    }

    ul#menu {
        display:none;
    }

    div#bruikleenovereenkomst {
        width:100%;
        height:500px;
        background-color:#000;
    }

    div#blo_header {
        display:none;
    }

    div#blo_side_top {
        display:none;
    }

    div#blo_side_bottom {
        display:none;
    }

}

Tout ce que j'obtiens avec l'impression est juste une page blanche.

htmlcssprinting
22
Julez

Si vous utilisez @media print, vous devez ajouter! Important dans vos styles, ou la page utilisera les styles en ligne de l'élément qui ont une priorité plus élevée.

Par exemple.

<div class="myelement1" style="display:block;">My div has an inline style.</div>

Dans @media print, ajoutez! Important et soyez un gagnant

@media print {
   .myelement1, .myelement2 { display: none !important; }
}
28
Richard

Tout d'abord, j'essayerais d'ajouter un espace après l'impression. Peut ne pas faire de différence, mais .....

@media print {
     /*print css here*/
}

Ensuite, l'impression dans les navigateurs ignore généralement les couleurs d'arrière-plan. Essayez d'utiliser 'box-shadow' ....

@media print {
     #bruikleenovereenkomst {
         width: 100%;
         height: 500px;
         box-shadow:  inset 0 0 0 1000px #000;
     }
}

Smashing Magazine a d'excellents conseils: http://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/ Notez qu'ils parlent de l'impression à partir d'un Navigateur Webkit (Chrome ou Safari, par exemple), et tenter de forcer l'imprimante à restituer les couleurs telles qu'elles apparaissent à l'écran en utilisant une requête multimédia distincte .....

@media print and (color) {
   * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }
}

J'espère que cela t'aides!

16
Nostalgia80