सीएसएस देशी चर मीडिया प्रश्नों में काम नहीं कर रहे हैं

140

मैं मीडिया क्वेरी में सीएसएस चर का उपयोग करने की कोशिश कर रहा हूं और यह काम नहीं करता है।

:root {
  --mobile-breakpoint: 642px;
}

@media (max-width: var(--mobile-breakpoint)) {

}

css media-queries css-variables

क्या आपने कई ब्राउज़रों में प्रयास किया है? (क्रोम और फ़ायरफ़ॉक्स की तरह)

— कोहर

1

बिना प्रीप्रोसेसर के @SandrinaPereira

— कोहर्स

1

@SandrinaPereira तो आप फ़ायरफ़ॉक्स और क्रोम पर कर सकते हैं

— s

1

caniuse.com/#feat=css-variables

3

Google के माध्यम से इसे खोजने वाले लोगों के लिए स्पष्ट करने के लिए: आप मीडिया क्वेरी के दायरे में CSS कस्टम गुणों का उपयोग कर सकते हैं, आप बस उन्हें मीडिया क्वेरी घोषणा में उपयोग नहीं कर सकते।

— डेविड डिप्रोस्ट

112

से कल्पना ,

var()समारोह एक तत्व पर किसी भी संपत्ति में एक मूल्य के किसी भी भाग के स्थान पर इस्तेमाल किया जा सकता। var()समारोह संपत्ति के नाम, चयनकर्ताओं, या संपत्ति मूल्यों के अलावा कुछ और के रूप में इस्तेमाल नहीं किया जा सकता। (ऐसा करने से आमतौर पर अमान्य सिंटैक्स उत्पन्न होता है, या ऐसा कोई मान जिसका अर्थ चर से कोई संबंध नहीं है।)

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

और यह समझ में आता है। क्योंकि आप --mobile-breakpointउदा को सेट कर सकते हैं :root, अर्थात् , <html>तत्व, और वहाँ से अन्य तत्वों को विरासत में मिला है। लेकिन एक मीडिया क्वेरी एक तत्व नहीं है, यह इनहेरिट नहीं करता है <html>, इसलिए यह काम नहीं कर सकता है।

यह वह नहीं है जो सीएसएस चर को पूरा करने की कोशिश कर रहे हैं। आप इसके बजाय CSS प्रीप्रोसेसर का उपयोग कर सकते हैं।

— Oriol
स्रोत

77

यह उत्तर सही है कि मीडिया प्रश्नों में सीएसएस चर को संभाल नहीं सकता है, लेकिन गलत है कि सीएसएस चर को पूरा करने की कोशिश नहीं कर रहे हैं। दोहराव और जादू की संख्या कम करना यही कारण है कि CSS चर बनाए गए थे - w3.org/TR/css-variables-1/#intro

— mikemaccana

69

जैसा कि ओरिओल ने उत्तर दिया है , वर्तमान में, सीएसएस वेरिएबल्स लेवल 1 का var()उपयोग मीडिया प्रश्नों में नहीं किया जा सकता है । हालाँकि, हाल के कुछ ऐसे घटनाक्रम हुए हैं जो इस समस्या का समाधान करेंगे। कुछ वर्षों में, एक बार CSS पर्यावरण चर मॉड्यूल स्तर 1 मानकीकृत और कार्यान्वित हो जाने पर, हम env()सभी आधुनिक ब्राउज़रों में मीडिया प्रश्नों में चर का उपयोग करने में सक्षम होंगे ।

यदि आप विनिर्देश पढ़ते हैं और चिंता करते हैं, या यदि आप मीडिया-क्वेरी उपयोग मामले के लिए अपना समर्थन देना चाहते हैं, तो आप अभी भी GitHub w3c / csswg-draft # 1693 में या किसी भी सीएसएस GitHub मुद्दे के साथ उपसर्ग कर सकते हैं "[ css-env-1] ” ।

मूल उत्तर 2017-11-09 : हाल ही में, सीएसएस वर्किंग ग्रुप ने फैसला किया कि सीएसएस वेरिएबल्स लेवल 2 उपयोगकर्ता-परिभाषित पर्यावरण चर का उपयोग करके समर्थन करेगा env(), और वे उन्हें मीडिया प्रश्नों में मान्य बनाने का प्रयास करेंगे । समूह इस का समाधान के बाद एप्पल पहले प्रस्तावित मानक उपयोगकर्ता-एजेंट गुण , सितंबर 2017 में iPhone एक्स के आधिकारिक घोषणा से ठीक पहले (यह भी देखें वेबकिट: "iPhone एक्स के लिए डिजाइनिंग वेबसाइट" टिमोथी होर्टन द्वारा )। अन्य ब्राउज़र प्रतिनिधियों ने तब सहमति व्यक्त की कि वे आम तौर पर कई उपकरणों में उपयोगी होंगे, जैसे कि टेलीविजन डिस्प्ले और ब्लीड किनारों के साथ इंक प्रिंटिंग। ( env()कहा जाता थाconstant(), लेकिन अब इसे हटा दिया गया है। आप अभी भी ऐसे लेख देख सकते हैं जो पुराने नाम को संदर्भित करते हैं, जैसे कि पीटर-पॉल कोच का यह लेख ।) कुछ हफ़्ते बीत जाने के बाद, मोज़िला के कैमरन मैककॉर्मैक ने महसूस किया कि ये पर्यावरण चर मीडिया के प्रश्नों में उपयोगी होंगे, और टैब एटकिंस, जूनियर। तब Google ने महसूस किया कि उपयोगकर्ता-परिभाषित पर्यावरण चर, विशेष रूप से वैश्विक, गैर-परिवर्तनीय रूट वैरिएबल के रूप में उपयोगी होंगे जो मीडिया प्रश्नों में उपयोग करने योग्य हैं। अब, एपल के डीन "डीनो" जैक्सन, एडिटिंग लेवल 2 में एटकिंस में शामिल होंगे ।

आप इस मामले पर w3c/csswg-draftsGitHub के अंक # 1693 में अपडेट की सदस्यता ले सकते हैं । (विशेष रूप से प्रासंगिक ऐतिहासिक विवरणों के लिए, CSSWG मीटिंग बॉट के प्रस्तावों में एम्बेडेड मीटिंग लॉग्स का विस्तार करें और "MQ" खोजें, जो "मीडिया क्वेरीज़" के लिए है।)

मैं भविष्य में इस सवाल को अद्यतन करने की योजना बनाता हूं जब अधिक विकास होता है। भविष्य रोमांचक है।

अपडेट 2018-02-08 : सफारी टेक्नोलॉजी प्रिव्यू 49calc() में मीडिया क्वेश्चन में पार्स करने के लिए सपोर्ट जोड़ा गया है , जो env()उनके साथ ही सपोर्ट करने का प्रस्ताव हो सकता है ।

अपडेट 2018-04-27 : Google पर क्रोमियम टीम ने काम करना शुरू करने का फैसला किया है env()। जवाब में, एटकिंस ने env()एक अलग, अनौपचारिक मसौदा मानक में निर्दिष्ट करना शुरू कर दिया है : सीएसएस पर्यावरण चर मॉड्यूल स्तर 1 । (देखें उनकी GitHub टिप्पणी W3C / # 1693 csswg-ड्राफ़्ट में और में अपनी टिप्पणी W3C / csswg-ड्राफ्ट # 1817 ।) एक स्पष्ट उपयोग के मामले के रूप में मीडिया के प्रश्नों में बाहर चर मसौदा कॉल:

क्योंकि पर्यावरण चर किसी विशेष तत्व से खींची गई चीज़ के मूल्य पर निर्भर नहीं करते हैं, उनका उपयोग उन जगहों पर किया जा सकता है जहां से खींचने के लिए कोई स्पष्ट तत्व नहीं है, जैसे कि @mediaनियमों में, जहां var()फ़ंक्शन मान्य नहीं होगा।

यदि आप विनिर्देश पढ़ते हैं और चिंता करते हैं, या यदि आप मीडिया-क्वेरी उपयोग मामले के लिए अपने समर्थन को आवाज़ देना चाहते हैं, तो आप अभी भी GitHub w3c / csswg-draft # 1693 में या किसी भी CSS GitHub मुद्दे के साथ उपसर्ग कर सकते हैं "[ css-env-1] ” ।

अपडेट 2019-07-06 : विनिर्देशों पर काम जारी है। GitHub मुद्दा # 2627 और GitHub अंक # 3578 मीडिया प्रश्नों में कस्टम पर्यावरण चर के लिए समर्पित हैं।

— jschoi
स्रोत

31

हालाँकि, आप क्या कर सकते हैं @media क्वेरी आपके: रूट स्टेटमेंट!

:root {
     /* desktop vars */
}
@media screen and (max-width: 479px) {
    :root {
        /* mobile vars */
    }
}

पूरी तरह से क्रोम, फ़ायरफ़ॉक्स और एज में काम करता है इस पोस्टिंग के रूप में कम से कम नवीनतम उत्पादन संस्करण।

— शॉन
स्रोत

वाह धन्यवाद! यह निश्चित रूप से सही उत्तर होना चाहिए।

— सिंपल कॉमप्लेक्सेबल

1

जानकार अच्छा लगा। एक सीमा: यदि उस मूल्य को ए के रूप में भी उपयोग करने की आवश्यकता है var, तो अन्य जगहों पर गणना में उपयोग कर सकते हैं css, इसके लिए अभी भी "मैजिक वैल्यू" (यहां, 479px) दो स्थानों पर डालने की आवश्यकता है: मीडिया क्वेरी और एक var घोषणा।

— टूलमेकरसैट

8

जाहिरा तौर पर इस तरह से देशी सीएसएस चर का उपयोग करना संभव नहीं है। यह सीमाओं में से एक है ।

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

:root {
  --gutter: 4px;
}

section {
  margin: var(--gutter);
}

@media (min-width: 600px) {
  :root {
    --gutter: 16px;
  }
}

— Cohars
स्रोत

मुझे "मीडिया-क्वेरी में अपने चर बदलने" का अर्थ समझ में नहीं आता है, आप उदाहरण दिखा सकते हैं?

1

यह मेरा मतलब नहीं है। मैंने मीडिया क्वेरी मूल्य के बारे में पूछा।

4

हाँ, बस किया, यह लेख मैं जुड़ा हुआ है। मुझे पता है कि यह वह नहीं है

— जिसकी

8

जो आप चाहते हैं उसे प्राप्त करने का एक तरीका है npm पैकेज का उपयोग करना postcss-media-variables।

यदि आप npm पैकेज का उपयोग करने के साथ ठीक हैं, तो आप यहाँ के लिए एक नज़र डॉक्यूमेंटोइन ले सकते हैं

postcss मीडिया-चर

उदाहरण

/* input */
:root {
  --min-width: 1000px;
  --smallscreen: 480px;
}
@media (min-width: var(--min-width)) {}
@media (max-width: calc(var(--min-width) - 1px)) {}

@custom-media --small-device (max-width: var(--smallscreen));
@media (--small-device) {}

— pradeep1991singh
स्रोत

4

धन्यवाद, लेकिन मैं किसी भी प्रीप्रोसेसर का उपयोग नहीं करने की कोशिश कर रहा था।

एट। अल: पोस्टक्स के साथ आप cssnext cssnext.io/features/#custom-media-queries

— sebilasse

1

@sebilasse: कस्टम-मीडिया-क्वेरीज़ मीडिया प्रश्नों के लिए ब्रेकप्वाइंट के रूप में सीएसएस चर का उपयोग नहीं करने की मुख्य समस्या को संबोधित नहीं करती है

— झिरझू

1

postcss एक प्रीप्रोसेसर नहीं है

1

जैसा कि आप अन्य उत्तर पढ़ सकते हैं, फिर भी ऐसा करना संभव नहीं है ।

किसी कस्टम पर्यावरण चर (कस्टम सीएसएस चर के लिए इसी तरह का उल्लेख env()बजाय var()), और सिद्धांत, ध्वनि है वहाँ अभी भी 2 प्रमुख मुद्दे हैं, हालांकि:

कमजोर ब्राउज़र समर्थन
अब तक उन्हें परिभाषित करने का कोई तरीका नहीं है (लेकिन शायद भविष्य में होगा, क्योंकि यह अब तक केवल अनौपचारिक मसौदा है)

— Vojtisek
स्रोत

1

संक्षिप्त जवाब

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

// get value of css variable
getComputedStyle(document.documentElement).getPropertyValue('--mobile-breakpoint'); // '642px'

// search for media rule
var mediaRule = document.styleSheets[i].cssRules[j];

// update media rule
mediaRule.media.mediaText = '..'

लंबा जवाब

मैंने एक छोटी स्क्रिप्ट लिखी है जिसे आप अपने पेज पर शामिल कर सकते हैं। यह के एक मूल्य के साथ हर मीडिया शासन की जगह 1pxसीएसएस चर के मूल्य के साथ --replace-media-1px, मूल्य के साथ नियमों 2pxके साथ --replace-media-2pxइतने पर और। यह मीडिया के प्रश्नों के लिए काम करता है with, min-width, max-width, height, min-heightऔर max-heightतब भी जब वे का उपयोग कर से जुड़े हुए हैं and।

जावास्क्रिप्ट:

function* visitCssRule(cssRule) {
    // visit imported stylesheet
    if (cssRule.type == cssRule.IMPORT_RULE)
        yield* visitStyleSheet(cssRule.styleSheet);

    // yield media rule
    if (cssRule.type == cssRule.MEDIA_RULE)
        yield cssRule;
}

function* visitStyleSheet(styleSheet) {
    try {
        // visit every rule in the stylesheet
        var cssRules = styleSheet.cssRules;
        for (var i = 0, cssRule; cssRule = cssRules[i]; i++)
            yield* visitCssRule(cssRule);
    } catch (ignored) {}
}

function* findAllMediaRules() {
    // visit all stylesheets
    var styleSheets = document.styleSheets;
    for (var i = 0, styleSheet; styleSheet = styleSheets[i]; i++)
        yield* visitStyleSheet(styleSheet);
}

// collect all media rules
const mediaRules = Array.from(findAllMediaRules());

// read replacement values
var style = getComputedStyle(document.documentElement);
var replacements = [];
for (var k = 1, value; value = style.getPropertyValue('--replace-media-' + k + 'px'); k++)
    replacements.push(value);

// update media rules
for (var i = 0, mediaRule; mediaRule = mediaRules[i]; i++) {
    for (var k = 0; k < replacements.length; k++) {
        var regex = RegExp('\\((width|min-width|max-width|height|min-height|max-height): ' + (k+1) + 'px\\)', 'g');
        var replacement = '($1: ' + replacements[k] + ')';
        mediaRule.media.mediaText = mediaRule.media.mediaText.replace(regex, replacement);
    }
}

सीएसएस:

:root {
  --mobile-breakpoint: 642px;

  --replace-media-1px: var(--mobile-breakpoint);
  --replace-media-2px: ...;
}

@media (max-width: 1px) { /* replaced by 642px */
  ...
}

@media (max-width: 2px) {
  ...
}

— Ich_73
स्रोत