কী যদি মেশিন: সিএসএসের ভবিষ্যত “আইফাই” ভবিষ্যত নিয়ে আসা বর্তমানের মধ্যে

জিওফের পোস্ট সিএসএস ওয়ার্কিং গ্রুপের কাজ করার সিদ্ধান্ত সম্পর্কে ইনলাইন শর্তাদি মন্তব্য বিভাগে কিছু নাটক অনুপ্রাণিত করেছেন। কিছু বিকাশকারী উত্তেজিত, তবে এটি অন্যকে ক্ষোভ করে, যারা ভয় করে যে এটি সিএসএসের ভবিষ্যত তৈরি করবে, ভাল, যদি-ফাই এটি কি একটি পিচ্ছিল ope ালু যে দুর্বৃত্ত বিকাশকারীদের সাথে সিএসএসকে অপব্যবহার করে তাদের সাথে একটি স্লিপারি op ালু ওভাররান? নাহ এমনকি যদি কিছু জার্ক তা করে তবে কোনও মূলধারার ব্লগ কখনও হবে না সেই হাইপোথিটিকাল নিউটকেসের র‌্যাম্বলিংগুলি প্রকাশ করুন যিনি এর জন্য সিএসএসে পাগল যুক্তি রাখার আশেপাশে যান। অতএব, আমরা জানি সিএসএসের ভবিষ্যত নিরাপদ।

আপনি পুরো বিশ্বের সমাপ্তি বলছেন – মধু, এটি ইতিমধ্যে করেছে

আজকের নিবন্ধের জন্য আমার থিসিসটি আরও আশ্বাস দেয় যে ইনলাইন শর্তাদি সম্ভবত সভ্যতার শেষের হার্বিংগার নয়: আমি মনে করি আমরা এখনই একই কার্যকারিতা অর্জন করতে পারি স্টাইল প্রশ্নযা লাভ করছে বেশ ভাল ব্রাউজার সমর্থন।

আমি যদি ঠিক থাকি তবে লিয়ার প্রস্তাবটি সিনট্যাকটিক চিনির মতো যা কখনও কখনও সুবিধাজনক হবে এবং ক্লিনার মার্কআপের অনুমতি দেয়। এটি মজাদার যে সিএসএসকে নষ্ট করে দেওয়া ইনলাইন শর্তাবলী সম্পর্কে কোনও প্যানিক-মঙ্গারিং এ যুক্ত করা বিপর্যয়ের সমতুল্য হতে পারে টার্নারি অপারেটর ইতিমধ্যে সমর্থন করে এমন ভাষার জন্য যদি বিবৃতি।

প্রকৃতপক্ষে, লিয়া তার প্রস্তাবিত বাক্য গঠন সম্পর্কে বলেছেন, “জেএস ​​-এর তেরীয়দের মতোই এটি আরও বেশি ক্ষেত্রে আরও বেশি হতে পারে যেখানে মূল্যের একটি ছোট অংশই পরিবর্তিত হয়।” তিনি আরও উল্লেখ করেছেন যে সিএসএস সর্বদা শর্তযুক্ত ছিল। সিএসএসে এই শর্তটি কখনও ভার্বোটেন ছিল না, তবে সিএসএস সর্বদা এটিতে খুব ভাল নয়।

বিক্রি! আমি এখন একটি শর্তসাপেক্ষ ওম্পা লম্পা চাই!

আমিও এবং অন্যান্য অনেক লোক, যেমন লিয়ার সংশ্লেষিত তালিকা দ্বারা প্রমাণিত আশ্চর্যজনক জটিল হ্যাকস লোকেরা বর্তমান সিএসএসের সাথে ইনলাইন শর্তাদি অনুকরণের জন্য আবিষ্কার করেছে। এর মধ্যে কয়েকটি হ্যাকগুলি যথেষ্ট জটিল যে আমি সেগুলি বুঝতে পারলে আমি এখনও নিশ্চিত নই, তবে তাদের অবশ্যই দুর্দান্ত নাম রয়েছে। লিয়া শেষ হয়েছে: “আপনি যদি অন্য কোনও কৌশল সম্পর্কে সচেতন হন তবে আমাকে জানান যাতে আমি সেগুলি যুক্ত করতে পারি” “

হুম … অবশ্যই এই হ্যাকগুলি যে সমস্যাগুলি সমাধান করে সে সম্পর্কে আমি কিছু অনুপস্থিত। আমি লক্ষ করেছি যে লিয়ার ডক্টরেট রয়েছে যেখানে আমি একজন বোকা। তাই আমি ব্যাক আপ এবং পুনরায় পড়তে পেরেছি, তবে আমি ভাবতে থামাতে পারিনি: এই লোকেরা কি তাদের উইজেটগুলির চারপাশে অতিরিক্ত ডিভেট লাগানো এবং স্টাইলের প্রশ্নগুলি ব্যবহার করতে এড়াতে এই সমস্ত কাজ করছে?

লোকেরা ডোমে অতিরিক্ত অতিরিক্ত উপাদানগুলি এড়াতে চাইলে এটি ন্যায্য, তবে লিয়ার হ্যাকগুলির তালিকাটি দেখায় যে বিকল্পগুলি সুপার জটিল, সুতরাং র‌্যাপার ডিভস সহ স্টাইলের প্রশ্নগুলি আমাদের কতটা নিতে পারে তা দেখার জন্য এটি একটি শট মূল্যবান।

অনুপ্রেরণামূলক উদাহরণ

লিয়ার অনুপ্রেরণামূলক উদাহরণগুলি কলআউটে একটি “বৈকল্পিক” সম্পত্তি নির্ধারণের চারপাশে ঘোরে, উল্লেখ করে যে আমরা স্টাইলের প্রশ্নের সাথে তিনি যা চাই তা প্রায় অর্জন করতে পারি, তবে এই অনুমানমূলক সিনট্যাক্সটি দুঃখজনকভাবে অবৈধ::

.callout  
  @container (style(--variant: success)) 
    border-color: var(--color-success-30);
    background-color: var(--color-success-95);

    &::before 
      content: var(--icon-success);
      color: var(--color-success-05);
    
  

তিনি নিজেই কনটেইনার এবং এর বংশধরদের উপর ভিত্তি করে শৈলী সেট করতে চান --variant। এখন, এই নির্দিষ্ট উদাহরণে, আমি হ্যাকিং দিয়ে পালাতে পারি ::after সিউডো-এলিমেন্টের সাথে z-index মায়া দিতে যে এটি ধারক। তারপরে আমি এর সীমানা এবং পটভূমি স্টাইল করতে পারি। দুর্ভাগ্যক্রমে, এই সমাধানটি আমার অহংকারের মতোই ভঙ্গুর এবং ভিতরে এই অন্যান্য অনুপ্রেরণামূলক উদাহরণলিয়া সেট করতে চায় flex-flow বৈকল্পিকের উপর ভিত্তি করে পাত্রে। এই পরিস্থিতিতে, আমার সিউডো-উপাদান সমাধান যথেষ্ট ভাল নয়।

মনে রাখবেন, সিএসএস স্পেসে এলইএর প্রস্তাবের গ্রহণযোগ্যতা মহাবিশ্বের কাছ থেকে তার জন্মদিনের উপহার হিসাবে এসেছিল, সুতরাং আমি তেমুতে কিনেছি এমন সস্তা নকল পাত্রে একটি দিয়ে তার উপহারটি প্রতিস্থাপন করার চেষ্টা করা মোটেও ন্যায়সঙ্গত নয়। তিনি একটি খাঁটি পাত্রে প্রাপ্য।

আসুন আবার চেষ্টা করা যাক।

গ্যাংস্টা মোড়ক বের করা

একটি মন্তব্য লিয়ার প্রস্তাবের উল্লেখ গ্রাইন্ডিং টাইপ করুন তবে এটিকে “ক খুব (আমি পুনরাবৃত্তি, খুব) ইনলাইন শর্তাদি সমাধান করার উদ্দেশ্যে যে সমস্যাটি সমাধানের জন্য সংশ্লেষিত তবে কাজ করা ”পদ্ধতির। এটা বেশ ন্যায্য নয়। টাইপ গ্রাইন্ডিং আমার মাথা ঘুরে আসতে কিছুটা সময় নিয়েছিল, তবে আমি মনে করি এটি অন্যান্য হ্যাকের তুলনায় কম ত্রুটিগুলির সাথে আরও সহজলভ্য। তবুও, আপনি যখন নমুনাগুলি দেখেন, উত্পাদনের এই ধরণের কোড বিরক্তিকর হয়ে উঠবে। অতএব, আসুন বুলেটটি কামড় দিন এবং এলইএর একটি বিকল্প সংস্করণ তৈরি করার চেষ্টা করুন ফ্লেক্সবক্স বৈকল্পিক নমুনা। আমার সংস্করণটি টাইপ গ্রাইন্ডিং বা কোনও হ্যাক ব্যবহার করে না, তবে “প্লেইন পুরাতন” (এত পুরানো নয়) স্টাইলের প্রশ্নগুলি মোড়ক ডিভসের সাথে একত্রে, এমন সমস্যাটির চারপাশে কাজ করার জন্য যে আমরা ধারকটি নিজেই স্টাইল করতে স্টাইল ক্যোয়ারী ব্যবহার করতে পারি না।

মোড়ক যুদ্ধ টাইপ গ্রাইন্ডিং

এলইএর নমুনা এবং আমার সংস্করণ থেকে কোডটির তুলনা করা আমাদের জটিলতার পার্থক্য বুঝতে সহায়তা করতে পারে।

এখানে সিএসএসের দুটি সংস্করণ রয়েছে:

এবং এখানে মার্কআপের দুটি সংস্করণ রয়েছে:

সুতরাং, সহজ সিএসএস এবং কিছুটা আরও মার্কআপ। হতে পারে আমরা কিছু আছে।

স্টাইলের প্রশ্নগুলি সম্পর্কে আমি যা পছন্দ করি তা হ’ল লিয়ার প্রস্তাবটি ব্যবহার করে style() ফাংশন, সুতরাং যদি এবং যখন তার প্রস্তাবটি এটি ব্রাউজারগুলিতে পরিণত করে তবে শর্তসাপেক্ষে ইনলাইন ইনলাইন এবং মোড়কগুলি অপসারণে শৈলীর প্রশ্নগুলি স্থানান্তরিত করে তা করণীয় বলে মনে হয়। আমি যদি উল্লেখ না করি যে এই ধরণের কোডটি স্থানান্তর করা এআইয়ের জন্য একটি কার্যকর ব্যবহারের ক্ষেত্রে হতে পারে তবে এটি 2025 নিবন্ধ হবে না। এবং আমরা যখন ইনলাইন শর্তাদি পাই, তখন সম্ভবত এআই স্তন্যপান করবে না।

তবে আমরা নিজের থেকে এগিয়ে যাচ্ছি। আপনি কি কখনও কিছু হুইজ-ব্যাং জাভাস্ক্রিপ্ট কাঠামো গ্রহণ করার চেষ্টা করেছেন যা “করণীয় তালিকার” নমুনায় মার্জিত দেখায়? যদি তা হয় তবে আপনি জানতে পারবেন যে যে সমাধানগুলি সরল উদাহরণগুলিতে বাধ্যতামূলক প্রদর্শিত হয় সেগুলি আপনার ইচ্ছাকে বাস্তবসম্মত উদাহরণে বাঁচতে চ্যালেঞ্জ করতে পারে। সুতরাং, আসুন দেখুন কীভাবে উপরের পদ্ধতিতে স্টাইলের প্রশ্নগুলি ব্যবহার করা আরও বাস্তবসম্মত উদাহরণে কাজ করে।

বৈধতা খুঁজছেন

এটির সাথে আমার উপরের নমুনাটি একত্রিত করুন এইচটিএমএল 5 বৈধতার এমডিএন উদাহরণ এবং শেঠ জেফারি এর শীতল ডেমো খাঁটি সিএসএস আইকনগুলিকে রূপ দেওয়ার জন্য, তারপরে নীচে ডেমো পেতে এটি সমস্ত “কী যদি” ​​মেশিনে খাওয়ান।

আপনি যদি ফর্মটি বৈধ করেন তবে আপনি কলআউটে যে সমস্ত পরিবর্তনগুলি দেখেন তা একটি কাস্টম সম্পত্তির উপর ভিত্তি করে। এই সম্পত্তিটি কখনই কলআউটের জন্য সিএসএস সম্পত্তি মানগুলিতে সরাসরি ব্যবহৃত হয় না তবে স্টাইলের প্রশ্নগুলি নিয়ন্ত্রণ করে যা কলআউটের সীমানা রঙ, আইকন, পটভূমির রঙ এবং সামগ্রী সেট করে। আমরা সেট --variant সম্পত্তি এ .callout-wrapper স্তর। আমি সিএসএস ব্যবহার করে এটি সেট করছি, এর মতো:

@property --variant  success";
  initial-value: error;
  inherits: true;


body:has(:invalid) .callout-wrapper 
  --variant: error;


body:not(:has(:invalid)) .callout-wrapper 
  --variant: success;

তবে, ভেরিয়েবলটি জাভাস্ক্রিপ্ট বা এইচটিএমএল -তে একটি ইনলাইন শৈলী দ্বারা লিয়ার নমুনাগুলির মতো সেট করা যেতে পারে। ফর্ম বৈধতা হ’ল ডেমোকে আরও ইন্টারেক্টিভ করার জন্য আমার উপায় যা দেখানোর জন্য যে কলআউটটি গতিশীলভাবে পরিবর্তিত হতে পারে তা দেখানোর জন্য --variant।

মোড়ানো আপ

আমার পক্ষে আইনজীবী একটি নিবন্ধ লিখতে অফ ব্র্যান্ড বিরুদ্ধে হ্যাকগুলি যা আমাদের ইচ্ছায় সিএসএসকে বাঁকায় এবং আমি যা চাই তা করার জন্য ভাষাটিকে “ট্রিকিং” করার জন্য আমি সকলেই। তবে স্টাইল ক্যোয়ারীগুলির সাথে মোড়কে ব্যবহার করা সহজতম জিনিস হতে পারে যা আমরা ইনলাইন শর্তাবলীর জন্য সমর্থন না পাওয়া পর্যন্ত কাজ করে। আমরা যদি ভবিষ্যতে বেঁচে আছি এমনভাবে আরও অনুভব করতে চাই তবে আমরা ইনলাইন শর্তাবলীর জন্য পলিফিলের ভিত্তি হিসাবে উপরের পদ্ধতির ব্যবহার করতে পারি, বা কিছু প্রিপ্রোসেসর যাদু একটি এর মতো কিছু ব্যবহার করে ব্যবহার করতে পারি পার্সেল প্লাগইন বা ক পোস্টসিএসএস প্লাগইন – তবে আমার ট্রিগার আঙুলটি সর্বদা চুলকায় Delete এই ধরনের আপস উপর কী। লিয়া স্বীকার করেছেন, “আপনি যদি শৈলীর প্রশ্নের সাথে কিছু করতে পারেন, যে কোনও উপায়ে, স্টাইলের প্রশ্নগুলি ব্যবহার করুন – এগুলি অবশ্যই আরও ভাল সমাধান” “

আমি এই নিবন্ধের পরীক্ষাগুলি নিয়ে নিজেকে নিশ্চিত করেছি যে স্টাইলের প্রশ্নগুলি লিয়ার অনুপ্রেরণামূলক উদাহরণগুলিতে এমনকি একটি ক্রোমুলেন্ট বিকল্প হিসাবে রয়ে গেছে – তবে আমি এখনও ইনলাইন শর্তসাপেক্ষে প্রত্যাশায় রয়েছি। এরই মধ্যে, কমপক্ষে স্টাইলের প্রশ্নগুলি অন্যান্য পরিচিত কাজের সাথে তুলনা করা সহজ। হাস্যকরভাবে, আমি ইনলাইন কন্ডিশনার বৈশিষ্ট্যের প্রয়োজনীয়তা নিয়ে প্রশ্নবিদ্ধ মন্তব্যগুলির সাথে একমত, কারণ এটি সিএসএসকে নষ্ট করবে না তবে আমি বিশ্বাস করি যে আমরা ইতিমধ্যে বর্তমান আধুনিক সিএসএস এবং হ্যাক ছাড়াই এলইএর উদাহরণগুলি অর্জন করতে পারি। সুতরাং, আমরা নাও প্রয়োজন ইনলাইন শর্তসাপেক্ষে, তবে তারা আমাদের আরও পঠনযোগ্য, সংক্ষিপ্ত কোড লেখার অনুমতি দিতে পারে। আপনি যদি এমন উদাহরণগুলির কথা ভাবতে পারেন তবে আমরা যদি ইনলাইন শর্তাবলীর পরিবর্তে স্টাইল ক্যোয়ারী ব্যবহার করে জটিলতার একটি ইটের প্রাচীরটি আঘাত করব তবে আমাকে মন্তব্য বিভাগে জানতে দিন।