ترفندهای حرفه ای CSS ProTips (جلسه 3) : Vertically Center و جدا کردن لیست با کاما

در این مطلب با ادامه ترفندهای حرفه ای CSS ProTips در خدمتتون هستیم.

وسط چین کردن المنتها از نظر عمودی

این کار شاید بنظر سخت برسه ولی در عمل خیلی سخت هم نیس و این کار رو میتونین به آسونی انجام بدین و هر المنتی رو بصورت وسط چین در بیارید. کد زیر رو در نظر بگیرید:

همونطور که دیدید با استفاده از ویژگی ها و خصوصیات Flexbox کاری کردیم که محتویات درون body بصورت وسط چین قرار داده بشن. همونطور که دیدید برای اینکار در ابتدا display رو برابر با flex قرار میدیم. Vendor Prefix ها رو برای پشتیبانی بیشتر قرار میدیم. ترازبندی ها رو هم center یا مرکز قرار دادیم. برای نمونه میتونین این مثال رو ببینید تا بیشتر با اون آشنا بشید. اگر دلتون میخاد که یه جایی باشه که بتونین با استفاده از اون هر المنتی رو در هر جایی و هر شرایطی، چه افقی و چه عمودی، وسط چین کنید به این آدرس برید و متناسب با نیازتون، کدهای مورد نظر رو کپی کرده و استفاده کنید. وقتی وارد این آدرس میشید چنتا گزینه بصورت Breadcrumb در اختیارتون قرار میگیره که با کلیک بر روی هر کدام، زیرگزینه های اون نمایش داده میشه. میتونین مشخص کنید که میخاید عمودی، افقی یا هر دوی اونا رو وسط بزارید. بعد از انتخاب این موارد، سوالهای دیگه ای هم پرسیده میشه و در نهایت با توجه به شرایط شما، یک کد در اختیارتون قرار داده میشه که میتونین از اونا در سایت خودتون استفاده کنید. با استفاده از این آموزش میتونین هر چیزی رو در مرکز قرار بدین. مثلا فرض کنید میخایم یک المنت Block-level رو بصورت عمودی و با استفاده از Flexbox در مرکز قرار بدیم. برای اینکار بصورت زیر عمل میکنیم:

Flexbox مشکلاتی هم در مرورگر IE11 داره که میتونین در اینجا بیشتر در مورد اون مطالعه کنید.

جدا کردن لیست با کاما با استفاده از CSS

شما میتونین با استفاده از این روش لیستهاتون رو با استفاده از کاما یا , یا هر چیز دیگه ای از هم جدا کنید و دیگه نیاز نیس که درون HTML اینکارو انجام بدین. همه این کارها با CSS خالی انجام خواهد شد. کدهای زیر رو در نظر بگیرید:

همونطور که دیدید با استفاده از کد بالا گفتیم که همه li هایی که درون ul وجود داره بجز li آخر، یک کلاس کاذب After براشون در نظر گرفته بشه و درون ویژگی content اونا , یا کاما قرار بگیره. با اینکار بعد از هر li یک کاما قرار میگیره و لیستتون به زیبایی با اون جدا جدا میشه. این روش علاوه بر مزایا و راحتی که داره، مشکلاتی رو هم داره. یکی از مشکلاتی که این روش داره اینه که برای موضوع Accessibility و Screen Reader ها مناسب و بهینه نیست. مشکل بعدی این که محتوایی که با استفاده از CSS قرار داده می شود، قابلیت Copy و Paste شدن را ندارد.

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

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

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

یا علی

Source