css wage फायरबग में प्रिंट मीडिया सीएसएस कैसे देखें?




समाचार फॉर मीडिया (8)

फायरबग कुछ HTML तत्वों के लिए स्क्रीन मीडिया सीएसएस दिखाने के लिए एक उत्कृष्ट उपकरण है, लेकिन क्या प्रिंट मीडिया सीएसएस को देखने का कोई तरीका है? या प्रिंट मीडिया सीएसएस देखने के लिए कोई अन्य उपकरण है?


आप वेब डेवलपर टूलबार पर एक नज़र डालना चाहते हैं - यह आपको चुनने की अनुमति देता है कि आप कौन सी सीएसएस देखना चाहते हैं। फायरबग के साथ संयोजन में, प्रिंट मीडिया सीएसएस देखना संभव होना चाहिए।


संपादित करें 2 के answer पढ़ने के बाद, मुझे एहसास हुआ कि यह समाधान @media print सीएसएस का उपयोग (या दुरुपयोग) का सही ढंग से साइटों को संबोधित नहीं करता है। (नीचे उदाहरण देखें।) लेकिन मुझे लगता है कि यह समाधान अभी भी आपके द्वारा लिखे गए कोड के लिए "गैर-परिपूर्ण-त्वरित-और-गंदे-चाल" के रूप में मान्य है और आप पहले से जानते हैं कि इसमें यह नहीं है ।

फायरबग के साथ, आप <link rel="stylesheet" type="text/css" ...> और <style> टैग को अपनी सुविधा में संपादित भी कर सकते हैं।

उदाहरण के लिए, आप एक मूल स्विच कर सकते हैं

<link rel="stylesheet" type="text/css" media="print">

सेवा मेरे

<link rel="stylesheet" type="text/css" media="screen">

और ब्राउज़र इसे लागू करेगा। आपको केवल स्क्रीन को निष्क्रिय करना होगा।

बेशक, यह केवल तभी उपयोगी होता है जब आप केवल कुछ पेजों को बहुत कम स्टाइलशीट लिंक के साथ त्वरित रूप से जांचना चाहते हैं, लेकिन कम से कम, आपको कोई अतिरिक्त प्लगइन इंस्टॉल करने की आवश्यकता नहीं है।

संपादित करें 1 यह चाल मुझे स्वचालित करने के लिए जावास्क्रिप्ट का उपयोग करने का सुझाव देती है ...

(अस्वीकरण: मैं सादगी के लिए JQuery का उपयोग करूंगा। मैं जावास्क्रिप्ट विशेषज्ञ नहीं हूं।)

// 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");
}

ध्यान दें कि डिफ़ॉल्ट media "screen" ( w3.org - मीडिया विशेषता )। इसका उपयोग पृष्ठ पूर्वावलोकन दिखाने के लिए एक बटन में किया जा सकता है। एकमात्र कमी यह है कि आपको मूल दृश्य को पुनर्स्थापित करने के लिए पृष्ठ को फिर से लोड करना होगा।

जैसा कि ऊपर बताया गया है, यह समाधान एचटीएमएल कोड के साथ काम नहीं करता है, क्योंकि @media print अंदर स्टाइल ब्राउज़र द्वारा लागू नहीं किया जाएगा:

<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>

फ़ायरफ़ॉक्स को अब फायरबग की आवश्यकता नहीं है।

  1. Shift+F2 दबाकर डेवलपर टूलबार चलाएं
  2. media emulate print टाइप करें

मानक दृश्य पर वापस जाने के लिए media reset टाइप करें।


वेब डेवलपर प्लग का उपयोग करें। फिर आप सीएसएस मेनू से चुन सकते हैं, जिस मीडिया को आप पृष्ठ को प्रदर्शित करना चाहते हैं।


फ़ायरफ़ॉक्स (और कुछ अन्य ब्राउज़रों) में, आप प्रिंट पूर्वावलोकन का उपयोग करके प्रिंट स्टाइलशीट का स्थिर प्रदर्शन देख सकते हैं। यह कहीं भी वेब डेवलपर टूलबार के रूप में उपयोगी नहीं है, लेकिन यह आपको यह समझने में भी मदद कर सकता है कि मुद्रित होने वाला क्या है।


असल में, ध्यान रखें कि जब आप इसकी अपेक्षा नहीं करते हैं तो आप @media print सीएसएस देख सकते हैं।

एसओ का उपयोग करता है :

[..]@media print{#sidebar,#nav,[..],div.vote{display:none;}}[..]

... और इसलिए कोई भी फ़ायरबग में सीएसएस पैनल को किसी भी तरह से दिखाने की उम्मीद कर सकता है:

@media print {
  #sidebar, #nav, [..], div.vote {
    display: none;
  }
}

लेकिन इसके बजाय यह सीएसएस दिखाता है जैसे @media print वास्तव में सक्रिय है, जैसे:

#sidebar, #nav, [..], div.vote {
  display: none;
}

(संबंधित समस्या रिपोर्ट भी देखें: सीएसएस पैनल में @media UI नहीं है ।)


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

मैं इन दिनों क्या करना चाहता हूं, जब मैं विकास कर रहा हूं, तो प्रिंट स्टाइलशीट के मीडिया को अस्थायी रूप से स्क्रीन पर स्विच कर रहा हूं, और फिर लाइव होने से पहले इसे वापस स्विच करें।


वेब डेवलपर टूलबार के बारे में क्या?
https://addons.mozilla.org/en-US/firefox/addon/60
स्थापित होने पर सीएसएस पर जाएं -> मीडिया प्रकार द्वारा सीएसएस प्रदर्शित करें -> प्रिंट करें







print-css