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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

ترفندهای پیشرفته برای Inspector مرورگر Chrome (قسمت 7) : نمایش تعاریف توابع و جزئیات ویژگی های CSS

0 168 ۱۱ شهریور ۹۵

inspector

ترفند 13 : نمایش تعاریف توابع یا Function definition یک المنت

همونطور که میدونید با استفاده از Javascript میتونیم برای المنتهای مورد نظر خودمون رویدادهای متنوعی رو ایجاد کنیم و هز زمان که اون رویداد به وقوع پیوست یک تابع اجرا میشه و کارهای مشخصی رو برامون انجام میده. شما میتونین با استفاده از Inspector رویدادهایی که برای یک المنت تعریف شدن رو ببینید. برای اینکار به سایت w3schools میریم و بر روی یکی از منوها کلیک راست کرده و Inspector رو انتخاب میکنیم.inspector function definition

با اینکار Inspector باز میشه و المنت مورد نظر برامون فعال هست:inspector function definition 2

حالا که این المنت فعال هست اگه به سمت راست Inspector نگاه کنیم، یک تب بنام Event Listeners وجود داره که در اونجا لیست همه رویدادهای تعریف شده برای المنت قرار گرفتن.inspector function definition 3

همونطور که دیدید 4 رویداد برای این المنت تعریف شده. بعنوان مثال اگر بر روی مثلث کناری رویداد Click کلیک کنیم تا باز بشه، بصورت زیر خواهد بود:inspector function definition 4

همونطور که دیدید اطلاعات مربوط به این رویداد به ما نمایش داده شده. حالا بر روی handler کلیک راست کرده و گزینه Show function definition رو انتخاب کنید:inspector function definition 5

با اینکار Inspector به صورت اتوماتیک شما رو به تب Sources میبره و جایی که این رویداد تعریف شده رو به شما نشون میده و اجزای اون رو به شما نمایش میده و میتونین بفهمید که با کلیک بر روی این المنت چه کارهایی انجام میشه:inspector function definition 6

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

ترفند 14 : نمایش و دسترسی به جزئیات ویژگیهای CSS

همونطور که میدونید درون CSS میتونیم ویژگیهای رو بصورت مختصر یا Shorthand قرار بدیم. برای مثال فرض کنید که من میخام margin یک المنت رو برابر با 0 قرار بدم. برای اینکار به سادگی کد زیر رو قرار میدم:

این ویژگی رو بصورت مختصر قرار دادیم. دلیلش هم اینه که با اینکار حاشیه های چپ و راست و بالا و پایین المنت مورد نظر رو تنها با یک دستور 0 میکنیم، یعنی در واقع 4 کار رو یکجا انجام دادیم. اگر میخاستیم این 4 کار رو بصورت جداگانه قرار بدیم، باید بصورت زیر عمل میکردیم:

دیدید که بین حالت مختصر و کامل چه فرقایی هست. خیلی از ویژگی های دیگه هم وجود دارن که چنین حالتی براشون صدق میکنه. در اینجا هم Inspector به کمک شما میاد و میتونین حالت مختصر نشده ویژگی ها رو مشاهده کنید. برای اینکار درون همون سایت بالا اگر ویژگی های المنتها رو ببینید، بعضی از اونا یک مثلث در مقابلشون هست:inspector shorthand css

با کلیک بر روی این مثلث ها میتونین حالت خلاصه نشده این ویژگی رو مشاهده کنید:inspector shorthand css 2

دیدید که چه زیبا اینکار انجام میشه. همه ویژگی هایی که میشه اونا رو بصورت خلاصه نوشت، اینکار رو میشه براشون انجام داد. در پایین یک مثال پیشرفته تر بهتون نشون میدم:inspector shorthand css 3

دیدید که بصورت کامل اطلاعات خلاصه نشده ویژگی transition به شما نمایش داده شده و میتونین از اونا استفاده کنید.

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

موفق باشید

یا علی

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram