মধ্যে পার্থক্য কি visibility:collapseএবং display:none?
উত্তর:
সংক্ষিপ্ত সংস্করণ:
পূর্ববর্তীটি পুরো টেবিলের উপাদানগুলি গোপন করতে ব্যবহৃত হয়। পরেরটি সমস্ত কিছু পুরোপুরি আড়াল করার জন্য ব্যবহৃত হয়।
দীর্ঘ সংস্করণ :
visibility: collapseকোনও উপাদান পুরোপুরি গোপন করে (যাতে এটি বিন্যাসে কোনও স্থান দখল করে না), তবে কেবল যখন উপাদানটি একটি টেবিল উপাদান থাকে ।
টেবিল উপাদান ছাড়া অন্য উপাদানগুলিতে ব্যবহার করা হলে, এর visibility: collapseমতো কাজ করবে visibility: hidden। এটি একটি উপাদানকে অদৃশ্য করে তোলে তবে এটি এখনও লেআউটে স্থান দখল করবে।
display: noneকোনও উপাদান পুরোপুরি গোপন করে তাই এটি বিন্যাসের কোনও স্থান দখল করে না, তবে এটি টেবিলের উপাদানগুলিতে ব্যবহার করা উচিত নয়।
display: none; কারণ এটি ব্যবহার টেবিল ভঙ্গ হয় colspanএবং rowspan।
visibility: collapsevisibility: hiddenবেশিরভাগ ফরম্যাটিং প্রসঙ্গে যেমন হুবহু আচরণ করে : উপাদানটির দ্বারা প্রয়োজনীয় স্থানটি বিন্যাসে 'সংরক্ষিত' থাকে, তবে উপাদানটি নিজেই রেন্ডার হয় না, যেখানে ফাঁকা জায়গা রেখে দেওয়া হত।
তিনটি ব্যতিক্রম যা আমি জানি: টেবিল-সারি, টেবিল-কলাম এবং ফ্লেক্স আইটেমগুলি, এর visibility: collapseমতো আচরণ করে display: noneতবে একটি প্রধান পার্থক্য: 'স্ট্রুট'। আপনি স্ট্রুটকে শূন্য আকারের স্থানধারক হিসাবে ভাবতে পারেন, যা বিন্যাস প্রক্রিয়াতে নিজস্ব কোনও স্থান দাবি করে না, তবে তবুও এটি ফর্ম্যাটিং কাঠামোর অংশ এবং কিছু আকারের গণনাতে অংশ নেয়।
উদাহরণস্বরূপ, একটি ধসে পড়ে থাকা সারণি-সারিটি টেবিলের কোনও উল্লম্ব স্থান দখল করবে না, তবে টেবিলের কলামগুলি এখনও ভেঙে যাওয়া সারিটির 'যেমন-তেমন' মাত্রাযুক্ত হবে এবং এর সামগ্রীগুলি প্রকৃতপক্ষে দৃশ্যমান ছিল। এটি স্রোতগুলি টগল ইন এবং আউট হওয়ার সাথে সাথে 'দোলা দিয়ে' কলামগুলি রোধ করতে পারে। অনুরূপভাবে, একটি ধসে পড়া ফ্লেক্স আইটেমটি মূল অক্ষ বরাবর কোনও স্থান দখল করে না, তবে এখনও ফ্লেক্স লাইন ক্রস আকারে অবদান রাখে।
' display: noneটেবিলগুলির সাথে ব্যবহার করবেন না ' এটি থাম্বের একটি মূল্যবান নিয়ম, তবে এটি পুরো গল্পটি বলে না।
display: noneআপনি আপনার গোপন উপাদান সারণিতে কোন ভাবেই (অথবা আনমন লাইন) বিন্যাস প্রক্রিয়া অংশগ্রহণের না চান তাহলে।visibility: collapseআপনি যদি সারণী (বা ফ্লেক্স লাইন) বিন্যাসটি অস্থিতিশীল না করে গতিশীল উপাদানগুলি প্রদর্শন করতে এবং আড়াল করতে চান তবে ব্যবহার করুন ।এখানে একটি কোড স্নিপেটের মধ্যে পার্থক্য প্রদর্শন করে display: nonevisibility: collapse একটি টেবিল সারি এবং এর :
visibility:collapseসাফারি টেবিলের জন্য কাজ করে না। আমি display:noneটেবিলের সারিগুলিতে (সাফারি সহ) সূক্ষ্মভাবে কাজ করতে দেখলাম যদিও কলামের প্রস্থ সম্পর্কে উপরের মন্তব্যগুলি সঠিক
visibility:collapseকেবল টেবিলগুলিতে ব্যবহার করা উচিত। অন্যান্য উপাদানগুলিতে এটি একটি হিসাবে কাজ করবে visibility:hidden।
visibility:hiddenউপাদানটি আড়াল করুন তবে তবুও উপাদানটির স্থান নিয়ে যান display:noneএমনকি স্থানটি রাখবে না।
সংস্থানসমূহ:
একই বিষয়ে:
display: noneটেবিলের উপাদানগুলিতে ব্যবহার করা উচিত নয় এটি একটি দুর্দান্ত সংযোজন হবে।