एचटीएमएल पर सीएसएस लागू करें लेकिन iframe html

मैं ऐड-ऑन 'स्टाइलिश' के लिए उपयोगकर्ता स्टाइलशीट बना रहा हूं।एचटीएमएल पर सीएसएस लागू करें लेकिन iframe html

यह रात-ब्राउज़िंग के लिए पूरे पृष्ठ पर एक अर्ध-पारदर्शी अंधेरा बॉक्स लागू करता है।

मैं उपयोग कर रहा हूँ:

html:before { 
    content:url()!important; 
    position:fixed!important; 
    width:100%!important; 
    height:100%!important; 
    top:0!important; 
    left:0!important; 
    background:rgba(2,3,3,.35)!important; 
    z-index:99999999999999999!important; 
    pointer-events:none!important; 
}

तय, overlying div बनाने के लिए।

यह काम करता है ठीक है, तथापि, अगर वहाँ साइट में किसी भी iframes हैं, यह iframes 'HTML में इस कोड के साथ-साथ लागू होगी जैसा कि आप यहाँ देख सकते हैं:

क्योंकि इन सामाजिक नेटवर्किंग विगेट्स एक आईएफआरएएम पर भरोसा करते हैं, जो उन पृष्ठों में कोड दोहराता है, जो मैंने बनाए गए अर्द्ध पारदर्शी अंधेरे बॉक्स का डबल ओवरलेइंग बनाते हैं।

वांछित नज़र होगा:

मैं हैक-ish चीजों की कोशिश की है iframes करने के लिए एक बहुत उच्च z- सूचकांक लागू करने और पृष्ठभूमि रंग और की पृष्ठभूमि का उल्लेख करने वाले, * iframes में 'white' और 'opaque' में से कुछ भी है ताकि यह मूल HTML पृष्ठ के शीर्ष पर 'फ़्लोट' हो, लेकिन यह पूरी तरह से काम नहीं करता है। मैंने कुछ भी कोशिश की है:

html:not(iframe):before{}

लेकिन यह भी काम नहीं करता है। मैं सोच रहा हूं कि ऐसा करने का कोई तरीका है जिसे मैं ऐसा करने की कोशिश कर रहा हूं जो समान प्रभाव बनाने के लिए 'html: पहले' पर भरोसा नहीं करता है, या यदि ऐसा करने का कोई तरीका है लेकिन यह नहीं है एक पृष्ठ पर iframes के एचटीएमएल के अंदर दोहराना।

मैंने इसे काम करने के लिए प्रयास करने के अपने प्रयासों को समाप्त कर दिया है, इसलिए किसी भी मदद की वास्तव में सराहना की जाएगी। धन्यवाद।

स्रोत

2013-05-07 fanfare

यह पहली बार है जब मैंने रात-ब्राउज़िंग शब्द – Huangism

'iframe html: पहले {display: none; } '? –

'html: नहीं (iframe) 'हमेशा काफी आसानी से मेल खाता है क्योंकि' html' 'iframe' नहीं है। – BoltClock

दुर्भाग्य से, वहाँ है कि iframe तत्व शामिल iframe के स्रोत के भीतर से एक iframe का केवल सामग्री को लक्षित करने के सीएसएस का उपयोग कर कोई रास्ता नहीं है, यानी पेज है।

मुझे लगता है, क्योंकि आप स्टाइलिश का उपयोग कर रहे हैं, कि आपका सीएसएस फ़ायरफ़ॉक्स उपयोगकर्ता स्टाइलशीट में है। यदि ऐसा है, तो आपको उन iframe एस के स्रोत URL को देखना पड़ सकता है, उनके URL पर उन URL को लक्षित करने वाले @-moz-document नियम बनाएं और तदनुसार html:before छद्म-तत्व को हटा दें।

कुछ इस तरह है, जो आपके पास पहले से नीचे जाना चाहिए:

@-moz-document domain(/* Facebook Like */), 
    domain(/* Tweet Button */), 
    domain(/* Google +1 */) 
{ 
    html:before 
    { 
     content: none !important; 
    } 
}

content: none घोषणा छद्म तत्व अक्षम करता है, गाया जा रहा से रोकता है।

इस तरीके से विशिष्ट डोमेन को बाहर करने का मतलब है कि यह विधि बेहद सीमित है और बहुत बहुमुखी नहीं है, लेकिन यह सबसे अच्छा है जिसे मैं सोच सकता हूं।

स्रोत

2013-05-07 20:55:53 BoltClock

मैंने ट्विटर, एफबी इत्यादि के लिए डोमेन-विशिष्ट लक्ष्यीकरण की कोशिश की थी, लेकिन किसी कारण से यह काफी सही काम नहीं कर सका। हालांकि, आपका कोड पूरी तरह से काम करता है। मुझे लगता है कि यह करना होगा। मैं वास्तव में इसकी प्रशंसा करता हूँ। :) – fanfare

@ user1975224: कोई समस्या नहीं, खुश मैं मदद कर सकता था! सच्चाई से, यह कुछ तेज था कि मैंने चाबुक किया क्योंकि मुझे बिस्तर पर सिर (और इसके बारे में) माना जाता है - यह लगभग सुबह है जहां मैं हूं! – BoltClock

संपादित करें:

मैं ऐड-ऑन चीज़ के बारे में पता नहीं है, लेकिन आप अपने HTML टैग एक आईडी देने के लिए और इसे उस तरह से लक्षित करते हैं, हालांकि, अगर आप ऐसा करते हैं तो उन सभी पृष्ठों को लागू करने के लिए है कि एक मुद्दा

है चाहता हूँ सकता है

या शायद एचटीएमएल का उपयोग करें: पहला बच्चा? मैं ईमानदारी से नहीं जानता कि क्या होगा, हालांकि

स्रोत

2013-05-07 20:39:28 Huangism

नहीं, निश्चित रूप से यह नहीं होगा - 'html' मूल तत्व है, इसलिए यह किसी भी मामले में कभी मेल नहीं खाएगा। – BoltClock

आईआरआरएएम में उसकी सीएसएस फ़ाइल को कैसे प्रभावित करती है, मुझे – Huangism

समझ में नहीं आता है, मुझे लगता है कि इसे एड-ऑन के साथ करना है, जो कि फ़ायरफ़ॉक्स के लिए उपयोगकर्ता स्टाइलशीट मैनेजर है। – BoltClock

आप एक अलग मार्ग का उपयोग करना चाहेंगे आप इसे आजमाइए कर सकते हैं:

html { 
    box-shadow: inset 0 0 0 2000px rgba(2, 3, 3, .35) !important; 
}

Demo

इस तरह वेबपृष्ठ फिर भी है प्रयोग योग्य जब उपयोगकर्ता का ब्राउज़र pointer-events का समर्थन नहीं करता है।CSS - max z-index value

केवल मूल दस्तावेज़ के <html> तत्व इन शैलियों लागू करने के लिए और iframes के लिए नहीं, बस जे एस के साथ document.documentElement को box-shadow लागू होते हैं::

document.documentElement.style.boxShadow = "inset 0 0 0 2000px rgba(2, 3, 3, .35) !important";

स्रोत

2013-05-07 20:53:53

यह अच्छा है। सुझाव के लिए धन्यवाद .. अब iframes के लिए काम नहीं करने के लिए एक रास्ता खोजने पर: [। – fanfare

@ user1975224 समाधान के साथ अद्यतन उत्तर। –

आप भी इस सवाल चेकआउट करने के लिए चाहते हो सकता है

सीएसएस आपको आईफ्रेम के अंदर HTML शैली बनाने की अनुमति नहीं देता है। चूंकि आप ऐड-ऑन का उपयोग कर रहे हैं, यह सीएसएस का एक गैर मानक कार्यान्वयन है। शैलियों को iframes द्वारा विरासत में नहीं मिला है, क्योंकि एक आईफ्रेम मूल रूप से एक नई ब्राउज़र विंडो है। ऐड-ऑन ब्राउज़र विंडो में प्रत्येक HTML पृष्ठ पर शैली जोड़ रहा है। ब्राउजर को यह जानने का कोई तरीका नहीं है कि एक पृष्ठ आईफ्रेम के अंदर है (कम से कम उस तरीके से नहीं जो सीएसएस के माध्यम से सुलभ है)।

स्रोत

2013-05-07 20:55:29 aaronburrows

सही है, हालांकि एड-ऑन प्रश्न में केवल फ़ायरफ़ॉक्स की उपयोगकर्ता स्टाइलशीट्स के लिए यूआई फ्रंटेंड है, जो [कैस्केड] (http://www.w3.org/TR/CSS21/cascade.html#cascading-order के अभिन्न अंग हैं)) और निश्चित रूप से मानक का हिस्सा हैं। – BoltClock

सही, लेकिन फ़ायरफ़ॉक्स प्रत्येक एचटीएमएल तत्व के लिए शैली लागू कर रहा है। सीएसएस एक HTML तत्व से एक [iframe] में एक HTML तत्व से कैस्केड नहीं करता है (http://stackoverflow.com/questions/6494721/css-overide-body-style-for-content-in-iframe)। यह अलग-अलग दोनों के लिए उपयोगकर्ता स्टाइलशीट लागू करता है। – aaronburrows

एचटीएमएल पर सीएसएस लागू करें लेकिन iframe html

उत्तर

संबंधित मुद्दे