সিএসএসের বৈশিষ্ট্য: প্রদর্শন বনাম দৃশ্যমানতা


98

প্রদর্শন বনাম দৃশ্যমান বৈশিষ্ট্যের মধ্যে পার্থক্য কী?



4
@ কেনিটিএম: এটি ধরে নিচ্ছে যে ওপি প্রতিটি সম্পত্তির সেই স্বতন্ত্র মানগুলির তুলনা করতে বিশেষভাবে অনুরোধ করছে।
BoltClock

উত্তর:


111

বৈশিষ্ট্যটি কেবল visibilityব্রাউজারকে বলে যে কোনও উপাদান প্রদর্শিত হবে কি না। এটি হয় দৃশ্যমান ( visible- আপনি এটি দেখতে পারেন), বা অদৃশ্য ( hidden- আপনি এটি দেখতে পারবেন না)।

displayসম্পত্তি ব্রাউজার বলে কিভাবে আঁকা এবং একটি উপাদান দেখাই, এ সব খুঁজতে এবং তাতে - এটি একটি হিসেবে প্রদর্শিত হবে inlineউপাদান বা (অর্থাত এটা টেক্সট এবং অন্যান্য ইনলাইন উপাদানের সঙ্গে প্রবাহিত) blockপর্যায়ের উপাদান (যেমন এটা উচ্চতা এবং প্রস্থ বৈশিষ্ট্য আছে যে আপনি সেট করে নিতে পারে, ভাসিতে সক্ষম হয়, ইত্যাদি), অথবা একটি inline-block(ie এটা) কিছু অন্যদের (ক ব্লক বাক্সের মতো কাজ করে কিন্তু ইনলাইন পরিবর্তে পাড়া হয় এবং list-item, table, table-row, table-cell, flex, ইত্যাদি)।

আপনাকে একটি উপাদান সেট করেন display: blockকিন্তু এছাড়াও সেট visibility: hiddenএখনও একটি ব্লক উপাদান হিসেবে, ব্রাউজার একইরূপে এটা ছাড়া আপনি শুধু এটা দেখতে না। কোনও অদৃশ্য বক্সের উপরে আপনি কীভাবে একটি লাল বাক্সটি সজ্জিত করেন তা জাতীয় ধরণের: লাল বাক্সটি মনে হয় এটি মধ্য-বাতাসে ভাসছে যখন বাস্তবে এটি কোনও শারীরিক বাক্সের উপরে বসে আছে যা আপনি দেখতে পাচ্ছেন না।

অন্য কথায়, এই উপায়ে উপাদান displayনয় noneএখনও উপাদানের প্রবাহ একটি পৃষ্ঠায় থাকুক না কেন কাছে দৃশ্যমান নির্বিশেষে বা না প্রভাবিত করবে। উপাদানগুলির সাথে ঘিরে থাকা বাক্সগুলি display: noneএমন আচরণ করবে যেন সেই উপাদানটি কখনও ছিল না (যদিও এটি ডিওমে থাকে)।


4
..ডম এর সাথে কিছু করার কোনও প্রদর্শন নেই? উদাহরণস্বরূপ ... আপনার যদি থাকে display: none;, তবে সেই উপাদানটি ডিওএম থেকে সরানো হবে? নাকি আমি সম্পূর্ণ বিভ্রান্ত?
হিস্টো

4
@ হিস্টো: আসলে, তা হয় না। আপনি কখনই সিএসএসের সাহায্যে কোনও উপাদানের অবস্থান বা ডোমটিতে উপস্থিতিকে প্রভাবিত করতে পারবেন না
BoltClock

@ বল্টক্লক ... হ্যাঁ, আপনি ঠিক বলেছেন আমি বুঝতে পেরেছি যে আপনি কখনই ডিওএম এর বাইরে কোনও উপাদান নিতে পারবেন না, তবে এটি ডিওএমের ক্ষেত্রে কীভাবে প্রদর্শিত হবে তা কেবল প্রভাবিত করে। এটা কি আরও নির্ভুল মনে হচ্ছে?
হিস্টো

একটি গুরুত্বপূর্ণ বিষয় লক্ষনীয় যে jQuery এর হাইড () পদ্ধতি ব্যবহার করে যা অভ্যন্তরীণভাবে কারও কাছে প্রদর্শন প্রদর্শন করে না, আপনি এই উপাদানটির অবস্থান পেতে পারবেন না। দৃশ্যমানতা ব্যবহার করে আপনি এটি করতে সক্ষম হন।
p0rsche

21

দৃশ্যমানতা: লুকানো;

  • উপাদানটি আঁকা হবে না এবং ক্লিক / টাচ ইভেন্টগুলি গ্রহণ করবে না, তবে এটির স্থানটি এখনও দখল করা আছে
  • কারণ এটি এখনও বিন্যাসের উদ্দেশ্যে রয়েছে, আপনি এটি দৃশ্যমান না হয়ে এটি পরিমাপ করতে পারেন
  • সামগ্রী পরিবর্তন করার জন্য পৃষ্ঠাটির পুনর্বিবেচনা / লেআউটিংয়ের জন্য এখনও সময় লাগবে
  • দৃশ্যমানতা উত্তরাধিকারসূত্রে প্রাপ্ত, সুতরাং এর অর্থ আপনি সাবচিল্ডেনদের তাদের দৃশ্যমানতা দিয়ে দৃশ্যমান করতে পারবেন: দৃশ্যমান;

প্রদর্শন: কিছুই নয়;

  • উপাদানটি প্রবাহ / বিন্যাসে অংশ না নেবে
  • (ব্যবহৃত ব্রাউজারের উপর নির্ভর করে) ফ্ল্যাশ চলচ্চিত্র এবং আইফ্রেমেসকে হত্যা করতে পারে (যা আবার দেখানোর পরে পুনরায় চালু / পুনরায় লোড করবে), যদিও আপনি এটি iframes দিয়ে ঘটতে বাধা দিতে পারেন
  • উপাদান কোনও স্থান গ্রহণ করবে না। বিন্যাসের উদ্দেশ্যে এটির মতো এটি বিদ্যমান নেই
  • কিছু ব্রাউজার / ডিভাইস (আইপ্যাডের মতো) সরাসরি সেই উপাদান দ্বারা ব্যবহৃত মেমরি ফিরিয়ে আনবে, অ্যানিমেশনগুলির সময় আপনি যদি কোনও এবং অন্য কোনও মানের মধ্যে স্যুইচ না করেন তবে ছোট হিকআপগুলি ঘটায়

অতিরিক্ত নোট:

  • লুকানো সামগ্রীতে চিত্র: সমস্ত জনপ্রিয় ব্রাউজারে চিত্রগুলি দৃশ্যমানতার সাথে কোনও উপাদানগুলির মধ্যে থাকা সত্ত্বেও লোড হয়: লুকানো; বা প্রদর্শন: কিছুই নয়;
  • লুকানো সামগ্রীতে হরফ: ওয়েবকিট ব্রাউজারগুলি (ক্রোম / সাফারি) কাস্টম ফন্টগুলি লোড করতে বিলম্ব করতে পারে যা কেবল দৃশ্যমানতা বা প্রদর্শনের মাধ্যমে গোপন উপাদানগুলিতে ব্যবহৃত হয়। এটি আপনাকে এমন উপাদানগুলি পরিমাপ করতে পারে যা কাস্টম ফন্টটি লোড না হওয়া অবধি এখনও ফ্যালব্যাক ফন্ট ব্যবহার করছে।

19

প্রদর্শন: এইচটিএমএল প্রবাহের বাইরে উপাদানটিকে কেউ সরিয়ে দেয় না যেখানে দৃশ্যমানতা: লুকানো থাকে না।


1

প্রদর্শন: কিছুই নয়; DOM থেকে DOM উপাদান ভিজ্যুয়াল স্টাইল / শারীরিক স্থান সরিয়ে ফেলবে, যেখানে দৃশ্যমানতা: লুকানো; উপাদানটি সরাবে না, তবে কেবল এটি আড়াল করবে। সুতরাং আপনার ডিওমে উল্লম্ব স্থানের 300px দখলকারী একটি ডিভিটি দৃশ্যমানতার সাথে সেট করার সময় উল্লম্ব প্রস্থের 300px দখল করবে: লুকানো; তবে প্রদর্শিত হবে যখন সেট: না কিছুই; এটি ভিজ্যুয়াল শৈলী এবং এটি দখল করে থাকা স্থানটি লুকিয়ে রয়েছে এবং আরও ভাল শব্দের অভাবে স্থানটি "মুক্ত" করা হয়।

[সম্পাদনা] - কিছুক্ষণ আগে আমি উপরেরটি লিখেছিলাম এবং আমি যথেষ্ট জ্ঞাত ছিলাম না বা খারাপ দিন ছিল কিনা তা আমি জানি না, তবে বাস্তবতাটি হ'ল উপাদানটি ডোম শ্রেণিবদ্ধতা থেকে সরানো হয়নি। সমস্ত ব্লক স্তরের প্রদর্শন 'শৈলীগুলি' প্রদর্শন ব্যবহার করার সময় সম্পূর্ণ 'লুকানো': কোনওটি নয়, তবে দৃশ্যমানতার সাথে: লুকানো; উপাদানটি নিজেই লুকানো আছে তবে এটি ডিওএম এ এখনও একটি দর্শনীয় স্থান দখল করে। আমি আশা করি এটি পরিষ্কার হয়ে যায়


4
না, display: noneহবে না DOM থেকে একটি উপাদান মুছে ফেলুন। উপাদানটি এখনও আছে, এটি প্রদর্শিত হয় না ।
BoltClock
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.