یک ویژگی آزمایشی جدید - شیوه نامه های محدوده

Alex Danilo
X

Chromium اخیراً یک ویژگی جدید از HTML5 پیاده سازی کرده است: stylesheets scoped, aka. <style scoped> . یک نویسنده وب می‌تواند قوانین سبک را محدود کند تا فقط برای بخشی از صفحه اعمال شود، با تنظیم ویژگی 'scoped' روی عنصر <style> که فرزند مستقیم عنصر ریشه درخت فرعی است که می‌خواهید سبک‌ها روی آن اعمال شوند. این سبک ها را محدود می کند تا فقط بر عنصری که والد عنصر <style> است و همه فرزندان آن تأثیر بگذارد.

مثال

در اینجا یک سند ساده است که از یک ظاهر طراحی استاندارد استفاده می کند:

<html>
<body>
    <div>a div! <span>a span!</span></div>
    <div>
        <style>
        div { color: red; }
        span { color: green; }
        </style>
        a div! <span>a span!</span></div>
    <div>a div! <span>a span!</span></div>
</body>
</html>

قوانین سبک مشخص شده، متن را در هر <div> قرمز و در هر <span> سبز رنگ می کند:

یک دیو! یک دهانه
یک دیو! یک دهانه
یک دیو! یک دهانه

با این حال، اگر scoped روی عنصر <style> تنظیم کنیم:

<html>
<body>
    <div>a div! <span>a span!</span></div>
    <div>
        <style scoped>
        div { color: red; }
        span { color: green; }
        </style>
        a div! <span>a span!</span></div>
    <div>a div! <span>a span!</span></div>
</body>
</html>

سپس قوانین سبک را محدود می‌کند تا به <div> محصور که والد عنصر <style scoped> است و هر چیزی که داخل آن <div> است اعمال شود. ما این را 'scoped' می نامیم و نتیجه به نظر می رسد:

یک دیو! یک دهانه
یک دیو! یک دهانه!
یک دیو! یک دهانه!

البته این کار را می توان در هر نقطه از نشانه گذاری انجام داد. بنابراین، اگر اهل ماجراجویی هستید، می‌توانید سبک‌های محدوده‌دار را تا جایی که دوست دارید در سایر بخش‌های محدوده‌بندی شده نشانه‌گذاری قرار دهید تا کنترل دقیقی بر محل اعمال سبک‌ها داشته باشید.

موارد استفاده کنید

حالا این برای چی خوبه؟

یکی از موارد استفاده رایج، محتوای همبسته است: زمانی که شما به عنوان یک نویسنده وب می‌خواهید محتوای یک شخص ثالث، شامل تمام سبک‌های آن را ترکیب کنید، اما نمی‌خواهید آن سبک‌ها را به خطر بیندازید که بخش‌های غیرمرتبط صفحه را «آلوده» کند. یک مزیت بزرگ در اینجا، توانایی ترکیب محتوای سایر سایت‌ها مانند yelp، twitter، ebay و غیره در یک صفحه واحد بدون نیاز به جداسازی آنها با استفاده از <iframe> یا ویرایش فوری محتوای خارجی است.

اگر از یک سیستم مدیریت محتوا (CMS) استفاده می‌کنید که تکه‌هایی از نشانه‌گذاری را برای شما ارسال می‌کند که همه با هم در یک صفحه نمایش نهایی له می‌شوند، این یک ویژگی عالی است تا مطمئن شوید هر قطعه جدا از هر چیز دیگری در صفحه استایل‌بندی می‌شود. این می تواند به همان اندازه برای ویکی مفید باشد.

وقتی می‌خواهید کدهای نمایشی خوب را در یک صفحه بنویسید، آسان است که سبک‌ها را فقط به محتوای نمایشی محدود کنید. این به شما اجازه می دهد تا با CSS در نسخه ی نمایشی رفتار کنید، اما هیچ چیز دیگری در صفحه تحت تأثیر قرار نمی گیرد.

مورد استفاده دیگر صرفاً کپسوله کردن است: برای مثال، اگر صفحه وب شما دارای یک منوی جانبی است، منطقی است که سبک هایی را که مختص آن منو هستند در بخش <style scoped> در آن قسمت از نشانه گذاری قرار دهید. این قوانین سبک هیچ تاثیری در هنگام رندر کردن سایر قسمت‌های صفحه ندارند، که آنها را به خوبی از محتوای اصلی جدا می‌کند!

احتمالاً یکی از قانع‌کننده‌ترین موارد استفاده، مدل مؤلفه وب است. اجزای وب راهی عالی برای ساختن مواردی مانند لغزنده، منوها، انتخابگر تاریخ، ویجت‌های برگه و غیره خواهند بود. با ارائه سبک‌های محدوده، یک طراح می‌تواند یک ویجت بسازد و آن را با سبک‌های خود به عنوان یک واحد مستقل بسته‌بندی کند. دیگران می توانند آن را گرفته و در یک برنامه وب غنی ترکیب کنند. ما قصد داریم از <style scoped> به‌شدت با Web Components و سایه DOM استفاده کنیم (که از قبل می‌توان با تنظیم پرچم آزمایشی "shadow DOM" در chrome://flags فعال کرد). در حال حاضر هیچ روش واقعاً خوبی برای اطمینان از اینکه سبک‌ها به مؤلفه‌های وب محدود می‌شوند، بدون استفاده از شیوه‌های بدی مانند استایل‌سازی درون خطی، وجود ندارد، بنابراین سبک‌های محدوده‌ای برای این کار مناسب هستند.

چرا عنصر والد را شامل می شود؟

طبیعی ترین راه، گنجاندن عنصر والد است تا قوانین <style scoped> بتوانند، برای مثال، یک رنگ پس زمینه مشترک برای کل محدوده تعیین کنند. همچنین به مرورگرهایی که هنوز از <style scoped> پشتیبانی نمی‌کنند، با پیشوند کردن قواعد با شناسه یا انتخاب‌گر کلاس به‌عنوان بازگشتی، اجازه می‌دهد تا شیوه نامه‌های محدوده‌دار به صورت «دفاعی» نوشته شوند:

<div id="menu">
    <style scoped>
    #menu .main { … }
    #menu .sub { … }
    …

این اثر استفاده از سبک‌ها را در زمانی که 'scoped' اجرا می‌شود، اما با جریمه عملکرد زمان اجرا به دلیل انتخابگر پیچیده‌تر، تقلید می‌کند. نکته خوب در مورد این رویکرد این است که تا روزی که <style scoped> به طور گسترده پشتیبانی شود و انتخابگرهای ID به سادگی حذف شوند، امکان یک رویکرد بازگشتی برازنده را فراهم می کند.

وضعیت

با توجه به اینکه پیاده سازی شیوه نامه های دامنه دار هنوز جدید است، آنها در حال حاضر پشت یک پرچم زمان اجرا در کروم پنهان هستند. برای فعال کردن آن‌ها باید نسخه‌ای از کروم را دریافت کنید که دارای شماره نسخه ۱۹ یا بالاتر باشد (Chrome Canary در حال حاضر)، سپس ورودی «فعال کردن <style scoped> » را در chrome://flags (به سمت انتها) قرار دهید. روی "فعال کردن" کلیک کنید و سپس مرورگر را مجددا راه اندازی کنید.

در حال حاضر هیچ باگ شناخته شده ای وجود ندارد، اما نسخه های @global و scoped @keyframes و @-webkit-region و هنوز در مرحله پیاده سازی هستند. همچنین، @font-face در حال حاضر نادیده گرفته می شود زیرا احتمال زیادی وجود دارد که مشخصات تغییر کند.

مایلیم همه علاقه‌مندان به این ویژگی را تشویق کنیم تا آن را امتحان کنند و از تجربیات خود به ما اطلاع دهند: خوب، بد و (شاید) باگ.