Yep.
Werfen wir einen Blick darauf, wie das in verschiedenen Browsern funktioniert. Beachten Sie jedoch das Datum dieses Blogbeitrags. Diese Dinge ändern sich im Laufe der Zeit, also wenn hier etwas falsch ist, lassen Sie es uns wissen und wir können es aktualisieren.
In Firefox…
Es ist ein kleiner Knopf in den Entwicklertools. So einfach!
- Öffnen Sie die Entwicklertools (Befehl+Option+i)
- Gehen Sie zum Tab „Inspektor“
- Klicken Sie auf das kleine Seitensymbol
In Chrome und Edge…
Es ist ein bisschen seltsamer, denke ich, aber es ist immer noch ziemlich einfach, das in den Entwicklertools zu tun.
- Öffnen Sie die Entwicklertools (Befehl+Option+i)
- Wenn Sie nicht den seltsamen Spezialbereich unten haben, drücken Sie die Escape-Taste
- Klicken Sie auf das Menüsymbol, um die zu öffnenden Tabs auszuwählen
- Wählen Sie den Tab „Rendering“
- Scrollen Sie zum Ende der Optionen im Tab „Rendering“
- Wählen Sie unter **CSS-Medien emulieren** die Option **Drucken**
In Safari…
Safari hat einen kleinen Knopf, der Firefox sehr ähnlich ist, aber anders aussieht.
- Öffnen Sie die Entwicklertools (Befehl+Option+i)
- Gehen Sie zum Tab „Inspektor“
- Klicken Sie auf das kleine Seitensymbol
In Safari 12.1.2 (auf macOS 10.14.6/Mojave) gehen Sie zu den Entwicklertools (Web Inspector) und dann zum Bereich/Tab „Elemente“ und suchen Sie nach dem „Drucker“-Icon (oben rechts).
Vor ein paar Jahren habe ich diese Funktion in Chrome intensiv genutzt, um Druckstile zu emulieren. Ich kann sagen, dass dies beim Drucken nicht korrekt übertragen wird. Es ist schon eine Weile her, seit ich mich mit Druckstilen beschäftigen musste, aber meiner Erfahrung nach musste man immer noch drucken, um sicherzustellen, dass es richtig ist.
Die Probleme, auf die ich gestoßen bin, betrafen hauptsächlich Bilder, Text und Abstände. Ich bin mir nicht sicher, ob die Druckemulation Media Queries erfasst hat, die beim Drucken generell ignoriert werden. Und mir somit eine andere Erfahrung in der Druckemulation als beim Drucken bot.
Alles in allem ist die Druckemulation immer noch schön, um eine Vorstellung davon zu bekommen, wie es aussehen könnte.
Zumindest hat Chrome eine Vorschau des Dokuments vor dem Drucken mit angewendeten Stilen (media: print).
Ich habe kürzlich InDesign aufgegeben und mache meine Vorlagen jetzt mit HTML und CSS, um PDFs direkt aus dem Browser zu exportieren. Das spart mir 30 Dollar für Adobe und ist irgendwie ein nerdiges CSS-Battle für mich. (contenteditable und document.execCommand geben mir nette Editorfunktionen direkt im Browser, also ersetzt HTML ab jetzt meine InDD-Dateien)
Aber: Internet Explorer ist immer noch ein ärgerlicher kleiner Arsch (darf ich das hier sagen?), wenn es um den PDF-Export mit dem Browser-Modul geht. Gibt es einen Trick, um das Datum und die URL beim Schreiben in PDF mit IE auszublenden?
Viel einfacher ist die Verwendung der Befehlspalette in Chromium
Öffnen Sie die Entwicklertools
Drücken Sie
cmd+shift+pSuchen Sie nach „Emulate CSS print media type“
Klicken Sie auf den Eintrag oder drücken Sie
EnterUm dies rückgängig zu machen, suchen Sie einfach nach „Do not emulate CSS media type“
Leider muss ich mich immer noch auf CMD-P und die Vorschau verlassen, um zu sehen, wo Umbrüche stattfinden, da ich die Viewport-Größe nicht auf eine feste Größe beschränken kann.
Wir entwickeln eine Web-App, die Rechnungen, Angebote und Formulare erstellt, und unsere Kunden müssen diese ausdrucken oder zumindest als PDF speichern. Es ist viel zusätzliche Zeit, ständig die Vorschau aufzurufen. Ich würde mir einen Browser (oder speziell Chrome) wünschen, der diese Vorschau einfach auf meinem Bildschirm geöffnet hält und sich live aktualisiert, wenn ich meine CSS-Datei speichere, so wie es bei den anderen Seiten der Fall ist.