আমি মিডিয়া ক্যোয়ারিতে সিএসএস ভেরিয়েবলগুলি ব্যবহার করার চেষ্টা করছি এবং এটি কার্যকর হয় না।
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}
আমি মিডিয়া ক্যোয়ারিতে সিএসএস ভেরিয়েবলগুলি ব্যবহার করার চেষ্টা করছি এবং এটি কার্যকর হয় না।
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}
উত্তর:
স্পেক থেকে ,
var()
ফাংশন একটি উপাদান কোনো সম্পত্তিতে একটি মান কোন অংশ স্থানে ব্যবহার করা যাবে।var()
ফাংশন সম্পত্তি নাম, নির্বাচকরা, অথবা সম্পত্তি মান ব্যতীত অন্য কিছু হিসেবে ব্যবহার করা যাবে না। (এটি করার ফলে সাধারণত অবৈধ বাক্য গঠন হয়, অন্যথায় এমন কোনও মান যার অর্থের সাথে চলকটির কোনও সংযোগ নেই))
সুতরাং না, আপনি এটি মিডিয়া ক্যোয়ারিতে ব্যবহার করতে পারবেন না।
এবং এটি বোধগম্য হয়। কারণ আপনি --mobile-breakpoint
উদাহরণ স্থাপন করতে পারেন :root
, যা <html>
উপাদানটি এবং সেখান থেকে অন্য উপাদানগুলিতে উত্তরাধিকার সূত্রে প্রাপ্ত। তবে মিডিয়া ক্যোয়ারী কোনও উপাদান নয়, এটি উত্তরাধিকার সূত্রে প্রাপ্ত হয় না <html>
, সুতরাং এটি কাজ করতে পারে না।
সিএসএস ভেরিয়েবলগুলি এটি সম্পাদন করার চেষ্টা করছে না। পরিবর্তে আপনি একটি সিএসএস প্রিপ্রসেসর ব্যবহার করতে পারেন।
হিসাবে 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
আপনি যা করতে পারেন তা হল @ মিডিয়া ক্যোয়ারী আপনার: মূল বিবৃতি!
:root {
/* desktop vars */
}
@media screen and (max-width: 479px) {
:root {
/* mobile vars */
}
}
সম্পূর্ণভাবে ক্রোম, ফায়ারফক্স এবং এজে এই পোস্টিং হিসাবে অন্তত সর্বশেষতম উত্পাদন সংস্করণে কাজ করে।
var
, তবে এটি অন্য কোথাও গণনাগুলিতে ব্যবহার করতে পারে css
, এটির জন্য এখনও "যাদু মান" (এখানে 479px) দুটি স্থানে রাখা দরকার: মিডিয়া ক্যোয়ারী এবং একটি ভেরি ডিক্লেয়ারেশন।
দৃশ্যত এটি জাতীয় সিএসএস ভেরিয়েবলগুলি ব্যবহার করা ঠিক সম্ভব নয়। এটি একটি সীমাবদ্ধতা ।
এটির ব্যবহারের একটি চতুর উপায়টি আপনার সমস্ত শৈলীকে প্রভাবিত করার জন্য মিডিয়া-ক্যোয়ারিতে আপনার পরিবর্তনগুলি পরিবর্তন করা। আমি এই নিবন্ধটি সুপারিশ ।
:root {
--gutter: 4px;
}
section {
margin: var(--gutter);
}
@media (min-width: 600px) {
:root {
--gutter: 16px;
}
}
আপনি যা চান তা অর্জনের একটি উপায় হ'ল এনপিএম প্যাকেজ 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) {}
আপনি যেমন অন্য উত্তরগুলি পড়তে পারেন, তবুও এটি করা সম্ভব নয় ।
কেউ কাস্টম এনভায়রনমেন্টাল ভেরিয়েবল উল্লেখ করেছেন ( env()
পরিবর্তে কাস্টম সিএসএস ভেরিয়েবলগুলির অনুরূপ var()
) এবং নীতিটি যথাযথ, যদিও এখনও দুটি বড় সমস্যা রয়েছে:
আপনি মিডিয়া প্রশ্নের মান পরিবর্তন করতে এবং এটি 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) {
...
}