অনেক বছর ধরে, CSS লেআউট ওয়েবসাইটের লেআউট তৈরি করার জন্য একটি সূক্ষ্ম, ততটা প্রয়োজনীয় উপাদান। আপনার নকশা একাধিক কলাম জন্য বলা হলে, আপনি floats দিকে পরিণত এই পদ্ধতির সমস্যা হল যে, অবিশ্বাস্য চিত্তাকর্ষক সত্ত্বেও ওয়েব ডিজাইনার / ডেভেলপারগণ জটিল সাইট লেআউট তৈরিতে দেখিয়েছেন, CSS ফ্লোটগুলি আসলে এই পদ্ধতিতে ব্যবহার করা হতো না।
যখন ভাসমান এবং সিএসএস পজিশনিং আসতে অনেক বছর ধরে ওয়েব ডিজাইনে একটি জায়গা আছে নিশ্চিত, সিএসএস গ্রেড এবং Flexbox সহ নতুন লেআউট কৌশল এখন ওয়েব ডিজাইনারদের তাদের সাইট লেআউট তৈরি করার নতুন উপায় প্রদান করা হয়। আরেকটি নতুন লেআউট কৌশল যা অনেকগুলি সম্ভাব্যতা দেখায় সিএসএস একাধিক কলাম।
CSS কলামগুলি এখন কয়েক বছর ধরে চলছে, তবে পুরোনো ব্রাউজারগুলিতে সমর্থনের অভাব (প্রধানত ইন্টারনেট এক্সপ্লোরারের পুরোনো সংস্করণ) তাদের ওয়েব ডেভেলপমেন্টের মাধ্যমে তাদের প্রোডাকশন কাজের এই স্টাইলগুলি ব্যবহার করে থাকে।
IE এর পুরোনো ভার্সনের জন্য সমর্থন শেষে, কিছু ওয়েব ডিজাইনাররা এখন নতুন সিএসএস লেআউট অপশন, সিএসএস কলাম অন্তর্ভুক্ত করে পরীক্ষা করছে, এবং খুঁজে পেয়েছে যে তারা এই নতুন পদ্ধতির সাথে তোলার তুলনায় আরো অনেক বেশি নিয়ন্ত্রণ রয়েছে।
CSS কলামগুলির মূলগুলি
এর নামটি প্রস্তাবিত, সিএসএস একাধিক কলাম (এছাড়াও CSS3 মাল্টি-কলাম লেআউট নামে পরিচিত) আপনাকে একটি নির্দিষ্ট সংখ্যক কলামে বিভক্ত করতে দেয়। সবচেয়ে মৌলিক CSS বৈশিষ্ট্য যা আপনি ব্যবহার করবেন:
- কলাম গোনা
- কলাম-ফাঁক
কলাম-গণনা জন্য, আপনি চান কলামের সংখ্যা উল্লেখ করুন। কলামের ফাঁকটি সেই কলামগুলির মধ্যে গেটস বা স্পেসিং হবে। ব্রাউজার এই মানগুলি গ্রহণ করবে এবং সমানভাবে আপনি যে কলামগুলি নির্দিষ্ট করবেন তার সংখ্যাতে বিভক্ত হবে।
সিএসএস একাধিক কলামের একটি সাধারণ উদাহরণ অনুশীলন পত্রের একটি ব্লককে একাধিক কলামে বিভক্ত করতে হবে, যা আপনি একটি সংবাদপত্রের প্রবন্ধে দেখতে পাবেন। বলুন আপনি নিম্নলিখিত এইচটিএমএল মার্কআপ আছে (নোট যে উদাহরণস্বরূপ, আমি শুধুমাত্র একটি অনুচ্ছেদের প্রারম্ভে নির্বাণ করছি, যখন অনুশীলন এই মাপের মধ্যে বিষয়বস্তু একাধিক অনুচ্ছেদ হতে পারে):
আপনার নিবন্ধের শিরোনাম
এখানে পাঠ্যের অনেক অনুচ্ছেদের কল্পনা করুন ...
যদি আপনি এই CSS শৈলী লিখেছেন:
.content {-moz-column-count: 3; - ওয়েবকাইট-কলাম-গণনা: 3; কলাম-গণনা: 3; -মোজ-কলাম-ফাঁক: 30px; -ওয়েবকিট-কলাম-ফাঁক: 30px; কলাম-ফাঁক: 30px; }এই সিএসএস নিয়মটি "বিষয়বস্তু" বিভাগকে তাদের মধ্যে 30 পিক্সেলের ফাঁক দিয়ে 3 সমান কলামে বিভক্ত করবে। যদি আপনি 3 এর পরিবর্তে দুই কলাম চান তবে আপনি কেবল সেই মানটি পরিবর্তন করবেন এবং ব্রাউজারটি সেই কলামগুলির নতুন প্রান্তগুলি গণনা করবে যাতে সমানভাবে বিষয়বস্তু ছিন্ন করা যায়। লক্ষ্য করুন যে আমরা প্রথম বিক্রেতার-প্রিফিক্সেসের বৈশিষ্ট্যগুলি ব্যবহার করি, যা পরবর্তীতে অ-প্রিফিক্সড ঘোষণাগুলি অনুসরণ করে।
এই হিসাবে সহজ হিসাবে, এই ভাবে ব্যবহার তার ওয়েবসাইট ব্যবহারের জন্য সন্দেহজনক। হ্যাঁ, আপনি একাধিক কলামে বিষয়বস্তু একটি গুচ্ছ বিভক্ত করতে পারেন, কিন্তু এই ওয়েব জন্য সবচেয়ে ভাল পড়ার অভিজ্ঞতা হতে পারে না, বিশেষ করে যদি এই কলামের উচ্চতা পর্দার "ভাঁজ" নীচের নিচে।
পুরো বিষয়বস্তুটি পড়ার জন্য পাঠকরা যাতে স্ক্রোল ও ডাউন স্ক্রোল করতে পারে। তবুও, সিএসএস কলামের প্রিন্সিপমেন্ট এখানে দেখতে যতটা সহজ, এবং এটি শুধু কিছু অনুচ্ছেদের বিষয়বস্তু বিভক্ত করার চেয়ে আরও অনেক কিছু করার জন্য ব্যবহার করা যেতে পারে - এটি আসলেই লেআউটের জন্য ব্যবহার করা যেতে পারে।
CSS কলাম সহ লেআউট
বলুন যে আপনার কাছে এমন একটি সামগ্রী রয়েছে যার বিষয়বস্তুতে 3 টি কলাম রয়েছে। এটি একটি খুব সাধারণ ওয়েবসাইটের লেআউট, এবং ঐ 3 কলামগুলি অর্জন করতে, আপনি সাধারণত সেই বিভাগগুলিকে ভাসাবেন। সিএসএস একাধিক কলামগুলির সাথে, এটা এত সহজ।
এখানে কিছু নমুনা HTML আছে:
সাম্প্রতিক খবর
বিষয়বস্তু এখানে আসবে ...
আসন্ন ঘটনা
বিষয়বস্তু এখানেই আসবে ...
p>
এই বহুবিধ কলামগুলি তৈরি করতে সিএসএসটি আপনি আগে দেখেছেন তা শুরু করুন:
.content {-moz-column-count: 3; - ওয়েবকাইট-কলাম-গণনা: 3; কলাম-গণনা: 3; -মোজ-কলাম-ফাঁক: 30px; -ওয়েবকিট-কলাম-ফাঁক: 30px; কলাম-ফাঁক: 30px; } এখন, এখানে চ্যালেঞ্জ হল, যেহেতু ব্রাউজার এই বিষয়বস্তুকে সমানভাবে বিভক্ত করতে চায়, তাই যদি এই বিভাগগুলির বিষয়বস্তু দৈর্ঘ্য ভিন্ন হয় তবে সেই ব্রাউজারটি আসলে একটি পৃথক বিভাগের বিষয়বস্তু বিভক্ত করবে, এটি একটি কলামে শুরু করে এবং তারপর অন্য (আপনি একটি পরীক্ষা চালানোর জন্য এই কোড ব্যবহার করে এবং প্রতিটি বিভাগের ভিতরে বিভিন্ন দৈর্ঘ্য সংযোজন যোগ করে এটি দেখতে পারেন) মধ্যে অব্যাহত!
যে আপনি চান কি না। আপনি এই প্রতিটি বিভাগ একটি স্বতন্ত্র কলাম তৈরি করতে চান এবং, একটি পৃথক বিভাগ এর বিষয়বস্তু বড় বা ছোট হতে পারে কিভাবে কোন ব্যাপার, আপনি এটা বিভক্ত করতে চান না। আপনি এটিকে CSS এর একটি অতিরিক্ত লাইন যোগ করে এটি অর্জন করতে পারেন:
.content div {প্রদর্শন: ইনলাইন-ব্লক; } এটি "সামগ্রী" এর ভিতরে থাকা সমস্ত বিভাগগুলিকে অক্ষত থাকতে বাধ্য করে, এমনকি ব্রাউজারটি একাধিক কলামে বিভক্ত করে। এমনকি আরও ভাল, যেহেতু আমরা এখানে একটি নির্দিষ্ট প্রস্থকে কিছুই না দিয়েছি, এই কলামগুলি স্বয়ংক্রিয়ভাবে ব্রাউজারের আকারের আকারে পুনঃনির্ধারণ করবে, প্রতিক্রিয়াশীল ওয়েবসাইটগুলির জন্য তাদের একটি আদর্শ অ্যাপ্লিকেশন তৈরি করবে। যে জায়গায় "ইনলাইন-ব্লক" শৈলীতে, আপনার 3 টি বিভাগের প্রত্যেকটি সামগ্রী একটি স্বতন্ত্র কলাম থাকবে।
কলাম-প্রস্থ ব্যবহার
আপনি ব্যবহার করতে পারেন যে "কলাম-গণনা" ছাড়াও অন্য সম্পত্তি আছে, এবং আপনার লেআউট প্রয়োজনের উপর নির্ভর করে, এটি আসলে আপনার সাইটের জন্য একটি ভাল পছন্দ হতে পারে। এটি "কলাম-প্রস্থ" একই এইচটিএমএল মার্কআপ ব্যবহার করে আগে দেখানো হয়েছে, আমরা পরিবর্তে আমাদের CSS দিয়ে এটি করতে পারে:
.content {-moz-column-width: 500px; - ওয়েবকাইট-কলাম-প্রস্থ: 500 পিক্স; কলাম-প্রস্থ: 500 পিক্স; -মোজ-কলাম-ফাঁক: 30px; -ওয়েবকিট-কলাম-ফাঁক: 30px; কলাম-ফাঁক: 30px; } .content div {প্রদর্শন: ইনলাইন-ব্লক; } এটি যেভাবে কাজ করে তা হল ব্রাউজার এই কলামের সর্বোচ্চ মান হিসাবে এই "কলাম-প্রস্থ" ব্যবহার করে। তাই যদি ব্রাউজার উইন্ডোটি 500 পিক্সেলের চেয়েও কম হয়, তবে এই 3 বিভাগগুলি একক কলামে প্রদর্শিত হবে, অন্যটির শীর্ষে একটি। মোবাইল / ছোট স্ক্রিন লেআউটগুলির জন্য এটি একটি সাধারণ লেআউট।
হিসাবে হিসাবে ব্রাউজারের প্রস্থ বর্ধিত যথেষ্ট বড় কলামের জন্য নির্দিষ্ট কলাম ফাঁক বরাবর 2 কলাম মাপসই হবে, ব্রাউজার স্বয়ংক্রিয়ভাবে একটি কলাম লেআউট থেকে দুই কলাম থেকে যাবে। পর্দার প্রস্থ বাড়িয়ে রাখুন এবং অবশেষে, আপনার 3 কলাম ডিজাইন পাবেন, আমাদের প্রতিটি 3 টি বিভাগ তাদের নিজস্ব কলামে প্রদর্শিত হবে। আবার, এটি কিছু প্রতিক্রিয়াশীল, মাল্টি-ডিভাইস বন্ধুত্বপূর্ণ লেআউট পেতে একটি দুর্দান্ত উপায়, এবং লেআউট স্টাইলগুলি পরিবর্তন করার জন্য আপনাকে এমনকি মিডিয়া প্রশ্নগুলি ব্যবহার করতে হবে না!
অন্যান্য কলাম বৈশিষ্ট্যাবলী
এখানে আচ্ছাদিত বৈশিষ্ট্য ছাড়াও, "কলাম-নিয়ম" এর জন্য বৈশিষ্ট্য রয়েছে, যার মধ্যে রঙ, শৈলী এবং প্রস্থ মান রয়েছে যা আপনাকে আপনার কলামের মধ্যে নিয়মগুলি তৈরি করতে দেয়। আপনি যদি আপনার কলামগুলি আলাদা করে কিছু লাইন রাখতে চান তবে এইগুলি সীমানার পরিবর্তে ব্যবহার করা হবে।
পরীক্ষার সময়
বর্তমানে, সিএসএস একাধিক কলাম লেআউটটি খুব ভালোভাবে সমর্থিত। উপসর্গগুলি দিয়ে, 94% ওয়েব ব্যবহারকারীরা এই শৈলীগুলি দেখতে সক্ষম হবে, এবং যে অসমর্থিত গোষ্ঠী সত্যিই ইন্টারনেট এক্সপ্লোরারের বেশ পুরোনো সংস্করণ হবে যা আপনি আর সমর্থন করতে পারবেন না।
এই স্তরের সমর্থনের পাশাপাশি, সিএসএস কলামের সাথে পরীক্ষা শুরু করা এবং উত্পাদন প্রস্তুত ওয়েবসাইটগুলিতে এই শৈলী স্থাপন করার কোন কারণ নেই। আপনি এই প্রবন্ধে উপস্থাপিত HTML এবং CSS ব্যবহার করে আপনার পরীক্ষা শুরু করতে পারেন এবং আপনার সাইটের লেআউটের প্রয়োজনীয়তার জন্য সর্বোত্তম কাজটি দেখতে দেখতে বিভিন্ন মানের সাথে খেলা করতে পারেন।
আসন্ন ঘটনা
বিষয়বস্তু এখানেই আসবে ...
p>
এই বহুবিধ কলামগুলি তৈরি করতে সিএসএসটি আপনি আগে দেখেছেন তা শুরু করুন:
.content {-moz-column-count: 3; - ওয়েবকাইট-কলাম-গণনা: 3; কলাম-গণনা: 3; -মোজ-কলাম-ফাঁক: 30px; -ওয়েবকিট-কলাম-ফাঁক: 30px; কলাম-ফাঁক: 30px; }এখন, এখানে চ্যালেঞ্জ হল, যেহেতু ব্রাউজার এই বিষয়বস্তুকে সমানভাবে বিভক্ত করতে চায়, তাই যদি এই বিভাগগুলির বিষয়বস্তু দৈর্ঘ্য ভিন্ন হয় তবে সেই ব্রাউজারটি আসলে একটি পৃথক বিভাগের বিষয়বস্তু বিভক্ত করবে, এটি একটি কলামে শুরু করে এবং তারপর অন্য (আপনি একটি পরীক্ষা চালানোর জন্য এই কোড ব্যবহার করে এবং প্রতিটি বিভাগের ভিতরে বিভিন্ন দৈর্ঘ্য সংযোজন যোগ করে এটি দেখতে পারেন) মধ্যে অব্যাহত!
যে আপনি চান কি না। আপনি এই প্রতিটি বিভাগ একটি স্বতন্ত্র কলাম তৈরি করতে চান এবং, একটি পৃথক বিভাগ এর বিষয়বস্তু বড় বা ছোট হতে পারে কিভাবে কোন ব্যাপার, আপনি এটা বিভক্ত করতে চান না। আপনি এটিকে CSS এর একটি অতিরিক্ত লাইন যোগ করে এটি অর্জন করতে পারেন:
.content div {প্রদর্শন: ইনলাইন-ব্লক; }এটি "সামগ্রী" এর ভিতরে থাকা সমস্ত বিভাগগুলিকে অক্ষত থাকতে বাধ্য করে, এমনকি ব্রাউজারটি একাধিক কলামে বিভক্ত করে। এমনকি আরও ভাল, যেহেতু আমরা এখানে একটি নির্দিষ্ট প্রস্থকে কিছুই না দিয়েছি, এই কলামগুলি স্বয়ংক্রিয়ভাবে ব্রাউজারের আকারের আকারে পুনঃনির্ধারণ করবে, প্রতিক্রিয়াশীল ওয়েবসাইটগুলির জন্য তাদের একটি আদর্শ অ্যাপ্লিকেশন তৈরি করবে। যে জায়গায় "ইনলাইন-ব্লক" শৈলীতে, আপনার 3 টি বিভাগের প্রত্যেকটি সামগ্রী একটি স্বতন্ত্র কলাম থাকবে।
কলাম-প্রস্থ ব্যবহার
আপনি ব্যবহার করতে পারেন যে "কলাম-গণনা" ছাড়াও অন্য সম্পত্তি আছে, এবং আপনার লেআউট প্রয়োজনের উপর নির্ভর করে, এটি আসলে আপনার সাইটের জন্য একটি ভাল পছন্দ হতে পারে। এটি "কলাম-প্রস্থ" একই এইচটিএমএল মার্কআপ ব্যবহার করে আগে দেখানো হয়েছে, আমরা পরিবর্তে আমাদের CSS দিয়ে এটি করতে পারে:
.content {-moz-column-width: 500px; - ওয়েবকাইট-কলাম-প্রস্থ: 500 পিক্স; কলাম-প্রস্থ: 500 পিক্স; -মোজ-কলাম-ফাঁক: 30px; -ওয়েবকিট-কলাম-ফাঁক: 30px; কলাম-ফাঁক: 30px; } .content div {প্রদর্শন: ইনলাইন-ব্লক; }এটি যেভাবে কাজ করে তা হল ব্রাউজার এই কলামের সর্বোচ্চ মান হিসাবে এই "কলাম-প্রস্থ" ব্যবহার করে। তাই যদি ব্রাউজার উইন্ডোটি 500 পিক্সেলের চেয়েও কম হয়, তবে এই 3 বিভাগগুলি একক কলামে প্রদর্শিত হবে, অন্যটির শীর্ষে একটি। মোবাইল / ছোট স্ক্রিন লেআউটগুলির জন্য এটি একটি সাধারণ লেআউট।
হিসাবে হিসাবে ব্রাউজারের প্রস্থ বর্ধিত যথেষ্ট বড় কলামের জন্য নির্দিষ্ট কলাম ফাঁক বরাবর 2 কলাম মাপসই হবে, ব্রাউজার স্বয়ংক্রিয়ভাবে একটি কলাম লেআউট থেকে দুই কলাম থেকে যাবে। পর্দার প্রস্থ বাড়িয়ে রাখুন এবং অবশেষে, আপনার 3 কলাম ডিজাইন পাবেন, আমাদের প্রতিটি 3 টি বিভাগ তাদের নিজস্ব কলামে প্রদর্শিত হবে। আবার, এটি কিছু প্রতিক্রিয়াশীল, মাল্টি-ডিভাইস বন্ধুত্বপূর্ণ লেআউট পেতে একটি দুর্দান্ত উপায়, এবং লেআউট স্টাইলগুলি পরিবর্তন করার জন্য আপনাকে এমনকি মিডিয়া প্রশ্নগুলি ব্যবহার করতে হবে না!
অন্যান্য কলাম বৈশিষ্ট্যাবলী
এখানে আচ্ছাদিত বৈশিষ্ট্য ছাড়াও, "কলাম-নিয়ম" এর জন্য বৈশিষ্ট্য রয়েছে, যার মধ্যে রঙ, শৈলী এবং প্রস্থ মান রয়েছে যা আপনাকে আপনার কলামের মধ্যে নিয়মগুলি তৈরি করতে দেয়। আপনি যদি আপনার কলামগুলি আলাদা করে কিছু লাইন রাখতে চান তবে এইগুলি সীমানার পরিবর্তে ব্যবহার করা হবে।
পরীক্ষার সময়
বর্তমানে, সিএসএস একাধিক কলাম লেআউটটি খুব ভালোভাবে সমর্থিত। উপসর্গগুলি দিয়ে, 94% ওয়েব ব্যবহারকারীরা এই শৈলীগুলি দেখতে সক্ষম হবে, এবং যে অসমর্থিত গোষ্ঠী সত্যিই ইন্টারনেট এক্সপ্লোরারের বেশ পুরোনো সংস্করণ হবে যা আপনি আর সমর্থন করতে পারবেন না।
এই স্তরের সমর্থনের পাশাপাশি, সিএসএস কলামের সাথে পরীক্ষা শুরু করা এবং উত্পাদন প্রস্তুত ওয়েবসাইটগুলিতে এই শৈলী স্থাপন করার কোন কারণ নেই। আপনি এই প্রবন্ধে উপস্থাপিত HTML এবং CSS ব্যবহার করে আপনার পরীক্ষা শুরু করতে পারেন এবং আপনার সাইটের লেআউটের প্রয়োজনীয়তার জন্য সর্বোত্তম কাজটি দেখতে দেখতে বিভিন্ন মানের সাথে খেলা করতে পারেন।