۱۲ نکته درباره CSS که کمتر درباره شان می دانید

تاریخ : ۲۶ تیر ۱۳۹۵ | دسته بندی : شیوه نامه ( css ) ها | برچسب ها : ,,

CSS یک زبان بیش از حد پیچیده نیست . اما حتی اگر سال ها کارتان نوشتن CSS باشد ، احتمال دارد با موارد تازه ای برخورد کنید – ویژگی هایی که هرگز استفاده نکرده اید ، مقدارهایی که هرگز در نظر نگرفته اید ، یا جزئیات مشخصاتی که هرگز از آن ها باخبر نبوده اید .

من همواره در تحقیقاتم با نکاتی بسیار عالی برخورد کرده ام  ، بنابراین ، تعدادی از آن ها را در این پست برایتان می گویم . بدون شک ، هر مطلبی در این پست ارزش های عملی زیادی خواهد داشت ، اما ممکن است برخی را در ذهن خود نگه دارید تا در زمان دیگری استفاده کنید .

۱- خصوصیت color فقط برای متن نیست

بیایید کارمان را با مطالب ساده تر آغاز کنیم . هر توسعه دهنده CSS از خصوصیت color بسیار استفاده می کند . به هر حال ، برخی از شما با اینکه در زمینه CSS تجربه فراوانی دارید ، ممکن است تشخیص ندهید که این خصوصیت فقط رنگ متن را تعیین نمی کند .

به پیش نمایش زیر نگاهی بیندازید .

شکل

توجه داشته باشید که در CSS تنها یک خصوصیت color به کار رفته است ، آن هم در عنصر body که معادل yellow تنظیم شده است . همان طور که می توانید ببینید ، هرچیزی در صفحه به رنگ زرد است ، از جمله :

  • Alt text نمایش داده شده در یک تصویر ناپیدا
  • حاشیه عنصر list
  • نقطه ( یا نشانگر ) فهرست مرتب نشده
  • نشانگر عددی در فهرست مرتب شده
  • عنصر hr

جالب اینجاست که عنصر hr به طور پیش فرض مقدار خصوصیت color را به ارث نمی برد ، اما باید با استفاده از border-color: inherit آن را مجبور کنم این کار را انجام دهد . این یکی از رفتارهای عجیب من است .

خلاصه مطالبی که تا اینجا گفتیم :

این خصوصیت رنگ پیش زمینه محتوای متنی یک عنصر را توصیف می کند . علاوه براین ، برای فراهم کردن یک مقدار غیرمستقیم بالقوه برای هر خصوصیت دیگری که مقدارهای color را می پذیرد به کار می رود .

۲- خصوصیت visibility را می توانید معادل  “collapse” تنظیم کنید

به طور احتمال تا کنون صدهابار از خصوصیت visibility استفاده کرده اید . رایج ترین مقدارهایی که تاکنون به کاررفته اند ، visible ( مقدار پیش فرض برای تمانی عنصرها ) و hidden هستند ، که که hidden باعث می شود عنصر مخفی شود در حالی که همچنان فضا را اشغال می کند ، طوری که گویی هنوز آنجا است ( که برعکس display:none است ) .

سومین مقداری که به ندرت هم برای خصوصیت visibility به کار می رود ، مقدار collapse است . این مقدار درتمامی عنصرها به جز ردیف های جدول ، گروه های ردیف جدول ، ستون های جدول ، و گروه های ستون جدول یکسان است . در خصوص این عنصرهای مبتنی بر جدول ، فرض بر آن است که یک مقدار collapse مشابه display:none کار می کند ، طوری که فضای گرفته شده به وسیله ردیف / ستون فروریخته را می توان با محتوای دیگری پر کرد .

متاسفانه ، روشی که مرورگرها به collapse رسیدگی می کنند ، ثابت نیست . پیش نمایش زیر را امتحان کنید :

شکل

CSS-Tricks Almanac توصیه می کند که به دلیل ناپایداری های مرورگر از این استفاده نکنید .

برخی از مشاهده های من :

  • در مرورگر کروم ، تفاوتی ندارد که collapse را به کار ببرید یا hidden .
  • در Firefox ، Opera و IE11 ، به نظر می رسد که collapse دقیقا همان طور که باید ، واکنش نشان می دهد : ردیف پاک می شود و ردیف پایینی بالا می آید .

بدون شک ، شاید قرار بر این است که این مقدار به ندرت به کار رود ، اما وجود دارد ، بنابراین ، اگر تا پیش از این چیزی درباره آن نمی دانستید ، اکنون بر دانسته هایتان افزوده شده است .

۳- خصوصیت مختصرنویسی background مقدارهای تازه ای دارد

در CSS2.1 ، خصوصیت مختصرنویسی background 5 مقدار تمام نویسی دارد : background-color, background-image, background-repeat,background-attachment و background-position . در CSS3 و بالاتر ، اکنون سه مقدار دیگر به آن اضافه شده و تعدادشان به ۸ عدد رسیده است . در اینجا ، این مقدارها را آورده ایم :

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

به علامت / توجه کنید ، که می توان آن را مانند مختصرنویسی font و شعاع حاشیه نوشت . / به شما این امکان را می دهد که پس از موقعیت در مرورگرهای پشتیبانی کننده یک مقدارbackground-size  بگنجانید .

علاوه براین ، می توانید برای background-origin و  background-clip دو اعلان اختیاری هم قرار دهید .

بنابراین ، نحو آن به این شکل است :

آن را با استفاده از این پیش نمایش در مرورگر خود امتحان کنید :

شکل

درزمینه پشتیبانی مرورگر ، به نظر می رسد که این مقدارهای جدید در تمامی مرورگرهای مدرن کار می کنند ، اما شاید مجبور شوید برای هر مرورگری که از آن پشتیبانی نمی کند ، fallbackهایی فراهم کنید ، بنابراین ، رتبه آن به طور منظمی پایین می آید .

۴- خصوصیت clip فقط در عنصرهایی کار می کند که وضعیتی مطلق دارند

حال که درباره background-clip صحبت می کنیم ، احتمال دارد که پیش از این clip را دیده باشید که به این صورت است :

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

در پیش نمایش زیر می توانید چگونگی غیرفعال شدن clip را درزمانی که position: absolute ضامن می خورد مشاهده کنید :

شکل

علاوه براین ، باید عنصر را معادل position: fixed تنظیم کنید ، زیرا براساس جزئیات ، عنصرهایی که موقعیت ثابت دارند نیز به صورت ” دارای موقعیت مطلق ” تعیین می شوند .

۵- درصدهای عمودی با پهنای محفظه ارتباط دارند و نه با ارتفاع آن

این نکته در نگاه اول کمی گیج کننده به نظر می آید . با اینکه ممکن است بدانید درصدهای پهنا براساس پهنای محفظه محاسبه می شوند ، درصدهای خصوصیاتی مانند padding بالا و پایین و margin بالا و پایین برعکس آن براساس پهنای محفظه محاسبه می شوند و نه ارتفاع آن .

در اینجا مثالی آورده ایم که می توانید با یک اسلایدر دامنه تنظیم کنید ، بنابراین ، می توانید تاثیر آن را ببینید :

شکل

توجه داشته باشید که ۳ درصد ” عمودی ” وجود دارند که در کادر داخلی اعلام شده اند ( padding بالا و پایین ، margin بالا و پایین ) . زمانی که اسلایدر حرکت می کند ، فقط پهنای محفظه را تغییر می دهد . اما سایر مقدارها درواکنش به این تغییر می کنند ، مانند خروجی در نمایش هلی صفحه ، که نشان می دهد این مقدارها در زمانی که به صورت درصدی بیان می شوند ، بر اساس پهنای محفظه هستند .

۶- خصوصیت border نوعی like inception است

همه ما در برخی جاها این ها را انجام داده ایم :

خصوصیت border یک خصوصیت مختصرنویسی است که border-style ، border-width و border-color را در یک اعلام منفرد تنظیم می کند .

اما فراموش نکنید که هریک از خصوصیت هایی که border نماینده شان است ، خودشان یک خصوصیت مختصرنویسی هستند . بنابراین ، border-width را به تنهایی می توان اعلام کرد :

این کد برای هریک از چهار border پهنای متفاوتی را تنظیم می کند . و همان طور که در پیش نمایش زیر نشان داده ایم ، درباره border-color و border-style نیز همین طور است :

شکل

علاوه براین ، با استفاده از border-left-style ، border-top-width ، border-bottom-color  و از این قبیل می توان هر یک از این خصوصیات را بیش از این تقسیم بندی کرد .

اما نکته اینجاست که برای تنظیم مقدارهای مختلف برای سمت های متفاوت نمی توانید از مختصرنویسی border منظم استفاده کنید . بنابراین ، آن مختصرنویسی داخل محتصرنویسی داخل مختصرنویسی است ، اما نه به طور دقیق .

۷- اکنون خصوصیت text-decoration یک مختصرنویسی است

می دانستم که برخی از نکته های این فهرست باعث حیرت تان می شوند .

براساس این مشخصات ، اکنون این استاندارد است :.کد

این خصوصیت اکنون نماینده سه خصوصیت است : text-decoration-line ،  text-decoration-color  وtext-decoration-style  .

متاسفانه ، Firefox تنها مرورگری است که از این سه خصوصیت تازه پشتیبانی می کند ، و من ( فرض می کنم به دلیل سازگارپذیری معکوس ) هنوز آن ها را در مختصرنویسی پشتیبانی نمی کند .

پیش نمایش زیر را در Firefox امتحان کنید :

شکل

این پیش نمایش برای انجام این کار از مقدارهای تمام نویسی استفاده می کند . این درپایان یک نمونه سخت خواهد بود ، زیرا هر مرورگر که یک مقدار اضافی را در text-decoration ببیند ، تمام اعلام را لغو می کند که اصلا برای سازگارپذیری معکوس خوب نیست .

۹- خصوصیت border-width مقدارهای کلیدی را می پذیرد

این نکته آن قدر مهم نیست که بر تمام دنیا تاثیر بگذارد و جدید هم نیست ، اما خصوصیت border-width علاوه بر مقدارهای طول استاندارد ، ( برای مثال ۵px یا ۱em ، سه مقدار واژه کلیدی یعنی medium ، thin و thick هم می پذیرد .

درواقع ، مقدار ابتدایی خصوصیت  border-width ، “medium” است . در پیش نمایش زیر از thick استفاده شده است :

شکل

هنگامی که مرورگر این واژه های کلیدی را نمایش می دهد ، ویژگی ها به این نیاز ندارند که آن ها را برای مقدارهای طول خاصی ترسیم کنند ، اما از آن چه من می بینم ، به نظر می رسد که تمامی مرورگرها از ۱px ، ۳px و ۵px استفاده می کنند .

۹- هیچکس از border-image استفاده نمی کند

چندی پیش درباره خصوصیت border-image در CSS3 مطلبی نوشتم . تمامی مرورگرهای مدرن به جزIE11 و پایین تر از این خصوصیت پشتیبانی می کنند . اما همه بدان اهمیت می دهند ؟

آن مانند یک ویژگی تمیز به نظر می رسد ، که به شما این امکان را می دهد تا border image سیال ایجاد کنید . برای امتحان آن از دستگیره تغییراندازه در این پیش نمایش استفاده کنید :

شکل

متاسفانه border-image مانند یک چیزنوظهور به نظر می رسد که بسیاری از افراد از آن استفاده نمی کنند . اما شاید هم من اشتباه می کنم . اگر نمونه ای از border-image را سراغ دارید که در یک پروژه واقعی در حال استفاده است یا خودتان از آن استفاده کرده اید ، دربخش نظرها آن را به ما اطلاع دهید و خوشحال می شوم اعتراف کنم که اشتباه می کردم !

۱۰- یک خصوصیت empty-cells وجود دارد

این مورد در همه جا از جمله IE8 پشتیبانی می شود و مانند این به نظر می رسد :

همان طور که ممکن است تشخیص داده باشید ، برای جدول های HTML به کار می رود . آن به مرورگر می گوید که سلول هایی را که محتوایی ندارند نمایش دهد یا مخفی کند . برای مشاهده تاثیر تغییر مقدار خصوصیت empty-cells ، دکمه toggle پیش نمایش زیر را امتحان کنید :

شکل

در این مورد ، من باید اطمینان می دادم که مرزها قابل رویت بودند و فرو نمی ریختند و باید بین مرزها مقداری فضا اضافه می کردم . در برخی موارد ، ممکن است این خصوصیت هیچ تاثیر دیداری نداشته باشد ، زیرا برای این که تفاوتی ایجاد کند باید در جدول چیزی قابل دیدن وجود داشته باشد .

۱۱- خصوصیت font-style مقدار “oblique” می پذیرد

تقریبا در هرزمانی خصوصیت font-style را می بینید که با مقدار “normal” یا “italic” به کار می رود .اما می توانید برای آن مقدار “oblique” را هم تعیین کنید :

شکل

اما معنی دقیق آن چیست؟ و چرا مانند italic به نظر می رسد ؟

مشخصات توضیح می دهند که “oblique” :

” فونتی را انتخاب می کند که شکلی مورب دارد ، یا اگر مورب نباشد italic را انتخاب می کند ” .

تعریف “italic” در این مشخصات مانند همین است . واژه “oblique” یک اصطلاح مربوط به چاپ است که اصولا یک متن مورب را نشان می دهد و نه یک italic واقعی .

به دلیل شیوه ای که CSS به یک متن مورب می پردازد ، می توان آن را با italic عوض کرد ، مگر اینکه ( همان طور که در مشخصات توضیح دادیم ) فونت مورد استفاده ظاهری داشته باشد که به عنوان oblique شناسایی شود .

من هرگز درباره فونتی که ظاهر مورب داشته باشد چیزی نشنیده ام ، اما شاید هم اشتباه می کنم . با توجه به تحقیقی که انجام داده ام ، این که فونتی هم ظاهر italic داشته باشد و هم oblique اشتباه به نظر می رسد ، زیرا به طور احتمال oblique یک نسخه کاذب از italic در فونت هایی است که italic واقعی ندارند .

بنابراین ، اگر اشتباه نکنم ، معنی آن این است که اگر فونتی ظاهر italic واقعی نداشته باشد اگر آن را در CSS معادل font-style: italic تنظیم کنید ، فونت آن به صورت font-style: oblique نمایش داده می شود .

۱۲- Word-wrap مشابه overflow-wrap است .

خصوصیت word-warp زیاد به کار نمی رود ، اما در برخی وضعیت های خاص بسیار مفید است . یکی از نمونه هایی که زیاد به کار می رود ، کمک به رشته های ناشکسته (مانند URLها) متون است تا لفافه دار شوند ، تا اینکه محفظه شان را بشکنند . در اینجا نمونه ای را آورده ایم :

شکل

از آنجایی که این خصوصیت را مایکروسافت ایجاد کرده است ، تمامی مرورگرها از جمله Internet Explorer حتی نسخه های قدیمی تر آن تا IE5.5 هم از آن پشتیبانی می کنند .

باوجود مسائل میان مرورگری و از آن چه من می توانم ببینم ، یعنی پشتیبانی پایدار، W3C تصمیم گرفت تا word-wrap را با overflow-wrap جایگزین کند – من حدس می زنم به این علت بود که نام پیشین آن یک نام غلط درنظر گرفته می شد . مقدارهای overflow-wrap با word-wrap یکسان است ، و word-wrap اکنون یک ” نحو جایگزین ” برای overflow-wrap درنظر گرفته می شود .

درحالیکه تعداد کمی از مرورگرهای تازه از overflow-wrap پشتیبانی می کنند ، بیجا به نظر می رسد که خودمان را با آن به زحمت بیندازیم ، زیرا مرورگرهای قدیمی به خوبی را word-wrap کنار می آیند و به دلایل ارثی تمامی مرورگرها باید برای مدتی نامحدود به پشتیبانی از word-wrap ادامه دهند .

چه تعداد از این ها برایتان تازگی داشتند ؟

آیا از این پست چیزی یاد گرفتید ؟ امیدوارم همین طور باشد . به طور احتمال ، باتجربه ترین توسعه دهنده های CSS بسیاری – نه همه – این نکات را می دانند . اما احتمال دارد تازه کارها از آن ها فایده بیشتری ببرند .

حسن موحد

عاشق طراحی وب سایت هستم و 8 سال هست در این زمینه فعالیت می کنم و تمرکزم بر روی خرسند نگه داشتن مشتری است .

ارسال نظر