সাচা গ্রিফ খোলাখুলি বিস্মিত CSS হতে পেরেছে কিনা, আপনি জানেন, খুব বড়। গত কয়েক বছরে ব্রাউজারে পাঠানো সমস্ত গুডির সাথে — ধারক প্রশ্ন! আপেক্ষিক রঙ সিনট্যাক্স! ক্যাসকেড স্তর! যৌক্তিক বৈশিষ্ট্য! মিডিয়া প্রশ্নে রেঞ্জ! স্বতন্ত্র রূপান্তর! :has() নির্বাচক! - এবং সম্ভাব্য দিগন্তে যা আছে তার সবই - CSS টগল! পাখির! রঙের মিশ্রণ! স্ক্রোল-লিঙ্কড অ্যানিমেশন! ব্যাপ্ত শৈলী! — নতুন এবং পাকা ফ্রন্ট-এন্ডারদের জন্য আজকাল সিএসএস-এর জন্য অবশ্যই আলাদা শেখার বক্ররেখা রয়েছে।
এমন একটি সময় থাকতে পারে যখন বেশিরভাগ সিএসএস বৈশিষ্ট্য এবং তারা কীভাবে কাজ করে তা জানা সম্ভব ছিল। সেই দিনগুলো অনেক আগেই চলে গেছে, অন্তত আমার মতো একজন বৃদ্ধের জন্য। কিন্তু এই ধরণের প্রশ্ন জাগে: আপনি কি সিএসএস একেবারে জানতে হবে?
সম্প্রতি ভিনকাস স্টনিস একটি তালিকা একটি ছুরিকাঘাত গ্রহণ. ক্রিস এক সাথে রাখুন CSS3 থেকে প্রকাশিত বৈশিষ্ট্যের উপর ভিত্তি করে। আপনার সম্ভবত একটি ধারণা আছে যে আপনি একটি তালিকায় কী অন্তর্ভুক্ত করবেন। যদি আমাকে একটি শীর্ষ 5 একসাথে রাখতে হয় এবং নিজেকে শুধুমাত্র বৈশিষ্ট্য এবং নির্বাচকদের মধ্যে সীমাবদ্ধ করতে হয়, তাহলে এটি দেখতে এরকম কিছু হতে পারে...
writing-mode
আমি সম্পর্কে যথেষ্ট বলতে পারি না writing-mode সম্পত্তি যা এটিকে গুরুত্বপূর্ণ করে তোলে - বিশেষ করে শেখার দৃষ্টিকোণ থেকে - এটি আপনাকে অন্তর্ভুক্ত করে এমন নীতির জন্য সেট আপ করে যা ব্যবহারকারীর ভাষা নির্বিশেষে লেআউট তৈরির জন্য অ্যাকাউন্ট করে৷ একটি ভাল বোঝাপড়া writing-mode একটি বোঝার নেতৃত্বে যাচ্ছে যৌক্তিক বৈশিষ্ট্য এবং মান, এবং যারা, ঘুরে, দস্তাবেজ প্রবাহ বোঝার জন্য পর্যায় সেট এবং পরিপ্রেক্ষিতে চিন্তা block, inline, start, এবং end শারীরিক দিকনির্দেশের পরিবর্তে।
display
আমার বিশ্বাস করতে কষ্ট হচ্ছে যে কেউ ভালো সিএসএস লিখতে পারে না display সম্পত্তি এটি একটি সম্পত্তি এবং লেআউট তৈরির জন্য একটি কাঠামো উভয়ই। এটি ছাড়া কোনও ফ্লেক্সবক্স বা সিএসএস গ্রিড নেই, এটিকে এই গুরুত্বপূর্ণ বৈশিষ্ট্যগুলি বোঝার জন্য দারোয়ানের মতো করে তোলে৷
প্লাস, display সম্পত্তি পুরোপুরি পরিপূরক writing-mode. এটা ঠিক কি আপনি একবার প্রয়োজন হবে writing-mode নথির প্রবাহ এবং যৌক্তিক দিকনির্দেশের কাছে আপনাকে উন্মুক্ত করেছে। আপনার হয় একটি উপাদানের স্বাভাবিক প্রবাহ পরিবর্তন করার জন্য একটি সম্পত্তির প্রয়োজন হবে (যেমন একটি ব্লক উপাদানকে একটি ইনলাইনে পরিবর্তন করা) অথবা জিনিসগুলি রাখা শুরু করা (যেমন একটি নমনীয় লেআউট প্রসঙ্গ তৈরি করা) এবং সেখানেই display খেলার মধ্যে আসে।
margin / padding / border
ওহ, আমি এখানে সম্পূর্ণ প্রতারণা করছি কিন্তু শেখার কথা ভাবছি margin, padding, এবং border একসাথে অনিবার্য সাজানোর. তারা সব অংশ বক্স মডেল, সমস্ত ব্যবধান এবং স্টাইলিং সহ সাহায্য করে এবং সকলের সাথে পরিচিত হওয়া প্রয়োজন CSS দৈর্ঘ্যের একক. এই বৈশিষ্ট্যগুলি কী করার জন্য ডিজাইন করা হয়েছে এবং কীভাবে এগুলি একটি উপাদানের গণনা করা আকারে অবদান রাখে তা জানা অবশ্যই আপনাকে অনেক বেশি স্টাইলিং নিয়ন্ত্রণ দেয় এবং একটি উপাদান কেন আকারের তা নিয়ে যে কোনও বিভ্রান্তি দূর করে — একটি সাধারণ CSS মাথাব্যথা!
::before এবং ::after
আরেকটা যেখানে আমি একটু প্রতারণা করছি। হ্যাঁ, ::before এবং ::after দুটি পৃথক ছদ্ম-উপাদান, কিন্তু আবার, আমি অন্যটি ছাড়া একটি সম্পর্কে শেখার কল্পনা করতে পারি না। এটা দুই-ফের!
আমার মনে আছে যে এগুলোর অস্তিত্ব আছে এবং এটি থেকে সবকিছু তৈরি করতে ব্যবহার করা যেতে পারে তা শিখতে আমার জন্য কতটা মন ফুঁসে উঠেছিল শীতল UI প্রভাব শেষ করতে একক-ডিভ চিত্র. এটি নতুন সম্ভাবনার উন্মোচন করে এবং CSS আসলে কতটা শক্তিশালী তা প্রথম উঁকি দেয়।
@media
উফ, আমি ইতিমধ্যেই তালিকার আমার পঞ্চম এবং চূড়ান্ত আইটেমে রয়েছি এবং মনে হচ্ছে এখনও অনেক সিএসএস ভালতা রয়েছে যা এখানে রয়েছে। কিন্তু যদি আমাকে একটি শেষ জিনিস বেছে নিতে হয়, তা হবে মিডিয়া প্রশ্নের. কেন? কারণ এটি তরল, নমনীয় লেআউট এবং বিভিন্ন দেখার প্রসঙ্গ তৈরি করার জন্য একটি প্রধান উপাদান। ধারক প্রশ্ন এটি পরিপক্ক হওয়ার সাথে সাথে এটি আমার তালিকা থেকে ছিটকে যেতে পারে, তবে আপাতত, @media প্রতিক্রিয়াশীল ডিজাইনের জন্য একটি দুর্দান্ত প্রাইমার।
যে অতিক্রম, @media CSS এর শর্তসাপেক্ষ গুণাবলীর একটি চমৎকার প্রথম ধাপ। যে ধরনের ডিভাইস ব্যবহার করা হচ্ছে তার উপর ভিত্তি করে আমরা একটি ক্যোয়ারী লিখছি কিনা (যেমন, screen or print) বা যখন ব্রাউজারের ভিউপোর্ট একটি নির্দিষ্ট মানদণ্ড পূরণ করে (যেমন, width >= 768px), দ্য @media বিভিন্ন অবস্থার জন্য অপ্টিমাইজ করা লেআউট তৈরি করার জন্য সিনট্যাক্স অবিশ্বাস্যভাবে কার্যকর।
ওহ, এবং আমরা এমনকি কিভাবে স্পর্শ না @media অ্যাক্সেসযোগ্যতার সাথে সম্পর্কিত, এর ক্ষমতার জন্য ধন্যবাদ ব্যবহারকারীর পছন্দের উপর ভিত্তি করে শৈলী প্রয়োগ করুন (যেমন, prefers-reduced-motion) সুতরাং, শর্তসাপেক্ষ লেআউটগুলি তৈরি করার পাশাপাশি, মিডিয়া কোয়েরিগুলি অন্তর্ভুক্ত ডিজাইন বোঝার জন্য একটি চমৎকার পরবর্তী পদক্ষেপ।
সম্মানিত উল্লেখ
সিএসএসকে অবশ্যই জানা থাকা পাঁচটি বৈশিষ্ট্য এবং নির্বাচকদের তালিকায় ডিস্টিল করা কঠিন, বিশেষ করে এখন যে সিএসএস আজ থেকে আরও শক্তিশালী ছিল, বলুন, এমনকি পাঁচ বছর আগেও। আমি সত্যিই অন্তর্ভুক্ত করতে চেয়েছিলাম এমন অনেকগুলি আইটেম রয়েছে, যেমন (কোনও নির্দিষ্ট ক্রমে):
calc()has()colorfontoverflowposition(বিশেষ করে এটি)z-index
কিন্তু আমি আমার পছন্দে অটল আছি। বৈশিষ্ট্যের তালিকা মুখস্থ করার চেয়ে CSS শেখা আরও গুরুত্বপূর্ণ। এটি একটি যাত্রা এবং আমি মনে করি যে পাঁচটি আমি বেছে নিয়েছি তারা একটি সুন্দর ছোট শেখার পথ তৈরি করে যা ভাল শৈলীর নিয়মগুলি লেখার পর্যায় এবং CSS এর গভীরে যাওয়ার জন্য পরবর্তী পদক্ষেপগুলি সেট করে।
ঠিক আছে, আমাকে আপনার বলুন!
আমার তালিকার সাথে একমত? তোমার উচিত! আমি বাজি ধরব আপনার কিছু স্মার্ট মতামত আছে এবং আমি দেখতে চাই যে আপনি কীভাবে একটি শীর্ষ 5 তালিকাকে রাউন্ড আউট করবেন।
