illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 167 ۴ آذر ۹۵

در این مطلب با ادامه راهنمای کدنویسی 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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram