উত্তর:
display:noneএর মানে হল যে প্রশ্নে থাকা ট্যাগটি এই পৃষ্ঠায় মোটেও উপস্থিত হবে না (যদিও আপনি এখনও এটি ডোমের মাধ্যমে এর সাথে ইন্টারঅ্যাক্ট করতে পারেন)। অন্যান্য ট্যাগগুলির মধ্যে এর জন্য কোনও স্থান বরাদ্দ থাকবে না।
visibility:hiddenএর অর্থ এই নয় যে display:none, ট্যাগটি দৃশ্যমান নয়, তবে পৃষ্ঠার জন্য স্থান বরাদ্দ করা হয়েছে। ট্যাগটি রেন্ডার করা হয়েছে, এটি কেবল পৃষ্ঠায় দেখা যায় না।
উদাহরণ স্বরূপ:
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | testফলাফলগুলির [style-tag-value]সাথে প্রতিস্থাপন করা হচ্ছে display:none:
test | | testফলাফলগুলির [style-tag-value]সাথে প্রতিস্থাপন করা হচ্ছে visibility:hidden:
test | | testvisibility: hiddenএবং display: noneরং এবং যৌগিক সমানভাবে যেহেতু তারা উভয় retrigger বিন্যাস performant করা হবে। যাইহোক, opacity: 0কার্যকরীভাবে visibility: hiddenলেআউট পদক্ষেপের সমতুল্য এবং পুনরুদ্ধার করে না, তাই আমি আপনাকে এটি ব্যবহার করার পরামর্শ দিচ্ছি যদি আপনি খালি স্থানটি এখনও বরাদ্দ করা হয় না (অন্যথায় ব্যবহার করুন display: none)।
opacity: 0ইনপুট বা বোতামগুলির সাথে ডিল করার সময় সাবধানতার সাথে ব্যবহার করা উচিত, কারণ এগুলি এখনও বিদ্যমান থাকবে এবং সম্ভবত অদ্ভুত ব্যবহারকারীর ইন্টারঅ্যাকশন ঘটায়।
এগুলি প্রতিশব্দ নয়।
display:none পৃষ্ঠার স্বাভাবিক প্রবাহ থেকে উপাদানটি সরিয়ে দেয়, অন্যান্য উপাদানগুলিকে পূরণ করতে দেয়।
visibility:hidden পৃষ্ঠার স্বাভাবিক প্রবাহে উপাদানটিকে এমনভাবে ছেড়ে দেয় যা এখনও স্থান দখল করে।
কল্পনা করুন যে আপনি একটি বিনোদন পার্কে যাত্রার জন্য সারিবদ্ধ আছেন এবং লাইনের কেউ এতটাই দুষ্কর হয়ে পড়েছে যে সুরক্ষা তাদের লাইন থেকে তুলে নিয়ে যায়। লাইনে থাকা প্রত্যেকে এখন খালি স্লটটি পূরণের জন্য একটি অবস্থানের দিকে এগিয়ে যাবে। এই মত display:none।
এটি একইরকম পরিস্থিতির সাথে বৈষম্য করুন, তবে আপনার সামনে কেউ অদৃশ্যতার পোশাকটি রাখে। লাইনটি দেখার সময় দেখে মনে হবে একটি খালি জায়গা আছে তবে লোকেরা সত্যই সেই শূন্য স্থানটি পূরণ করতে পারে না কারণ কেউ এখনও রয়েছেন। এই মত visibility:hidden।
যোগ করার মতো একটি বিষয়, যদিও এটি জিজ্ঞাসা করা হয়নি, তা হ'ল বস্তুটিকে সম্পূর্ণ স্বচ্ছ করার তৃতীয় বিকল্প রয়েছে। বিবেচনা:
1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.(ফলাফলটি দেখতে উপরের "কোড কোড স্নিপেট" ক্লিক করতে ভুলবেন না))
1 এবং 2 এর মধ্যে পার্থক্য ইতিমধ্যে চিহ্নিত করা হয়েছে (যথা, 2 এখনও স্থান গ্রহণ করে)। তবে, 2 এবং 3 এর মধ্যে পার্থক্য রয়েছে: 3 ক্ষেত্রে, লিঙ্কটি ওভার করার সময় মাউসটি তখনও হাতের কাছে চলে যাবে এবং ব্যবহারকারী এখনও লিঙ্কটিতে ক্লিক করতে পারেন, এবং জাভাস্ক্রিপ্ট ইভেন্টগুলি এখনও সেই লিঙ্কটিতে জ্বলতে থাকবে। এটি সাধারণত আপনি চান এমন আচরণ নয় (তবে কখনও কখনও এটি হয়?)।
আর একটি পার্থক্য হ'ল যদি আপনি পাঠ্যটি নির্বাচন করেন, তবে সরল পাঠ্য হিসাবে অনুলিপি / পেস্ট করুন, আপনি নিম্নলিখিতটি পান:
1st link.
2nd link.
3rd unseen link.ক্ষেত্রে 3 টেক্সট অনুলিপি করা হয়। হতে পারে এটি কোনও ধরণের ওয়াটারমার্কিংয়ের জন্য দরকারী, বা যদি আপনি এমন কোনও কপিরাইট নোটিশ লুকিয়ে রাখতে চান যা অযত্নে ব্যবহারকারী আপনার সামগ্রী অনুলিপি / পেস্ট করে তবে তা প্রদর্শিত হবে?
শিশু নোডের ক্ষেত্রে এটির মধ্যে একটি বড় পার্থক্য রয়েছে। উদাহরণস্বরূপ: আপনার পিতা বা মাতা ডিভ এবং নেস্টেড শিশু ডিভ থাকলে। সুতরাং আপনি যদি এইভাবে লিখুন:
<div id="parent" style="display:none;">
<div id="child" style="display:block;"></div>
</div>এক্ষেত্রে ডিভগুলির কোনওটিই দৃশ্যমান হবে না। তবে আপনি যদি এইভাবে লিখেন:
<div id="parent" style="visibility:hidden;">
<div id="child" style="visibility:visible;"></div>
</div>তারপরে শিশু ডিভ দৃশ্যমান হবে যেখানে পিতামাতার ডিভ প্রদর্শিত হবে না।
display: none পৃষ্ঠাটি উপাদানটি সম্পূর্ণরূপে সরিয়ে দেয় এবং পৃষ্ঠাটি এমনভাবে তৈরি করা হয়েছে যেন উপাদানটি একেবারেই ছিল না।
Visibility: hidden আপনি আর এটি দেখতে না পেয়েও নথির প্রবাহে স্থান রেখে দেয়।
আপনি যা করছেন তার উপর নির্ভর করে এটি একটি বড় পার্থক্য করতে পারে বা নাও পারে।
সঙ্গে visibility:hiddenসে আপত্তি এখনও পৃষ্ঠাতে উল্লম্ব উচ্চতা লাগে। সঙ্গে display:noneএটি সম্পূর্ণ মুছে ফেলা হবে। আপনার যদি কোনও চিত্রের নীচে পাঠ্য থাকে এবং আপনি এটি করেন তবে display:noneসেই পাঠ্যটি চিত্রটি স্থানটি পূরণ করার জন্য স্থানান্তরিত হবে। আপনি যদি দৃশ্যমানতাটি করেন: লুকানো পাঠ্য একই জায়গায় থাকবে।
অন্যান্য সমস্ত উত্তর ছাড়াও, আইই 8 এর জন্য একটি গুরুত্বপূর্ণ পার্থক্য রয়েছে: আপনি যদি display:noneউপাদানটির প্রস্থ বা উচ্চতা ব্যবহার করতে এবং চেষ্টা করার চেষ্টা করেন তবে আই 88 0 দেয় (অন্য ব্রাউজারগুলি প্রকৃত আকারগুলি ফিরিয়ে দেবে)। আইই 8 কেবল সঠিক প্রস্থ বা উচ্চতা প্রদান করে visibility:hidden।
display: none; এটি পৃষ্ঠায় উপলব্ধ হবে না এবং কোনও স্থান দখল করবে না।
visibility: hidden; এটি একটি উপাদান লুকিয়ে রাখে, তবে এটি এখনও আগের মতো স্থান গ্রহণ করবে। উপাদানটি লুকানো থাকবে তবে তবুও লেআউটটিকে প্রভাবিত করবে।
visibility: hiddenস্থান সংরক্ষণ করুন, যেখানে স্থান সংরক্ষণ display: noneকরে না।
কোনওটির উদাহরণ প্রদর্শন করুন না: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none
দৃশ্যমানতার গোপন উদাহরণ: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility
যদি দৃশ্যমানতার বৈশিষ্ট্য সেট করা থাকে "hidden"তবে ব্রাউজারটি অদৃশ্য হওয়া সত্ত্বেও সামগ্রীতে পৃষ্ঠায় স্থান নেবে।
কিন্তু যখন আমরা কোনও বস্তু সেট করি তখন "display:none"ব্রাউজারটি তার সামগ্রীর জন্য পৃষ্ঠায় স্থান বরাদ্দ দেয় না।
উদাহরণ:
<div style="display:none">
Content not display on screen and even space not taken.
</div>
<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>আর একটি পার্থক্য হ'ল visibility:hiddenসত্যই, সত্যিকারের পুরানো ব্রাউজারগুলিতে কাজ display:noneকরে এবং তা করে না:
পার্থক্যটি শৈলীর বাইরে চলে যায় এবং জাভাস্ক্রিপ্টের সাথে ম্যানিপুলেট করার সময় উপাদানগুলি কীভাবে আচরণ করে তা প্রতিফলিত হয়।
এর প্রভাব এবং পার্শ্ব প্রতিক্রিয়া display: none:
clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), সমস্ত রিটার্ন 0গুলি।এর প্রভাব এবং পার্শ্ব প্রতিক্রিয়া visibility: hidden:
innerText(তবে নয় innerHTML) লক্ষ্য উপাদানটির এবং বংশধরদের খালি স্ট্রিং ফিরে আসে।display:none;পৃষ্ঠায় visibility:hidden;উপাদানটি প্রদর্শন করবে না তবে পৃষ্ঠায় স্থান বরাদ্দ করবে সেখানে পৃষ্ঠায় উপাদানটি প্রদর্শন করা হবে না বা এটি উপাদানটির জন্য স্থান বরাদ্দ করবে না। আমরা উভয় ক্ষেত্রেই ডিওমে থাকা উপাদানটি অ্যাক্সেস করতে পারি। এটি আরও ভাল উপায়ে বুঝতে দয়া করে নীচের কোডটি দেখুন:
প্রদর্শন: কোনওটি বনাম দৃশ্যমানতা: লুকানো
এখানে প্রচুর বিশদ উত্তর রয়েছে, তবে আমি ভেবেছিলাম যে অ্যাক্সেসিবিলিটি সম্বোধন করার জন্য আমার এটি যুক্ত করা উচিত since
display: none; এবং visibility: hidden; সমস্ত স্ক্রিন রিডার সফ্টওয়্যার দ্বারা না পঠিত হতে পারে। দৃষ্টি-প্রতিবন্ধী ব্যবহারকারীরা কী অভিজ্ঞতা নেবেন তা মাথায় রাখুন।
প্রশ্নটি প্রতিশব্দ সম্পর্কেও জিজ্ঞাসা করে। text-indent: -9999px;অন্য এক যে মোটামুটি সমতুল্য। এর সাথে গুরুত্বপূর্ণ পার্থক্যটি text-indentহ'ল এটি প্রায়শই পর্দার পাঠকরা পড়বেন। এটি কিছুটা খারাপ অভিজ্ঞতা হতে পারে কারণ ব্যবহারকারীরা এখনও লিঙ্কটিতে ট্যাব করতে পারেন।
অ্যাক্সেসযোগ্যতার জন্য, আমি আজ যা ব্যবহার করছি তা হ'ল স্ক্রিন পাঠকদের কাছে দৃশ্যমান থাকা অবস্থায় কোনও উপাদান লুকানোর জন্য শৈলীর সংমিশ্রণ।
{
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}একটি দুর্দান্ত অনুশীলন হ'ল বিষয়বস্তুর মূল অংশের অ্যাঙ্কারের সাথে "সামগ্রীতে যান" লিঙ্ক তৈরি করা। দৃষ্টি প্রতিবন্ধী ব্যবহারকারীরা সম্ভবত প্রতি একক পৃষ্ঠায় আপনার সম্পূর্ণ নেভিগেশন ট্রি শুনতে চান না। লিঙ্কটি দৃষ্টিগোচর করুন। ব্যবহারকারীরা লিঙ্কটি অ্যাক্সেস করতে কেবল ট্যাবটিতে আঘাত করতে পারেন।
অ্যাক্সেসযোগ্যতা এবং লুকানো সামগ্রী সম্পর্কে আরও জানতে, দেখুন: