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

- visibility ٠ mode_comment

در این جلسه با یه ترفند حرفه ای و پیشرفته دیگه در خدمتتون هستیم و امیدواریم که بتونید از اون استفاده کنید.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

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

نیاز به لاگین

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