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

- visibility ٠ mode_comment

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

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

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

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

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

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

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

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

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

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

یا علی

Source

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

نیاز به لاگین

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