সিএসএস প্রদর্শন সম্পত্তিটি ডিফল্ট মানটিতে পুনরায় সেট করুন

Question

ডিসপ্লে সম্পত্তিটি তার ডিফল্ট মান দিয়ে ওভাররাইড করা সম্ভব? উদাহরণস্বরূপ, যদি আমি এটিকে কোনও শৈলীতে সেট করে না রেখেছি এবং আমি এটির ডিফল্টর সাথে আলাদাভাবে ওভাররাইড করতে চাই।

বা element উপাদানটির ডিফল্ট কী তা খুঁজে বের করার এবং তারপরে এটি সেট করার একমাত্র উপায়? উপাদানটি সাধারণত ব্লক, ইনলাইন বা যে কোনও ...

Comments

এটি এখন ব্যবহার করা সম্ভব unset।

— মিনিট

প্রদর্শন পরীক্ষা: unset, initial, inherit,revert

— Theraot

আমি জানি এই প্রশ্নটি কেবল ব্রাউজারের ডিফল্টগুলিতে পুনরায় সেট হওয়ার বিষয়ে জিজ্ঞাসা করে তবে এই পৃষ্ঠায় অনেক লোক যারা এই বৈশিষ্ট্যটি ব্রাউজারের ডিফল্টগুলিতে পুনরায় সেট করতে চান: মাইক্রাস my সমস্ত: আনসেট করুন; } div {all: আনসেট; } ইত্যাদি

— ব্যবহারকারী 1254723

Answer 1

একটি ব্রাউজারের ডিফল্ট শৈলীগুলি তার ব্যবহারকারী এজেন্ট স্টাইলশীটে সংজ্ঞায়িত করা হয়, যার উত্স আপনি এখানে পেতে পারেন । দুর্ভাগ্যক্রমে, ক্যাসকেডিং এবং উত্তরাধিকার স্তর 3 টি অনুমান করে কোনও শৈলীর সম্পত্তি তার ব্রাউজার ডিফল্টে পুনরায় সেট করার কোনও উপায় প্রস্তাব করে না। তবে ক্যাসকেডিং এবং উত্তরাধিকার স্তর 4 এ এর জন্য একটি কীওয়ার্ড পুনরায় প্রবর্তনের পরিকল্পনা রয়েছে - কার্যকারী গ্রুপটি এখনও এই কীওয়ার্ডটির জন্য কোনও নাম স্থির করেনি (লিঙ্কটি বর্তমানে বলেছে revert, তবে এটি চূড়ান্ত নয়)। ব্রাউজার সমর্থন সম্পর্কে তথ্য caniuse.com এrevert পাওয়া যাবে ।

লেভেল 3 স্পিক একটি initialকীওয়ার্ড প্রবর্তন করার সময়, কোনও প্রারম্ভিক মানটিতে একটি সেট সেট করা এটি ব্রাউজারের দ্বারা সংজ্ঞায়িত নয় , সিএসএস দ্বারা নির্ধারিত হিসাবে তার ডিফল্ট মানটিতে পুনরায় সেট করে । এর প্রাথমিক মান হ'ল ; এটি এখানে নির্দিষ্ট করা আছে । শব্দ যে মান, না ব্রাউজার ডিফল্ট বোঝায়। বৈশিষ্টটি নিজেই এই নোটটি সম্পত্তির অধীনে তৈরি করে :displayinlineinitialall

উদাহরণস্বরূপ, যদি কোনও লেখক all: initialকোনও উপাদানের উপরে নির্দিষ্ট করে থাকেন তবে এটি সমস্ত উত্তরাধিকারকে অবরুদ্ধ করবে এবং সমস্ত সম্পত্তি পুনরায় সেট করে দেবে, যেন ক্যাসকেডের কোনও লেখক, ব্যবহারকারী বা ব্যবহারকারী-এজেন্ট স্তরে কোনও বিধি প্রকাশিত হয়নি।

এটি কোনও পৃষ্ঠায় অন্তর্ভুক্ত "উইজেট" এর মূল উপাদানগুলির জন্য দরকারী হতে পারে, যা বাইরের পৃষ্ঠার শৈলীর উত্তরাধিকারী হতে চায় না। তবে নোট করুন, যে কোনও "ডিফল্ট" স্টাইলটি সেই উপাদানটিতে প্রয়োগ করা হয়েছে (যেমন, display: blockইউএ স্টাইল শীট থেকে ব্লক উপাদানগুলিতে যেমন <div>) ব্লক হয়ে যাবে।

সুতরাং আমি এখনই খাঁটি সিএসএস ব্যবহারের একমাত্র উপায় হ'ল ব্রাউজারের ডিফল্ট মানটি সন্ধান করা এবং এটিকে ম্যানুয়ালি সেট করা:

div.foo { display: inline-block; }
div.foo.bar { display: block; }

(উপরের বিকল্পের বিকল্প হতে পারে div.foo:not(.bar) { display: inline-block; }তবে এতে ওভাররাইডের পরিবর্তে মূল নির্বাচককে সংশোধন করা জড়িত))

Comments

হ্যাঁ, ভাল এবং দরকারী জিনিসগুলি পেতে ব্রাউজারগুলিকে সর্বদা এত ধীর হতে হবে: পি এবং ব্যবহারকারীদের কেন এত ধীরে ধীরে আপগ্রেড করা উচিত ... যাইহোক, এটিই আমি চেয়েছিলাম!

— সুইভিশ

@ সুইশ: দেখা যাচ্ছে যে initialআসলে কী করে আমি ভুল ব্যাখ্যা করেছিলাম । আমি আমার উত্তর আপডেট করেছি।

— BoltClock

@ সুইশ: সিএসএস সম্পত্তি স্তরের প্রাথমিক মানগুলি সংজ্ঞা দেয়, প্রতি-মৌলিক ভিত্তিতে নয় যা আমি প্রাথমিকভাবে ভেবেছিলাম। এই উদাহরণে, এর প্রাথমিক মান displayসর্বদা inline( w3.org/TR/CSS21/visuren.html#display-prop ) হয় তা নির্বিশেষে এটি একটি divবা এ- তে রয়েছে span। কোনও divউপাদান হ'ল এইচটিএমএল অনুসারেdisplay: block ডিফল্ট হয় , এবং সিএসএস নয়, তাই এটি ব্রাউজারের ইউএ স্টাইলশীট পর্যন্ত বলে div { display: block; }।

— BoltClock

"সিএসএস প্রথম স্তরের ভিত্তিতে প্রাথমিক মানগুলি সংজ্ঞা দেয়, প্রতি-মৌলিক ভিত্তিতে নয় যা আমি প্রাথমিকভাবে ভেবেছিলাম।" - এটি বিশ্বাস করার জন্য আমাকে আসলে কয়েকবার পড়তে হয়েছিল। (যেহেতু সিএসএস সর্বদা উপাদান প্রসঙ্গে (কোনও না কোনওভাবে প্রয়োগ করা হয় বলে মনে হয়, তাই এখানে সমর্থন না করা কিছু অ-তুচ্ছ বিষয় শেখার পরামর্শ দেয় - কেউ যুক্তিটি কি জানেন?))

— এসজেড।

defaultনামকরণ করা হয়েছিল revert।

— ওরিওল

Answer 2

জাভাস্ক্রিপ্ট ব্যবহার করার অনুমতি থাকলে আপনি displayসম্পত্তিটি একটি খালি স্ট্রিংয়ে সেট করতে পারেন । এটি সেই নির্দিষ্ট উপাদানের জন্য এটি ডিফল্ট ব্যবহার করতে পারে।

var element = document.querySelector('span.selector');

// Set display to empty string to use default for that element
element.style.display = '';

এখানে একটি একটি লিঙ্ক jsbin ।

এটি দুর্দান্ত কারণ আপনাকে ফেরত দিতে বিভিন্ন ধরণের প্রদর্শন সম্পর্কে চিন্তা করতে হবে না (block , inline, inline-block, table-cell, ইত্যাদি)।

তবে এটির জাভাস্ক্রিপ্টের প্রয়োজন, তাই আপনি যদি কেবল সিএসএস-সলিউশন সন্ধান করেন তবে এটি আপনার পক্ষে সমাধান নয়।

দ্রষ্টব্য: এটি ইনলাইন স্টাইলগুলিকে ওভাররাইড করে তবে সিএসএসে সেট করা শৈলী নয়

Comments

নোট করুন যে এটি কেবল তখনই কাজ করে যদি জাভাস্ক্রিপ্ট ব্যবহার করে শৈলীটি সেট করা হয় বা styleপ্রথম স্থানে একটি ইনলাইন বৈশিষ্ট্য। আপনি এই পদ্ধতিটি ব্যবহার করে স্টাইলশিট থেকে কোনও ঘোষণাকে ওভাররাইড করতে বা অপসারণ করতে পারবেন না।

— BoltClock

পছন্দ করুন আপনি এখানে যা বলছেন তা অস্বীকার করে এমন একটি জিসফিল এখানে দেওয়া হয়েছে। jsfiddle.net/g45qagt3

— থেটল উইকস

দুঃখিত, আমার ওভাররাইড শব্দটির ব্যবহার বিভ্রান্তিকর ছিল। আমার অর্থ শূন্য স্ট্রিংয়ে একটি স্টাইল সেট করা কেবল এমন স্টাইল সরিয়ে ফেলবে যা styleঅ্যাট্রিবিউট বা জাভাস্ক্রিপ্ট সেটারের মাধ্যমে প্রয়োগ করা হয়েছিল । আপনি যদি জেএসের মাধ্যমে নির্দিষ্ট মান নির্ধারণ করেন তবে আপনি স্টাইলশিট ঘোষণাকে ওভাররাইড করতে পারেন তবে এটিকে খালি সেট করা একে একে সেট না করার সমতুল্য - স্টাইলশিট ঘোষণাটি অক্ষত থাকবে। : পরিবর্তিত বেহালার দেখুন jsfiddle.net/BoltClock/g45qagt3/1

— BoltClock

এটি লক্ষণীয়, খালি স্ট্রিংটি কেবল "প্রদর্শন" নয়, কোনও সম্পত্তির জন্য কাজ করে

— আর্তুর বেলজাজেভ

Answer 3

আনসেট করুন display:

আপনি সেই মানটি ব্যবহার করতে পারেন unsetযা ফায়ারফক্স এবং ক্রোম উভয় ক্ষেত্রেই কাজ করে ।

display: unset;

---

.foo     { display: none;  }
.foo.bar { display: unset; }

Comments

unsetএকই সমস্যা আছে initial। মান displayহয়ে যাবে inline। দেখুন codepen.io/Gidgidonihah/pen/mwWxEq

— Gidgidonihah

ওপি স্পষ্টতই প্রতিটি উপাদানকে ডিফল্ট হিসাবে রিসেট করতে চায়, উদাহরণস্বরূপ ইনলাইনটিতে স্প্যান পুনরায় সেট করতে এবং একটি ডিভকে ব্লক করতে। unsetএটির সাথে তার প্রতি সম্পত্তি হিসাবে আর সহায়তা করবে না এবং সর্বদা প্রদর্শনটি পুনরায় সেট করে inline। আপনার উত্তর আপডেট করার বিবেচনা করুন।

— ক্রলিক

Answer 4

না, এটি সাধারণত সম্ভব হয় না। একবার কিছু সিএসএস (বা এইচটিএমএল) কোড কোনও উপাদানের কোনও সম্পত্তির জন্য একটি মান সেট করে দিলে এটিকে পূর্বাবস্থায় ফেলার এবং ব্রাউজারকে তার ডিফল্ট মানটি ব্যবহার করার কোনও উপায় নেই।

কোনও সম্পত্তি এমন একটি মান সেট করা অবশ্যই সম্ভব যা আপনি ডিফল্ট মান বলে আশা করেন। আপনি যদি রেন্ডারিং পরীক্ষা করেন তবে এটি ব্যাপকভাবে কাজ করতে পারে HTML5 সিআর এর বিভাগটি বেশিরভাগ ব্রাউজারগুলি আসলে কী করে তা প্রতিফলিত করে ।

তবুও, উত্তরটি "না", কারণ ব্রাউজারগুলিতে তাদের পছন্দ মতো ডিফল্ট মান থাকতে পারে। আপনার ডিফল্টগুলিতে পুনরায় সেট করতে চাওয়ার কারণ কী তা বিশ্লেষণ করা উচিত; মূল সমস্যা এখনও সমাধেয় করা যেতে পারে।

Answer 5

আপনার যদি জাভাস্ক্রিপ্টে অ্যাক্সেস থাকে তবে আপনি একটি উপাদান তৈরি করতে পারেন এবং এর গণিত শৈলীটি পড়তে পারেন।

function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
    var pseudoElement = opt_pseudoElement || null;
    var element = document.createElement(elementTagName);
    document.body.appendChild(element);
    var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
    element.remove();
    return computedStyle;
}

// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'

Comments

কমপক্ষে ক্রোমে কমপিউটেড স্টাইলটি পেতে আপনাকে উত্পন্ন উপাদানটি <body> ট্যাগে যুক্ত করতে হবে বলে মনে হয়েছে।

— ডিম্প্লেক্স

Answer 6

বোল্টক্লক এবং জন দ্বারা উত্তর সম্পর্কে, আইই 11 ব্যবহার করার সময় আমার ব্যক্তিগতভাবে প্রাথমিক কীওয়ার্ড নিয়ে সমস্যা হয়েছিল। এটি ক্রোমে দুর্দান্ত কাজ করে তবে আইই তে মনে হয় এটির কোনও প্রভাব নেই।

এই উত্তর অনুসারে আইআই প্রাথমিক কীওয়ার্ডটি সমর্থন করে না: ডিভ ডিসপ্লে: ইনিশিয়াল 10 এবং ক্রোম 29 এর ইচ্ছামত কাজ করছে না

আমি এখানে প্রস্তাবিত পরিবর্তে ফাঁকা সেট করার চেষ্টা করেছি: প্রদর্শনের পরে কীভাবে স্বাভাবিক অবস্থায় ফেরা যায়: টেবিল সারিটির জন্য কিছুই নেই

এটি কাজ করেছে এবং আমার দৃশ্যের জন্য যথেষ্ট ভাল ছিল। অবশ্যই প্রকৃত প্রাথমিক মান সেট করা উপরের উত্তরটি কেবলমাত্র আমি খুঁজে পেতে পারি।