क्या CSS @media नियमों को इनलाइन करना संभव है?

293

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

उदाहरण के लिए:

 <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>

क्या यह संभव है, या किसी के पास कोई अन्य सुझाव है?

html css media-queries

— नर्तकी
स्रोत

3

जवाबों से निराश? इस टिप्पणी को देखें । यह मदद कर सकता है।

— rinogo

285

@mediaइनलाइन शैली विशेषताओं में कोई नियम और मीडिया प्रश्न मौजूद नहीं हो सकते, क्योंकि वे केवल property: valueघोषणाओं को शामिल कर सकते हैं । जैसा कि कल्पना यह कहती है:

शैली विशेषता का मूल्य एक सीएसएस घोषणा ब्लॉक की सामग्री के सिंटैक्स से मेल खाना चाहिए

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

एक डमी spanचयनकर्ता इस तरह दिखेगा, लेकिन यदि आप एक बहुत विशिष्ट तत्व को लक्षित कर रहे हैं, तो आपको अधिक विशिष्ट चयनकर्ता की आवश्यकता होगी:

span { background-image: url(particular_ad.png); }

@media (max-width: 300px) {
    span { background-image: url(particular_ad_small.png); }
}

— बोल्टकॉक
स्रोत

70

आप <style>अपने HTML में टैग भी लगा सकते हैं । यह उस मामले के लिए एक आवश्यक दृष्टिकोण है जहां background-imageगतिशील रूप से डेटाबेस से खींचा जाता है। जाहिर है कि बाहरी स्टाइलशीट उसके लिए सही जगह नहीं है।

— जेक विल्सन

1

@ जकाबूद: हाँ, यह कोई फर्क नहीं पड़ता कि स्टाइलशीट कहाँ स्थित है लेकिन बात यह है कि आप इसे केवल CSS में ही कर सकते हैं, इनलाइन स्टाइल की विशेषता पर नहीं।

— BoltClock

3

भविष्य के खोजकर्ताओं को ध्यान दें कि <script>ईमेल को अग्रेषित करने पर टैग अक्सर ईमेल क्लाइंट द्वारा छीन लिया जाता है, इसलिए लोग ईमेल के लिए इन-लाइन शैलियों का उपयोग करते हैं। और इसका मतलब है मीडिया का कोई सवाल नहीं। मैं वर्तमान में इस स्थिति के लिए सर्वोत्तम प्रथाओं की खोज कर रहा हूं, लेकिन सिर्फ एक अनुकूल सिर-अप।

— TCannadySF

3

कृपया emएस में अधिकतम-चौड़ाई निर्धारित करें , अंदर नहीं px। इस तरह यह तब भी समझदारी से काम करेगा जब आप ज़ूम करेंगे।

— सिलास एस। ब्राउन

2

@ सिलस एस। ब्राउन: यह मेरी समस्या नहीं है। मैं सिर्फ यह दर्शा रहा हूं कि प्रश्न में क्या उपयोग किया गया है।

— BoltClock

137

संकट

नहीं, मीडिया क्वेरी का उपयोग इस तरह से नहीं किया जा सकता है

<span style="@media (...) { ... }"></span>

उपाय

लेकिन अगर आप मक्खी और उत्तरदायी पर एक विशिष्ट व्यवहार प्रदान करना चाहते हैं, तो आप styleमार्कअप का उपयोग कर सकते हैं न कि विशेषता का।

Ei

<style scoped>
.on-the-fly-behavior {
    background-image: url('particular_ad.png'); 
}
@media (max-width: 300px) {
    .on-the-fly-behavior {
        background-image: url('particular_ad_small.png');
    }
}
</style>
<span class="on-the-fly-behavior"></span>

CodePen पर लाइव काम करने वाला कोड देखें

उदाहरण के लिए मेरे ब्लॉग में, मैं बस के बाद एक <style>मार्कअप इंजेक्ट करता हूं<head><link> सीएसएस के लिए घोषणा के और इसमें आर्टिल लिखने पर फ्लाई पर एक्स्ट्रा-क्लास बनाने के लिए असली कंटेंट टेक्सारिया के बगल में दिए गए टेक्सटारिया की सामग्री होती है।

नोट: scopedविशेषता HTML5 विनिर्देश का एक हिस्सा है। यदि आप इसका उपयोग नहीं करते हैं, तो सत्यापनकर्ता आपको दोषी ठहराएगा लेकिन वर्तमान में ब्राउज़र वास्तविक उद्देश्य का समर्थन नहीं करते हैं: <style>केवल तत्कालिक मूल तत्व और उस तत्व के बाल तत्वों पर सामग्री को स्कैन किया । यदि <style>तत्व <head>मार्कअप में है तो स्कोप अनिवार्य नहीं है ।

अद्यतन: मैं मोबाइल में हमेशा नियमों का उपयोग करने की सलाह देता हूं, इसलिए पहले वाला कोड होना चाहिए:

<style scoped>
/* 0 to 299 */
.on-the-fly-behavior {
    background-image: url('particular_ad_small.png'); 
}
/* 300 to X */
@media (min-width: 300px) { /* or 301 if you want really the same as previously.  */
    .on-the-fly-behavior {   
        background-image: url('particular_ad.png');
    }
}
</style>
<span class="on-the-fly-behavior"></span>

— ब्रूनो लेसीउर
स्रोत

10

यह स्वीकृत उत्तर की तुलना में बेहतर उत्तर है क्योंकि यह background-imageपेज लोड होने पर आपको गतिशील रूप से बदलने की अनुमति देता है ।

— जेक विल्सन

7

जबकि स्कॉप्ड सिद्धांत रूप में बहुत अच्छा लगता है, क्रोम ने कुछ संस्करणों में अपने प्रारंभिक समर्थन को हटा दिया और अब केवल फ़ायरफ़ॉक्स का कोई समर्थन है।

— एंथनी मैकलिन

1

स्कोप्ड का उपयोग केवल किसी भी तरह से उपयोग करने की अनुमति नहीं देने के .on-the-fly-behaviorलिए किया जाता है, लेकिन अगर कुछ नाविक द्वारा शब्द को "अनदेखा" किया जाता है तो यह कोई समस्या नहीं है। सभी नाविक में <style> का उपयोग <body> में किया जा सकता है, यह काम करता है। यह सिर्फ एक w3c सत्यापन की आवश्यकता है।

— बजे ब्रूनो लेसीउर

4

हालाँकि scopedयह एक शानदार समाधान है जो किसी भी ब्राउज़र द्वारा आधिकारिक रूप से समर्थित नहीं है। उम्मीद है कि जल्द ही बदल जाएगा।

— केन शार्प

1

यह एक अन्य प्रश्न है, क्योंकि एक ईमेल का मुख्य लक्ष्य क्लाइंट ईमेल द्वारा पढ़ा जाना है और कई क्लाइंट ईमेल एम्बेडिंग <style>, media queriesया सभी HTML / CSS सुविधा का समर्थन नहीं करते हैं। तो वास्तव में समस्या इससे कहीं अधिक बड़ी है। मैं केवल यह जानता हूं कि आप केवल HTML4 और CSS2 सुविधा (कुछ आउटलुक हैक के साथ) के साथ सभी क्लाइंट ईमेल (जीमेल शामिल) पर उसी तरह से प्रदर्शित ईमेल बनाने में सक्षम हैं, लेकिन इस मामले में मीडिया क्वेरी नहीं है।

— ब्रूनो लेसिएर

15

इनलाइन शैलियों में वर्तमान में घोषणाओं ( property: valueजोड़ियों) के अलावा कुछ नहीं हो सकता है ।

आप अपने दस्तावेज़ के अनुभाग में styleउपयुक्त mediaविशेषताओं वाले तत्वों का उपयोग कर सकते हैं head।

— मरत तनालिन
स्रोत

13

हाँ, आप इनलाइन-सीएसएस में मीडिया क्वेरी लिख सकते हैं यदि आप चित्र टैग का उपयोग कर रहे हैं। विभिन्न डिवाइस आकारों के लिए आप विभिन्न चित्र प्राप्त कर सकते हैं।

<picture>
    <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
    <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

— आरिफ हुसैन
स्रोत

यह CSS बैकग्राउंड-इमेज: url ()

— जोनास एबर्ले

10

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

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>

— पावेल
स्रोत

3

सुंदर वर्कअराउंड - हिड डिव, मीडिया क्वेरी के आधार पर डिव शो - एकमात्र दोष मुझे लगता है कि यह अभी भी दोनों छवियों को लोड करेगा ताकि आप दोनों क्लाइंट को भेज सकें।

— माइकल सी। गेट्स

4

अनुरक्षण या एसईओ के लिए डुप्लिकेट सामग्री अच्छी बात नहीं है।

— ब्रूनो लेसीउर

1

दुर्भाग्य से यह एक झूठा दोस्त है! मैंने इस समाधान के बारे में भी सोचा, लेकिन हम चाहते हैं कि छोटे उपकरण छोटे उपकरणों की सेवा करें और डाउनलोड करने के लिए बाइट्स बचाएं। यह तकनीक ठीक विपरीत करती है

— A. D'Alfonso

8

शैली-विशेषताओं में मीडिया क्वेरी अभी संभव नहीं है। लेकिन अगर आपको जावास्क्रिप्ट के माध्यम से इसे गतिशील रूप से सेट करना है। आप उस नियम को JS aswell के माध्यम से सम्मिलित कर सकते हैं।

document.styleSheets[0].insertRule("@media only screen and (max-width : 300px) { span { background-image:particular_ad_small.png; } }","");

यह ऐसा है जैसे स्टाइल स्टाइलशीट में था। इसलिए विशिष्टता के बारे में जागरूक रहें।

— टाइप-शैली
स्रोत

किसी भी विचार जब यह संभव हो जाएगा?

— SuperUberDuper

1

मुझे नहीं लगता कि यह होगा। लेकिन मुझे उन सभी बातों की जानकारी नहीं है जो वर्कग्रुप्स कर रहे हैं।

— टाइप-स्टाइल

8

अरे मैंने अभी लिखा है।

अब आप <div style="color: red; @media (max-width: 200px) { color: green }">या तो उपयोग कर सकते हैं ।

का आनंद लें।

— मित्र
स्रोत

मैं इसे वोट दिया, क्योंकि यह वापस काम करने के लिए लग रहा था, लेकिन यह नहीं है। #sad

— honk31

@ honk31 यह केवल एक ही नियम के लिए दुनिया है

— Даниил Пронин

7

मैंने इसका परीक्षण करने की कोशिश की और यह काम करने के लिए नहीं लगा लेकिन मैं उत्सुक हूं कि एप्पल इसका उपयोग क्यों कर रहा है। मैं सिर्फ https://linkmaker.itunes.apple.com/us/ पर था और उत्पन्न कोड में देखा कि यदि आप 'लार्ज बटन' रेडियो बटन का चयन करते हैं, तो वे इनलाइन मीडिया क्वेरी का उपयोग कर रहे हैं।

<a href="#" 
    target="itunes_store" 
    style="
        display:inline-block;
        overflow:hidden;
        background:url(#.png) no-repeat;
        width:135px;
        height:40px;
        @media only screen{
            background-image:url(#);
        }
"></a>

नोट: पठनीयता के लिए जोड़ा गया लाइन-ब्रेक, मूल उत्पन्न कोड कीमा बनाया हुआ है

— davidcondrey
स्रोत

3

मैं जानना चाहूंगा कि Apple क्यों / कैसे उपयोग कर रहा है

— डगलस। सिसर

1

उद्धृत कोड अब दिए गए लिंक पर मौजूद नहीं है (कम से कम मेरे लिए; शायद मुझे यूएस के बाहर होने के कारण अलग सामग्री मिलती है)। इसके अलावा, यह वास्तव में एक अलग सवाल है कि एक जवाब की तरह लगता है।

— मार्क अमेरी

1

मैंने एक बग रिपोर्ट प्रस्तुत की है और मुझे विश्वास है कि उन्होंने इसे हटा दिया है। itunesaffiliate.phgsupport.com/hc/en-us/requests/14201

— davidcondrey

4

आप छवि-सेट () का उपयोग कर सकते हैं

<div style="
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x);  
  background-image: image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x);">

— the7oker
स्रोत

2

ध्यान दें कि यह अभी केवल वेबकिट-आधारित ब्राउज़र में समर्थित है ।

— Qqwy

यह आकार (प्रश्न में उल्लिखित) के आधार पर काम नहीं करता है, लेकिन ज़ूम कारक पर है, इसलिए आपको 27 "2560x1440 स्क्रीन पर छोटे स्क्रीन के लिए चित्र मिल सकता है। वह वही हो सकता है जो आप चाहते हैं - या शायद नहीं।

— Jan Bühler

4

हाँ, आप window.matchMedia द्वारा जावास्क्रिप्ट के साथ कर सकते हैं

लाल रंग के पाठ के लिए डेस्कटॉप
हरे रंग के टेक्स्ट के लिए टैबलेट
नीले रंग के पाठ के लिए मोबाइल

//isat_style_media_query_for_desktop_mobile_tablets
var tablets = window.matchMedia("(max-width:  768px)");//for tablet devices
var mobiles = window.matchMedia("(max-width: 480px)");//for mobile devices
var desktops = window.matchMedia("(min-width: 992px)");//for desktop devices



isat_find_device_tablets(tablets);//apply style for tablets
isat_find_device_mobile(mobiles);//apply style for mobiles
isat_find_device_desktops(desktops);//apply style for desktops
// isat_find_device_desktops(desktops,tablets,mobiles);// Call listener function at run time
tablets.addListener(isat_find_device_tablets);//listen untill detect tablet screen size
desktops.addListener(isat_find_device_desktops);//listen untill detect desktop screen size
mobiles.addListener(isat_find_device_mobile);//listen untill detect mobile devices
// desktops.addListener(isat_find_device_desktops);

 // Attach listener function on state changes

function isat_find_device_mobile(mob)
{
  
// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="blue";

// isat mobile style here

}

function isat_find_device_desktops(des)
{

// isat mobile style here

var daynight=document.getElementById("daynight");
daynight.style.color="red";
 
//  isat mobile style here
}

function isat_find_device_tablets(tab)
{

// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="green";

//  isat mobile style here
}


//isat_style_media_query_for_desktop_mobile_tablets

    <div id="daynight">tricky style for mobile,desktop and tablet</div>

स्निपेट का विस्तार करें

— ßãlãjî
स्रोत

3

इनलाइन मीडिया क्वेश्चन सॅस के लिए ब्रेकपॉइंट जैसी किसी चीज़ का उपयोग करके संभव है

यह ब्लॉग पोस्ट यह बताता है कि अलग-अलग ब्लॉक की तुलना में इनलाइन मीडिया क्वेश्चन कैसे मैनेज किए जाते हैं: यह कोई विराम नहीं है

इनलाइन मीडिया क्वेरीज़ से संबंधित "एलिमेंट क्वेश्चन" का विचार है, कुछ दिलचस्प रीडर्स हैं:

— राफेल लुडर
स्रोत

1

यदि आप नियम को print.css फ़ाइल में जोड़ते हैं तो आपको @media का उपयोग नहीं करना होगा।

मैंने इसे स्मार्टी फ़ॉरच में अनसोल्ड कर दिया, जिसका उपयोग मैं कुछ तत्वों को पृष्ठभूमि का रंग देने के लिए करता हूँ।

<script type='text/javascript'>
  document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1);
</script>

स्निपेट का विस्तार करें

— पॉल वॉल्बर्स
स्रोत