تخفیف ویژه

Code Guide یا راهنمای کدنویسی HTML و CSS (جلسه 7) : قرار دادن Media Query و Vendor Prefix

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۰۴ آذر ۱۳۹۵

در این مطلب با ادامه راهنمای کدنویسی HTML و CSS در خدمتتون هستم.code guide

در جلسه قبل مقدمه ای در مورد ترتیب قرارگیری ویژگی‌های CSS و عدم استفاده از import، نکاتی رو بیان کردیم.

قرار دادن Media Query ها

همونطور که میدونید با استفاده از Media Query‌ها میتونین کاری کنید که در شرایط خاص، یک استایل خاص اعمال بشه. تا جایی که امکانش هست بهتره که Media Query‌های مربوط به هر کد CSS رو در کنار همون کد قرار بدیم تا در آینده بهتر و سریعتر بتونیم کد مورد نظر رو ویرایش کنیم. کد زیر رو در نظر بگیرید:

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

همونطور که دیدید در ابتدا کدهای مربوط به المنتها در حالت نرمال رو قرار دادیم و بعد از اون و در ادامه کدها، مشخص کردیم که برای viewport هایی که عرضشون بیشتر از 480 پیکسل هست، استایلهای متفاوتی در نظر گرفته بشه. با اینکار در آینده بهتر میتونین کدهاتون رو بفهمید و اونا رو ویرایش کنید. تا جایی که امکان داره همه Media Query‌ها رو یکی نکنید و اونا رو در فایل جداگانه یا آخر کدها قرار ندید که در آینده به دردسر خواهید خورد.

ویژگی‌های پیشوندی یا Prefixed Properties

همونطور که میدونید زمانی که میخایم از بعضی از ویژگی‌ها استفاده کنیم، برای اینکه در مرورگرهای قدیمی خاصی هم پشتیبانی بشه، باید یکی از پیشوندهای moz یا webkit یا ms و ... رو قرار بدیم. به این موارد Vendor Prefix گفته میشه. هر زمان که از این موارد استفاده میکنید، طوری از تورفتگی و Indentation استفاده کنید که تمامی مقادیر بصورت دقیق در زیر یکدیگر قرار داده بشن. مثلا کد زیر رو در نظر بگیرید:

.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

همونطور که میبینید در بالا برای ویژگی box-shadow پیشوند webkit رو قرار دادیم. مشاهده میکنید که خط دوم رو طوری Indent کردیم که مقدارهای هر دو ویژگی بصورت دقیق در زیر یکدیگر قرار بگیرن. اینکار علاوه بر اینکه خوانایی کدها رو بالاتر میبره، باعث میشه که اگر درآینده خواستید یک مقدار رو تغییر بدین، بصورت ساده و با استفاده از قابلیت Multi Line Editing یا ویرایش چندخطی، مقدار مورد نظر رو همزمان برای همه خطوط تغییر بدین و در زمان کمتری کار مورد نظرتون رو انجام بدین. در هر ادیتوری میتونین از قابلیت Multi Line استفاده کنید. برای مثال درون ویرایشگر Sublime text برای اینکار باید کلیدهای ترکیبی Ctrl+Alt+Up برای انتخاب خط بالا و Ctrl+Alt+Down برای انتخاب خط پایین رو استفاده کنید. درون Editor‌های دیگه هم میتونین این کار رو انجام بدین.

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

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

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

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