245 votes

Suggestions pour le débogage de feuilles de style impression ?

J'ai récemment travaillé sur une impression de la feuille de style pour un site web, et j'ai réalisé que j'étais à une perte de moyens efficaces pour l'ajuster. C'est une chose d'avoir un rechargement cycle de travail sur l'agencement de l'écran:

  • modifier le code
  • commande-tab
  • recharger

mais que l'ensemble du processus devient beaucoup plus difficile lorsque vous essayez d'imprimer:

  • modifier le code
  • commande-tab
  • recharger
  • imprimer
  • plisser les yeux à imprimer-image de prévisualisation
  • ouvrir le fichier PDF dans l'Aperçu pour une inspection plus poussée

Existe-il des outils que je suis absent dehors sur ici? Ne WebKit inspecteur de l'avoir un "semblant de croire que c'est paginé médias" case à cocher? Est-il de la magie que Firebug (frisson) peut faire?

333voto

rflnogueira Points 1450

Il y a une option pour que dans google Chrome, inspecteur.

  1. Ouvrez l'inspecteur (mac: cmd + alt + j , windows: ctrl + maj + j) (source: google)
  2. Cliquez sur l'icône paramètres (l'engrenage ⚙ icône, en bas à droite)
  3. Sélectionnez "Remplacements", activer l'Émulation si c'est pas déjà fait.
  4. Frapper la touche Echap pour ouvrir le tiroir
  5. Cliquez dans l'Émulation, puis l'Écran. Au bas est le CSS Media

    enter image description here

Ceci devrait faire l'affaire.

78voto

Dawson Points 5490

Je suis en supposant que vous voulez autant de contrôle de la fenêtre imprimées possible sans l'aide d'un code HTML vers PDF approche... l'Utilisation de @media screen pour déboguer - @media print pour la finale css

Les navigateurs modernes peuvent vous donner un aperçu rapide de ce qui se passe au moment de l'impression à l'aide des pouces et des pts en @media query.

@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
    html { width:8.5in; }
    body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
 ...
}

Une fois que votre navigateur affiche "pouces" vous aurez une meilleure idée de ce à quoi s'attendre. Cette approche devrait tous mais à la fin de l'aperçu avant impression de la méthode. Toutes les imprimantes fonctionnent avec pt et in des parts, et en utilisant le @media technique vous permettra de voir rapidement ce qui se passe et s'ajuster en conséquence. Firebug (ou équivalent) sera absolument accélérer ce processus. Lorsque vous avez ajouté vos changements de @media, vous avez tout le code dont vous avez besoin pour un fichier CSS lié à l'aide de media = "print" de l'attribut: il suffit de copier/coller le @media screen règles dans le fichier référencé.

Bonne chance. Le web n'était pas construit pour l'impression. La création d'une solution qui offre l'ensemble de votre contenu, de styles égal à ce qui est vu dans le navigateur peut être impossible à certains moments. Par exemple, un design fluide à une prédominance de 1280 x 1024 public ne se traduit pas toujours facilement pour un agréable et soigné, 8,5 x 11 impression laser.

W3C de référence pour purusal: http://www.w3.org/TR/css3-mediaqueries/

16voto

Capsule Points 3514

Il y a un moyen facile de déboguer votre impression de la feuille de style sans changer de tout attribut de médias dans votre code HTML (bien sûr, comme l'a souligné, il ne résout pas la largeur / pages problème):

  • Utiliser Firefox + Web Developer extension.
  • Le Développeur Web menu, choisissez CSS / Affichage CSS par Type de Média / Imprimer
  • Revenir à Développeur Web menu, choisissez Options / Caractéristiques Persistent

Maintenant, vous visualisez l'impression CSS et vous pouvez recharger votre page indéfiniment. Une fois que vous avez terminé, décochez la case "Persistent" Caractéristiques et de la recharger, vous obtiendrez l'écran CSS de nouveau.

HTH.

5voto

Tatu Ulmanen Points 52098

Il suffit de montrer la feuille de style impression dans votre navigateur à l’aide de `` pendant le débogage. L’affichage de l’aperçu avant impression utilise le même moteur de rendu en mode de navigation normal afin d’obtenir des résultats précis à l’aide de qui.

0voto

Blowsie Points 25114

Si vous avez une fonction d’impression qui réécrit le contenu de la page dans une nouvelle fenêtre avec votre feuille de style d’impression référencée, vous aurez une bien meilleure idée de ce que sa va ressembler sur papier, et vous serez en mesure de déboguer avec les goûts de firebug trop.

Voici un exemple de comment cela peut être fait avec JavaScript / jquery

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X