لغز رؤية CSS وnoscript

StackOverflow https://stackoverflow.com/questions/9027981

  •  14-11-2019
  •  | 
  •  

سؤال

أنا أعمل على موقع جافا سكريبت 100% يستخدم فئة CSS على body لإخفاء كل شيء صراحة (display:none)، ثم يقوم بتمكين الكتل حسب الحاجة (نعم غير عادي، لكن لا يمكنني تغيير البنية).

أرغب في عرض أ noscript رسالة إلى المستخدمين دون تمكين js، ولكننا نواجه لغز CSS. noscript يجب أن تكون موجودة داخل body.على عكس الكتل الأخرى الموجودة على الصفحة، فإن noscript لا يمكن إجبار العنصر على أن يصبح مرئيًا، بقدر ما أستطيع أن أقول.والغريب في الأمر أنني عندما أختار noscript باستخدام Webkit Inspector، فإنه "يدعي" أن عنصر noscript مرئي.ولكن بغض النظر عن ذلك، لا يظهر أي شيء على الشاشة مع تعطيل JS.

لقد أجريت حالتين اختباريتين - إحداهما تحتوي على noscript قياسي والأخرى تحتوي على div مخفي.وفي كلتا الحالتين، يظل العنصر المخفي مخفيًا مهما حدث.نظريتي هي أنه ببساطة ليس من الممكن عرض عنصر متداخل بشكل انتقائي داخل عنصر أصل مخفي (أي. noscript داخل body).

ها هي حالة الاختبار البسيطة الخاصة بي. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <style type="text/css" media="screen">
        body{
            display:none;
        }

        body noscript  {
          display:block;
          visibility:visible;
          color:black;
        }  
    </style>
</head>

<body>
    <p>Normal text</p>

    <noscript>
        <p>This is is noscript</p>
    </noscript>
</body>
</html>

[لاحقاً:مثال مبسط للتوضيح]

هل هذا قابل للحل؟شكرًا.

هل كانت مفيدة؟

المحلول

بدلاً من إخفاء الجسد:

body { display: none; }

يمكنك أن تفعل كل شيء في الجسم مخفي؟

body * { display: none; }

ثم قم بتجاوز ذلك بالنسبة إلى noscript - أو div داخل noscript، على سبيل المثال.

body noscript #requirements { display: block; }

يحرر

بإعادة النظر في هذا بعد تعليق shacker والنظر إلى صفحتي التجريبية مع Firebug، أصبح من الواضح ما هي المشكلة.

body * { display: none; } ينطبق على كل شئ داخل الجسم في أي عمق, ، لذلك حتى لو قمت بإجراء <noscript> عرض المحتويات بشكل صحيح داخل لا يزال لا يتم عرضه.

الحل هو الاستهداف بشكل أكثر تحديدًا باستخدام أ طفل المحدد بدلاً من أ تنازلي محدد.

بالنظر إلى HTML هذا، لا أرى شيئًا عند تمكين جافا سكريبت، لكني أرى محتويات ملف <noscript> كتلة، والتي تسرد متطلبات موقعي، عندما يتم تعطيل جافا سكريبت.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css" media="screen">
            body > * {
                display: none;
            }
            body > noscript {
                display: block;
            }
        </style>
    </head>

    <body>

        <p>A normal text block, within a &lt;p&gt;</p>

        <div>A standard &lt;div&gt; with only this text in it</div>

        <noscript>
            <div id="requirements">
                <p>
                This is my noscript div, that is, a &lt;div&gt;
                within the &lt;noscript&gt; tag.
                </p>
                <p>
                This site requires that javascript and cookies are enabled.
                </p>
            </div>
        </noscript>

    </body>
</html>

القاعدة ل body > * يخفي جميع أبناء الجسد المباشرين، وبالتالي هُم أحفاد أيضا، في حين body > noscript تكشف القاعدة عن محتوى كتلة noscript، وبالطبع يتم عرض هذه الكتلة فقط في حالة تعطيل جافا سكريبت.

نصائح أخرى

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

document.body.className='specialbody';

سيؤدي هذا إلى إضافة specialbody class قبل تقديم أي شيء، ولكن فقط إذا كان جافا سكريبت يعمل.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top