Bootstrap print CSS supprime la couleur d'arrière-plan

Lorsque j'utilise bootstrap, il supprime la couleur de fond de tout lorsque j'essaie d'imprimer ma page. Presque tout sur mon site Web utilise des classes d'amorçage, je veux donc éviter beaucoup de CSS manuel en dehors de l'amorçage. J'ai découvert que bootstrap utilise @media printpour supprimer la couleur d'arrière-plan. J'utilise également un thème bootstrap (thème uni) 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 de fond n'est pas supprimée lors de l'impression sans modifier ces 2 fichiers CSS ?

Par exemple : lorsque j'utilise.alert-danger, je veux que ce danger d'alerte soit imprimé tel qu'il est affiché à l'écran, donc serait imprimé comme une boîte rouge.

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


Solution du problème

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

Pourquoi?

Il est vrai que Bootstrap utilise le @media print { * { color: $fff; background: transparent; }}-- mais il y a 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 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 même dans le même navigateur. Imaginez pendant une seconde un site Web avec un arrière-plan très sombre avec du texte blanc - lors de l'impression avec des arrière-plans désactivés, vous aurez l'impression de ne rien imprimer - alors qu'en réalité vous imprimez du texte blanc sur aucun arrière-plan (blanc).

Il n'y avait aucun moyen de tenir compte de toutes les différentes utilisations de la couleur, ils ont donc choisi d'aller en noir (police) et en 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 plus "d'encre/toner" noir (plus économique) et elles n'ont pas besoin de mélanger les couleurs pour faire du noir (donc plus rapide).

N'oubliez pas que Bootstrap est également un "cadre" - donc un point de départ si vous voulez - et félicitations à @mdo et @necolas pour avoir eu la prévoyance de penser à cela en termes d'établissement d'une base de référence prévisible. (Non, je ne les connais pas.)

Non...

Donc, la pensée ici est : "et si nous pouvions" revenir en arrière "et supprimer cela. Malheureusement, CSS ne fonctionne pas comme ça - oui, les navigateurs chargent les déclarations CSS dans une" file d'attente "où la dernière déclaration l'emporte (LIFO, ou last-in -first-out), mais je ne connais pas de moyen de supprimer cette pile. Les développeurs CSS en ajoutent donc simplement plus à la fin...

On pourrait donc supposer que nous pouvons revenir en arrière --- ajouter un * { background-color: inherit }. Le problème est que inheritrevient à la propriété parent, mais *est la racine, donc il n'a rien à revenir. Idem pour initial!

Peut-être!

Il nous reste donc 4 options, aucune d'entre elles n'est ce que vous espériez, mais c'est ce que c'est. Par ordre de difficulté:

  • 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.)

  • Téléchargez la variante CSS de votre choix, recherchez et supprimez le code incriminé. (Pas de CDN à nouveau.)

  • Utilisez getbootstrap.com/customize pour créer une nouvelle variante - excluez "Print media styles" sous "Common CSS". (Encore une fois, pas de CDN)

  • 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 CDN de BS fonctionneront maintenant, mais vous avez alors le problème de l'utilisateur qui n'imprime peut-être pas les arrière-plans et qui a la sortie blanche (jaune dans l'exemple) sur blanc!

    Pour terminer

    Eh bien, j'espère qu'apprendre le pourquoi était au moins une façon pour vous de penser à une solution de contournement. La règle générale que je suis est que lors de l'impression, l'arrière-plan est (devrait être) toujours blanc. Lorsque vous êtes 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 "s'imprimer" ( @media only screen {.hidden-screen { display: none; }})

    Commentaires

    Enregistrer un commentaire

    Posts les plus consultés de ce blog

    Erreur Symfony : "Une exception a été levée lors du rendu d'un modèle"

    j'essaie d'inclure <link href="{{ asset('css/mystyle.css') }}" rel="stylesheet"/> dans mon fichier twig et le rendre. Mais cela me donne une exception PHP non interceptée Twig_Error_Runtime : "Une exception a été levée lors du rendu d'un modèle ("Le fichier manifeste de l'actif "/../public/build/manifest.json" n'existe pas.") ça marche quand j'utilise link href="css/mystyle.css" rel="stylesheet"/> . Voici mon contrôleur: <?php namespace App\Controller; use Symfony\Component\Routing\Annotation\Route; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Component\HttpFoundation\Response; class WelcomeController extends AbstractController { /** * @Route("/", name="welcome") */ public function index() { return $this->render('welcome/index.html.twig'); } } Voici mon modèle de brindille : <!doctype html> ...
    Lire la suite

    Détecter les appuis sur les touches fléchées en JavaScript

    Comment détecter l'appui sur l'une des touches fléchées ? J'en ai profité pour savoir: function checkKey(e) { var event = window.event? window.event: e; console.log(event.keyCode) } Bien que cela fonctionnait pour toutes les autres touches, ce n'était pas le cas pour les touches fléchées (peut-être parce que le navigateur est censé faire défiler ces touches par défaut). Solution du problème event.key === "Flèche droite"... Plus récent et beaucoup plus propre: utilisez event.key . Plus de codes numériques arbitraires ! Si vous transpilez ou savez que vos utilisateurs utilisent tous des navigateurs modernes, utilisez ceci ! node.addEventListener('keydown', function(event) { const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown" }); Gestion détaillée : switch (event.key) { case "ArrowLeft": // Left pressed break; case "ArrowRight": // Right pressed break; c...
    Lire la suite

    Une chaîne vide donne "Des erreurs ont été détectées dans les arguments de la ligne de commande, veuillez vous assurer que tous les arguments sont correctement définis"

    Image
    Sur un serveur SQL 2016, j'ai un travail qui appelle un package SSIS. Ce package se trouve dans un projet dans la SSISDB et a des paramètres. L'un de ces paramètres est un type de chaîne vide par défaut. J'ai exécuté le travail avec la valeur vide pour ce paramètre, et il s'est exécuté avec succès. J'ai ensuite ouvert les propriétés du travail, je suis allé à l'étape qui appelle ce package et je suis entré dans la configuration et j'ai donné une valeur à ce paramètre. J'ai exécuté à nouveau le travail et il s'est exécuté avec succès, et la valeur du paramètre a eu l'effet attendu sur les résultats. Maintenant, je veux modifier le travail et redéfinir le paramètre sur une chaîne vide. En répétant ce que j'ai fait ci-dessus, j'ouvre la configuration et supprime complètement la valeur du paramètre. Lorsque j'essaie ensuite d'enregistrer les propriétés de l'étape du travail, j'obtiens une boîte de dialogue d'erreur a...
    Lire la suite