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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

ترفندهای حرفه ای و پیشرفته Front End (جلسه 11) : قرار دادن لینکی در link دیگر - قسمت 1

0 171 ۵ آبان ۹۵

در این جلسه با یه ترفند حرفه ای و پیشرفته دیگه در خدمتتون هستیم و امیدواریم که بتونید از اون استفاده کنید.nested links

مشکل:

همونطور که میدونید HTML مشکلات و محدودیتهای متعددی رو داره که ممکنه با همه اونا آشنا نباشیم. یکی از این مشکلات اینه که نمیتونیم لینکی رو درون لینک دیگه قرار بدیم و اونا رو نمیشه بصورت تو در تو قرار داد. این موضوع درون استاندارد W3C هم بیان شده. اگر با وجود دونستن این مشکل، این کار رو انجام بدین و در مرورگر اونو باز کنید، خواهید دید که اونجوری که انتظار دارید، مرورگر باهاش برخورد نمیکنه.

فرض کنید که کد زیر رو داشته باشیم که در اون یک لینک درون لینک دیگر قرار گرفته:

حالا اگر کد بالا رو درون مرورگر باز کنید، متوجه میشید که مرورگر این کد رو بصورت زیر میبینه:

و بصورت زیر در مرورگر نمایش داده میشه و کاربران اون رو میبینن:nested links 2

میبینید که مرورگر به محض اینکه یک تگ شروع شونده لینک یا opening tag را مشاهده میکنه و بهش برخورد میکنه، فوری تگ باز شده قبلی رو با استفاده از closing tag میبنده تا با بعدی غاطی نشه. میبینید که در مثال بالا کلمه Baz اصلا بعنوان لینک محسوب نشده. اما شما بعضی اوقات واقعا لازم دارید که لینکی رو درون لینک دیگه قرار بدین و بخوبی نمایش داده بشه.

شاید به ذهنتون رسیده باشه که از روشهای دیگه اینکارو انجام بدیم. میشه با استفاده از Javascript کارایی رو انجام داد و شبیه سازی کرد ولی در همه مرورگرها و در همه شرایط بخوبی عمل نمیکنه و شرایط لینک طبیعی رو بوجود نمیاره. راه دیگه ای که وجود داره اینه که با استفاده از CSS و ویژگی Position این کار رو انجام بدیم. شبیه به کاری که در این مثال انجام داده. ولی همونطور که در بالا گفتیم خیلی عالی نمیشه. اگر بیشتر تحقیق کنیم میبینیم که راه صد در صد و کاملی با استفاده از Javascript و css وجود نداره که بتونه مشکل مارو برطرف کنه و همه مواردی که مدنظرمون هست رو در اختیارمون بزاره.

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

راه حل:

در اینجا تگ object به کمک ما میاد و این مشکلو برامون حل میکنه. اگر لینک درونی در کد قبلی رو در یک تگ object قرار بدیم، مشکل به سادگی حل خواهد شد:

حالا اگر خروجی رو در مرورگر ببینید، بصورت زیر خواهد بود:nested links 3

اگه متوجه شده باشید، کلمه Baz هم بصورت لینک در اومده و مشکل برطرف شده. با اینکار همه مرورگرهای مدرن لینک درونی رو هم به درستی نمایش میدن و دیگه لینک درونی رو بیخیال نمیشن. در جلسه بعد بیشتر در مورد این ویژگی توضیح میدیم و همچنین روشهایی رو بهتون میگیم که با استفاده از اونا، کاری میکنیم که مرورگرهای قدیمی هم از این ویژگی پشتیبانی کنن.

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

موفق باشید

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram