it-swarm.dev

الحد من نطاق المغلق الخارجي إلى عنصر معين فقط؟

أقوم بإنشاء محاكي محمول يسخر من ظهور ووظائف جهاز iPhone (والأجهزة الأخرى لاحقًا) في مستعرض ويب ، باستخدام جافا سكريبت و 100٪ و HTML5 و CSS ، مع محاكاة وظيفية بالكامل مع رمز جانب العميل فقط.

أثناء محاولة إنجاز هذه المهمة مع أقل قدر من التعديلات الضرورية لمشاريع التطبيق الأصلية التي سيتم استضافتها في جهاز المحاكاة ، أقوم بإدخال علامتي <script> و <link> في رأس الصفحة ، ثم تحميل html في شاشة <div>.

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

سؤالي هو: هل هناك أي طريقة للحد من "نطاق" ملف .css خارجي ليتم تطبيقه فقط على الكائنات داخل شاشة <div>؟ هل سيكون هناك أي فرق إذا بدلاً من أن أقوم بإدخاله في <head> من الصفحة ، فقد حقنه في عنصر <style> في شاشة <div>؟

61
SnareChops

UPDATEتم إسقاط الدعم لهذه الميزة. يرجى البحث عن خيارات أخرى

المشاركة الأصلية:

قد ترغب في إلقاء نظرة على أنماط النطاق ؛ راجع http://css-tricks.com/saving-the-day-with-scoped-css/ .

الفكرة الأساسية هي

<div>
    <style scoped>
        @import "scoped.css";
    </style>
</div>

ومع ذلك ، أنت على حافة النزيف هنا من حيث دعم المتصفح. انظر http://caniuse.com/style-scoped .

سيكون بديل واحد لاستخدام iframe.

37
user663031

كل ما عليك فعله هو لف كل شفرة css داخل محدد العنصر الأصل ، ونفترض أنها div بمعرف foo ، يمكنك القيام بما يلي:

div#foo{
//All your css
}

وتحويله كـ less إلى css ، فسيتم وضعه في قائمة المحددات الصحيحة. لاحظ أنك ستحتاج إلى العناية يدويًا بأشياء مثل استعلاماتmedia وما إلى ذلك.

26
Juan Cortés

أثناء كتابة هذا ، يتم إهمال <style scoped> بواسطة فريق Chrome. نتيجة لذلك جربت بعض الأساليب وأصدرت https://github.com/thgreasi/jquery.scopeLinkTags . ملاحظة: يجب عليك فقط استخدام هذا الأسلوب في حالة تعذر التحكم في ملف CSS الذي تم استيراده. إذا كنت تستطيع استخدام SASS/LESS/أي شيء لإعادة معالجة CSS مسبقًا ، فيجب أن تفضل ذلك.

2
Thodoris Greasidis

هناك طريقة بسيطة تتمثل في إضافة ما قبل الفئة قبل كل محدد في ملف css.

أجد سكريبت يمكن أن يفعل هذا:

https://github.com/ericf/grunt-css-selectors

1
Fancyoung