Firebug ist ein hervorragendes Tool zum Anzeigen eines Bildschirmmedien-CSS für ein HTML-Element. Gibt es jedoch auch eine Möglichkeit, das Druckmedien-CSS anzuzeigen? Oder gibt es ein anderes Tool, um das Printmedien-CSS anzuzeigen?
68
Was ist mit der Web Developer Toolbar?
https://addons.mozilla.org/en-US/firefox/addon/60
Wenn installiert, gehen Sie zu CSS -> CSS nach Medientyp anzeigen -> Drucken
quelle
Firefox benötigt jetzt keinen Firebug.
Shift+F2
media emulate print
Geben Sie
media reset
ein, um zur Standardansicht zurückzukehren.quelle
Verwenden Sie das Web Developer-Plug-In. Anschließend können Sie im CSS-Menü auswählen, auf welchen Medien die Seite angezeigt werden soll.
quelle
Vielleicht möchten Sie einen Blick auf die Symbolleiste des Webentwicklers werfen - hier können Sie auswählen, welches CSS Sie sehen möchten. In Verbindung mit Firebug sollte es möglich sein, das Printmedien-CSS zu sehen.
quelle
In Firefox (und einigen anderen Browsern) können Sie mithilfe der Seitenansicht eine statische Anzeige des Druckstylesheets anzeigen. Es ist bei weitem nicht so nützlich wie die Symbolleiste für Webentwickler, kann Ihnen aber auch helfen, zu verstehen, was gedruckt werden soll.
quelle
Beachten Sie, dass Sie möglicherweise
@media print
CSS sehen, wenn Sie es nicht erwarten.Wie SO verwendet :
... und daher könnte man erwarten, dass das CSS-Panel in Firebug irgendwie zeigt:
Stattdessen wird das CSS so angezeigt, als ob das
@media print
tatsächlich aktiv ist, wie z.(Siehe auch den zugehörigen Problembericht : Das CSS-Panel verfügt nicht über eine @ media-Benutzeroberfläche .)
quelle
Edit 2 Nach der Lektüre Arjan ‚s Antwort , ich merke , dass diese Lösung nicht richtig Websites nicht ansprechen (oder Missbrauch) die
@media print
CSS. (Siehe Beispiel unten.) Aber ich denke, diese Lösung gilt immer noch als "nicht perfekter, schneller und schmutziger Trick", vor allem für Code, den Sie geschrieben haben und von dem Sie vorher wissen, dass er diesen nicht hat .Mit Firebug können Sie auch die Tags
<link rel="stylesheet" type="text/css" ...>
und<style>
nach Belieben bearbeiten .Sie können beispielsweise ein Original wechseln
<link rel="stylesheet" type="text/css" media="print">
zu
<link rel="stylesheet" type="text/css" media="screen">
und der Browser wird es anwenden. Sie müssen auch die Nur-Bildschirm-Deaktivierungen deaktivieren.
Dies ist natürlich nur dann nützlich, wenn Sie nur einige Seiten mit sehr wenigen Stylesheet-Links schnell überprüfen möchten, aber zumindest keine zusätzlichen Plugins installieren müssen.
Bearbeiten 1 Dieser Trick schlägt vor, dass ich Javascript verwende, um dies zu automatisieren ...
(Haftungsausschluss: Der Einfachheit halber verwende ich JQuery. Ich bin kein Javascript-Experte.)
// Save all stylesheet links allStylesheets = $('link[rel="stylesheet"], style'); // Save the print-stylesheet links printStylesheets = $('link[media*="print"], link[media*="all"], style[media*="print"], style[media*="all"]'); // Set all stylesheet medias to something 'exotic' if (null != allStylesheets) { allStylesheets.attr("media", "aural"); } // Switch the print-stylesheet medias to 'screen' if (null != printStylesheets) { printStylesheets.attr("media", "screen"); }
Beachten Sie, dass die Standardeinstellung
media
ist"screen"
( w3.org - Attribut media ). Dies kann in einer Schaltfläche verwendet werden, um eine Seitenvorschau anzuzeigen. Der einzige Nachteil ist, dass Sie die Seite neu laden müssen, um die ursprüngliche Ansicht wiederherzustellen.Wie oben erwähnt, funktioniert diese Lösung nicht mit HTML-Code wie diesem, da das Styling innerhalb des
@media print
vom Browser nicht angewendet wird:<html> <head> <title>Hello world</title> <style type="text/css" media="all"> @media print { h1 { color: red; }} </style> </head> <body> <h1>Hello world</h1> </body> </html>
quelle
Die Symbolleiste für Webentwickler hat jedoch einen großen Nachteil beim CSS-Debugging: Jedes Mal, wenn Sie die Seite aktualisieren, wird sie auf das Bildschirm-Stylesheet zurückgesetzt.
Was ich heutzutage normalerweise mache, ist, das Medium des Druck-Stylesheets während der Entwicklung vorübergehend auf Bildschirm zu schalten und es dann zurückzuschalten, bevor ich live gehe.
quelle