प्रिंट स्टाइलशीट विकसित करने और परीक्षण करने का तेज़ तरीका (हर बार प्रिंट पूर्वावलोकन से बचें)?


179

यह अभी मेरी प्रक्रिया है:

  1. Print.css में परिवर्तन सहेजें
  2. ब्राउज़र खोलें और ताज़ा करें पृष्ठ।
  3. राइट-क्लिक करें और प्रिंट> प्रिंट पूर्वावलोकन (फ़ायरफ़ॉक्स, लेकिन वास्तव में किसी भी ब्राउज़र) का चयन करें

यह चरण 3 है जो मुझे परेशान करता है और मैं सोच रहा हूं कि क्या यह संभव है कि इसे प्लगइन या कुछ के साथ प्रक्रिया से बाहर कर दिया जाए। किसी पृष्ठ को प्रिंट मीडिया के रूप में देखने के लिए चुनें, और फिर परिवर्तनों को देखने के लिए बस ताज़ा करें।

आप अपने प्रिंट स्टाइलशीट का परीक्षण कैसे करते हैं? क्या आप हमेशा रिफ्रेश के बाद प्रिंट प्रीव्यू क्लिक करते हैं?


सुझाव के लिए सभी को धन्यवाद। मुझे यह अच्छा लगेगा अगर मोजिला प्रिंट प्रीव्यू विंडो पर "रिफ्रेश" क्षमताओं को सक्षम करने के लिए एक डेवलपर सेटिंग को जोड़ देगा (पाठ्यक्रम के अंत-उपयोगकर्ता भ्रम से बचने के लिए डिफ़ॉल्ट नहीं)। यह मेरा आदर्श समाधान है, क्योंकि (फ़ॉस्ट के साथ सहमत) मुझे आमतौर पर प्रिंट पूर्वावलोकन में यह देखने की ज़रूरत है कि यह कैसे प्रदर्शित करेगा (-बैकग्राउंड चित्र, पेज ब्रेक, मार्जिन, आदि)। Chrome डिफ़ॉल्ट रूप से पूर्वावलोकन दिखाने के बाद से थोड़ी मदद कर सकता है। मैं यह भी देखूंगा कि फ़ायरफ़ॉक्स प्रिंटप्रव्यू ऐड-ऑन को स्लॉफ़ द्वारा अनुशंसित किया गया है।
माइकल

यह मैक के लिए काम नहीं करेगा क्योंकि कोई प्रिंट पूर्वावलोकन विकल्प नहीं है, हालांकि, आपके प्रिंट संवाद में एक पीडीएफ विकल्प हो सकता है जहां आप एक "पीडीएफ" पूर्वावलोकन एक अस्थायी पीडीएफ फाइल खोल सकते हैं। निश्चित नहीं है कि यह सुविधा OSX में बनाई गई है या क्योंकि मैंने एक्रोबेट स्थापित किया है।
नील मुनरो 16

बस एक स्पष्टीकरण बनाते हुए, ऐसा प्रतीत होता है कि OSX में, फ़ाइल ... मेनू में प्रिंट पूर्वावलोकन विकल्प उपलब्ध नहीं है, लेकिन एक्सटेंशन प्रिंट / प्रिंट पूर्वावलोकन के साथ, आपके पास एक बटन हो सकता है जो इसे लॉन्च करता है। addons.mozilla.org/en-US/firefox/addon/printprint-preview
नील मुनरो

जवाबों:


208

आप क्रोम मीडिया टाइप एमुलेशन को ब्राउज़र में प्रिंट सीएसएस में पोस्ट के रूप में उपयोग कर सकते हैं ।

अद्यतन 21/11/2017

अपडेट किया गया DevTools doc यहां पाया जा सकता है: प्रिंट मोड में एक पृष्ठ देखें

पेज को प्रिंट मोड में देखने के लिए:
1. कमांड मेनू खोलें । ( tl; डॉ। Cmd+Shift+P (Mac) या Ctrl+Shift+P(विंडोज, लिनक्स))
2. टाइप करना शुरू करें Renderingऔर चुनें Show Rendering
3. सीएसएस मीडिया ड्रॉपडाउन अनुकरण के लिए , प्रिंट का चयन करें ।


UPDATE 29/02/2016

DevTools डॉक्स स्थानांतरित हो गए हैं और उपरोक्त लिंक गलत जानकारी प्रदान करता है। मीडिया प्रकार के अनुकरण के बारे में अपडेट किए गए डॉक्स यहां देखे जा सकते हैं: अधिक मीडिया प्रकारों के लिए पूर्वावलोकन शैलियाँ

ब्राउज़र व्यूपोर्ट के ऊपरी दाएं कोने में अधिक ओवरराइड्स ••• अधिक ओवरराइड्स आइकन पर क्लिक करके DevTools एमुलेशन ड्रॉअर खोलें । फिर, एम्यूशन ड्रॉअर में मीडिया का चयन करें ।

अद्यतन 12/04/2016

दुर्भाग्य से, ऐसा लगता है कि प्रिंट अनुकरण के संबंध में डॉक्स अपडेट नहीं किए गए हैं। हालाँकि, प्रिंट मीडिया एमुलेटर फिर से चला गया है:

  1. Chrome DevTools खोलें
  2. escअपने कीबोर्ड पर मारो
  3. क्लिक करें (ऊर्ध्वाधर अंडाकार)
  4. रेंडरिंग चुनें
  5. टिक एम्यूलेट प्रिंट मीडिया

नीचे स्क्रीनशॉट देखें:

रेंडरिंग सेटिंग 12/04/2016

UPDATE 28/06/2016

Chrome DevTools और "Emulate Media" विकल्प के आसपास Google डेवलपर्स डॉक्स को Chrome> 51 के लिए अपडेट कर दिया गया है:

https://developers.google.com/web/tools/chrome-devtools/settings?hl=en#emulate-print-media

प्रिंट पूर्वावलोकन मोड में एक पृष्ठ देखने के लिए, DevTools मुख्य मेनू खोलें, अधिक टूल > रेंडरिंग सेटिंग्स का चयन करें और फिर प्रिंट करने के लिए ड्रॉपडाउन मेनू के साथ अनुकरण मीडिया चेकबॉक्स सक्षम करें ।

रेंडरिंग सेटिंग्स 28/06/2016

UPDATE 24/05/2016

सेटिंग्स का नामकरण एक बार फिर बदल गया है:

प्रिंट पूर्वावलोकन मोड में एक पृष्ठ देखने के लिए, DevTools मुख्य मेनू खोलें, अधिक टूल > रेंडरिंग का चयन करें , और फिर प्रिंट करने के लिए सेट किए गए ड्रॉपडाउन मेनू के साथ अनुकरण सीएसएस मीडिया चेकबॉक्स सक्षम करें ।

CSS मीडिया का अनुकरण करें


2
@SupaIrish हां, फ़ायरफ़ॉक्स के लिए सिज़्मोन का जवाब देखें।
djule5

प्रलेखन पूरी तरह से दिनांकित है और "अधिक ओवरराइड्स" क्षेत्र के अंदर कहीं भी सीएसएस मीडिया का अनुकरण नहीं है। यह कहाँ गया?
टेट्रादेव

2
इसके नीचे स्थित "कंसोल (esc)" फिर "3 वर्टिकल डॉट्स" फिर "रेंडरिंग" फिर नीचे की तरफ "प्रिंट मीडिया का अनुकरण करें" - ऐसा क्यों छुपाया गया है, इसका मुझे कोई अंदाजा नहीं है।
तेतरादेव

osx पर इस विकल्प का चयन कुछ भी करने के लिए प्रतीत नहीं होता है?
v3nt

165

फ़ायरफ़ॉक्स में आप Shift+F2एक डेवलपर टूलबार कमांड लाइन खोलने के लिए टाइप कर सकते हैं , और फिर टाइप कर सकते हैंmedia emulate print

आप इस तरह से अन्य मीडिया प्रकारों का अनुकरण भी कर सकते हैं।


3
मैंने देखा है, कि यह प्रिंट पूर्वावलोकन में दिए गए दृश्य के समान नहीं हो सकता है - विशेष रूप से जब यह व्हाट्सएप पर आता है - तो सुनिश्चित करें कि आपके द्वारा इस विकल्प के साथ किए जाने के बाद आपका प्रिंट पूर्वावलोकन अलग-अलग नहीं है।
jave.web

15
अफसोस की बात है कि GLCI को 62 के संस्करण के साथ फ़ायरफ़ॉक्स से हटा दिया गया था।
zerpsed

4
जीएलसीआई (शिफ्ट + एफ 12) के बिना इसे कैसे सक्षम किया जाए?
StR

3
@StR आप फ़ायरफ़ॉक्स में प्रिंट शैलियों का एक और तरीका अनुकरण कर सकते हैं: stackoverflow.com/questions/47877112/…
TylerH

2
मैंने अभी-अभी जाँच की है कि @TylerH ने फ़ायरफ़ॉक्स v68 में क्या कहा है और यह काम करता है।
सेंट आरआर

22

फ़ायरफ़ॉक्स + वेब डेवलपर टूलबार एक्सटेंशन में विभिन्न स्टाइलशीट को सक्षम / अक्षम करने का एक तरीका है।

CSS मेनू के अंतर्गत देखें। व्यक्तिगत स्टाइलशीट को अक्षम और सक्षम करने के लिए एक मेनू है और साथ ही "मीडिया प्रकार द्वारा प्रदर्शन" मेनू भी है।

इसके अलावा, फ़ायरफ़ॉक्स में PrintPreview को प्राप्त करने के चरणों को कम करने के लिए, PrintPreview एक्सटेंशन का प्रयास करें , जो टूलबार बटन बनाएगा।

Chrome के लिए, उस एक्सटेंशन का एक पोर्ट है । क्रोम संस्करण के साथ जो मैं बता सकता हूं, उसमें से आप "प्रिंट शैली दिखाएं" चुन सकते हैं


12

मैं किसी भी परीक्षण पद्धति का उपयोग नहीं करूंगा जिसमें प्रिंट पूर्वावलोकन शामिल नहीं है। बहुत अधिक अंतर हैं: पृष्ठभूमि की छवियां प्रिंट में बिल्कुल भी काम नहीं कर रही हैं, लेकिन सामान्य स्क्रीन संदर्भों में उनके बीच मुख्य रूप से दिखाई दे रही हैं।

Chrome में, control+pपूर्वावलोकन प्रिंट करने के लिए तुरंत जाता है। (बस अपने मेनू बार तक मूसिंग भूल जाते हैं)। यह बहुत आसान है।


Chrome निश्चित रूप से प्रिंट मीडिया इम्यूलेशन में दिखाए गए से चिपकता नहीं है। मैंने पाया है कि अगर आपके पास क्रोम मीडिया क्वेरी प्रीप्रिंट फंक्शन 2ms से कम नहीं है, तो यह बदलाव को चित्रित नहीं करेगा।
cchamberlain

1
प्रिंट पूर्वावलोकन के साथ समस्या यह तत्व निरीक्षण की अनुमति नहीं देती है, इसलिए पैडिंग और मार्जिन जैसी चीजों को डीबग करना बेहद मुश्किल है। उन तत्वों को अलग से देखना सबसे अच्छी बात है जब आप बॉक्स के मुद्दों पर बहस करने की कोशिश कर सकते हैं।
सियारिया

6

आप अपनी स्क्रीन शैलियों को अक्षम कर सकते हैं और परीक्षण करते समय अपने मीडिया प्रकार को अपनी प्रिंट स्टाइलशीट के लिए "स्क्रीन" में बदल सकते हैं। यह वास्तविक प्रिंट पूर्वावलोकन (पृष्ठ विराम, दस्तावेज़ की चौड़ाई, आदि) का उपयोग करने के समान नहीं होगा, लेकिन यह अभी भी आपको एक बहुत अच्छा विचार देता है।


5

मेरे लिए सरल ( एफ 1 के साथ@screen भागों या समान नहीं 1 ) :

  • डाल @media print { ...अपने सीएसएस सामग्री के अंत में हिस्सा
  • बाहर टिप्पणी केवल आवरण घोषणा/*@media print {*/ ... /*}*/
    • इस प्रकार प्रिंट शैलियों को अपनी शैली में लागू करना, जहां लागू हो, उन्हें तुरंत ओवरराइड करना
  • (मैं LiveReload का उपयोग कर रहा हूँ इस प्रकार मेरा ब्राउज़र पृष्ठ परिवर्तनों को सहेजने के तुरंत बाद ताज़ा हो जाता है)
  • ( अन्यथा , यदि LiveReload का उपयोग नहीं किया जा रहा है :) CTRL+Rपृष्ठ को फिर से लोड करने के लिए दबाएं
  • अब आप पहले से ही बहुत सारे विशिष्ट प्रिंट सीएसएस समायोजन (फ़ॉन्ट शैली, फ़ॉन्ट आकार, स्पेसिंग, रंग) कर सकते हैं, जहां किसी को अभी तक प्रिंट पूर्वावलोकन की आवश्यकता नहीं है
  • ALT+F+Vप्रिंट पूर्वावलोकन खोलने और ALT+Wइसे फिर से बंद करने के लिए दबाएं

1 : यदि कोई उनके पास है, तो आपके परीक्षण किए गए मीडिया के आधार पर, उन पर टिप्पणी करना, अन्यथा बहुत बड़ी बात नहीं हो सकती है


3

जैसा कि इस अन्य पोस्ट में वर्णित है ( प्रिंट पूर्वावलोकन मोड में क्रोम के तत्व निरीक्षक का उपयोग करके? ), आप प्रिंट स्टाइलशीट का अनुकरण करने के लिए क्रोम का उपयोग कर सकते हैं। यह महान है क्योंकि आप इंस्पेक्टर का उपयोग यह देखने के लिए कर सकते हैं कि प्रिंट डायलॉग को देखने के दौरान शैलियों को अनुमान लगाने के बजाय कहां से आ रहे हैं।

Chrome के तत्व इंस्पेक्टर के निचले दाएं कोने में स्थित गियर आइकन पर क्लिक करके ओवरराइड्स सेटिंग संवाद तक पहुंचें। फिर प्रिंट को लक्ष्य मीडिया प्रकार के रूप में चुनें।

बहुत बढ़िया!


2

कम से कम क्रोम में: विकास के दौरान, शरीर टैग में जोड़ें onload="window.print()"। इससे आपके द्वारा रिफ्रेश करने के तुरंत बाद प्रिंट मोड खुल जाएगा।

दुर्भाग्य से ऐसा नहीं लगता है कि डेवलपर टूल बहुत अधिक उपयोग किए जाते हैं क्योंकि यह अनिवार्य रूप से एक एम्बेडेड पीडीएफ है।

संयोग से चरण 2 को खत्म करने के तरीके हैं। एक लोकप्रिय एक LiveReload है।


0

आप अपने नियमित स्टाइलशीट को अस्थायी रूप से हटाने की कोशिश कर सकते हैं, और केवल सामान्य लिंक टैग के साथ प्रिंट एक में लोड कर सकते हैं।


0

Chrome 62 में, cmd-R / cmd-P एक मैक पर अच्छा काम करता है ताकि @media प्रिंट स्टाइल पेज का एक अच्छा पूर्वावलोकन लाया जा सके।

यह ब्राउज़र विंडो के ऊपरी दाएँ भाग में ही नहीं (डेवलपर टूल) / प्रिंट के माध्यम से वर्टिकल एलीपिस के माध्यम से पहुँचा जा सकता है ...

पूर्वावलोकन विंडो को रद्द करने के लिए esc का उपयोग करें।

इसलिए, IntelliJ IDEA और Chrome के साथ मेरे वर्कफ़्लो के लिए, यह है: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab और मैं IDE में वापस आ गया हूं।

विंडोज 10 में क्रोम 62 में एक ही प्रिंट ... मेनू एक ही जगह, ctrl-p के साथ सुलभ है: Chrome 62 में प्रिंट करें

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.