به نظر میرسد که تنظیم
height: auto;
در CSS باید کار آسانی باشد، اما CSS قادر به animate کردن height: auto;
نیست. زیرا، برای اجرای هر animation یا transition به یک مقدار ارتفاع خاص نیاز دارد. این موضوع یک چالش برای توسعهدهندگان وب بوده است، و تنها راه برای animate کردن height: auto;
استفاده از جاوااسکریپت برای محاسبه ارتفاع المنت و سپس animate کردن آن بود. بدیهی است که این روش ایدهآل نمیباشد، به همین دلیل CSS تابع جدید ()calc-size را اضافه کرده است تا انجام این نوع انیمیشن را سادهتر کند.
تابع ()calc-size دقیقاً مانند تابع ()calc عمل میکند، اما دارای قابلیت اضافی برای محاسبه براساس اندازههایی است که به طور خودکار توسط مرورگر محاسبه میشوند. این مقادیر عبارتند از:
auto
min-content
max-content
fit-content
stretch
contain
اساساً، کاری که این تابع انجام میدهد این است که مقادیری مانند
auto
را به مقادیر پیکسلی خاص تبدیل میکند، سپس میتواند در محاسبات با مقادیر دیگر از آنها استفاده نماید. این موضوع به خودی خود مفید است، اما جایی که بیشترین کاربرد را دارد المنتهای متحرکی هستند که دارای اندازه auto
میباشند.
.element { height: 0; overflow: hidden; transition: height 0.3s; } .element.open { height: calc-size(auto); }
با قرار دادن مقدار
auto
در تابع ()calc-size، اکنون میتوانیم بدون هیچ کد جاوااسکریپتی ارتفاع المنت را از ۰
به auto
animate کنیم.
تنها موردی که باید از آن اجتناب کنیم این است که نمیتوانیم بین دو مقدار محاسبهشده خودکار، مانند
auto
و min-content
، عمل animate کردن را انجام دهیم.
یکی دیگر از نکات جالب در مورد تابع ()calc-size این است که میتوانیم آن را روی مقدار non-automatic موجود در animation استفاده کنیم و همچنان animate درستی داشته باشیم. به طور کلی تا زمانی که
calc-size
را روی یکی از مقادیر موجود در animation داشته باشیم، کار میکند.
.element { /* This still works */ height: calc-size(0px); overflow: hidden; transition: height 0.3s; } .element.open { height: auto; }
تا حد زیادی رایجترین استفاده از این تابع همانطور که در مورد آن صحبت کردیم، کار با animationها و یا transitionها خواهد بود. اما از آنجایی که تابع ()calc-size دقیقاً مانند تابع calc عمل میکند، در واقع میتوانیم از آن برای انجام محاسبات خاصی استفاده کنیم که قبلا غیرممکن بودند.
.element { width: calc-size(min-content, size + 50px); }
کد CSS بالا مقدار
width
المنت را بر روی حداقل اندازه محتوا به اضافه ۵۰px
تنظیم میکند. سینتکس کدی که داریم ممکن است کمی گیجکننده به نظر برسد. اما برای درک بهتر، کد را باهم بررسی میکنیم.
تابع ()calc-size دو آرگومان میگیرد. آرگومان اول اندازهای است که میخواهیم محاسبه کنیم و آرگومان دوم محاسبهای است که میخواهیم انجام دهیم. در این مثال، ما اندازه
min-content
المنت را محاسبه میکنیم و سپس ۵۰px
به آن مقدار اضافه مینماییم. کلمه کلیدی size
همیشه برای نشان دادن اندازه فعلی اولین ویژگی ارسال شده به calc-size استفاده میشود. این به این معنی است که در مثال ما، size
آن برابر با اندازه min-content
المنت است.
همچنین برای انجام محاسبات پیچیدهتر، میتوانیم از چندین تابع ()calc-size به صورت تودرتو استفاده کنیم.
.element { width: calc-size(calc-size(min-content, size + 50px), size * 2); }
با این کار، اندازه
min-content
المنت محاسبه میشود، ۵۰px
به آن مقدار اضافه شده و سپس نتیجه در ۲
ضرب میشود.
در زمان نگارش این مقاله، تابع ()calc-size تنها زمانی در Chrome Canary پشتیبانی میشود که flag
#enable-experimental-web-platform-features
فعال باشد.
خوشبختانه، این ویژگی CSS چیزی نیست که در صورت عدم پشتیبانی سایت ما را خراب کند. این فقط به این معنی است که animation کار نمیکند، بنابراین میتوانیم از آن در پروژههای خود استفاده کنیم.
.element { height: 0; overflow: hidden; transition: height 0.3s; } .element.open { height: auto; height: calc-size(auto); }
با CSS بالا، animation در مرورگرهایی که از تابع ()calc-size پشتیبانی میکنند کار میکند، در حالی که در مرورگرهای قدیمیتر فقط المنت را بدون هیچ گونه حالت انیمیشنی نشان میدهد.
تابع ()calc-size یک افزودنی جدید به CSS است که animate کردن اندازههای مبتنی بر
auto
را بسیار آسان میکند. همچنین امکانات زیادی را برای انجام محاسباتی که قبلاً در CSS غیرممکن بود، فراهم مینماید.
۵۰ درصد تخفیف ویژه زمستان فرانت کست تا پایان هقته
کد تخفیف: wnt
دیدگاهها: