Ich habe kürzlich an einem Druck-Stylesheet für eine Website gearbeitet und festgestellt, dass ich keine effektiven Möglichkeiten zur Optimierung hatte. Es ist eine Sache, einen Nachladezyklus für die Arbeit am Bildschirmlayout zu haben:
- Code ändern
- Befehlsregisterkarte
- neu laden
Aber dieser ganze Prozess wird viel schwieriger, wenn Sie versuchen zu drucken:
- Code ändern
- Befehlsregisterkarte
- neu laden
- Schielen Sie auf das Bild mit der Druckvorschau
- Öffnen Sie das PDF in der Vorschau zur weiteren Überprüfung
Gibt es Werkzeuge, die ich hier verpasse? Verfügt der Inspektor von WebKit über das Kontrollkästchen "Dies ist ein ausgelagertes Medium"? Gibt es etwas Magie, die Firebug ( Schauder ) bewirken kann?
Antworten:
Dafür gibt es im Chrome-Inspektor eine Option.
Wählen Sie dann Medien in der Emulationsschublade aus und aktivieren Sie das Kontrollkästchen CSS-Medien .
Dies sollte den Trick tun.
Update: Die Menüs haben sich in DevTools geändert. Sie finden es jetzt, indem Sie oben rechts auf das Menü "Drei Punkte" klicken> Weitere Tools> Rendereinstellungen> Medien emulieren> Drucken.
Quelle: Google DevTools-Seite *
quelle
32.0.1700.14 beta-m Aura
fehlt "Emulate CSS media [print]" :(Ich gehe davon aus, dass Sie so viel Kontrolle wie möglich über das gedruckte Fenster haben möchten, ohne einen HTML-zu-PDF-Ansatz zu verwenden ... Verwenden Sie den @ media-Bildschirm zum Debuggen - @ media-Druck für das endgültige CSS
Moderne Browser können Ihnen mithilfe von Zoll und Punkt in a ein schnelles Bild davon geben, was zur Druckzeit passieren wird
@media query
.Sobald Ihr Browser "Zoll" anzeigt, haben Sie eine bessere Vorstellung davon, was Sie erwartet. Dieser Ansatz sollte die Druckvorschau-Methode so gut wie beenden. Alle Drucker arbeiten mit
pt
undin
Einheiten, und mit der @ media-Technik können Sie schnell sehen, was passieren wird, und entsprechend anpassen. Firebug (oder gleichwertig) beschleunigt diesen Prozess absolut. Wenn Sie Ihre Änderungen zu @media hinzugefügt haben, verfügen Sie über den gesamten Code, den Sie für eine verknüpfte CSS-Datei mithilfe desmedia = "print"
Attributs benötigen. Kopieren Sie einfach die @ media-Bildschirmregeln in die Datei, auf die verwiesen wird.Viel Glück. Das Web wurde nicht für den Druck erstellt. Es kann manchmal unmöglich sein, eine Lösung zu erstellen, die all Ihre Inhalte und Stile liefert, die denen im Browser entsprechen. Zum Beispiel lässt sich ein flüssiges Layout für ein überwiegend 1280 x 1024 großes Publikum nicht immer leicht in einen schönen und ordentlichen 8,5 x 11-Laserdruck übersetzen.
W3C-Referenz zur Reinigung: http://www.w3.org/TR/css3-mediaqueries/
quelle
In Chrome 48 können Sie Druckstile auf der Registerkarte Rendern debuggen .
Klicken Sie oben rechts im Inspektor und in den Rendereinstellungen auf das Menüsymbol .
Bearbeiten
Für Chrome 58 wurde der Speicherort in Web Inspector> Menü> Weitere Tools> Rendern geändert
quelle
In Chrome v41 ist es da, aber an einer etwas anderen Stelle.
quelle
Es gibt eine einfache Möglichkeit, Ihr Druck-Stylesheet zu debuggen, ohne ein Medienattribut in Ihrem HTML-Code zu ändern (wie bereits erwähnt, wird das Problem mit Breite / Seiten natürlich nicht gelöst):
Jetzt sehen Sie das gedruckte CSS und können Ihre Seite auf unbestimmte Zeit neu laden. Wenn Sie fertig sind, deaktivieren Sie "Features beibehalten" und laden Sie neu. Sie erhalten erneut das CSS des Bildschirms.
HTH.
quelle
Die Benutzeroberfläche von Chrome ist ab Version 53 wieder anders.
Ich muss diese Funktion nicht oft verwenden, aber wenn ich das tue, brauche ich ewig, um herauszufinden, wohin das Chrome-Team sie verschoben hat, seit ich das letzte Mal Zyklen gebrannt habe, um sie aufzuspüren.
Beachten Sie, dass es sich um das Menü ... im Bereich " Dev Tools" und nicht um das Menü ... im Bereich "Chrome Browser" handelt.
Jetzt scrollen Sie in der Rendering - Seite. Es ist oft unter der Falte.
quelle
Nach der Antwort von rflnogueira sehen die aktuellen Chrome-Einstellungen (40.0. *) Wie folgt aus:
quelle
Zeigen Sie beim Drucken einfach das Druck-Stylesheet in Ihrem Browser an
media="screen"
. Die Druckvorschau-Ansicht verwendet dieselbe Rendering-Engine wie der normale Browsermodus, sodass Sie damit genaue Ergebnisse erzielen können.quelle
2019 - Aktualisierte Anweisungen
option
+command
+i
F12
Klicken Sie auf die kleinen 3 Punkte,
customize and control devTools
Wählen
More Tools
Wählen
Rendering
Scrollen Sie nach unten zu
Emulate CSS Media
Wählen Sie
print
aus dem Abwärtspfeilquelle
Wenn Sie über eine Druckfunktion verfügen, mit der der Inhalt der Seite in ein neues Fenster umgeschrieben wird, auf das Ihr Druckstilblatt verweist, erhalten Sie eine bessere Vorstellung davon, wie es auf Papier aussehen wird, und können es debuggen mit solchen wie Firebug auch.
Hier ist ein Beispiel, wie dies mit JavaScript / jquery gemacht werden kann
quelle
media="print"
und diemedia="screen"
jeweils für Ihre Stylesheets und benutzen Sie einfach das Browser - Menü oder Tastenkombinationen aufzurufen Druckvorschau. (In diesem Fall unterscheidet es sich nicht vom Öffnen eines Popups.) Wenn Sie nur debuggen, wenden Sie dasmedia="screen"
Attribut auf Ihre Druckstile an, bis Sie mit dem Debuggen fertig sind.In DreamWeaver gibt es eine Symbolleiste, die praktisch jede gewünschte Renderoption anzeigt: Bildschirm, Druck, Handheld-Medien, Projektionsbildschirm, TV-Medien, Desitn Time Style Sheets usw. Dies verwende ich besonders, weil es: sofort eine Vorschau mit 1 anzeigt einmaliger Knopfdruck.
quelle
Ich benutze Makros, um wiederholt Tastendruck und Mausklicks zu senden. Unter Windows ist AutoHotKey eine großartige Software, und unter OS X können Sie über Automator eine Art alternatives AHK für OsX lesen .
Unter Windows (ersetzen Sie Strg durch Cmd unter OS X) "Strg-s / zum FX-Fenster wechseln, wo immer es in der Liste der geöffneten Fenster steht / Strg-r", gebunden an 1 nicht verwendeten Schlüssel, vermeidet Frustration durch uninteressante Aufgaben und rettet letztendlich meine Arme von RSI :)
quelle