সিএসএস (৩)order প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| order | ২৯.০ ২১.০ - webkit- |
১১.০ | ২৮.০ ১৮.০ - moz- |
৯.০ ৬.১ - webkit- |
১৭.০ |
সংজ্ঞা ও ব্যবহার
একই কন্টেইনারের মধ্যের সম্পর্কিত ফ্লেক্সিবল আইটেমগুলো ক্রম নির্ধারণ করার জন্য orderপ্রোপার্টি ব্যবহার করা হয়।
পরামর্শঃ
- যদি এলিমেন্টগুলো ফ্লেক্সিবল না হয়, তাহলে order প্রোপার্টির প্রভাব কার্যকর হবে না।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| ০ | না | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। animatableএর উদাহরণ |
সিএসএস সিনট্যাক্স
order: number/initial/inherit;
ফ্লেক্সিবল কন্টেন্টের জন্য ক্রম নির্ধারণ করা হলো:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 100%;
height: 150px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
width: 70px;
height: 70px;
}
div#myRedDIV {order: 2;}
div#myBlueDIV {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV {order: 1;}
</style>
</head>
<body>
<div id="main">
<div style="background-color:pink;" id="myRedDIV"></div>
<div style="background-color:teal;" id="myBlueDIV"></div>
<div style="background-color:lightgreen;" id="myGreenDIV"></div>
<div style="background-color:orangered;" id="myPinkDIV"></div>
</div>
<p><b>নোটঃ</b> ইন্টারনেট এক্সপ্লোরার ১০ এবং পূর্বের ভার্সনগুলোতে order প্রোপার্টি সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.order="2"উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 100%;
height: 150px;
border: 1px solid #000000;
display: flex;
}
#main div {
width: 70px;
height: 70px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;" id="myRedDIV"></div>
<div style="background-color:lightblue;" id="myBlueDIV"></div>
<div style="background-color:lightgreen;" id="myGreenDIV"></div>
<div style="background-color:pink;" id="myPinkDIV"></div>
</div>
<p>"উদাহরণ দেখি" বাটনে ক্লিক করলে div এলিমেন্টের order প্রোপার্টিটি পরিবর্তন হবে।</p>
<button onclick="myFunction()">উদাহরণ দেখি</button>
<script>
function myFunction() {
document.getElementById("myRedDIV").style.order = "4";
document.getElementById("myBlueDIV").style.order = "3";
document.getElementById("myGreenDIV").style.order = "1";
document.getElementById("myPinkDIV").style.order = "2";
}
</script>
<p><b>নোটঃ</b> ইন্টারনেট এক্সপ্লোরার ১০ এবং পূর্বের ভার্সনগুলোতে order প্রোপার্টি সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
orderপ্রোপার্টির ভ্যালু-সমূহ
- number - ডিফল্ট ভ্যালু 0 । ফ্লেক্সিবল আইটেমের জন্য ক্রম নির্ধারন করে।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।