<div>
 ...
</div>
<style>
 .container { width: 200px; height: 200px; }
</style>

این ممکن است برای یک برنامه معمولی ماندن در خانه کاملاً مناسب باشد، اما برای یک برنامه شخص ثالث، کاملاً خیر است. دلیل؟ چنین نام کلاس عمومی شانس خوبی دارد که قبلاً توسط والدین استفاده شود page. اگر این قانون سبک را معرفی کنید، ممکن است یک قانون سبک موجود را که توسط ناشر وضع شده لغو کنید و طرح‌بندی سایت او را خراب کنید. یا، روی از طرف دیگر، قانون آنها ممکن است قانون شما را لغو کند و اندازه ویجت شما را ناخواسته تغییر دهد.

راه حل؟ پیشوند همه نام‌های کلاس (و سایر ویژگی‌ها) با یک شناسه منحصر به فرد برای برنامه شما – فضای نام. در مورد ویجت Stork، نشانه گذاری قبلی باید به شکل زیر اصلاح شود:

<div>
 ...
</div>
<style>
 .stork-container { width: 200px; height: 200px }
</style>

ایده این است که کد جاوا اسکریپت خود را در فضای نام قرار دهید تا اشیاء جهانی را که با کد در حال اجرا تضاد دارند، اعلام نکنید. روی والدین page. به هر قطعه HTML که در آن وارد می کنید گسترش می یابد page: شناسه ها، کلاس ها، ویژگی های data-*، نام فرم ها و غیره روی.

فضای نام HTML و CSS برای هر برنامه شخص ثالثی که مستقیماً به ناشر ارائه می شود ضروری است. page. این فقط برای جلوگیری از قوانین متناقض CSS ضروری نیست. این نیز قابل تصور است که پدر و مادر page دارای جاوا اسکریپت است که از DOM برای عناصری که ویژگی های شناسایی آنها ممکن است با شما مطابقت داشته باشد پرس و جو می کند. در تعیین فاصله نام هر چیزی که قرار می دهید سختگیر باشید روی DOM.

ویژگی CSS

توجه به این نکته مهم است که اگرچه مفید است، اما فاصله‌گذاری نام در HTML و CSS شما فقط از مواردی جلوگیری می‌کند که ناشر از سبک‌ها یا جستارهایی استفاده می‌کند که به ویژگی‌هایی با همان نام شما ارجاع می‌دهند. متأسفانه، ویجت شما همچنان می‌تواند با سبک‌های تعریف‌شده توسط والدین تضاد داشته باشد page، حتی اگر CSS آنها از شناسه ها، نام کلاس ها و ویژگی هایی استفاده کند که مستقیماً به عناصر شما ارجاع نمی دهند. این به این دلیل است که برخی از قوانین CSS توسط مرورگر سنگین تر می شوند و می توانند بر قوانین به ظاهر نامرتبط که ممکن است تعریف کنید اولویت داشته باشند. این پدیده به عنوان ویژگی CSS نامیده می شود و قبل از اینکه بتوانید عناصر را به طور ایمن ارائه دهید، باید آن را درک کنید روی مال ناشر page.

برگردیم به container مثال از بخش قبل روی فضاهای نام فرض کنید HTML ناشر دارای یک DIV سطح بالا است که تمام محتوای آنها را با یک شناسه از page:

<div id="page">
 ... <!-- Publisher content -->
 <div>
 ... <!-- Stork content -->
 </div>
</div>

علاوه بر این، بیایید بگوییم page دارای CSS زیر است، که در آن قانون اول توسط ناشر تعریف شده است، و قانون دوم، هدف قرار دادن stork-container، توسط اسکریپت شخص ثالث شما اضافه شده است:

/* Publisher */
#page div {
 background-color: green;
}
/* Camera Stork */
.stork-container {
 background-color: blue;
}

حالا چه رنگی خواهد شد .stork-container دارند؟ پاسخ ممکن است شما را شوکه و وحشت زده کند: سبز. در این مثال ساده، قانون ناشر (#page div) بر قانون کلاس برنامه شخص ثالث شما اولویت دارد (stork-.container). این به این دلیل اتفاق می‌افتد که مرورگر قوانین حاوی شناسه‌های بالاتر از آنهایی را که کلاس‌ها یا ویژگی‌ها را هدف قرار می‌دهند، وزن می‌کند.

اولویت های قانون CSS

مشخصات W3C CSS نشان می‌دهد که چگونه مرورگرها به منظور اولویت‌بندی انواع قوانین مختلف هستند. در اینجا فهرستی از انواع این قوانین وجود دارد که از بالاترین اولویت به کمترین مرتب شده اند:

1. سبک های درون خطی (سبک = “…”)
2. شناسنامه ها
3. کلاس ها، ویژگی ها و شبه کلاس ها (:focus، :hover)
4. عناصر (div، span و غیره روی) و شبه عناصر (:before, :after)

طبق این نمودار، سبک های درون خطی بالاتر از همه انواع قوانین بعدی سنجیده می شوند: شناسه ها، کلاس ها و عناصر. این به طور منطقی در پایین لیست ادامه می یابد، با شناسه هایی که اولویت بیشتری نسبت به کلاس ها و عناصر دارند و غیره روی. یک استثنا در این لیست وجود دارد: ویژگی های برچسب گذاری شده با کلمه کلیدی !important بالاترین اولویت را دارند. اما توجه داشته باشید که کلمه کلیدی !important بر یک ویژگی منفرد در یک قانون تأثیر می گذارد، نه کل قانون.

چه اتفاقی می‌افتد وقتی چندین قانون CSS با وزن یکسان داشته باشید، که هر کدام می‌توانند بر یک عنصر تأثیر بگذارند؟ بیایید به یک مثال نگاه کنیم:

<div>
 <span class="stork-msg">Eat your vegetables!</span>
</div>
<style>
 .stork-container { background-color: blue; }
 .stork-container span { background-color: red; }
 .stork-container .stork-msg { background-color: yellow; }
</style>

به نظر شما رنگ دهانه چیست؟ پاسخ دوباره ممکن است تعجب آور باشد: زرد. اگرچه این قوانین اساساً مبتنی بر کلاس هستند، قانون دوم (storkcontainer span) خاص تر از قانون اول و قانون سوم (.stork-) در نظر گرفته می شود.container stork-msg) خاص تر از دومی است. این چطوری کار میکنه؟

سبک های درون خطی پادشاه هستند

از نظر ویژگی CSS، یعنی. اگر از قبل در این فصل به یاد داشته باشید، اشاره کردیم که سبک های درون خطی این مزیت را دارند که به ندرت با والدین تضاد دارند. page. اکنون واضح است که چرا: آنها بر هر نوع دیگر از قوانین CSS معمولی اولویت دارند (به استثنای آنهایی که کلمه کلیدی مهم ! را دارند). اگر در حال نوشتن یک ویجت بسیار ساده هستید، ممکن است ایده بدی نباشد که از سبک های درون خطی استفاده کنید. شما از اکثر تضادهای اختصاصی CSS جلوگیری خواهید کرد.

مرورگر از یک سیستم امتیازدهی ساده برای تعیین اینکه کدام قانون اولویت دارد استفاده می کند. برای یک قانون معین، هر انتخابگر که آن قانون را می سازد ارزش مشخصی دارد. این مقادیر برای ایجاد یک امتیاز ویژگی جمع می شوند. وقتی چندین قانون بر یک عنصر تأثیر می‌گذارد، مرورگر امتیاز ویژه هر قانون را مقایسه می‌کند و قانون با بالاترین امتیاز اولویت دارد. در مورد تساوی، قانونی که آخرین بار تعریف شده بود برنده است. ویژگی های سبک درون خطی: 1000; شناسه: 100; کلاس ها، شبه کلاس ها و ویژگی ها: 10، عناصر و شبه عناصر: 1.

بنابراین، با نگاهی به مثال قبلی خود، به آن قوانین CSS امتیازهای زیر اختصاص داده شده است و قانون دارای بالاترین امتیاز توسط مرورگر در اولویت قرار می گیرد: به سرعت متوجه خواهید شد که این اعداد معمولی نیستند. یک امتیاز ویژگی در واقع یک تاپلی از شکل (a، b، c، d) است که a با ارزش تر از b، b ارزشمندتر از c، و غیره است. روی. این بدان معنی است که یک سبک ایجاد شده توسط یک ویژگی سبک درون خطی (1، 0، 0، 0) دارای ویژگی بالاتری نسبت به یک قانون با صد انتخابگر ID (0، 100، 0، 0) است.

• .لک لک-container (0,0,1,0—انتخابگر یک کلاس)
• .لک لک-container دهانه (0،0،1،1- انتخابگر یک کلاس، انتخابگر یک عنصر)
• .لک لک-container stork-msg (0،0،2،0—دو انتخابگر کلاس)

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

تعیین بیش از حد CSS

اولین و ساده ترین روش برای نوشتن CSS که در تضاد با ناشر نیست page این است که قوانین خود را بیش از حد مشخص کنید. این به معنای اعلام انتخابگرهای اضافی برای افزایش ویژگی قوانین شما است، به طوری که وقتی مرورگر قوانین شما را با قوانین والدین مقایسه می کند. page، آنها احتمالاً امتیاز بیشتری کسب می کنند و در اولویت قرار می گیرند.

بیایید در عمل به این موضوع نگاه کنیم. این مثال اصلاح شده از ویجت Stork را در نظر بگیرید container، در حال حاضر ورزش دو container عناصر، هر کدام با یک شناسه منحصر به فرد:

<div id="stork-main">
 <div id="stork-container">
 <h3>Mikon E90 Digital SLR</h3>
 <img src="https://www.webdesignerdepot.com/2013/04/defensive-html-and-css/http://camerastork.com/img/products/1337-small.png"/>
 <p>$599</p>
 <p>4.3/5.0 • 176 Reviews</p>
 </div>
</div>

CSS همراه برای این HTML می تواند به شکل زیر باشد:

#stork-main #stork-container { ... }
#stork-main #stork-container .stork-product { ... }
#stork-main #stork-container .stork-price { ... }

با مشخص کردن اضافی هر دو container شناسه‌ها به‌عنوان انتخاب‌کننده‌های والد همه قوانین CSS شما، عملاً به هر یک از قوانین CSS خود حداقل امتیاز ویژه (۰،۲،۰،۰) را می‌دهید. پس از آن، # عمومی ناشرpage قانون قبلی دیگر با ویجت شما در تضاد نیست، زیرا فقط از یک شناسه استفاده می کند. قوانین صرفاً مبتنی بر کلاس یا عنصر نیز تضاد ندارند، زیرا آنها یک کلاس وزنی کامل CSS زیر ID هستند. حتی اگر برای اهداف انتخاب، مشخص کردن شناسه دوم برای قوانین شما کاملا غیر ضروری است، در اینجا به عنوان یک وسیله موثر برای افزایش ویژگی کار می کند.

سلامت عقل خود را با یک پیش پردازنده CSS حفظ کنید

نوشتن CSS بیش از حد مشخص شده می تواند یک مشکل واقعی باشد: شما باید دائماً همان شناسه ها را بارها و بارها برای هر یک از قوانین CSS خود بازنویسی کنید. شما می توانید این مشکل را با استفاده از یک پیش پردازنده CSS، که زبان CSS را با ویژگی های اضافی مانند توانایی اعلام سلسله مراتب قوانین تو در تو گسترش می دهد، برطرف کنید. به عنوان مثال، با استفاده از پیش پردازنده LESS CSS، می توانید مثال قبلی را به این صورت بنویسید:

#stork-main {
 #stork-container {
 .stork-product { ... }
 .stork-price { ... }
 }
}

تعدادی از پیش پردازنده های محبوب CSS امروزه در دسترس هستند که همه آنها دارای مجموعه ویژگی های متفاوتی هستند. از جمله محبوب ترین ها هستند کمتر، ساس، و قلم.

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

اما این یک سناریوی بعید است، به خصوص که شما به طور اضافی در هر یک از قوانین دو شناسه را مشخص کرده اید. شما می توانید به طور متناوب از یکی استفاده کنید، اما این البته آسیب پذیرتر خواهد بود. واقعیت این است که اکثر ناشران از قوانین عادلانه CSS استفاده می کنند و تعیین بیش از حد قوانین شما مانند این با اکثر آنها سازگار خواهد بود.

تعیین بیش از حد CSS با ابزارهای کیفیت کد ترکیب نمی شود

اگر به این گونه CSS خود را بیش از حد مشخص کنید، ممکن است یک دشمن بعید پیدا کنید: ابزارهایی که کیفیت کد CSS شما را ارزیابی می کنند، مانند CSS Lint، Google Page Speed ​​و YSlow یاهو. این ابزارها نشان می‌دهند که انتخابگرهای CSS اضافی ایجاد می‌کنید و به شما توصیه می‌کنند که برای کاهش اندازه فایل و بهبود عملکرد CSS مرورگرها، چنین انتخاب‌کننده‌هایی را حذف کنید. متأسفانه، این ابزارها با در نظر گرفتن اسکریپت های شخص ثالث برنامه ریزی نشده اند و سودمندی بیش از حد CSS را ارزیابی نمی کنند. مزایای تعیین بیش از حد برای برنامه های شخص ثالث بیشتر از اندازه فایل اضافی و عملکرد ناچیز است.

سوء استفاده از !مهم

اگر احساس می کنید که تعیین بیش از حد CSS با شناسه یا انتخابگرهای کلاس اضافی به اندازه کافی کار نمی کند، می توانید گزینه هسته ای را بشکنید: کلمه کلیدی مهم! ویژگی‌های درون یک قانون CSS که کلیدواژه !مهم را به کار می‌برند، بالاتر از همه، حتی بالاتر از سبک‌های درون خطی، اولویت دارند. این به این دلیل است که کلمه کلیدی !important برای ارائه یک روش مطمئن به کاربران مرورگر برای لغو سبک های “نویسنده” (ناشر) در مورد افزونه های مرورگر یا سبک های خاص سایت طراحی شده است. با استفاده از آن می توانید از !important سوء استفاده کنید روی همه ویژگی های CSS شما، به طور موثر آنها را بر همه قوانین دیگر اولویت می دهد.

در اینجا روش استفاده از کلمه کلیدی مهم! روی یک قانون CSS واحد:

.stork-price {
 font-size: 11px !important;
 color: #888 !important;
 text-decoration: none !important;
 display: block !important;
}

از آنجایی که برای هر ویژگی است، کلمه کلیدی !important باید به این صورت تکرار شود، که می تواند به یک صفحه سبک طولانی و پیچیده تبدیل شود. اما در ازای آن، مجموعه‌ای از شیوه‌نامه‌های جامد دریافت می‌کنید که احتمال بازنشانی آنها توسط ناشر بسیار کم است. page.

هنوز هم می توان تصور کرد که ناشر بتواند به نوبه خود از !important برای هدف قرار دادن عناصر شما و تنظیم سبک های خود استفاده کند، در این مرحله آنها احتمالاً عمداً عناصر شما را برای سفارشی سازی هدف قرار می دهند. از یک طرف، اگر سعی می کنید ظاهر و احساسی ثابت داشته باشید، می تواند ناامید کننده باشد. اما، اگر تصمیم گرفته اید به ناشران اجازه دهید ویجت شما را سفارشی کنند، احتمالاً این رفتار مطلوب است.

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

اما اگر به اشتراک گذاری DOM با ناشر چیزی است که باعث این همه غم و اندوه می شود، آیا ممکن است ویجت خود را از DOM خارج کنید؟ چرا، بله—بله می توانید.

خلاصه

برای یک برنامه جاوا اسکریپت شخص ثالث، تزریق HTML و CSS به ناشر page نسبت به زمانی که نشانه گذاری را به یک محیط “ایمن” اضافه می کنید، به مراقبت بیشتری نیاز دارد. باید مطمئن شوید که هنگام خروجی HTML به page، شما سرعت را کاهش نمی دهید page با عملیات مسدود کردن همچنین باید در نظر داشته باشید که اسکریپت شما ممکن است چندین بار گنجانده شود روی همان page، و باید چندین نمونه را به خوبی ارائه کند. علاوه بر این، شما باید یک روش بهینه برای تزریق CSS به ناشر انتخاب کنید page-چه با داخل کردن تمام سبک‌های خود، الحاق عناصر پیوند، یا جاسازی قوانین CSS در جاوا اسکریپت.

اما فقط دریافت HTML و CSS روی را page کافی نیست باید بدانید که عناصری که به DOM معرفی می‌کنید می‌توانند با والد تضاد داشته باشند page. همچنین باید در نظر بگیرید که چگونه سبک های شما ممکن است با سبک های موجود تعریف شده توسط ناشر تضاد داشته باشد. می توانید از تعدادی تکنیک برای کاهش تاثیر سبک های والدین استفاده کنید روی ویجت شما: با تعیین بیش از حد قوانین CSS خود یا ارائه محتوای خود در پشت یک iframe، خواه یک iframe بدون src باشد یا حاوی یک سند HTML خارجی.

هنگام تولید CSS و HTML برای اشخاص ثالث از چه تکنیک هایی استفاده می کنید؟ آیا هرگز به عقب بر می گردی روی !مهم؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر دفاعی از طریق Shutterstock.