web-dev-qa-db-fra.com

Bootstrap print CSS supprime la couleur de fond

Lorsque j'utilise bootstrap, cela supprime la couleur d'arrière-plan lorsque j'essaie d'imprimer ma page . Presque tout sur mon site Web utilise des classes d'amorçage afin que je veuille éviter beaucoup de CSS manuelles en dehors de bootstrap . Nous avons découvert que bootstrap utilise @media print pour supprimer la couleur de fond. J'utilise également un thème bootstrap (theme united) qui supprime également la couleur d'arrière-plan.

theme-united.css

@media print
*, *:before, *:after {
    background: rgba(0, 0, 0, 0) !important;
    color: rgb(0, 0, 0) !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    text-shadow: none !important;

bootstrap.min.css

@media print
*, :after, :before {
    color: rgb(0, 0, 0)!important;
    text-shadow: none!important;
    background: 0 0!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;

Existe-t-il un moyen de s’assurer que la couleur d’arrière-plan n’est pas supprimée lors de l’impression sans éditer ces 2 fichiers CSS?

Par exemple: Lorsque j'utilise .alert-danger, je souhaite que ce message d'alerte soit imprimé tel qu'il est affiché à l'écran, il devrait donc être imprimé sous forme de boîte rouge.

Voir JSFiddle: http://jsfiddle.net/7mtk7wrh/

htmlcsstwitter-bootstrapcss3
18
TheatreOfSouls

Malheureusement, il n’ya pas de bonne réponse à votre question - mais peut-être que si vous comprenez pourquoi, alors vous pouvez choisir une voie à suivre.

Pourquoi?

Il est vrai que Bootstrap utilise le @media print { * { color: $fff; background: transparent; }} - mais il existe une raison très solide. Ce morceau de code est en fait dérivé du projet normalizer.css (par un collège de @ mdo, @necolas): son intention est de faire en sorte que tous les navigateurs se comportent de la même manière. Ces gars-là ont choisi de "normaliser" le CSS pour une très bonne raison:

Avec la plupart des navigateurs, on peut choisir d'inclure ou d'exclure la couleur d'arrière-plan, de sorte que le comportement n'est pas standard sur le même navigateur. Imaginez, pour une seconde, un site Web avec un arrière-plan très sombre avec du texte blanc - lorsque vous imprimez avec des arrière-plans désactivés, vous aurez l'impression que vous n'imprimez rien - alors qu'en réalité, vous imprimez du texte blanc sur un arrière-plan (blanc).

Il n'y avait aucun moyen de prendre en compte toutes les utilisations différentes de la couleur, ils ont donc choisi de passer au noir (police de caractères) et au blanc (arrière-plan, en fait "transparent"). Même le choix du noir a été bien pensé - c’est une meilleure solution d’impression, car la plupart des imprimantes couleur ont davantage «encre/toner» noir (plus économique) et qu’elles n’ont pas besoin de mélanger les couleurs pour obtenir du noir (plus rapidement).

Rappelez-vous que Bootstrap est également un "cadre" - donc un point de départ si vous voulez - et félicitons @ mdo et @necolas pour avoir eu la clairvoyance de penser à cela en termes d’établissement d’une base prévisible. _ {(Non, je ne les connais pas.)}

Nan...

Nous pensons donc: "Et si nous pouvions" revenir en arrière "et désélectionner ceci. Malheureusement, CSS ne fonctionne pas comme cela - oui, les navigateurs chargent les déclarations CSS dans une" file "où la dernière déclaration gagne (LIFO, ou last-in -first-out), mais je ne suis pas au courant d'un moyen de supprimer cette pile. Les développeurs CSS ajoutent donc plus à la fin ...

Donc, on pourrait supposer que nous pouvons revenir en arrière --- ajoutez un * { background-color: inherit }. Le problème est que inherit revient à la propriété parent, mais * est la racine, donc il n’a rien à récupérer. Même chose pour initial! 

Peut être!

Il nous reste donc 4 options, aucune d’elles n’est ce que vous espériez, mais c’est ce qu’elle est. En ordre de difficulté:

  1. Téléchargez la source BS (less ou sass), modifiez le code incriminé, puis compilez-le. (Vous devez utiliser une copie locale, les CDN ne fonctionneront pas.)
  2. Téléchargez la variante CSS de votre choix, recherchez et supprimez le code incriminé. (Pas encore de CDN.)
  3. Utilisez getbootstrap.com/customize pour créer une nouvelle variante - excluez les "styles de média d'impression" sous "CSS commun". (Encore une fois, pas de CDN)
  4. Remplacez les éléments spécifiques dont vous souhaitez imprimer la couleur: par exemple.
    @media print {
      .alert-danger {
        color: yellow !important;
        background-color: red !important;
      }
    }

Les copies de BS de CDN vont maintenant fonctionner, mais vous rencontrez le problème suivant: l’utilisateur n’imprime probablement pas d’arrière-plan et affiche la sortie blanche (jaune dans l’exemple) sur blanc!

Finalement

J'espère que le fait d'apprendre le pourquoi était au moins une façon de penser à une solution de contournement. La règle générale que je suis est que lors de l'impression, le fond est (devrait être) toujours blanc. Lorsque contraint de cette façon, vous commencez à penser à de nouvelles idées, comme des icônes d’exclamation autour du texte qui ne font que "imprimer" (@media only screen { .hidden-screen { display: none; }}).

29
Vino

Bien que l'utilisation de !important soit généralement mal vue, il s'agit du code incriminé dans bootstrap.css

.table td,
.table th {
    background-color: #fff !important;
}

Supposons que vous essayez de styler le code HTML suivant:

<table class="table">
    <tr class="highlighted">
      <th>Name</th>
      <th>School</th>
      <th>Height</th>
      <th>Weight</th>
    </tr>
</table>

Pour remplacer ce CSS, placez la règle suivante (plus spécifique) dans votre feuille de style:

@media print {
    table tr.highlighted > th {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

Cela fonctionne car la règle est plus spécifique que la valeur par défaut d'amorçage.

2
The Aelfinn

j'ai également fait face au même problème .. je viens de supprimer le bootstrap.min.css de mon code, puis cela fonctionne pour moi.

1
ihsan

Pour que cela fonctionne en supprimant ces lignes du fichier bootstrap.css, il existe peut-être une solution jQuery mais cela est beaucoup plus compliqué que d’effacer quelques lignes. : /

Ou vous pouvez utiliser un plugin appelé html2canvas tel que présenté dans ce jsfiddle

1
odedta

@ Vino a très bien expliqué. Je faisais également face à un problème parce que bootstrap.css rend le fond transparent avec force. J'ai donc personnalisé l'élément spécifique dans mon fichier CSS personnalisé. N'oubliez pas de changer <.element> avec l'élément où vous voulez que le fond coloré soit transparent.

@media print {
	 .element{
		background-color: white !important;
		box-shadow:  inset 0 0 0 1000px #fff !important; /* workaround for IE 11*/
	 }
 }

0
J Singh

Je me suis retrouvé ici avec le même problème, mais j'ai trouvé que Chrome était livré avec une option d'affichage graphique d'arrière-plan dans la boîte de dialogue Imprimer, avec plus de paramètres qui faisaient exactement cela! Aucune modification de Bootstrap (4) requise.

0
Davies-Barnard