ইন্টারপ 2026 | css-ট্রিকস

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

আপনি নিজেই ব্লগ পোস্ট পড়তে পারেন:

এবং, হ্যাঁ, আছে খুব বিশেষভাবে CSS সম্পর্কে উত্তেজিত হতে:

নোঙ্গর অবস্থান

আমাদের গাইড থেকে:

সিএসএস অ্যাঙ্কর পজিশনিং আমাদেরকে একটি সহজ ইন্টারফেস দেয় যা অন্যদের পাশের উপাদানগুলিকে সংযুক্ত করার জন্য সরাসরি সিএসএস-এ কোন দিকে সংযোগ করতে হবে তা বলে দেয়। এটি আমাদের একটি ফলব্যাক শর্ত সেট করতে দেয় যাতে আমরা এইমাত্র বর্ণিত ওভারফ্লো সমস্যাগুলি এড়াতে পারি।

উন্নত attr()

আসলে আমাদের আছে attr() প্রায় 15 বছর ধরে কাজ করুন। কিন্তু এখন আমরা সেখানে ভেরিয়েবল পাস করতে সক্ষম হব… টাইপ রূপান্তর সঙ্গে!

ধারক শৈলী প্রশ্ন

আমরা ইতিমধ্যে “টাইপ” দ্বারা কন্টেইনারগুলি অনুসন্ধান করতে পারি, তবে শুধুমাত্র আকারের দ্বারা। আমরা যখন অন্যান্য শৈলীর উপর ভিত্তি করে শৈলী প্রয়োগ করতে পারি তখন এটি দুর্দান্ত হবে। বলুন:

@container style((font-style: italic) and (--color-mode: light)) {
  em, i, q {
    background: lightpink;
  }
}

contrast-color() উদযাপন

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

button {
  --background-color: darkblue;
  background-color: var(--background-color);
  color: contrast-color(var(--background-color));
}

কাস্টম হাইলাইট

সবকিছু হাইলাইট! আমাদের আছে ::selection চিরকালের জন্য, কিন্তু এখন আমাদের কাছে একগুচ্ছ অন্য থাকবে:

ডায়ালগ এবং পপোভার

অবশেষে, উপরের স্তরে উপাদানগুলি সেট করার জন্য একটি জাভাস্ক্রিপ্ট-হীন (এবং ঘোষণামূলক) উপায়! আমরা সত্যিই গত কয়েক বছর ধরে গভীরভাবে এই অধ্যয়ন করেছি.

মিডিয়া সিউডো ক্লাস

আপনি কত ঘন ঘন এটা শৈলী করতে চান? বা উপাদান কি তার রাষ্ট্রের উপর ভিত্তি করে? হয়তো জাভাস্ক্রিপ্ট দিয়ে, ডান? এটি কাজ করার জন্য আমাদের CSS-এ বেশ কয়েকটি শর্ত থাকবে:

• :playing
• :paused
• :seeking
• :buffering
• :stalled
• :muted
• :volume-locked

আমি একটি WebKit ঘোষণার এই উদাহরণ পছন্দ করি:

video:buffering::after {
  content: "Loading...";
}

স্ক্রোল-চালিত অ্যানিমেশন

ওয়েল, আমরা সবাই এটা চাই. আমরা অ্যানিমেশন সম্পর্কে বিশেষভাবে কথা বলছি যা স্ক্রোলিং-এ প্রতিক্রিয়া দেখায়। অন্য কথায়, স্ক্রলিং অগ্রগতি এবং অ্যানিমেশন অগ্রগতির মধ্যে একটি সরাসরি সম্পর্ক রয়েছে।

#progress {
  animation: grow-progress linear forwards;
  animation-timeline: scroll();
}

স্ক্রল স্ন্যাপিং

এখানে নতুন কিছু নেই, তবে বছরের পর বছর ধরে স্পেসিফিকেশনগুলি কীভাবে পরিবর্তিত হয়েছে তার সাথে সামঞ্জস্য রেখে এটি আনা হচ্ছে!

shape() উদযাপন

এটি এমন একটি যা তেমানি সম্প্রতি নিয়ে এসেছে এবং তার SVG পাথ টু শেপ কনভার্টার একটি বুকমার্ক হওয়া উচিত। shape() উপাদান ক্লিপ করার সময় জটিল আকার তৈরি করতে পারে clip-path সম্পত্তি। আমরা বছরের পর বছর ধরে মৌলিক আকার তৈরি করার ক্ষমতা পেয়েছি – চিন্তা করুন circle, ellipse()এবং polygon() – কিন্তু আরো জটিল আকার তৈরি করার কোন “সহজ” উপায় নেই। এবং এখন আমাদের কাছে কিছু কম SVG-y আছে যা CSS-y সত্তা, গণনা এবং অন্যান্য জিনিস গ্রহণ করে।

.clipped {
  width: 250px;
  height: 100px;
  box-sizing: border-box;
  background-color: blue;
  clip-path: shape(
    from top left,
    hline to 100%,
    vline to 100%,
    curve to 0% 100% with 50% 0%,
  );
}

দৃষ্টিভঙ্গি পরিবর্তন করুন

দুই ধরনের ভিজ্যুয়াল ট্রানজিশন আছে: একই-ডকুমেন্ট (একই পৃষ্ঠায় ট্রানজিশন) এবং ক্রস-ডকুমেন্ট (অথবা যাকে আমরা প্রায়ই মাল্টি-পেজ ট্রানজিশন বলি)। একই-পৃষ্ঠার রূপান্তরগুলি 2025 সালে বেসলাইনে পরিণত হয়েছিল এবং ব্রাউজারগুলি এখন ক্রস-ডকুমেন্ট ট্রানজিশনের ক্রস-সামঞ্জস্যপূর্ণ বাস্তবায়নের দিকে কাজ করছে।

css zoom সম্পত্তি

ওহ, আমি এটা আশা করিনি! মানে, আমাদের আছে zoom বছরের পর বছর ধরে – আমাদের অ্যালম্যানাক পৃষ্ঠা 2011 সালে প্রকাশিত হয়েছিল – কিন্তু একটি অ-মানক সম্পত্তি হিসাবে। আমি হয়ত উপেক্ষা করেছি যে এই বেসলাইন 2024 নতুনভাবে উপলব্ধ ছিল এবং ইন্টারপ 2025 এর অংশ হিসাবে কাজ চলছে৷ এটি এই বছরে অগ্রসর হচ্ছে৷

zoom যে মত কিছু scale() ফাংশন, কিন্তু এটি আসলে লেআউটকে প্রভাবিত করে scale() এটা নিছক চাক্ষুষ এবং তার পথে যে কোন কিছুর মধ্য দিয়ে চষে বেড়াবে।

যে একটি মোড়ানো! বিষয়গুলি কীভাবে অগ্রসর হচ্ছে তার ট্র্যাক রাখতে Interop 2026 ড্যাশবোর্ড বুকমার্ক করুন৷