ক্রোম, সাফারি বা ফায়ারফক্স কেউই গত কয়েক সপ্তাহে নতুন বৈশিষ্ট্য প্রেরণ করেনি, তবে ভয় পাবেন না কারণ কী! গুরুত্বপূর্ণ এই ইস্যুটি ওয়েব ডেভেলপমেন্ট ইন্ডাস্ট্রির সেরা কিছু শিক্ষকের নেতৃত্বে এবং সত্যি বলতে কিছু হত্যাকারী উপাদান.
ভিউ ট্রানজিশন ব্যবহার করে বিভিন্ন পৃষ্ঠায় ভিডিও অবস্থান বজায় রাখা
CSS ভিউ ট্রানজিশন ব্যবহার করে বিভিন্ন পৃষ্ঠায় একটি ভিডিওর অবস্থান কীভাবে বজায় রাখতে হয় তা ক্রিস কোয়ের দেখান। তিনি উল্লেখ করেছেন যে এটি একক পৃষ্ঠা দৃশ্য পরিবর্তনের সাথে করা যথেষ্ট সহজ, তবে বহু-পৃষ্ঠা দৃশ্য পরিবর্তনের সাথে আপনাকে জাভাস্ক্রিপ্টের সুবিধা নিতে হবে। pageswap ভিডিও স্ট্যাটাস সম্পর্কে তথ্য সংরক্ষণ করার ইভেন্ট sessionStorage একটি JSON স্ট্রিং হিসাবে (এছাড়াও অডিও এবং iframes এর সাথে কাজ করে), এবং তারপর সেই তথ্যটি রাষ্ট্র পুনরুদ্ধার করতে ব্যবহার করুন pagereveal. হ্যাঁ একটি আছে tiiiiiiny অডিওটি একটু স্টাটারি কারণ আমরা প্রযুক্তিগতভাবে এটিকে জাল করছি, কিন্তু এটি এখনও বেশ ঝরঝরে।
এছাড়াও, CodePen, যা আমি নিশ্চিত যে আপনি ইতিমধ্যেই জানেন ক্রিস দ্বারা প্রতিষ্ঠিত হয়েছে, CodePen 2.0 এর একটি ব্যক্তিগত বিটা ঘোষণা করেছে যেটির অংশ হওয়ার জন্য আপনি অনুরোধ করতে পারেন। CodePen 2.0 এর একটি সুবিধা হল আপনি একাধিক ফাইল সহ বাস্তব প্রকল্প তৈরি করতে পারেন, যার মানে আপনি CodePen এ ভিউ ট্রানজিশন তৈরি করতে পারেন। খুব ভালো!
কিভাবে ‘নাম’ মিডিয়া প্রশ্ন
কেভিন পাওয়েল আমাদের দেখান কিভাবে CSS ক্যাসকেড স্তরগুলির ‘নাম’ মিডিয়া প্রশ্নগুলির সুবিধা নিতে হয়৷ এই কৌশল ততটা কার্যকর নয় @custom-media (অথবা এমনকি ধারক শৈলী প্রশ্ন, একজন মন্তব্যকারীর পরামর্শ অনুযায়ী), কিন্তু যদিও সেগুলি সমস্ত ওয়েব ব্রাউজারে সমর্থিত নয়, কেভিনের কৌশলটি বেশ সৃজনশীল।
অ্যাডাম Argyle এই গত সপ্তাহে আমাদের মনে করিয়ে @custom-media এটি ফায়ারফক্স নাইটলিতে পরীক্ষা করা হচ্ছে (কন্টেইনার শৈলীর প্রশ্নে এখনও কোনও শব্দ নেই), তবে আপনি যদি CSS ক্যাসকেড স্তরগুলিতে গতি পান তবে আপনি এর মধ্যে কেভিনের কৌশলটি ব্যবহার করতে পারেন।
Vale এর CSS রিসেট
আমি একটি ভাল CSS রিসেট পছন্দ করি। আমি তাদের কতগুলিই পড়ি না কেন, আমি সর্বদা আশ্চর্যজনক কিছু খুঁজে পাই এবং এটি আমার রিসেটে যোগ করি। আমি ভ্যালের সিএসএস রিসেট থেকে চুরি করেছি svg:not([fill]) { fill: currentColor; }কিন্তু এর থেকে কেড়ে নেওয়ার মতো আরও অনেক কিছু আছে!
ব্রাউজার কিভাবে কাজ করে
আপনি যদি কখনও ভেবে থাকেন যে ওয়েব ব্রাউজারগুলি আসলে কীভাবে কাজ করে – কীভাবে তারা IP ঠিকানাগুলি পায়, HTTP অনুরোধ করে, HTML পার্স করে, DOM ট্রি তৈরি করে, লেআউটগুলি রেন্ডার করে এবং পেইন্ট করে, সাম্প্রতিক বইটি হাউ ব্রাউজার কাজ করে ডিমিট্রো ক্রাসুন একটি অবিশ্বাস্যভাবে আকর্ষণীয়, ইন্টারেক্টিভ পাঠ্য৷ এটি আপনাকে ওয়েব ডেভেলপমেন্ট ভাষার সীমাবদ্ধতা এবং কেন কিছু এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট বৈশিষ্ট্যগুলি সেরকম হয় সে সম্পর্কে আপনাকে অবাক করে তোলে।
কিভাবে CSS লেআউট কাজ করে?
উপরন্তু, PolyPane বক্স মডেল, লাইন এবং বেসলাইন, পজিশনিং স্কিম, স্ট্যাকিং রেফারেন্স, গ্রিড লেআউট এবং ফ্লেক্সবক্স সহ CSS লেআউটের মৌলিক বিষয়গুলি ব্যাখ্যা করে। আপনি যদি CSS-এ নতুন হন, আমি মনে করি এই ব্যাখ্যাগুলি আপনাকে সত্যিই সাহায্য করবে। আপনি যদি একজন পুরানো টাইমার হন (আমার মতো), আমি এখনও মনে করি যে এই মৌলিক ধারণাগুলি নতুন CSS বৈশিষ্ট্যগুলিতে কীভাবে প্রযোজ্য তা শেখা গুরুত্বপূর্ণ, বিশেষ করে যেহেতু CSS এই দিনগুলি দ্রুত বিকশিত হচ্ছে।
CSS রাজমিস্ত্রি (সম্ভবত) কোণার কাছাকাছি
লেআউট সম্পর্কে কথা বলতে গিয়ে, জেন সিমন্স স্পষ্ট করেছেন যে আমরা কখন ব্যবহার করতে পারব display: grid-lanesঅন্যথায় সিএসএস রাজমিস্ত্রি হিসাবে পরিচিত। যদিও এটি এখনও কোনো ওয়েব ব্রাউজারে সমর্থিত নয়, ফায়ারফক্স, সাফারি এবং ক্রোম/এজ রয়েছে সব এটি পরীক্ষা করা হচ্ছে, তাই এটি খুব দ্রুত পরিবর্তন হতে পারে। যাই হোক, জেন কিছু পলিফিল প্রদান করে!
আপনি যদি বক্ররেখা থেকে এগিয়ে যেতে চান, আপনি আপনার সাথে সানকানমি ফাফোভোরাকে যেতে দিতে পারেন display: grid-lanes.
আপেক্ষিক রঙ সিনট্যাক্স ব্যবহার করে থিমিং অ্যানিমেশন
আপনি যদি ডিজাইন সিস্টেম এবং সংগঠন সম্পর্কে উত্সাহী হন, এবং আপনি চিত্র এবং অ্যানিমেশনকে চিত্তাকর্ষক কিন্তু অসংগঠিত শিল্প ফর্ম হিসাবে মনে করেন, তাহলে CSS আপেক্ষিক রঙের সিনট্যাক্স ব্যবহার করে থিমিং অ্যানিমেশনের বিষয়ে অ্যান্ডি ক্লার্কের নিবন্ধটি আপনাকে শিল্প এবং যুক্তিবিদ্যার মধ্যে ব্যবধান পূরণ করতে সত্যিই সাহায্য করবে। যদি CSS ভেরিয়েবল আপনাকে আগ্রহী করে, তাহলে এই নিবন্ধটি অবশ্যই আপনার জন্য।
মডেল বনাম পৃষ্ঠা (এবং এর মধ্যে সবকিছু)
মডেল? পাতা? হালকা বাক্স? সংলাপ? টুলটিপস? বিভিন্ন ধরণের ওভারলে বোঝা এবং প্রতিটি কখন ব্যবহার করতে হবে তা জানা এখনও বেশ বিভ্রান্তিকর, বিশেষ করে যেহেতু নতুন সিএসএস বৈশিষ্ট্য যেমন পপওভার এবং ইন্টারেস্ট ইনভোকার, যদিও অবিশ্বাস্যভাবে দরকারী, ল্যান্ডস্কেপটিকে আরও অস্পষ্ট করে তুলছে। সংক্ষেপে, রায়ান নিউফেল্ড পুরো মডেল বনাম পৃষ্ঠা জিনিসটি ব্যাখ্যা করে এবং এমনকি কোন ধরনের ওভারলে ব্যবহার করতে হবে তা নির্ধারণের জন্য একটি কাঠামো প্রদান করে।
ক্রোম ক্যানারিতে পাঠ্য স্কেলিং সমর্থন পরীক্ষা করা হচ্ছে
আপনি কি জানেন যখন আপনি এমন পাঠ্যের সাথে কাজ করছেন যা OS-স্তরে স্কেল বা হ্রাস করা হয়েছে? ভাল…আপনি যদি একজন ওয়েব ডেভেলপার হন, আপনি সম্ভবত তা নন। সর্বোপরি, এই বৈশিষ্ট্যটি ওয়েবে কাজ করে না! যাইহোক, Josh Tumuth আমাদের বলে যে Chrome Canary একটি মেটা ট্যাগ পরীক্ষা করছে যা ওয়েব ব্রাউজারকে এই OS সেটিংকে সম্মান করে। আপনি কৌতূহলী হন, এটা তবে জোশ আরও বিশদে যায় এবং এটি পড়ার মতো।
পরের বার দেখা হবে!
