L'impression multimédia pour chrome ne fonctionne pas

Question

D'accord, juste par le titre, vous devez tous penser que c'est un doublon, mais j'ai essayé plusieurs résultats de StackOverflow, sans succès.

@media print a fonctionné pour Firefox. Quand j'ai essayé d'utiliser Chrome, c'est le bazar.

Beaucoup ont suggéré l'utilisation de @media screen and (-webkit-min-device-pixel-ratio: 0) ce que j'ai fait. Mais Chrome ne lit pas tous les sélecteurs et propriétés.

Par exemple, j'ai :

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    a[href]:after {
        content: none !important;
    }
}

Cela ne supprimera pas la href dans l'aperçu avant impression.

@media print {
    a[href]:after {
        content: none !important;
    }
}

Cela a parfaitement fonctionné pour Firefox. Mais, bien sûr, puisque c'est @media print cela ne fonctionne pas du tout pour Chrome.

J'ai même essayé * { transition: none !important } Beaucoup de gens disent que ça marche, mais ça ne marche toujours pas pour moi.

Bien sûr, j'ai aussi ajouté

<link rel="stylesheet" media="print" href="{% static "css/print.css" %}">

Certains ont même dit "Utiliser JavaScript pour détecter si c'est l'agent utilisateur de Chrome", ce que j'ai essayé aussi, mais j'ai déjà supprimé le code, donc je ne peux pas le poster ici.

Beaucoup de résultats datent d'il y a des années. Je pense que le plus récent date de 2014. Je me demande si c'est parce que Chrome a fait une mise à jour ou quelque chose comme ça, et que c'est pour ça qu'ils fonctionnaient mais plus maintenant.

Ces deux sites sont en quelque sorte les plus populaires, mais je n'ai toujours pas réussi à essayer ce qu'ils ont écrit.

Les requêtes média d'impression ne fonctionnent pas ?

Conseils et astuces pour les feuilles de style d'impression

Quelqu'un peut-il me donner une idée ou sait-il comment le faire fonctionner sur Chrome ?

Merci d'avance (j'espère qu'il ne s'agit pas d'un doublon, car j'ai vu beaucoup de fils de discussion et ils sont tous liés aux réponses que j'ai essayées ci-dessus).

Si quelqu'un a des suggestions sur ce que je devrais faire, faites-le moi savoir.

Answer 1

J'ai résolu le problème d'un système embarqué @print dans le fichier CSS principal de Chrome en supprimant simplement l'élément media dans le balisage :

<link rel="stylesheet" href="css/styles.css">

Sur une autre note, je n'ai personnellement jamais vu l'utilisation de % static … % dans un <link> élément avant. Avez-vous essayé de ne pas l'utiliser ?

Maintenant, si vous voulez lier une feuille de style d'impression séparée, je recommanderais de ne pas inclure une balise media attribut :

<link rel="stylesheet" href="css/print.css">