web-dev-qa-db-fra.com

Imprimer les requêtes multimédia ignorées dans Chrome?

Je crée des styles d'impression spécifiques à l'aide des éléments suivants:

@media print {
/* Styles */
}

Comme nous utilisons SASS, tous les styles sont compilés dans une seule feuille de style, styles.css au moment de l’exécution, qui est déclarée dans le <head> du document comme suit:

<link rel='stylesheet' href='/assets/css/styles.css'>

Maintenant, lorsque j’imprime à partir de chrome (Ctrl + P), mes styles d’impression sont complètement ignorés, mais Firefox (30.0) convient. IE (11) est terrible, mais c'est parce que nous avons beaucoup de panneaux afficher/masquer que IE ne semble pas aimer /

Ne peut pas pour la vie de comprendre ce qui se passe. Si j'émule un support d'impression dans Chrome, les styles sont chargés correctement, c'est lorsque j'essaie réellement d'imprimer que cela ne fonctionne pas. J'ai essayé des tas de choses, en ajoutant, des attributs media=, des guillemets doubles, en changeant l'ordre de href etc. en vain!

Notez que nous n'utilisons plus type car je pensais que vous n'aviez plus besoin de l'utiliser. J'ai essayé d'ajouter ça quand même mais ça ne marche toujours pas!

J'ai même essayé ceci: http://lawrencenaman.com/optimisation/print-media-queries-not-working/ mais cela ne fonctionne toujours pas. Ça me rend folle, des idées?

UPDATE: J'ai donc remarqué que lorsque je clique sur Ctrl + P pour imprimer la page, l'aperçu que je vois semble utiliser certains des styles de la feuille de style d'impression, mais semble tout afficher à l'aide d'une requête de média mobile. Je pense qu'il peut y avoir un conflit avec un point d'arrêt, sera mis à jour lorsque j'en aurai l'occasion.

UPDATE2: Je peux voir que la feuille de style d'impression est en train de se charger en bas. Cela devrait donc théoriquement écraser toutes les autres requêtes de support (du moins celles que j'essaye d'écrire).

htmlcssgoogle-chromeprintingmedia-queries
11
zik

J'ai essayé d'ajouter

@media print {
    * {
        display:none;
    }
}

sur le style.css de l'un de mes sites: cela ne fonctionne pas.

Puis j'ai ajouté

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

après les autres feuilles de style dans la tête et inséré la même règle que ci-dessus (sans @media print {}) dans le fichier print.css. Chrome interprète maintenant la règle et n'affiche rien dans l'aperçu avant impression.

Je suppose que le problème est d'utiliser @media print. Mais je ne sais pas pourquoi chrome se comporte comme ça.

EDIT: Autre solution via JavaScript:

if(/chrome/i.test(navigator.userAgent) {
    document.write('<link rel="stylesheet" href="printChrome.css" media="print">');
}
14
SVSchmidt

Vous pouvez essayer de définir le reste de l'attribut média des feuilles de style en tant que

media="screen" et imprimez la feuille de style sur media="print".

Cela empêchera le navigateur d’appliquer des règles de feuilles de style marquées comme "écran". A travaillé pour moi

7
Bilal Akhtar

J'ai rencontré ce problème également et j'ai découvert que c'était à cause de mes paramètres de rendu dans Chrome. Lors du test de l'aperçu avant impression, j'avais défini mon type de support d'émulation sur "impression". Lorsque je suis allé tester l’impression, j’ai défini mon émulation de support sur "écran". J'aurais dû le définir comme "aucune émulation". Lorsqu'il était affiché à l'écran, l'aperçu avant impression ignorait toutes les requêtes de support d'impression et traitait toujours la page comme s'il s'agissait d'un écran. Quand je l'ai finalement rétabli sur "aucune émulation", il a commencé à se comporter comme prévu.

1
Ben Reeves

Un problème que j'ai eu était que rel='stylesheet' n'était pas défini dans le lien print css. L'ajouter a résolu le problème.

1
Ryan Knutson

Une autre façon d'y parvenir: les erreurs CSS devancent les styles d'impression. Comme nous semblons tous avoir l’impulsion de mettre les styles d’impression en dernier lieu, ils sont plus vulnérables à cela. Lorsque CSS a une erreur, il ne se plaint pas ... il jette simplement le reste de la feuille de style. 

Donner aux styles d'impression leur propre feuille de style - même une simple balise en ligne distincte - peut résoudre ce problème ainsi que l'erreur de spécification de support spécifiée dans le style.

0
Roger Krueger