16
تشکر

مشخصه جدید Scoped در HTML5

اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

مشخصه جدید به نام Scoped در HTML5 بوجود آمده است که مخصوص تگ استایل است. اگر این مشخصه را به تگ استایل بدهیم باعث میشود قوانینی که در تگ استایل نوشتیم فقط برای تگ والد و فرزندان تگ والد اعمال شود. به همین دلیل تگ استایل باید داخل خود body تعریف شود.

در ادامه با ما باشید…

برای مثال کد زیر را در نظر بگیرید:

<!DOCTYPE html>
<html>
<head>
  <title>Style Scoped</title>
</head>
<body>
  <section>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id libero sit amet ipsum cursus tempor. In mattis, mauris a commodo semper, nunc tortor pharetra quam, vel ornare orci ligula ac sem. Phasellus sit amet sapien placerat mi blandit tempus.
    </p>
  </section>
  <section>
    <style>
      p{ color: red; }
    </style>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id libero sit amet ipsum cursus tempor. In mattis, mauris a commodo semper, nunc tortor pharetra quam, vel ornare orci ligula ac sem. Phasellus sit amet sapien placerat mi blandit tempus.
    </p>
  </section>
  <section>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id libero sit amet ipsum cursus tempor. In mattis, mauris a commodo semper, nunc tortor pharetra quam, vel ornare orci ligula ac sem. Phasellus sit amet sapien placerat mi blandit tempus.
    </p>
  </section>
</body>
</html>

در کد بالا در داخل تگ section میانی یک تگ استایل وجود دارد که قانون درون آن باعث میشود تمام تگ های p رنگ قرمز به خود میگیرند. خوب اگر این کد را اجرا کنید نتیجه مانند زیر میشود:

مشخصه جدید Scoped در HTML5

مشخصه جدید Scoped در HTML5

حالا اگر ما به تگ استایل مشخصه scoped را اضافه کنیم قانون های داخل تگ استایل فقط به pهایی که درون تگ والد استایل وجود دارند اعمال میشوند همچنین اگر خود تگ والد هم p باشد به آن هم اعمال میشود و نتیجه مانند زیر میشود:

<!DOCTYPE html>
<html>
<head>
  <title>Style Scoped</title>
</head>
<body>
  <section>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id libero sit amet ipsum cursus tempor. In mattis, mauris a commodo semper, nunc tortor pharetra quam, vel ornare orci ligula ac sem. Phasellus sit amet sapien placerat mi blandit tempus.
    </p>
  </section>
  <section>
    <style scoped>
      p{ color: red; }
    </style>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id libero sit amet ipsum cursus tempor. In mattis, mauris a commodo semper, nunc tortor pharetra quam, vel ornare orci ligula ac sem. Phasellus sit amet sapien placerat mi blandit tempus.
    </p>
  </section>
  <section>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id libero sit amet ipsum cursus tempor. In mattis, mauris a commodo semper, nunc tortor pharetra quam, vel ornare orci ligula ac sem. Phasellus sit amet sapien placerat mi blandit tempus.
    </p>
  </section>
</body>
</html>
مشخصه جدید Scoped در HTML5

مشخصه جدید Scoped در HTML5

این مشخصه به نظر باید خیلی پرکاربرد باشد اما به دلیل پشتیبانی نشدن توسط مرورگرها نمیتوان از آن استفاده کرد. در حال حاظر فقط نسخه شبانه فایرفاکس از آن پشتیبانی میکند.

 

  • محمد می‌گه:

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

  • هدی می‌گه:

    سلام میشه بگید کدهای html5 رو باید در چه محیطی بنویسیم و چه مرورگرهایی این کدها رو ساپورت میکنن؟چرا در ویژوال استدیو 2010 در قسمت open file—> html page کدهای html5 رو ساپورت نمیکنه؟

    • محسن شفیعی می‌گه:

      شما میتوانید کدهای HTML5 را در هر جا حتی notepad هم بنویسید، و ویژوال استدیو فقط برای راحتی کار است. میتوانید از نرم افزار aptana هم استفاده کنید. البته محیط design ندارد.
      در مورد پشتیبانی مرورگرها میتوانید از سایت caniuse.com استفاده کنید.

  • ahmad می‌گه:

    سلام خسته نباشید اقا اموزش درست کردن تشکر که تو سایت گذاشتی برامون بزار ممنون از سایت خوبت

    • محسن شفیعی می‌گه:

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


  • نظرات این مطلب بسته است.