উপচে পড়া

CSS পডকাস্ট - 034: ওভারফ্লো

যখন বিষয়বস্তু তার পিতামাতার বাইরে প্রসারিত হয়, তখন আপনি কীভাবে এটি পরিচালনা করতে পারেন তার জন্য অনেকগুলি বিকল্প রয়েছে৷ আপনি অতিরিক্ত স্থান যোগ করতে স্ক্রোল করতে পারেন, উপচে পড়া প্রান্তগুলিকে ক্লিপ করতে পারেন, একটি উপবৃত্ত দিয়ে কাট-অফ নির্দেশ করতে পারেন এবং আরও অনেক কিছু। ফোন অ্যাপ্লিকেশন এবং একাধিক স্ক্রীন আকারের জন্য বিকাশ করার সময় ওভারফ্লো বিশেষভাবে বিবেচনা করা গুরুত্বপূর্ণ।

CSS-এ দুটি ভিন্ন ক্লিপিং অপশন আছে; text-overflow পাঠ্যের পৃথক লাইনে সাহায্য করবে এবং overflow বৈশিষ্ট্যগুলি বক্স মডেলে ওভারফ্লো নিয়ন্ত্রণ করতে সাহায্য করবে।

text-overflow সহ একক লাইন ওভারফ্লো

টেক্সট নোড(গুলি), উদাহরণ স্বরূপ একটি অনুচ্ছেদ, <p> রয়েছে এমন যেকোনো উপাদানে text-overflow প্রপার্টি ব্যবহার করুন। এটি নির্দিষ্ট করে কিভাবে পাঠ্যটি উপস্থিত হয় যখন এটি উপাদানের উপলব্ধ স্থানের সাথে খাপ খায় না। একটি পৃষ্ঠায় সমস্ত দর্শনযোগ্য HTML পাঠ্য পাঠ্য নোডে থাকে। text-overflow ব্যবহার করার জন্য আপনার পাঠ্যের একটি একক মোড়ানো লাইনের প্রয়োজন, তাই আপনাকে অবশ্যই overflow hidden রাখতে হবে এবং একটি white-space মান থাকতে হবে যা মোড়ানো প্রতিরোধ করে।

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

ওভারফ্লো বৈশিষ্ট্য ব্যবহার করে

ওভারফ্লো বৈশিষ্ট্যগুলি একটি উপাদানের উপর সেট করা হয় যখন এটির বাচ্চাদের উপলব্ধ জায়গার চেয়ে বেশি স্থানের প্রয়োজন হয় তখন কী ঘটে তা নিয়ন্ত্রণ করতে। এটি ইচ্ছাকৃত হতে পারে, যেমন Google Maps-এর মতো একটি ইন্টারেক্টিভ মানচিত্রে, যেখানে একজন ব্যবহারকারী একটি নির্দিষ্ট আকারে ক্লিপ করা একটি বড় চিত্রের চারপাশে প্যান করে। এটি একটি চ্যাট অ্যাপ্লিকেশনের মতো অনিচ্ছাকৃতও হতে পারে যেখানে ব্যবহারকারী একটি দীর্ঘ বার্তা টাইপ করে যা পাঠ্য বুদ্বুদে মানায় না।

আপনি দুটি অংশে ওভারফ্লো চিন্তা করতে পারেন. মূল উপাদানটির একটি দৃঢ়ভাবে সীমাবদ্ধ স্থান রয়েছে যা পরিবর্তন হবে না। আপনি এটি একটি উইন্ডো হিসাবে চিন্তা করতে পারেন. শিশু উপাদানগুলি এমন সামগ্রী যা পিতামাতার কাছ থেকে আরও স্থান চায়৷ আপনি এটিকে ভাবতে পারেন যে আপনি জানালা দিয়ে কী দেখছেন। ওভারফ্লো পরিচালনা করা এই বিষয়বস্তুকে কীভাবে উইন্ডো ফ্রেম করে তা নির্দেশ করতে সাহায্য করবে।

উল্লম্ব এবং অনুভূমিক অক্ষে স্ক্রলিং

overflow-y প্রপার্টি ডিভাইস ভিউপোর্টের উল্লম্ব অক্ষ বরাবর শারীরিক ওভারফ্লো নিয়ন্ত্রণ করে, তাই উপরে এবং নিচে স্ক্রোল করা হয়।

overflow-x প্রোপার্টি ডিভাইস ভিউপোর্টের অনুভূমিক অক্ষ বরাবর ওভারফ্লো নিয়ন্ত্রণ করে, তাই বাম এবং ডানে স্ক্রোল করা হয়।

স্ক্রোল দিকনির্দেশের জন্য লজিক্যাল বৈশিষ্ট্য

overflow-inline এবং overflow-block বৈশিষ্ট্যগুলি নথির দিকনির্দেশ এবং লেখার মোডের উপর ভিত্তি করে ওভারফ্লো সেট করে।

overflow শর্টহ্যান্ড

overflow শর্টহ্যান্ড overflow-x এবং overflow-y শৈলী উভয়ই এক লাইনে সেট করে:

overflow: hidden scroll;

যদি দুটি কীওয়ার্ড নির্দিষ্ট করা হয়, প্রথমটি overflow-x এবং দ্বিতীয়টি overflow-y প্রযোজ্য। অন্যথায়, overflow-x এবং overflow-y উভয়ই একই মান ব্যবহার করে।

মূল্যবোধ

আসুন overflow বৈশিষ্ট্যের জন্য উপলব্ধ মান এবং কীওয়ার্ডগুলি ঘনিষ্ঠভাবে দেখে নেওয়া যাক।

overflow: visible (ডিফল্ট)

সম্পত্তি সেট না করে, overflow: visible হল ওয়েবের জন্য ডিফল্ট মান। এটি নিশ্চিত করে যে বিষয়বস্তু অনিচ্ছাকৃতভাবে লুকানো হয় না এবং "কখনও বিষয়বস্তু লুকাবেন না" বা "সুনির্দিষ্ট লেআউটের নিরাপদ লেআউট" এর মূল নীতি অনুসরণ করে।

overflow: hidden

overflow: hidden বিষয়বস্তু নির্দিষ্ট দিকে ক্লিপ করা হয় এবং এটি দেখানোর জন্য কোনও স্ক্রলবার দেওয়া হয় না।

overflow: scroll

overflow: scroll স্ক্রলবারগুলিকে ব্যবহারকারীদের সামগ্রীর মাধ্যমে স্ক্রোল করার অনুমতি দেয়। এমনকি সামগ্রী বর্তমানে উপচে না থাকলেও স্ক্রলবার উপস্থিত থাকবে৷ এটি ভবিষ্যতের লেআউট শিফট কমানোর একটি দুর্দান্ত উপায় যদি ভবিষ্যতের উপর ভিত্তি করে একটি ধারক স্ক্রোলযোগ্য হতে পারে, উদাহরণস্বরূপ, আকার পরিবর্তনের উপর, এবং স্ক্রোলযোগ্য অঞ্চলগুলির জন্য ব্যবহারকারীকে দৃশ্যত প্রস্তুত করে৷

overflow: clip

overflow: hidden , overflow: clip উপাদানটির প্যাডিং বাক্সে ক্লিপ করা হয়। clip এবং hidden মধ্যে পার্থক্য হল যে clip কীওয়ার্ড প্রোগ্রাম্যাটিক স্ক্রলিং সহ সমস্ত স্ক্রলিং নিষিদ্ধ করে।

overflow: auto

অবশেষে, সবচেয়ে বেশি ব্যবহৃত মান, overflow: auto । এটি ব্যবহারকারীর পছন্দকে সম্মান করে এবং প্রয়োজনে স্ক্রলবার দেখায়, কিন্তু ডিফল্টরূপে সেগুলিকে লুকিয়ে রাখে এবং ব্যবহারকারী ও ব্রাউজারকে স্ক্রল করার দায়িত্ব দেয়।

স্ক্রোলিং এবং ওভারফ্লো

এই overflow আচরণগুলির মধ্যে অনেকগুলি একটি স্ক্রলবার প্রবর্তন করে, তবে কিছু নির্দিষ্ট স্ক্রোল আচরণ এবং বৈশিষ্ট্য রয়েছে যা আপনাকে আপনার ওভারফ্লো কন্টেইনারে স্ক্রলিং নিয়ন্ত্রণ করতে সহায়তা করতে পারে।

স্ক্রলিং এবং অ্যাক্সেসযোগ্যতা

এটি নিশ্চিত করা গুরুত্বপূর্ণ যে স্ক্রোলযোগ্য অঞ্চলটি ফোকাস গ্রহণ করতে পারে যাতে একজন কীবোর্ড ব্যবহারকারী বাক্সে ট্যাব করতে পারে, তারপর স্ক্রোল করতে তীর কীগুলি ব্যবহার করতে পারে৷

একটি স্ক্রলিং বক্সকে ফোকাস গ্রহণ করার অনুমতি দিতে tabindex="0" যোগ করুন, aria-labelledby বৈশিষ্ট্য সহ একটি নাম এবং একটি উপযুক্ত role বৈশিষ্ট্য। উদাহরণ স্বরূপ:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

সিএসএস তখন নির্দেশ করতে ব্যবহার করা যেতে পারে যে বাক্সে ফোকাস আছে, outline প্রপার্টি ব্যবহার করে একটি ভিজ্যুয়াল ক্লু দিতে হবে যে এটি এখন স্ক্রোলযোগ্য হবে।

অ্যাক্সেসিবিলিটি এনফোর্স করার জন্য CSS ব্যবহার করার ক্ষেত্রে Adrian Roselli দেখিয়েছেন কিভাবে CSS অ্যাক্সেসিবিলিটি রিগ্রেশন প্রতিরোধে সাহায্য করতে পারে। উদাহরণস্বরূপ, শুধুমাত্র স্ক্রলিং চালু করতে এবং সঠিক বৈশিষ্ট্যগুলি ব্যবহার করা হলে ফোকাস সূচক যোগ করতে। নিম্নলিখিত নিয়মগুলি কেবলমাত্র বক্সটিকে স্ক্রোলযোগ্য করে তুলবে যদি এটিতে একটি tabindex , aria-labelledby , এবং role বৈশিষ্ট্য থাকে৷

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

বক্স মডেলের মধ্যে স্ক্রলবার অবস্থান

স্ক্রোল বারগুলি প্যাডিং বাক্সের মধ্যে স্থান নেয় এবং inline এবং overlaid না হলে স্থানের জন্য প্রতিযোগিতা করতে পারে। বক্স মডেল মডিউল লেআউট শিফটের এই সম্ভাব্য উৎসে আরও প্রসারিত করে।

রুট-স্ক্রলার বনাম অন্তর্নিহিত-স্ক্রলার

আপনি লক্ষ্য করতে পারেন যে কিছু স্ক্রোলারের একটি পুল-টু-রিফ্রেশ আচরণ এবং অন্যান্য বিশেষ আচরণ রয়েছে, বিশেষ করে যখন মোবাইল এবং হাইব্রিড অ্যাপ্লিকেশনগুলির জন্য বিকাশ করা হয়। এই স্ক্রোল আচরণটি রুট স্ক্রলারে ঘটে। একটি পৃষ্ঠায় শুধুমাত্র একটি রুট স্ক্রোলার আছে। ডিফল্টরূপে, ডকুমেন্ট এলিমেন্ট হল পৃষ্ঠার রুট স্ক্রলার, যাইহোক, কোন উপাদানটি রুট স্ক্রলার পরিবর্তন করে, ডকুমেন্ট এলিমেন্ট ছাড়া অন্য স্ক্রলারগুলিতে বিশেষ আচরণ প্রয়োগ করা যেতে পারে, আমরা এই নতুন স্ক্রলারটিকে অন্তর্নিহিত রুট স্ক্রোলার বলি।

একটি রুট স্ক্রলার তৈরি করতে, আপনি একটি ধারককে স্থিরভাবে অবস্থান করে স্ক্রোলার প্রচার নামে কিছু ব্যবহার করতে পারেন, এটি নিশ্চিত করে যে এটি পুরো ভিউপোর্টকে কভার করে এবং একটি স্ক্রলারের সাথে শীর্ষে z-সূচক রয়েছে। এখানে একটি রুট স্ক্রলার বনাম একটি নেস্টেড অন্তর্নিহিত স্ক্রলারের অভিজ্ঞতা নিন।

স্ক্রল-আচরণ

scroll-behavior আপনাকে উপাদানগুলিতে ব্রাউজার-নিয়ন্ত্রিত স্ক্রলিং নির্বাচন করতে দেয়। এটি আপনাকে .scrollTo() বা লিঙ্কগুলির মতো ইন-পেজ নেভিগেশন কীভাবে পরিচালনা করা হয় তা নির্দিষ্ট করতে দেয়।

ব্যবহারকারীর পছন্দের উপর ভিত্তি করে স্ক্রোল আচরণ নির্দিষ্ট করার জন্য prefers-reduced-motion এর সাথে ব্যবহার করা হলে এটি বিশেষভাবে কার্যকর।

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-আচরণ

আপনি যদি কখনও একটি মোডাল ওভারলে-এর শেষে পৌঁছে থাকেন, তারপর স্ক্রলিং চালিয়ে যান এবং ওভারলে সরানোর পিছনে পৃষ্ঠা থাকে, এটি হল স্ক্রোল চেইনিং, বা প্যারেন্ট স্ক্রোল কন্টেইনার পর্যন্ত বুদবুদ করা। overscroll-behavior বৈশিষ্ট্য আপনাকে প্যারেন্ট কন্টেইনারে (যাকে স্ক্রল চেইনিং বলা হয়) ওভারফ্লো স্ক্রলিং লিক হওয়া প্রতিরোধ করতে দেয়।

আপনার উপলব্ধি পরীক্ষা করুন

আপনার ওভারফ্লো জ্ঞান পরীক্ষা করুন

সম্পদ

স্ম্যাশিং ম্যাগাজিন থেকে সিএসএসে ওভারফ্লো এবং ডেটা লস