উপচে পড়া

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-সূচক রয়েছে। এখানে একটি নেস্টেড অন্তর্নিহিত স্ক্রলার বনাম একটি রুট স্ক্রলারের অভিজ্ঞতা নিন।

আপনার স্ক্রলবার স্টাইল করা

আপনি আপনার স্ক্রলবারকে আপনার সাইটের ডিজাইনে একত্রিত করতে স্টাইল করতে পারেন। scrollbar-color স্ক্রলবারের থাম্ব এবং নর্দমার জন্য রঙ সেট করে।

স্ক্রলবারের প্রস্থ পরিবর্তন করতে, scrollbar-width ব্যবহার করুন। আপনি এটিকে একটি নির্বিচারে দৈর্ঘ্যে সেট করতে পারবেন না, তবে আপনি নির্দিষ্ট করতে পারেন যে আপনি একটি thin স্ক্রলবার চান বা none ।

স্ক্রল-আচরণ

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

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

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

overscroll-আচরণ

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

স্ক্রল স্ন্যাপিং

স্ক্রলিং সাধারণত মসৃণ হয়, যাতে আপনি স্ক্রলপোর্টের মধ্যে যেখানে চান সেখানে বিষয়বস্তু স্থাপন করতে পারবেন। কিছু ডিজাইনের জন্য, যেমন চিত্র গ্যালারী বা বিষয়বস্তু যা পৃষ্ঠা বা স্লাইডগুলিকে অনুকরণ করে, আপনি বিষয়বস্তুটিকে স্ক্রলপোর্টে স্ন্যাপ করতে চাইতে পারেন।

স্ক্রোল কন্টেইনার সেট আপ করা হচ্ছে

স্ক্রোল স্ন্যাপিং সক্ষম করতে, স্ক্রোল পাত্রে scroll-snap-type যোগ করুন। আপনি প্রথমে নির্ধারণ করবেন কোন অক্ষে স্ক্রোল স্ন্যাপিং ঘটবে। এটি একটি লজিক্যাল প্রপার্টি ( block বা inline ), একটি ফিজিক্যাল প্রপার্টি ( x বা y ), অথবা both হতে পারে।

স্ক্রোল স্ন্যাপিং কতটা কঠোর হওয়া উচিত তাও আপনি নির্ধারণ করতে পারেন। ডিফল্ট কঠোরতা হল proximity , যার মানে হল স্ক্রোল কন্টেইনারটি সম্ভব হলে স্ন্যাপ করার চেষ্টা করবে। স্ক্রোল ধারকটি সর্বদা স্ন্যাপ হবে তা নিশ্চিত করতে আপনি কঠোরতাকে mandatory হিসাবে সেট করতে পারেন।

.scroll-container {
    scroll-snap-type: block mandatory;
}

স্ক্রোল স্ন্যাপিং স্ক্রোল পাত্রের সম্পূর্ণ সীমানার মধ্যে একটি উপাদানকে সারিবদ্ধ করে, কিন্তু স্ক্রোল পাত্রের অংশটি দৃশ্যমান না হলে কী হবে? উদাহরণস্বরূপ, আপনার স্ক্রোল কন্টেইনারের একটি নির্দিষ্ট শিরোনাম ওভারলে করা অংশ থাকতে পারে। স্ক্রোল কন্টেইনারের দৃশ্যমান অংশে স্ন্যাপ করা উপাদানগুলিকে সারিবদ্ধ করতে, আপনি scroll-padding সেট করতে পারেন।

স্ন্যাপযোগ্য উপাদান নিয়ন্ত্রণ

একটি উপাদান স্নাপযোগ্য করতে, scroll-snap-align বৈশিষ্ট্যটি start , end বা center সেট করুন। যদি স্ক্রোল স্ন্যাপ দিক both হয়, আপনি দুটি মান সেট করতে পারেন। এটি সেট করে যে উপাদানটির একটি প্রান্ত স্ক্রোলপোর্টের প্রান্তের সাথে সারিবদ্ধ হবে, বা এটি কেন্দ্রীভূত হবে কিনা।

আপনি scroll-margin দিয়ে স্ন্যাপ করা উপাদানটির প্রান্তের চারপাশে ব্যবধান সামঞ্জস্য করতে পারেন:

একটি উপাদানে স্ক্রোল করার সময় প্যাডিং সেট করতে scroll-margin ব্যবহার করা হয়:

স্ক্রলিংকে আরও স্টিকি করতে, আপনি scroll-snap-stop: always একটি স্ক্রোল পাত্রে থাকা আইটেমটিতে। এটি আপনাকে একক স্ক্রলে একাধিক আইটেম স্ক্রোল করা থেকে বাধা দেয় না। যদি আপনি একটি স্ক্রলিং গতি এমনভাবে শেষ করেন যাতে স্ক্রোলটি জড়তা সহ চলতে থাকে, তাহলে স্ক্রলটি অতীতে চালিয়ে যাওয়ার পরিবর্তে পরবর্তী স্ন্যাপ অবস্থানে শেষ হবে।

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

সম্পদ

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