উচ্চতা থেকে অ্যানিমেট: স্বয়ংক্রিয়; (এবং অন্যান্য অন্তর্নিহিত সাইজিং কীওয়ার্ড) CSS-এ

দৈর্ঘ্য থেকে অভ্যন্তরীণ সাইজিং কীওয়ার্ড এবং পিছনে মসৃণ রূপান্তর এবং অ্যানিমেশন সক্ষম করতে interpolate-size বৈশিষ্ট্য বা calc-size() ফাংশন ব্যবহার করুন।

Bramus

ভূমিকা

একটি প্রায়শই অনুরোধ করা CSS বৈশিষ্ট্য হল height: auto । সেই অনুরোধের একটি সামান্য পরিবর্তন হল height পরিবর্তে width বৈশিষ্ট্যে স্থানান্তর করা, অথবা min-content , max-content , এবং fit-content মতো কীওয়ার্ড দ্বারা উপস্থাপিত অন্যান্য অন্তর্নিহিত আকারগুলির মধ্যে স্থানান্তর করা।

উদাহরণস্বরূপ, নিম্নলিখিত ডেমোতে এটি চমৎকার হবে যদি আইকনগুলিকে ঘোরানোর সময় লেবেলগুলি তাদের স্বাভাবিক প্রস্থে মসৃণভাবে অ্যানিমেট করে।

ব্যবহৃত CSS নিম্নলিখিত:

nav a {
    width: 80px;
    overflow-x: clip;
    transition: width 0.35s ease; /* 👈 Transition the width */

    &:hover,
    &:focus-visible {
        width: max-content; /* 👈 Doesn't work with transitions */
    }
}

যদিও একটি transition ঘোষণা করা হয় width সম্পত্তির স্থানান্তর করার জন্য, এবং width: auto ঘোষণা করা হয় :hover এ, কোনো মসৃণ রূপান্তর ঘটে না। পরিবর্তে, পরিবর্তন আকস্মিক হয়.

interpolate-size সহ অন্তর্নিহিত সাইজিং কীওয়ার্ডগুলিতে এবং থেকে অ্যানিমেট করুন

CSS interpolate-size বৈশিষ্ট্য আপনাকে CSS অভ্যন্তরীণ সাইজিং কীওয়ার্ডগুলির অ্যানিমেশন এবং ট্রানজিশনের অনুমতি দেওয়া উচিত কিনা তা নিয়ন্ত্রণ করে।

এর ডিফল্ট মান numeric-only যা ইন্টারপোলেশন সক্ষম করে না। allow-keywords সম্পত্তি সেট করার সময়, আপনি দৈর্ঘ্য থেকে CSS অন্তর্নিহিত সাইজিং কীওয়ার্ডগুলিতে ইন্টারপোলেশন বেছে নেবেন যেখানে ব্রাউজার সেই কীওয়ার্ডগুলিকে অ্যানিমেট করতে পারে।

বৈশিষ্ট অনুযায়ী :

• numeric-only : একটি <intrinsic-size-keyword> ইন্টারপোলেট করা যাবে না।
• allow-keywords : দুটি মান ইন্টারপোলেট করা যেতে পারে যদি তাদের একটি হয় <intrinsic-size-keyword> এবং অন্যটি হয় <length-percentage> । […]

যেহেতু interpolate-size বৈশিষ্ট্যটি উত্তরাধিকারসূত্রে পাওয়া যায়, তাই আপনি সমগ্র নথির জন্য অন্তর্নিহিত সাইজিং কীওয়ার্ডে এবং থেকে রূপান্তর সক্ষম করতে :root এ ঘোষণা করতে পারেন। এটি সুপারিশকৃত পদ্ধতি।

/* Opt-in the whole page to interpolate sizes to/from keywords */
:root {
    interpolate-size: allow-keywords; /* 👈 */
}

নিম্নলিখিত ডেমোতে, এই নিয়মটি কোডে যোগ করা হয়েছে। ফলস্বরূপ, অ্যানিমেশন এবং width: auto কাজ করে (সমর্থন সহ ব্রাউজারগুলিতে):

নির্বাচককে সংকুচিত করে অপ্ট-ইন-এর নাগাল সীমিত করুন

আপনি যদি আপনার নথির শুধুমাত্র একটি সাবট্রিতে allow-keywords অপ্ট-ইন করতে চান, তাহলে :root থেকে শুধুমাত্র যে উপাদানটিকে আপনি লক্ষ্য করতে চান তাতে নির্বাচককে সামঞ্জস্য করুন। উদাহরণ স্বরূপ, যদি আপনার পৃষ্ঠার <header> এই ধরনের ট্রানজিশনের সাথে সামঞ্জস্যপূর্ণ না হয়, আপনি অপ্ট-ইনকে শুধুমাত্র <main> উপাদান এবং নিম্নরূপ তার বংশধরদের মধ্যে সীমাবদ্ধ করতে পারেন:

main { /* 👈 Scope the opt-in to only <main> and its descendants */
    interpolate-size: allow-keywords;
}

ডিফল্টরূপে কীওয়ার্ডের আকার পরিবর্তন করতে এবং থেকে অ্যানিমেশনকে অনুমতি দেবেন না কেন?

এই অপ্ট-ইন পদ্ধতিতে একটি সাধারণ প্রতিক্রিয়া হল যে ব্রাউজারগুলিকে কেবলমাত্র অন্তর্নিহিত সাইজিং কীওয়ার্ড থেকে ডিফল্টরূপে দৈর্ঘ্যে রূপান্তর এবং অ্যানিমেশনের অনুমতি দেওয়া উচিত।

বৈশিষ্ট্যটির বিকাশের সময় এই আচরণটি সক্ষম করার বিকল্পটি গবেষণা করা হয়েছিল। ওয়ার্কিং গ্রুপ আবিষ্কার করেছে যে ডিফল্টরূপে এটি সক্ষম করা পশ্চাদপদ সামঞ্জস্যপূর্ণ নয় কারণ অনেক স্টাইল শীট অনুমান করে যে অন্তর্নিহিত সাইজিং কীওয়ার্ডগুলি (যেমন auto বা min-content ) অ্যানিমেটেড করা যায় না। আপনি প্রাসঙ্গিক CSS ওয়ার্কিং গ্রুপ ইস্যুতে এই মন্তব্যে বিস্তারিত জানতে পারেন।

তাই সম্পত্তি একটি অপ্ট-ইন হয়. এর উত্তরাধিকার বৈশিষ্ট্যের জন্য ধন্যবাদ, একটি সম্পূর্ণ নথিতে নির্বাচন করা নিছক একটি interpolate-size: allow-sizes ঘোষণা :root এ যেমন পূর্বে বিস্তারিত বলা হয়েছে।

calc-size() সহ অন্তর্নিহিত সাইজিং কীওয়ার্ডে এবং থেকে অ্যানিমেট করুন

অভ্যন্তরীণ সাইজিং কীওয়ার্ড থেকে ইন্টারপোলেশন সক্ষম করার আরেকটি উপায় হল calc-size() ফাংশন ব্যবহার করা। এটি গণিতকে একটি নিরাপদ, সু-সংজ্ঞায়িত উপায়ে অন্তর্নিহিত আকারে সঞ্চালিত করার অনুমতি দেয়।

ফাংশন দুটি আর্গুমেন্ট গ্রহণ করে, ক্রমে:

• একটি ক্যাল্ক-আকারের ভিত্তি , যা একটি <intrinsic-size-keyword> হতে পারে তবে একটি নেস্টেড calc-size() ও হতে পারে।
• একটি ক্যাল্ক-আকার গণনা , যা আপনাকে ক্যাল্ক-আকারের ভিত্তিতে গণনা করতে দেয়। ক্যাল্ক-সাইজের ভিত্তিতে উল্লেখ করতে, size কীওয়ার্ড ব্যবহার করুন।

এখানে কিছু উদাহরণ আছে:

width: calc-size(auto, size);        // = the auto width, unaltered
width: calc-size(min-content, size); // = the min-content width, unaltered

মূল ডেমোতে calc-size() যোগ করা, কোডটি এইরকম দেখায়:

nav a {
    width: 80px;
    overflow-x: clip;
    transition: width 0.35s ease;

    &:hover,
    &:focus-visible {
        width: calc-size(max-content, size); /* 👈 */
    }
}

দৃশ্যত, interpolate-size ব্যবহার করার সময় ফলাফলটি ঠিক একই রকম। সুতরাং এই নির্দিষ্ট ক্ষেত্রে আপনার interpolate-size ব্যবহার করা উচিত।

যেখানে calc-size() জ্বলজ্বল করে তা হল গণনা করার ক্ষমতা, যা এমন কিছু যা interpolate-size দিয়ে করা যায় না:

width: calc-size(auto, size - 10px); // = The auto width minus 10 pixels
width: calc-size(min-content, size + 10px); // = The min-content width plus 10 pixels
width: calc-size(max-content, size * .5);   // = Half the max-content width
width: calc-size(fit-content, size - 10%);  // = 10% less than the fit-content width

উদাহরণস্বরূপ, আপনি যদি একটি পৃষ্ঠার সমস্ত অনুচ্ছেদ 50px এর নিকটতম মাল্টিপল মাপ করতে চান তবে আপনি নিম্নলিখিতগুলি ব্যবহার করতে পারেন:

p {
    width: calc-size(fit-content, round(up, size, 50px));
    height: calc-size(auto, round(up, size, 50px));
}

calc-size() আপনাকে যা করতে দেয় তা হল দুটি calc-size() s এর মধ্যে ইন্টারপোলেট করা যখন তাদের উভয় ক্যাল্ক-আকারের বেস অভিন্ন হয়। এটিও এমন কিছু যা interpolate-size দিয়ে অর্জন করা যায় না।

#element {
    width: min-content; /* 👈 */
    transition: width 0.35s ease;

    &:hover {
        width: calc-size(min-content, size + 10px); /* 👈 */
    }
}

কেন calc() এ <intrinsic-size-keyword> অনুমতি নেই?

একটি প্রশ্ন যা সাধারণত calc-size() এর সাথে দেখা যায় তা হল কেন CSS ওয়ার্কিং গ্রুপ অন্তর্নিহিত সাইজিং কীওয়ার্ড সমর্থন করার জন্য calc() ফাংশন সামঞ্জস্য করেনি।

এর একটি কারণ হল আপনি গণনা করার সময় অভ্যন্তরীণ সাইজিং কীওয়ার্ডগুলিকে মিশ্রিত করতে এবং মেলাতে পারবেন না। উদাহরণস্বরূপ, আপনি calc(max-content - min-content) লিখতে প্রলুব্ধ হতে পারেন যা বৈধ বলে মনে হয়, কিন্তু বাস্তবে তা নয়। calc-size() সঠিকতা প্রয়োগ করে কারণ এটি, calc() এর বিপরীতে, শুধুমাত্র একটি একক <intrinsic-size-keyword> এর প্রথম যুক্তি হিসাবে গ্রহণ করে।

আরেকটি কারণ হল প্রসঙ্গ-সচেতনতা। কিছু লেআউট অ্যালগরিদমের নির্দিষ্ট অভ্যন্তরীণ সাইজিং কীওয়ার্ডের জন্য একটি বিশেষ আচরণ রয়েছে। calc-size() স্পষ্টভাবে সংজ্ঞায়িত করা হয়েছে একটি অন্তর্নিহিত আকারের প্রতিনিধিত্ব করার জন্য, একটি <length> নয়। এর জন্য ধন্যবাদ, সেই অ্যালগরিদমগুলি calc-size(<intrinsic-size-keyword>, …) <intrinsic-size-keyword> হিসাবে ব্যবহার করতে সক্ষম হয়, সেই কীওয়ার্ডের জন্য তার বিশেষ আচরণ বজায় রাখে।

কোন পদ্ধতি ব্যবহার করতে?

বেশিরভাগ ক্ষেত্রে, interpolate-size: allow-keywords :root এ ঘোষণা করুন। এটি অন্তর্নিহিত সাইজিং কীওয়ার্ডগুলিতে এবং থেকে অ্যানিমেশন সক্ষম করার সবচেয়ে সহজ উপায় কারণ এটি মূলত একটি-লাইনার।

/* Opt-in the whole page to animating to/from intrinsic sizing keywords */
:root {
    interpolate-size: allow-keywords; /* 👈 */
}

কোডের এই অংশটি একটি চমৎকার প্রগতিশীল বর্ধিতকরণ, কারণ যে ব্রাউজারগুলি এটি সমর্থন করে না তারা কোন রূপান্তর ব্যবহার না করে ফিরে আসবে।

যখন আপনার জিনিসগুলির উপর সূক্ষ্ম দানাদার নিয়ন্ত্রণের প্রয়োজন হয়-যেমন গণনা করা-অথবা আপনি এমন আচরণ ব্যবহার করতে চান যা শুধুমাত্র calc-size() করতে পারে, আপনি calc-size() ব্যবহার করতে পারেন।

#specific-element {
    width: 50px;

    &:hover {
        width: calc-size(fit-content, size + 1em); /* 👈 Only calc-size() can do this */
    }
}

যাইহোক, আপনার কোডে calc-size() ব্যবহার করার জন্য আপনাকে calc-size() সমর্থন করে না এমন ব্রাউজারগুলির জন্য ফলব্যাক অন্তর্ভুক্ত করতে হবে। উদাহরণস্বরূপ, অতিরিক্ত আকারের ঘোষণা যোগ করা, অথবা @supports ব্যবহার করে বৈশিষ্ট্য সনাক্তকরণে ফিরে আসা।

width: fit-content;
width: calc-size(fit-content, size + 1em);
       /* 👆 Browsers with no calc-size() support will ignore this second declaration,
             and therefore fall back to the one on the line before it. */

আরো ডেমো

এখানে আরও কিছু ডেমো রয়েছে যা interpolate-size: allow-keywords ।

বিজ্ঞপ্তি

নিম্নলিখিত ডেমোটি এই @starting-style ডেমোর একটি কাঁটা। বিভিন্ন উচ্চতার আইটেম যোগ করার অনুমতি দেওয়ার জন্য কোডটি সামঞ্জস্য করা হয়েছিল।

এটি অর্জনের জন্য, পুরো পৃষ্ঠাটি সাইজ কীওয়ার্ড ইন্টারপোলেশনে নির্বাচন করে এবং প্রতিটি .item উপাদানের height auto সেট করা হয়। অন্যথায়, কোডটি কাঁটাচামচের আগে থেকে ঠিক একই রকম।

:root {
    interpolate-size: allow-keywords; /* 👈 */
}

.item {
    height: auto; /* 👈 */

    @starting-style {
        height: 0px;
    }
}

<details> উপাদানটিকে অ্যানিমেট করুন

একটি সাধারণ ব্যবহারের ক্ষেত্রে যেখানে আপনি এই ধরনের ইন্টারপোলেশন ব্যবহার করতে চান তা হল একটি ডিসক্লোজার উইজেট বা একটি এক্সক্লুসিভ অ্যাকর্ডিয়ন খোলার সাথে সাথে অ্যানিমেট করা। HTML এ, আপনি এর জন্য <details> উপাদান ব্যবহার করেন।

interpolate-size: allow-keywords দিয়ে আপনি বেশ দূরে যেতে পারেন:

@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }
    
    details {
        transition: height 0.5s ease;
        height: 2.5rem;
        
        &[open] {
            height: auto;
            overflow: clip; /* Clip off contents while animating */
        }
    }
}

আপনি দেখতে পাচ্ছেন, যদিও, অ্যানিমেশনটি তখনই চলে যখন ডিসক্লোজার উইজেট খোলা হয়। এটি পূরণ করার জন্য, ক্রোম ::details-content ছদ্মবেশে কাজ করছে যা এই বছরের শেষে ক্রোমে পাঠানো হবে (এবং যা ভবিষ্যতের পোস্টে কভার করা হবে)৷ interpolate-size: allow-keywords এবং ::details-content একত্রিত করে, আপনি উভয় দিকেই একটি অ্যানিমেশন পেতে পারেন: