Articles
সিএসএস-এর পরিচিতি
`overflow` এবং `contain` বৈশিষ্ট্যগুলি

`overflow` এবং `contain` বৈশিষ্ট্যগুলি

এই নিবন্ধে overflow এবং contain বৈশিষ্ট্যগুলি ব্যাখ্যা করা হয়েছে।

আপনি overflow বৈশিষ্ট্যের মাধ্যমে স্ক্রলবার এবং ক্লিপিং এর মতো জিনিসগুলি কিভাবে প্রদর্শন করতে হয় তা শিখতে পারেন।

YouTube Video

প্রিভিউর জন্য HTML

css-overflow-contain.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-overflow-contain.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Overflow Content</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Overflow And Contain Properties</h2>
 20        </header>
 21        <article>
 22            <h3>overflow</h3>
 23            <section>
 24                <header><h4>overflow: visible</h4></header>
 25                <section class="sample-view">
 26                    <section class="overflow-visible">
 27                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 28                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 29                    </section>
 30                </section>
 31                <header><h4>overflow: hidden</h4></header>
 32                <section class="sample-view">
 33                    <section class="overflow-hidden">
 34                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 35                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 36                    </section>
 37                </section>
 38                <header><h4>overflow: scroll</h4></header>
 39                <section class="sample-view">
 40                    <section class="overflow-scroll">
 41                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 42                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 43                    </section>
 44                </section>
 45                <header><h4>overflow: auto</h4></header>
 46                <section class="sample-view">
 47                    <section class="overflow-auto">
 48                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 49                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 50                    </section>
 51                </section>
 52                <header><h4>overflow-x: scroll; overflow-y: hidden;</h4></header>
 53                <section class="sample-view">
 54                    <section class="overflow-xy">
 55                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 56                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 57                    </section>
 58                </section>
 59                <header><h4>overflow: clip</h4></header>
 60                <section class="sample-view">
 61                    <section class="overflow-clip">
 62                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 63                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 64                    </section>
 65                </section>
 66            </section>
 67        </article>
 68        <article>
 69            <h3>contain</h3>
 70            <section>
 71                <header><h4>contain: layout</h4></header>
 72                <section class="sample-view">
 73                    <section class="contain-layout">
 74                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 75                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 76                    </section>
 77                </section>
 78                <header><h4>contain: paint</h4></header>
 79                <section class="sample-view">
 80                    <section class="contain-paint">
 81                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 82                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 83                    </section>
 84                </section>
 85                <header><h4>contain: size</h4></header>
 86                <section class="sample-view">
 87                    <section class="contain-size">
 88                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 89                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 90                    </section>
 91                </section>
 92                <header><h4>contain: style</h4></header>
 93                <section class="sample-view">
 94                    <section class="contain-style">
 95                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 96                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 97                    </section>
 98                </section>
 99                <header><h4>contain: content</h4></header>
100                <section class="sample-view">
101                    <section class="contain-content">
102                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
103                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
104                    </section>
105                </section>
106            </section>
107        </article>
108    </main>
109</body>
110</html>

overflow এবং contain বৈশিষ্ট্যগুলি

overflow

CSS এর overflow বৈশিষ্ট্য একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা নিয়ন্ত্রণ করে যে কীভাবে একটি উপাদানের বিষয়বস্তু প্রদর্শন করা হবে যখন সেগুলি এর বাক্সের সীমা অতিক্রম করবে। এটি সাধারণত ওয়েব পৃষ্ঠার বিন্যাস এবং ব্যবহারকারী ইন্টারফেস তৈরি করতে ব্যবহৃত হয় এবং এটি স্ক্রলবার, ক্লিপিং এবং উপাদানের অতিক্রমের প্রদর্শন পরিচালনা করতে সাহায্য করে।

overflow বৈশিষ্ট্যের মৌলিক বিষয়গুলি

overflow বৈশিষ্ট্যের চারটি প্রধান মান রয়েছে: visible, hidden, scroll, এবং auto।

visible 
1section.overflow-visible {
2    width: 400px;
3    height: 100px;
4    overflow: visible;
5}

visible হলো ডিফল্ট মান, যেখানে একটি উপাদানের বিষয়বস্তু বাক্সের আকার অতিক্রম করে কিন্তু এখনও দৃশ্যমান থাকে। অতিরিক্ত অংশগুলি অন্যান্য উপাদানগুলির উপরে থাকতে পারে, তবে স্ক্রলবার বিশেষভাবে প্রদর্শিত হয় না।

বৈশিষ্ট্যসমূহ:

  • বিষয়বস্তু সীমাবদ্ধতা ছাড়াই প্রদর্শিত হয়।
  • স্ক্রলবার দেখানো হয় না।
hidden 
1section.overflow-hidden {
2    width: 400px;
3    height: 100px;
4    overflow: hidden;
5}

hidden হলো সেই সেটিং যেখানে একটি উপাদানের বিষয়বস্তু বাক্সের আকার অতিক্রম করলে অতিক্রমকৃত অংশগুলি প্রদর্শিত হয় না। কোনও স্ক্রলবার প্রদর্শিত হয় না এবং অতিক্রমকৃত বিষয়বস্তু দৃশ্যমান থাকে না।

বৈশিষ্ট্যসমূহ:

  • যখন বিষয়বস্তু একটি উপাদানের সীমা অতিক্রম করে, তখন অতিরিক্ত অংশটি লুকানো হয়।
  • স্ক্রলবার দেখানো হয় না।
scroll 
1section.overflow-scroll {
2    width: 400px;
3    height: 100px;
4    overflow: scroll;
5}

scroll ব্যবহৃত হলে, যদি উপাদানের বিষয়বস্তু বাক্সটি অতিক্রম করে তবে জোরপূর্বক স্ক্রলবার প্রদর্শিত হয়। বিষয়বস্তু অতিরিক্ত না হলেও, স্ক্রলবার সর্বদা প্রদর্শিত হয়।

বৈশিষ্ট্যসমূহ:

  • উপাদানের সীমার মধ্যে বিষয়বস্তু ঠিকঠাক বসলে স্ক্রলবার তবুও প্রদর্শিত হয়।
  • স্ক্রল করা সম্ভব অনুভূমিক এবং উল্লম্ব উভয় দিকেই।
auto 
1section.overflow-auto {
2    width: 400px;
3    height: 100px;
4    overflow: auto;
5}

auto কেবল তখনই স্ক্রলবার প্রদর্শন করে যখন বিষয়বস্তু অতিরিক্ত হয়; যদি বিষয়বস্তু উপাদানের বাক্সের মধ্যে মানানসই থাকে, তবে কোনও স্ক্রলবার প্রদর্শিত হয় না।

বৈশিষ্ট্যসমূহ:

  • স্ক্রলবার কেবল তখনই প্রদর্শিত হয় যখন বিষয়বস্তু অতিরিক্ত হয়ে যায়।
  • স্বয়ংক্রিয়ভাবে একটি স্ক্রলযোগ্য এলাকা তৈরি করে।
overflow-x এবং overflow-y 
1section.overflow-xy {
2    width: 400px;
3    height: 100px;
4    overflow-x: scroll;
5    overflow-y: hidden;
6}

overflow সম্পত্তি অনুভূমিক (x অক্ষে) এবং উল্লম্ব (y অক্ষে) দিকগুলিতে পৃথকভাবে নিয়ন্ত্রণ করা যায়।

এই পদ্ধতিতে, আপনি উল্লম্ব এবং অনুভূমিক স্ক্রোলবারগুলি পৃথকভাবে প্রদর্শনের জন্য overflow-x এবং overflow-y ব্যবহার করতে পারেন।

ওভারফ্লো সম্পর্কিত বিবেচনাসমূহ

overflow সম্পত্তি ব্যবহার করার সময়, কিছু বিষয় সম্পর্কে সতর্ক থাকা প্রয়োজন।

স্ক্রোলবার প্রদর্শনের কারণে ডিজাইনের উপর প্রভাব

স্ক্রোলবার প্রদর্শনের জন্য scroll বা auto ব্যবহারের ফলে পৃষ্ঠার সামগ্রিক ডিজাইন বিঘ্নিত হতে পারে। বিশেষ করে, যদি উপাদানগুলি ডান বা নিচের প্রান্তে স্থাপন করা হয়, তবে স্ক্রোলবারগুলি সেগুলিকে কম দৃশ্যমান করতে পারে।

ডিফল্ট ব্রাউজারের আচরণ

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

শিশু উপাদানগুলির ওভারফ্লো

একটি প্যারেন্ট উপাদানে overflow: hidden সেট করলে প্যারেন্ট বক্সটির বাইরে থাকা শিশু উপাদানগুলি লুকানো হয়। এর ফলে পপ-আপ এবং মডাল উইন্ডোগুলি সঠিকভাবে প্রদর্শিত নাও হতে পারে।

overflow: clip (CSS Level 3) 

1section.overflow-clip {
2    width: 400px;
3    height: 100px;
4    overflow: clip;
5}

নতুন CSS স্পেসিফিকেশনে, overflow: clip নামে একটি মানও প্রবর্তিত হয়েছে। এটি hidden এর অনুরূপ, কিন্তু এটি স্ক্রোলিং অনুমতি দেয় না এবং শুধুমাত্র বিষয়বস্তু ক্লিপ করে। বর্তমানে, এটি শুধুমাত্র কিছু ব্রাউজার দ্বারা সমর্থিত।

বৈশিষ্ট্যসমূহ:

  • যদি বিষয়বস্তু ওভারফ্লো হয়, তবে সেই অংশটি সম্পূর্ণ লুকানো হবে।
  • স্ক্রলবার দেখানো হয় না।

উপসংহার

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

contain

contain সম্পত্তি সম্পর্কে ওভারভিউ

CSS contain সম্পত্তি একটি উপাদান অন্য উপাদান এবং পুরো পৃষ্ঠার উপর প্রভাব সীমিত করে, যা ব্রাউজারের রেন্ডারিং প্রক্রিয়া অপ্টিমাইজ করে। সুনির্দিষ্টভাবে, এটি রিফ্লো এবং রিপেইন্ট সীমিত করে একটি উপাদানের স্টাইল বা লেআউট পরিবর্তন বাইরের বিষয়বস্তুতে প্রভাব ফেলা থেকে প্রতিরোধ করে।

এটি ওয়েব পৃষ্ঠার কর্মক্ষমতার জন্য গুরুত্বপূর্ণ এবং বিশেষত জটিল লেআউট বা প্রচুর কন্টেন্টযুক্ত ওয়েবসাইটগুলির জন্য কার্যকর।

contain এর জন্য মানসমূহ

contain সম্পত্তির নিম্নলিখিত মান রয়েছে:।

layout 
1section.contain-layout {
2    width: 300px;
3    height: 300px;
4    contain: layout;
5}

layout লেআউট সম্পর্কিত সীমাবদ্ধতা প্রয়োগ করে। এই মান ব্যবহার করে একটি উপাদানের আকার এবং অবস্থান অন্য উপাদানগুলিতে প্রভাব ফেলে না। উদাহরণস্বরূপ, একটি উপাদানের ভিতরে আকার পরিবর্তন হলেও, সেই পরিবর্তন বাইরের লেআউটকে প্রভাবিত করে না।

paint 
1section.contain-paint {
2    width: 300px;
3    height: 300px;
4    contain: paint;
5}

paint আঁকা (ড্রয়িং) এর প্রভাব সীমাবদ্ধ করে। যখন এটি নির্দিষ্ট করা হয়, উপাদানের ভিতরে আঁকা বাইরের উপাদানগুলিকে আর প্রভাবিত করে না, ফলে রিপেইন্ট গণনার সীমা সীমাবদ্ধ হয়।

size 
1section.contain-size {
2    width: 300px;
3    height: 300px;
4    contain: size;
5}

size নিশ্চিত করে যে উপাদানের আকার বাইরের উপাদানের উপর নির্ভর করে না। সুনির্দিষ্টভাবে, এটি চাইল্ড উপাদানের আকার পরিবর্তন প্যারেন্ট উপাদানের আকারকে প্রভাবিত করা থেকে প্রতিরোধ করে, ফলে লেআউট স্থায়িত্ব বৃদ্ধি পায়।

style 
1section.contain-style {
2    width: 300px;
3    height: 300px;
4    contain: style;
5}

style নিশ্চিত করে যে একটি উপাদানের স্টাইল বাইরের উপাদানগুলিকে প্রভাবিত করে না। উদাহরণস্বরূপ, contain: style; নির্ধারণ করে নিশ্চিত করা যায় যে সেই উপাদানের স্টাইল পরিবর্তন অন্য উপাদানগুলিকে প্রভাবিত করবে না, ফলে পুনর্গণনার পরিসর হ্রাস পায়।

content 
1section.contain-content {
2    width: 300px;
3    height: 300px;
4    contain: content;
5}

content একটি যৌগিক মান যা layout, paint, size, এবং style প্রয়োগ করে। এটি ব্যবহার করে আপনি নিশ্চিত করতে পারেন যে উপাদানের লেআউট, আঁকা, আকার এবং স্টাইল একেবারেই বাইরের উপাদানগুলিতে প্রভাব ফেলে না।

কর্মক্ষমতার সুবিধাগুলি

contain সম্পত্তি ব্যবহারের প্রধান কারণ হল ওয়েব পৃষ্ঠার কর্মক্ষমতা উন্নত করা। বিশেষত, এটি নিম্নলিখিত পরিস্থিতিতে কার্যকর:।

  1. Reflow Optimization: যখন একটি উপাদানের আকার বা লেআউট পরিবর্তিত হয়, তখন এর প্রভাব সম্ভবত সবচেয়ে ছোট পরিসরে সীমাবদ্ধ করা যায়। এটি অপ্রয়োজনীয় পুনর্গণনা (লেআউট পুনর্গণনা) এর পরিসর হ্রাস করে এবং ব্রাউজারের উপর চাপ হ্রাস করে।

  2. Reducing Repaints: আঁকার এলাকা সীমাবদ্ধ করে, যখন একটি উপাদানের স্টাইল বা বিষয়বস্তু পরিবর্তিত হয় তখন রং করার প্রয়োজনীয় অংশটি ন্যূনতম করা যায়।

  3. Component-based Development: যেহেতু প্রতিটি কম্পোনেন্ট বা মডিউল অন্যান্য উপাদান থেকে স্বাধীনভাবে কাজ করে, এটি বড় মাপের ওয়েব অ্যাপ্লিকেশনগুলিতেও প্রতিটি কম্পোনেন্টের কর্মক্ষমতা উন্নত করে।

নোটস

আপনি যখন contain প্রপার্টি ব্যবহার করবেন, তখন নিম্নলিখিত বিষয়গুলো মাথায় রাখা উচিত।

  1. প্রয়োগের পরিসরের বোঝাপড়া: contain প্রপার্টি পারফরম্যান্স অপ্টিমাইজেশনের জন্য সহায়ক, কিন্তু এটি প্রতিটি উপাদানে প্রয়োগ করা উচিত নয়। এটি সঠিক জায়গায় যথাযথভাবে ব্যবহার করা গুরুত্বপূর্ণ। উদাহরণস্বরূপ, এটি প্রায়ই পরিবর্তনশীল উপাদান বা বড় DOM স্ট্রাকচারের অংশে ব্যবহার করলে পারফরম্যান্সের অবনতি হতে পারে।

  2. ব্রাউজার সামঞ্জস্যতা: contain প্রপার্টি তুলনামূলক নতুন একটি CSS ফিচার এবং এটি এখনও সব ব্রাউজার পূর্ণাঙ্গভাবে সমর্থন করে না। এটি প্রধান ব্রাউজারগুলো (Chrome, Firefox, Edge, Safari)-তে সমর্থিত, তবে পুরনো সংস্করণগুলোতে প্রযোজ্য নাও হতে পারে।

উপসংহার

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

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

ফ্লেক্সবক্স, গ্রিড, এবং কলাম লেআউটের তুলনা`অবজেক্ট-ফিট` এবং `অবজেক্ট-পজিশন` প্রপার্টিজ