همونطور که اطلاع دارید در جلسه قبل در مورد ویژگی white-space و امکانات اون توضیحاتی رو قرار دادیم و شما رو با استفاده از مثال با اون آشنا کردیم. در این جلسه در ابتدا در مورد ویژگی هایی که میتونین اونا رو بصورت انیمیشنی در بیارید، توضیحاتی رو قرار میدیم و بعد از اون سراغ ویژگی table-layout میریم و با استفاده از اون نحوه رسم شدن و قالب بندی ردیف و ستونهای جداول رو مشخص میکنیم.
ویژگی‌های Animatable در CSS
همونطور که میدونین در همه پروژه‌ها از انیمیشنها استفاده میشه و با استفاده از اونا افکتهای جالب و زیبایی رو به وجود میاریم. بیشتر مواقع ما انیمیشنها رو بر روی ویژگی‌های opacity یا background-color یا top و ... اعمال میکنیم. شاید این ذهنیت رو داشته باشید که فقط میتونیم به همین چند ویژگی حالت انیمیشنی رو نسبت بدیم. اگر شما هم جزء اون دسته از افرادی هستید که این ذهنیت رو دارند، باید بهتون بگم که دارید اشتباه فکر میکنید. شما میتونین در اینجا لیست تمامی ویژگی‌های CSS که میتونیم اونا رو بصورت انیمیشنی در بیاریم رو ببینید. همونطور که در این صفحه مشاهده میکنید، ویژگی‌های بسیار زیادی هستند که میتونیم اونا رو بصورت انیمیشنی در بیاریم و به اونا روح و زندگی ببخشیم. مثلا میتونیم ویژگی letter-spacing رو بصورت انیمیشنی در بیاریم و افکت زیبایی برای متن درست کنیم. دموی زیر رو ببینید: همونطور که میبینید در هر تکرار انیمیشن، با استفاده از ویژگی letter-spacing فاصله بین حروف متن رو در مدت زمان 5 ثانیه از 20 پیکسل به صفر میرسونیم. با اینکار یک افکت زیبا به وجود میاد.
اگر میخواید حالت انیمیشنی شده همه ویژگی‌های ذکر شده رو ببینید، میتونین به این لینک مراجعه کنید. در این لینک در مقابل هر ویژگی یک لینک قرار داده شده که نمونه ای از حالت انیمیشنی شده اون رو قرار داده و میتونین اون رو مشاهده کنید.
مثلا اگر بخوایم یک مثال برای ویژگی perspective بصورت انیمیشنی شده رو ببینیم، بر روی لینک مقابل اون که در تصویر بالا مشخص کردیم کلیک میکنیم.
اگر میخواید مثالهای کاربردی‌تر و بیشتری رو در این زمینه ببینید، میتونین به این لینک مراجعه کنید.
میبینید که در این صفحه، ویژگی‌های مختلف بصورت انیمیشنی در اومدن و میتونین از اونا ایده بگیرید.
ویژگی table-layout
با استفاده از ویژگی table-layout میتونین الگوریتمی که مرورگر برای قالب بندی ردیف، ستون و سلولهای جداول استفاده میکنه رو مشخص کنید. این ویژگی میتونه برای همه جداول یا تگهای table در HTML مورد استفاده قرار بگیره. اگر برای المنتهای دیگر نیز یا قرار بدین نیز میتونین از ویژگی table-layout براشون استفاده کنید.
مقادیر موجود:
- auto (مقدار پیش فرض) : مرورگر بصورت اتوماتیک از الگوریتم خودش استفاده میکنه و با توجه به محتوای درون سلولها، ردیف و ستون و ... رو قالب بندی میکنه. پس نتیجه خروجی به محتوایی که درون جدول قرار داده شده است، وابسته است.
- fixed : زمانی که از این مقدار استفاده میکنید، دیگه مرورگر کاری به محتوای درون جداول ندارد و در عوض به عرض جدول، عرض ستونها، border و مقدار Cell spacing توجه میکنه و با توجه به اونا جدول رو رسم و قالب بندی میکنه. اون عرضی که برای سلولها و ستونهای ردیف اول در نظر میگیرید برای کل جدول در نظر گرفته میشه.
برای اینکه تاثیر مقدار fixed رو متوجه بشید، باید مقدار عرض یا width مربوط به کل جدول رو چیزی بجز auto قرار بدین (auto مقدار پیش فرض برای ویژگی width می‌باشد). در مثالهای زیر همه جداول عرض برابر با 100% دارند تا کل عرض مربوط به المنت Parent رو اشغال کنند. همونطور که میبینید در ابتدا مقدار ویژگی table-layout برابر با auto و بصورت پیش فرض است و جدول با توجه به متن درونش قالب بندی شده است. چون متن در یکی از سلولهای ستون اول بیشتر از بقیه ستونها است، پس عرض اون ستون نیز از بقیه بیشتر است. اما اگر بر روی دکمه Toggle در دموی بالا کلیک کنید، مقدار fixed برابر table-layout قرار داده میشه و دیگه محتوا تاثیری نداره و همه ستونها به یک اندازه نمایش داده میشن.
زمانی که از مقدار fixed استفاده میکنیم، علاوه بر اینکه جداول رو منظم‌تر نمایش میدیم، Performance یا عملکرد سایتمون رو بالاتر میبریم و مرورگر دیگه برای رسم جداول محاسبات خاصی رو انجام نمیده و سریعا جدول رو رسم میکنه. برای مطالعه بیشتر در این زمینه میتونین این لینک رو ببینید.
در جلسات بعد با ادامه آموزش در خدمتتون هستیم.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !