সিএসএস নেটিভ ভেরিয়েবল মিডিয়া কোয়েরিতে কাজ করছে না


140

আমি মিডিয়া ক্যোয়ারিতে সিএসএস ভেরিয়েবলগুলি ব্যবহার করার চেষ্টা করছি এবং এটি কার্যকর হয় না।

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

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

}

আপনি বিভিন্ন ব্রাউজারে চেষ্টা করেছেন? (ক্রোম এবং ফায়ারফক্সের মতো)
কোহার্স

1
প্রিপ্রসেসর ছাড়াই @ স্যান্ড্রিনাপিরিরা
কোহার্স

1
@ স্যান্ড্রিনাপিরিরা তাই আপনি ফায়ারফক্স এবং ক্রোমে যেতে পারেন
Co


3
গুগলের মাধ্যমে এটির সন্ধানকারীদের জন্য কেবল স্পষ্ট করার জন্য: আপনি মিডিয়া ক্যোয়ারির ক্ষেত্রের মধ্যে CSS কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন, আপনি কেবল মিডিয়া ক্যোয়ারী ঘোষণায় এগুলি ব্যবহার করতে পারবেন না।
ডেভিড ডিপ্রস্ট

উত্তর:


112

স্পেক থেকে ,

var()ফাংশন একটি উপাদান কোনো সম্পত্তিতে একটি মান কোন অংশ স্থানে ব্যবহার করা যাবে। var()ফাংশন সম্পত্তি নাম, নির্বাচকরা, অথবা সম্পত্তি মান ব্যতীত অন্য কিছু হিসেবে ব্যবহার করা যাবে না। (এটি করার ফলে সাধারণত অবৈধ বাক্য গঠন হয়, অন্যথায় এমন কোনও মান যার অর্থের সাথে চলকটির কোনও সংযোগ নেই))

সুতরাং না, আপনি এটি মিডিয়া ক্যোয়ারিতে ব্যবহার করতে পারবেন না।

এবং এটি বোধগম্য হয়। কারণ আপনি --mobile-breakpointউদাহরণ স্থাপন করতে পারেন :root, যা <html>উপাদানটি এবং সেখান থেকে অন্য উপাদানগুলিতে উত্তরাধিকার সূত্রে প্রাপ্ত। তবে মিডিয়া ক্যোয়ারী কোনও উপাদান নয়, এটি উত্তরাধিকার সূত্রে প্রাপ্ত হয় না <html>, সুতরাং এটি কাজ করতে পারে না।

সিএসএস ভেরিয়েবলগুলি এটি সম্পাদন করার চেষ্টা করছে না। পরিবর্তে আপনি একটি সিএসএস প্রিপ্রসেসর ব্যবহার করতে পারেন।


77
উত্তরটি সঠিক যে স্পেকটি বর্তমানে মিডিয়া ক্যোয়ারিতে সিএসএস ভেরিয়েবলগুলি পরিচালনা করে না তবে সিএসএস ভেরিয়েবলগুলি সম্পাদন করার চেষ্টা করছে সে ক্ষেত্রে এটি ভুল। পুনরাবৃত্তি এবং যাদুবিদ্যার সংখ্যা হ্রাস করা ঠিক কারণটি
মাইকেম্যাকানা

69

হিসাবে Oriol উত্তর দেওয়া হয়েছে , বর্তমানে, সিএসএস ভেরিয়েবল লেভেল 1 এর var()মিডিয়া ক্যোয়ারিগুলিতে ব্যবহার করা যাবে না । তবে সাম্প্রতিক ঘটনাবলি ঘটেছে যা এই সমস্যাটির সমাধান করবে। কয়েক বছরে, একবার সিএসএস এনভায়রনমেন্ট ভেরিয়েবলস মডিউল স্তর 1 স্ট্যান্ডার্ড করা এবং প্রয়োগ করা হয়ে গেলে , আমরা env()সমস্ত আধুনিক ব্রাউজারে মিডিয়া ক্যোয়ারিতে ভেরিয়েবলগুলি ব্যবহার করতে সক্ষম হব ।

আপনি যদি স্পেসিফিকেশনটি পড়ে থাকেন এবং উদ্বেগ প্রকাশ করেন বা মিডিয়া-ক্যোয়ারী ব্যবহারের ক্ষেত্রে আপনি যদি আপনার সমর্থন জানাতে চান তবে আপনি এখনও এটি করতে পারবেন গিটহাব ডাব্লু 3 সি / সিএসএসউজি-ড্রাফট # 1693 বা কোনও সিএসএস গিটহাব ইস্যুতে উপস্থাপিত "[ css-env-1] ”


আসল উত্তর 2017-11-09 : সম্প্রতি, সিএসএস ওয়ার্কিং গ্রুপ সিদ্ধান্ত নিয়েছে যে সিএসএস ভেরিয়েবলস স্তর 2 ব্যবহার করে ব্যবহারকারী-সংজ্ঞায়িত পরিবেশের পরিবর্তনগুলি সমর্থন করবে env()এবং তারা মিডিয়া প্রশ্নগুলিতে এগুলি বৈধ করার চেষ্টা করবেঅ্যাপল প্রথমে সেপ্টেম্বরে 2017 সালে আইফোন এক্সের আনুষ্ঠানিক ঘোষণার আগে অ্যাপল প্রথমে স্ট্যান্ডার্ড ইউজার-এজেন্ট বৈশিষ্ট্যগুলির প্রস্তাব করার পরে এই গ্রুপটি সমাধান করেছে ( টিমোথি হর্টনের "ওয়েবকিট:" আইফোন এক্সের জন্য ডিজাইনের ওয়েবসাইটগুলি "দেখুন )। তারপরে অন্যান্য ব্রাউজারের প্রতিনিধিরা সম্মত হন যে তারা সাধারণত অনেকগুলি ডিভাইস, যেমন টেলিভিশন প্রদর্শন এবং রক্তাক্ত প্রান্ত সহ কালি মুদ্রণ জুড়ে কার্যকর হবে। ( env()বলা হতconstant(), কিন্তু এটি এখন হ্রাস করা হয়েছে। আপনি এখনও নিবন্ধগুলি দেখতে পাচ্ছেন যা পুরাতন নামকে বোঝায়, যেমন পিটার-পল কোচের এই নিবন্ধটি ।) কয়েক সপ্তাহ কেটে যাওয়ার পরে , মজিলার ক্যামেরন ম্যাককর্ম্যাক বুঝতে পেরেছিলেন যে এই পরিবেশের পরিবর্তনগুলি মিডিয়া অনুসন্ধানগুলিতে ব্যবহারযোগ্য হবে, এবং ট্যাব অ্যাটকিনস, জুনিয়র গুগলের তখন বুঝতে পেরেছিল যে ব্যবহারকারী-সংজ্ঞায়িত পরিবেশের ভেরিয়েবলগুলি বিশেষত গ্লোবাল, অ-ওভারিডেবল রুট ভেরিয়েবল মিডিয়া ক্যোয়ারী হিসাবে ব্যবহারযোগ্য হিসাবে কার্যকর হবে। এখন, অ্যাপলের ডিন "ডিনো" জ্যাকসন স্তর 2-এ সম্পাদনায় আটকিনসে যোগ দেবেন

আপনি এই বিষয়ে w3c/csswg-draftsআপডেটটি সাবস্ক্রাইব করতে পারবেন গিটহাব ইস্যুতে # 1693 । (বিশেষত প্রাসঙ্গিক details তিহাসিক বিশদগুলির জন্য, CSSWG সভা বটের রেজোলিউশনে এম্বেড করা মিটিং লগগুলি প্রসারিত করুন এবং " মিউকিউ " অনুসন্ধান করুন, যা "মিডিয়া ক্যোয়ারী" হিসাবে দাঁড়িয়েছে))

ভবিষ্যতে যখন আরও উন্নয়ন ঘটে তখন এই প্রশ্নটি আপডেট করার পরিকল্পনা করি। ভবিষ্যত উত্তেজনাপূর্ণ।


আপডেট 2018-02-08 : সাফারি প্রযুক্তি প্রাকদর্শন 49calc() মিডিয়া ক্যোয়ারীগুলিতে পার্সিংয়ের জন্য সমর্থন যোগ করেছে, এটি তাদের সমর্থন করার জন্য একটি পূর্ববর্তিকাও হতে পারে env()


আপডেট 2018-04-27 : গুগলের ক্রোমিয়াম দল কাজ শুরু করার সিদ্ধান্ত নিয়েছে env()। প্রতিক্রিয়া হিসাবে, অ্যাটকিনস env()একটি পৃথক, বেসরকারী খসড়া মানদণ্ডে উল্লেখ করতে শুরু করেছে : সিএসএস পরিবেশ পরিবর্তনশীল মডিউল স্তর 1 । ( ডাব্লু 3 সি / সিএসএসইউজি-ড্রাফ্ট # 1693 এ তাঁর গিটহাবের মন্তব্য দেখুন এবং ডব্লিউ 3 সি / সিএসএসইউজি-খসড়া # 1817 এ তার মন্তব্য দেখুন ।) খসড়াটি মিডিয়া প্রশ্নগুলিতে সুস্পষ্ট ব্যবহারের ক্ষেত্রে হিসাবে ভেরিয়েবলকে ডেকেছে:

যেহেতু পরিবেশের ভেরিয়েবলগুলি কোনও নির্দিষ্ট উপাদান থেকে আঁকা কোনও কিছুর মূল্যের উপর নির্ভর করে না, সেগুলি এমন জায়গায় ব্যবহার করা যেতে পারে যেখানে থেকে অঙ্কনের কোনও সুস্পষ্ট উপাদান নেই, যেমন @mediaনিয়মে, যেখানে var()ফাংশনটি বৈধ হবে না।

আপনি যদি স্পেসিফিকেশনটি পড়ে থাকেন এবং উদ্বেগ প্রকাশ করেন বা মিডিয়া-ক্যোয়ারী ব্যবহারের ক্ষেত্রে আপনি যদি আপনার সমর্থন জানাতে চান তবে আপনি এখনও এটি করতে পারবেন গিটহাব ডাব্লু 3 সি / সিএসএসউজি-খসড়া # 1693 বা কোনও সিএসএস গিটহাব ইস্যুতে উপস্থাপিত "[ css-env-1] ”


আপডেট 2019-07-06 : স্পেসিফিকেশনগুলিতে কাজ অব্যাহত রয়েছে। গিটহাব ইস্যু # 2627 এবং গিটহাব ইস্যু # 3578 মিডিয়া প্রশ্নের মধ্যে কাস্টম পরিবেশগত পরিবর্তনশীলগুলির প্রতি উত্সর্গীকৃত to


31

আপনি যা করতে পারেন তা হল @ মিডিয়া ক্যোয়ারী আপনার: মূল বিবৃতি!

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

সম্পূর্ণভাবে ক্রোম, ফায়ারফক্স এবং এজে এই পোস্টিং হিসাবে অন্তত সর্বশেষতম উত্পাদন সংস্করণে কাজ করে।


ওহ ধন্যবাদ! এটি অবশ্যই সঠিক উত্তর হওয়া উচিত।

1
জানা ভাল. একটি সীমাবদ্ধতা: যদি সেই মানটি a হিসাবেও অ্যাক্সেস করতে হয় var, তবে এটি অন্য কোথাও গণনাগুলিতে ব্যবহার করতে পারে css, এটির জন্য এখনও "যাদু মান" (এখানে 479px) দুটি স্থানে রাখা দরকার: মিডিয়া ক্যোয়ারী এবং একটি ভেরি ডিক্লেয়ারেশন।
টুলমেকারস্টেভ

8

দৃশ্যত এটি জাতীয় সিএসএস ভেরিয়েবলগুলি ব্যবহার করা ঠিক সম্ভব নয়। এটি একটি সীমাবদ্ধতা

এটির ব্যবহারের একটি চতুর উপায়টি আপনার সমস্ত শৈলীকে প্রভাবিত করার জন্য মিডিয়া-ক্যোয়ারিতে আপনার পরিবর্তনগুলি পরিবর্তন করা। আমি এই নিবন্ধটি সুপারিশ ।

:root {
  --gutter: 4px;
}

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

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

"মিডিয়া-ক্যোয়ারিতে আপনার ভেরিয়েবলগুলি পরিবর্তন করুন" এর অর্থ আমি বুঝতে পারি না, আপনি উদাহরণ প্রদর্শন করতে পারেন?

1
এটি আমি বোঝাতে চাইনি। আমি মিডিয়া ক্যোয়ারী মান সম্পর্কে জিজ্ঞাসা করেছি।

4
হ্যাঁ, ঠিক আছে, এটি আমি লিখিত লিখিত নিবন্ধে আছে। আমি জানি আপনি যা প্রত্যাশা করেছিলেন তা নয়, তবে সিএসএস ভেরিয়েবলগুলি কেবল মিডিয়া প্রশ্নের সংজ্ঞা দেওয়ার জন্য ব্যবহার করা যাবে না
Cohars

8

আপনি যা চান তা অর্জনের একটি উপায় হ'ল এনপিএম প্যাকেজ postcss-media-variables

আপনি যদি এনপিএম প্যাকেজ ব্যবহার করে ভাল থাকেন তবে আপনি এখানে ডকুমেন্টঅ্যাটিনটি দেখতে পারেন

উদাহরণ

/* 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) {}

4
ধন্যবাদ, তবে আমি কোনও প্রিপ্রসেসর ব্যবহার না করার চেষ্টা করছিলাম।

এবং। আল: পোস্টক্যাসের সাহায্যে আপনি cssnext cssnext.io/features/#custom-media-queries
sebilasse

1
@ সেবিলাস: কাস্টম-মিডিয়া-কোয়েরিগুলি মিডিয়া প্রশ্নের জন্য ব্রেকপয়েন্ট হিসাবে সিএসএস ভেরিয়েবলগুলি ব্যবহার করতে না পারার মূল সমস্যাটির সমাধান করে না
zhirzh

1
পোস্টসিএসএস কোনও প্রিপ্রসেসর নয়

1

আপনি যেমন অন্য উত্তরগুলি পড়তে পারেন, তবুও এটি করা সম্ভব নয়

কেউ কাস্টম এনভায়রনমেন্টাল ভেরিয়েবল উল্লেখ করেছেন ( env()পরিবর্তে কাস্টম সিএসএস ভেরিয়েবলগুলির অনুরূপ var()) এবং নীতিটি যথাযথ, যদিও এখনও দুটি বড় সমস্যা রয়েছে:

  • দুর্বল ব্রাউজার সমর্থন
  • এখনও পর্যন্ত এগুলি সংজ্ঞায়িত করার কোনও উপায় নেই (তবে সম্ভবত ভবিষ্যতে এটি হবে, কারণ এটি এখন পর্যন্ত কেবল একটি বেসরকারী খসড়া)

1

সংক্ষিপ্ত উত্তর

আপনি মিডিয়া প্রশ্নের মান পরিবর্তন করতে এবং এটি CSS ভেরিয়েবলের মান সেট করতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন।

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

javascript:

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) {
  ...
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.