نکاتی کاربردی در مورد CSS (جلسه 12) : نکاتی در مورد outline-offset و first-letter

- visibility ۰ mode_comment

در این مطلب با ادامه نکاتی کاربردی در مورد CSS در خدمتتون هستیم. css-style

ویژگی بنام outline-offset نیز وجود دارد

همونطور که میدونین یک ویژگی بنام Outline وجود داره که بیشتر وقتا از اون استفاده میکنیم و تقریبا برای همه آشنا هست. با استفاده از این ویژگی میتونیم خیلی کارا انجام بدیم و یکی از اون کارا Debugging هست. این ویژگی تاثیری بر جریان صفحه ندارد. Spec همراه با این ویژگی، ویژگی دیگه ای بنام outline-offset قرار داده که با استفاده از اون میتونین مشخص کنید که outline نسبت به المنت چقد فاصله و حاشیه داشته باشه. دموی زیر رو مشاهده کنید: در دموی بالا، اسلایدر رو به سمت راست و چپ ببرید تا تاثیر outline-offset رو ببینید. حداقل این اسلایدر 0 و حداکثر اون 30 پیکسل هست و این برای نمونه هست و شما خودتون میتونین تا هر مقداری که دلتون بخواد اون رو زیاد کنید. دقت داشته باشید که با وجود اینکه ویژگی outline بصورت خلاصه نویسی شده قابل تعریف شدن هست، ویژگی outline-offset رو درون خودش تعریف نمیکنه و شما باید بصورت جداگانه اون رو تعریف کرده و مقدار دهی کنید. یکی از مشکلات این ویژگی اینه که در همه مرورگرها بجز Internet Explorer از اون پشتیبانی میشه. حتی درون IE11 هم پشتیبانی نمیشه. شاید ابزارها و Polyfill هایی وجود داشته باشه که بتونه این ویژگی رو درون IE هم شبیه سازی کنه.

المنت کاذب ::first-letter هوشمندتر از چیزی هست که فکر میکنید

المنت کاذب ::first-letter به شما اجازه میده که اولین حرف المنت مورد نظرتونو استایل دهی کنید. این کار به شما اجازه میده که افکت Drop cap رو بوجود بیارید. Drop Cap همون چیزی هست که حرف اول پاراگراف رو بصورت بزرگ مینویسن و بیشتر برای پرینت کردن و ... مورد استفاده قرار میگیره. شاید شما فکر کنید که مرورگر کار ساده ای داره و میره و اولین کاراکتر اون المنت رو انتخاب میکنه و استایل متفاوت رو براش اعمال میکنه. ولی اینطور نیست. نمونه زیر رو مشاهده کنید: چیزی که در بالا مشاهده میکنید در 4 مرورگر معروف به یک صورت نمایش داده میشه و رفتار یکسانی داره و اگر به اون دقت کنید خواهید دید که رفتار منطقی و درستی هست. فرض کنید که شما یک پرانتز در ابتدای متن داشته باشید. بنظرتون جالبه که اون پرانتز بعنوان اولین کاراکتر استایل دهی بشه. بهتر نیس که اولین حرف انتخاب و استایل دهی بشه؟ همونطور که میبینید این المنت کاذب خیلی هوشمندانه حرف اول رو پیدا و استایل دهی میکند.

در جلسات بعدی با ادامه نکات در خدمتتون هستیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.