নতুন CSS বৈশিষ্ট্যগুলি কখনও কখনও কোড ডিজাইনকে সহজ এবং আরও দক্ষ করে তুলতে পারে যা আমরা ইতিমধ্যে তৈরি করতে জানি। এই দক্ষতা কম কোড বা হ্যাক থেকে বা নতুন বৈশিষ্ট্যগুলির কারণে উন্নত পঠনযোগ্যতা থেকে উদ্ভূত হতে পারে।
সেই চেতনায়, আসুন বার চার্টের হুডের নীচে যা আছে তা আবার তৈরি করি।
We begin by laying out a grid.
.chart {
display: grid;
grid-template-rows: repeat(100, 1fr);
/* etc. */
}চার্ট মেট্রিক শতাংশের উপর ভিত্তি করে, যেমন "কিছু সংখ্যা"। 100 এর মধ্যে" ধরা যাক আমরা 100টি সারি সহ একটি গ্রিডের সাথে কাজ করছি৷ এটি স্ট্রেস টেস্ট করা উচিত, তাই না?
এর পরে, আমরা গ্রিডে বারগুলি যুক্ত করি grid-column এবং grid-row সম্পত্তি:
.chart-bar {
grid-column: sibling-index();
grid-row: span attr(data-value number);
/* etc. */
}ব্যাট হাতে, আমি কয়েকটি জিনিস নোট করতে চাই। প্রথম এক এই sibling-index() উদযাপন। এটি মোটামুটি নতুন এবং এই নিবন্ধটি লেখার সময় এটিতে অসম্পূর্ণ ব্রাউজার সমর্থন রয়েছে (আসুন, ফায়ারফক্স!), যদিও এটি বর্তমানে সাম্প্রতিক ক্রোম এবং সাফারিতে সমর্থিত (তবে স্পষ্টতই iOS এ নয়)। দ্বিতীয়টি হল attr() উদযাপন। আমরা কিছু সময়ের জন্য এটি পেয়েছি, কিন্তু এটি সম্প্রতি আপগ্রেড করা হয়েছে এবং এখন ডেটা-অ্যাট্রিবিউটগুলি গ্রহণ করে৷ তাই যখন আমরা আমাদের মার্কআপের মধ্যে তাদের এক - পছন্দ data-value="32" - এটি এমন কিছু যা ফাংশনটি পড়তে পারে।
এগুলোর সাথে, ভ্যানিলা সিএসএস-এ সত্যিই চমৎকার একটি বার চার্ট তৈরি করতে আমাদের এতটুকুই দরকার! ফলব্যাকগুলি নিম্নলিখিত ডেমোতে উপস্থিত রয়েছে যাতে আপনার ব্রাউজার যদি সেই নতুন বৈশিষ্ট্যগুলি গ্রহণ না করে তবে আপনি এখনও শেষ ফলাফল দেখতে পারেন:
হ্যাঁ, এটি করা সহজ ছিল, তবে এটি কীভাবে করবেন তা সঠিকভাবে জানা সবচেয়ে ভাল কেন এটা কাজ করে। সুতরাং, এর এটা ভেঙ্গে দেওয়া যাক.
স্বয়ংক্রিয়ভাবে গ্রিড কলাম সেট আপ করা হচ্ছে
ঘোষণা sibling-index() কাজ grid-column সম্পত্তি স্পষ্টতই পরপর কলামে আইটেমগুলির তালিকা রাখে। আমি বলি "স্পষ্ট" কারণ আমরা গ্রিডকে বলছি যেখানে প্রতিটি আইটেম তার অবস্থানের উপর ভিত্তি করে রাখতে হবে data-value মার্কআপে বৈশিষ্ট্য। এটা প্রথম যায়
দ্বিতীয় কলামে, ইত্যাদি।
এই শক্তি sibling-index() - গ্রিড বুদ্ধিমত্তার সাথে CSS ভেরিয়েবলের মাধ্যমে ম্যানুয়ালি না করে আমাদের জন্য অর্ডার তৈরি করে।
/* First bar: sibling-index() = 1 */
grid-column: sibling-index();
/* ...results in: */
grid-column: 1;
grid-column-start: 1; grid-column-end: auto;
/* Second bar: sibling-index() = 2 */
grid-column: sibling-index();
/* ...results in: */
grid-column: 2;
grid-column-start: 2; grid-column-end: auto;
/* etc. */স্বয়ংক্রিয়ভাবে গ্রিড সারি সেট আপ করা হচ্ছে
এটা ঠিক একই জিনিস! কিন্তু এই ক্ষেত্রে, প্রতিটি বার এটি প্রতিনিধিত্ব করে শতাংশের উপর নির্ভর করে একটি নির্দিষ্ট সংখ্যক সারি দখল করে। গ্রিড সেই মান পায় data-value মার্কআপের বৈশিষ্ট্যটি কার্যকরভাবে গ্রিডকে বলে যে চার্টের প্রতিটি বার কত লম্বা হওয়া উচিত।
/* First bar: data-value="32" */
grid-row: span attr(data-value number);
/* ...results in: */
grid-row: span 32
/* Second bar: data-value="46" */
grid-row: span attr(data-value number);
/* ...results in: */
grid-row: span 46 attr() ফাংশন, যখন একটি প্রদান করা হয় ডেটা টাইপ প্যারামিটার (প্যারামিটার মান number আমাদের ক্ষেত্রে), দ্বারা প্রাপ্ত মান রাখে attr() যে নির্দিষ্ট ধরনের মধ্যে. আমাদের উদাহরণে, attr() একটি ফাংশনের মান প্রদান করে data-value হিসাবে ক
এর বিভিন্ন চার্ট তৈরি করা যাক!
যেহেতু আমাদের এই পদ্ধতির একটি হ্যান্ডেল আছে, আমি ভেবেছিলাম যে আমি জিনিসগুলিকে আরও একটু এগিয়ে নিয়ে যাব এবং প্রদর্শন করব কিভাবে আমরা সমস্ত ধরণের সিএসএস-শুধু চার্টে একই কৌশল প্রয়োগ করতে পারি।
উদাহরণস্বরূপ, আমরা ব্যবহার করতে পারেন grid-row বারের উল্লম্ব দিক সামঞ্জস্য করার মান:
অথবা আমরা বারটি সম্পূর্ণভাবে বাদ দিতে পারি এবং পরিবর্তে মার্কার ব্যবহার করতে পারি:
আমরা একটি অনুভূমিক বার চার্টের জন্য কলাম এবং সারি অদলবদল করতে পারি:
আপ মোড়ানো
খুব উত্তেজনাপূর্ণ, তাই না? সেই দিনগুলির আগে এই জিনিসগুলি বের করার জন্য আমরা যে সমস্ত পদ্ধতি ব্যবহার করি তা দেখুন sibling-index() এবং একটি উন্নত attr()::
