دفاعي HTML و CSS

...

قد يكون هذا مناسبًا تمامًا لتطبيق منتظم للإقامة في المنزل ، ولكن بالنسبة إلى تطبيق تابع لجهة خارجية ، فهو لا ينطبق تمامًا. السبب؟ ويحظى اسم الفئة العام هذا بفرصة جيدة لاستخدامه بالفعل بواسطة الصفحة الرئيسية. إذا قمت بتقديم قاعدة النمط هذه ، فقد تلغي قاعدة نمط موجودة وضعها الناشر وتفسد تخطيط موقعها. أو ، على الجانب الآخر ، قد تؤدي القاعدة إلى إلغاء حسابك وتغيير حجم تطبيقك دون قصد.

الحل؟ بدء جميع أسماء الفصول الدراسية (والسمات الأخرى) باستخدام معرف فريد للتطبيق - مساحة اسم. في حالة عنصر واجهة مستخدم اللقلق ، يجب تعديل العلامة السابقة لتبدو هكذا:

...

تتمثل الفكرة في أنك تسمي شفرة جافا سكريبت الخاصة بك بحيث لا تعلن عن كائنات عمومية تتعارض مع التعليمات البرمجية التي تعمل على الصفحة الرئيسية. ويمتد إلى كل جزء من HTML يتم إدراجه في الصفحة: المعرفات ، والفئات ، والبيانات ، * والسمات ، وأسماء النماذج ، وما إلى ذلك.

يعد Namespacing HTML و CSS أمرًا ضروريًا لأي تطبيق تابع لجهة خارجية يقدم مباشرة إلى صفحة الناشر. هذا ليس ضروريًا فقط لمنع قواعد CSS المتعارضة ؛ كما أنه من المتصور أيضًا أن الصفحة الرئيسية بها جافا سكريبت تستعلم عن DOM للعناصر التي قد تتطابق خصائصها التعريفية الخاصة بها. كن صارمًا في تحديد كل شيء تضعه على DOM.

خصوصية CSS

من المهم ملاحظة أنه على الرغم من كونه مفيدًا ، إلا أن وضع الأسماء في HTML و CSS فقط يمنع الحالات التي يستخدم فيها الناشر الأنماط أو الاستعلامات التي تشير إلى السمات التي تحمل الاسم نفسه الذي تستخدمه. للأسف ، لا يزال من الممكن أن تتعارض عنصر واجهة المستخدم مع الأنماط المحددة بواسطة الصفحة الرئيسية ، حتى إذا كانت CSS تستخدم معرفات وأسماء فئات وسمات لا ترتبط مباشرة بعناصرك. ويرجع ذلك إلى أن بعض قواعد CSS تقاس بثقل أكبر من جانب المتصفح ، ويمكن أن تكون لها الأسبقية على القواعد التي تبدو غير ذات صلة والتي قد تحددها. يُشار إلى هذه الظاهرة على أنها خصوصية CSS ، وستحتاج إلى فهمها قبل أن تتمكن من عرض العناصر في صفحة الناشر بأمان.

دعنا نرجع إلى مثال الحاوية من القسم السابق في مساحات الأسماء. لنفترض أن HTML التابع للناشر لديه DIV من المستوى الأعلى يلتف على كل المحتوى الخاص به ، مع معرف الصفحة:

... 
  ... 

بالإضافة إلى ذلك ، لنفترض أن الصفحة تحتوي على CSS التالي ، حيث يتم تعريف القاعدة الأولى من قِبل الناشر ، وتتم إضافة القاعدة الثانية ، التي تستهدف حاوية اللقلق ، بواسطة البرنامج النصي لجهة خارجية:

/* 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)

وفقًا لهذا المخطط ، يتم تقييم الأنماط المضمّنة فوق جميع أنواع القواعد التالية: المعرفات والفئات والعناصر. ويستمر هذا الأمر في أسفل القائمة منطقيًا ، مع إعطاء الأولوية للهويات أعلى من الطبقات والعناصر ، وما إلى ذلك. هناك استثناء واحد لهذه القائمة: الخصائص المميزة بعلامة! الكلمة الرئيسية المهمة تأخذ الأولوية القصوى. لكن لاحظ أن الكلمة الرئيسية المهمة تؤثر على خاصية واحدة داخل القاعدة ، وليس القاعدة بأكملها.

ماذا يحدث عندما يكون لديك عدة قواعد CSS ذات نفس الوزن ، كل منها يمكن أن يؤثر على نفس العنصر؟ دعونا نلقي نظرة على مثال:

Eat your vegetables!

ماذا تفترض أن لون البعد هو؟ الجواب مرة أخرى قد يكون من المستغرب: الأصفر. على الرغم من أن جميع هذه القواعد تستند أساسًا إلى الطبقة ، فإن القاعدة الثانية (.storkcontainer span) تعتبر أكثر تحديدًا من القاعدة الأولى ، والقاعدة الثالثة (.stork-container .stork-msg) أكثر تحديدًا من القاعدة الثانية. كيف يعمل هذا؟

الأنماط المضمنة هي الملك

من حيث خصوصية CSS ، وهذا هو. إذا كنت تتذكر من هذا الفصل في وقت سابق ، فقد ذكرنا أن الأنماط المضمنة لها فائدة نادرا ما تتعارض مع الصفحة الرئيسية. الآن من الواضح لماذا: يتم تحديد أولوياتها على كل نوع آخر من قواعد CSS العادية (باستثناء تلك التي تحتوي على الكلمة الرئيسية المهمة!). إذا كنت تكتب عنصر واجهة مستخدم بسيط بشكل خاص ، فقد لا تكون فكرة استخدام الأنماط المضمنة فكرةً سيئة. ستتجنب معظم تعارضات خصوصية CSS.

يستخدم المتصفح نظام تسجيل بسيط لتحديد القاعدة التي تأخذ الأولوية. لقاعدة معينة ، يستحق كل محدّد تأليف هذه القاعدة قيمة معينة. يتم جمع هذه القيم لإنشاء درجة خصوصية. عندما تؤثر قواعد متعددة على نفس العنصر ، فإن المتصفح يقارن درجة خصوصية كل قاعدة ، والقاعدة ذات أعلى درجة تأخذ الأولوية. في حالة التعادل ، فإن القاعدة التي تم تحديدها في الماضي فازت. سمات النمط المضمن: 1000؛ المعرفات: 100 ؛ الطبقات ، الطبقات الزائفة والسمات: 10 ، عناصر وعناصر زائفة: 1.

إذا نظرنا إلى مثالنا السابق ، فإن قواعد CSS هذه قد تم تعيينها للنقاط التالية ، مع إعطاء الأولوية لأعلى قاعدة درجات من قبل المتصفح: ستلاحظ بسرعة أن هذه الأرقام ليست عادية. إن درجة التحديد هي في الواقع مجموعة من النموذج (أ ، ب ، ج ، د) ، مع كونها أكثر قيمة من ب ، ب أكثر قيمة من ج ، وهكذا. وهذا يعني أن النمط الذي يحدث بسبب سمة نمط مضمنة واحدة (1 ، 0 ، 0 ، 0) له خصوصية أعلى من القاعدة التي تحتوي على مائة من محددات المعرّف (0 ، 100 ، 0 ، 0).

• .stork-container (0،0،1،0 - محدد فئة واحد)
• .امتداد حاوية الحاوية (0،0،1،1 - محدد فئة واحد ، محدد عنصر واحد)
• .stork-container .stork-msg (0،0،2،0 - اثنان من محددات الصف)

في هذه المرحلة ، يجب أن يكون لديك مؤشر جيد حول كيفية عمل خصوصية CSS ، ولماذا يحدد المتصفح بعض القواعد على الآخرين. بعد ذلك ، ستستخدم هذه المعرفة لاستخدامها ، حيث نستكشف بعض الطرق لكتابة CSS التي تقف في مواجهة أنماط ناشر متضاربة.

overspecifying CSS

الأسلوب الأول والأبسط لكتابة CSS الذي لا يتعارض مع صفحة الناشر هو الإفراط في تحديد القواعد الخاصة بك. وهذا يعني الإعلان عن محددات إضافية لتعزيز خصوصية قواعدك ، بحيث عندما يقارن المتصفح بين القواعد الخاصة بك ومقارنتها بتلك الواردة من الصفحة الرئيسية ، فمن المرجح أن يسجل درجات أعلى ويحدد أولوياته.

دعونا ننظر في هذا في الممارسة. ضع في اعتبارك هذا المثال الذي تمت مراجعته لحاوية عنصر واجهة المستخدم "اللقلق" ، والذي أصبح الآن يشتمل على عنصرين حاويتين ، يحتوي كل منهما على معرف فريد:

Mikon E90 Digital SLR
  "/> 
$ 599 
  4.3 / 5.0 • 176 تقييمًا 

يمكن أن تبدو CSS المصاحبة لهذا HTML كما يلي:

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

من خلال تحديد كلٍّ من معرّفات الحاوية بشكل متكرر كمحدد رئيسي لجميع قواعد CSS ، فإنك بذلك تعطي فعليًا لكل من قواعد CSS لديك أدنى درجة من الدقة (0،2،0،0). بعد ذلك ، لن تتعارض القاعدة العامة للصفحة رقم # الناشر من قبل مع عنصر واجهة المستخدم ، نظرًا لأنها تستخدم معرّفًا واحدًا فقط. ولن تتعارض أي قواعد بحتة أو عناصر قائمة على العناصر ، لأن هذه هي فئة وزن CSS بأكملها أسفل ID s. على الرغم من ذلك ، ولأغراض الاختيار ، فإنه من غير الضروري تمامًا تحديد معرف ثانٍ لقواعدك ، حيث يعمل هنا كجهاز فعال لتعزيز الخصوصية.

الحفاظ على السلامة العقلية الخاصة بك مع المعالج المسبق CSS

يمكن للكتابة فوق CSS المغالية أن تكون عملية سحب حقيقية: يجب عليك إعادة كتابة نفس المعرفات مرارا وتكرارا لكل واحد من قواعد CSS الخاصة بك. يمكنك علاج ذلك باستخدام المعالج المسبق لـ CSS ، والذي يعمل على توسعة لغة CSS بميزات إضافية مثل القدرة على إعلان التسلسل الهرمي المتداخل للقواعد. على سبيل المثال ، باستخدام المعالج المسبق لـ LESS CSS ، يمكنك كتابة المثال السابق كالتالي:

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

يتوفر عدد من معالجات pre-معالجات CSS الشائعة اليوم ، وجميعها تحتوي على مجموعات ميزات مختلفة. من بين الاكثر شعبية هي أقل،ساس، و القلم.

على الجانب الآخر ، يتطلب هذا المثال استخدام عنصر واجهة المستخدم للحاويات ذات المستوى الأعلى مع المعرفات ، والتي لن تكون عملية للأدوات التي يمكن عرضها عدة مرات على نفس الصفحة. بالإضافة إلى ذلك ، فإنه لا يزال غير مضاد للرصاص: يمكن أن يتبع الناشر العميل المحتمل ويزيد من قواعد CSS الخاصة به ، مما يؤدي إلى نفس المشكلة التي واجهتك من قبل.

لكن هذا سيناريو غير محتمل ، خاصةً وأنك قمت بتعريف معرفين في كل من القواعد. يمكنك بدلاً من ذلك استخدام واحدة ، ولكن هذا بالطبع سيكون أكثر عرضة. والحقيقة هي أن معظم الناشرين يستخدمون قواعد CSS الفعالة ، وأن القواعد المفرطة في مثل هذه القواعد ستكون متوافقة مع معظمها.

overpecifying CSS لا يمتزج مع أدوات جودة الكود

إذا كنت تأخذ زيادة في حجم CSS على هذا النحو ، فقد تجد عدوًا غير محتمل: أدوات تُقيّم جودة شفرة CSS ، مثل CSS Lint ، و Google Page Speed ​​، و YSlow من Yahoo. ستشير هذه الأدوات إلى أنك تقوم بإنشاء محددات CSS مكررة ، وستنصح بإزالة هذه المحددات لتقليل حجم الملف وتحسين أداء CSS للمتصفح. للأسف ، لا تتم برمجة هذه الأدوات مع وضع نصوص برمجية لجهات خارجية ، ولا تقيم تقييمًا لفائدتها التي تزيد عن حجم CSS. سوف تفوق فوائد تجاوز الطلب لتطبيقات الطرف الثالث حجم الملف الإضافي والأداء الضئيل.

إساءة!

إذا كنت تشعر أن تجاوز حجم CSS لديك بمعرف إضافي أو محددات الصف لا يفي بالغرض ، يمكنك الخروج عن الخيار النووي: الكلمة الرئيسية المهمة. يتم إعطاء الأولوية للمواقع ضمن قاعدة CSS التي ترتدي الكلمة الأساسية المهمة! أعلى من كل الكل ، حتى فوق الأنماط المضمنة. هذا لأن الكلمة الرئيسية المهمة صُممت لمنح مستعملي المتصفح طريقة مؤكدة لتجاوز أنماط "المؤلف" (الناشر) ، في حالة المكوّنات الإضافية للمتصفح أو الأنماط الخاصة بالموقع. يمكنك إساءة الاستخدام! مهم من خلال استخدامه على جميع خصائص CSS الخاصة بك ، وتحديد أولوياتها بشكل فعال على جميع القواعد الأخرى.

في ما يلي كيفية استخدام الكلمة الرئيسية المهمة في قاعدة CSS واحدة:

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

نظرًا لأنه لكل خاصية ، يجب تكرار الكلمة الرئيسية المهمة مثل هذه ، والتي يمكن أن تتحول إلى ورقة أنماط طويلة ومعقدة. ولكن ، في المقابل ، يمكنك الحصول على مجموعة صلبة من أوراق الأنماط التي من غير المرجح أن يتم إعادة تعيينها من خلال صفحة الناشر.

لا يزال من الممكن تصور استخدام الناشر له! من المهم استهداف عناصرك وتعيين الأنماط الخاصة بها ، وعند هذه النقطة ، من المحتمل أن تستهدف عن قصد عناصرك للتخصيص. من ناحية ، قد يكون ذلك محبطًا إذا كنت تحاول الحفاظ على مظهر وشكل متناسقين. ولكن ، إذا قررت السماح للناشرين بتخصيص تطبيقك ، فمن المحتمل أن يكون هذا هو السلوك المرغوب.

يجب أن يكون هناك شيء واحد واضح: مشاركة DOM مع الناشر يمكن أن تجعل من الصعب بشكل خاص تقديم أداة ذات نمط ثابت. على الرغم من أنه يمكنك اتخاذ خطوات للإفراط في تعيين قواعد CSS الخاصة بك لتقليل احتمال حدوث تعارض ، فمن الممكن دائمًا للناشر أن يستهدف عناصرك بقواعدها ، إما عن طريق الخطأ أو عن قصد.

ولكن إذا كانت مشاركة DOM مع الناشر هي ما يسبب الكثير من الحزن ، فهل من الممكن أن تجعل القطعة الخاصة بك خارج DOM؟ لماذا ، نعم ، نعم يمكنك ذلك.

ملخص

بالنسبة إلى تطبيق جافا سكريبت تابع لجهة خارجية ، يتطلب إدراج HTML و CSS في صفحة الناشر رعاية أكثر مما لو كنت تضيف ترميزًا إلى بيئة "آمنة". يجب أن تتأكد من أنه عند إخراج HTML إلى الصفحة ، لن تقوم بإبطاء الصفحة مع عملية حظر. يجب أيضًا مراعاة تضمين النص البرمجي عدة مرات في الصفحة نفسها ، ويجب أن يعرض مثيلات متعددة بأمان. بالإضافة إلى ذلك ، يجب عليك اختيار الطريقة المثلى لحقن CSS في صفحة الناشر - إما عن طريق تحديد جميع أنماطك أو إلحاق عناصر الرابط أو تضمين قواعد CSS في جافا سكريبت.

ولكن مجرد الحصول على HTML و CSS على الصفحة ليس كافيًا. عليك أن تتعرف على أن العناصر التي تقدمها إلى DOM يمكن أن تتعارض مع الصفحة الرئيسية. يجب عليك أيضًا مراعاة كيف تتعارض أنماطك مع الأنماط الموجودة التي يحددها الناشر. يمكنك استخدام عدد من التقنيات لتقليل تأثير الأنماط الرئيسية على الأداة الخاصة بك: عن طريق الإفراط في تحديد قواعد CSS الخاصة بك أو عرض المحتوى الخاص بك خلف إطار iframe ، سواء كان iframe أقل من src أو واحد يحتوي على مستند HTML خارجي.

ما هي التقنيات التي تستخدمها عند إنتاج CSS و HTML لأطراف ثالثة؟ هل سبق لك أن ارتدت من جديد؟ اسمحوا لنا أن نعرف في التعليقات.

صورة مميزة / صورة مصغرة ، صورة دفاعية عبر Shutterstock.