تضمين أنماط إضافية مع noscript

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

  •  03-07-2019
  •  | 
  •  

سؤال

لدي XHTML الصارمة صفحة غير مرئية div يتم التحكم فيها من قبل جافا سكريبت.Div تعيين شفافة وواضحة من قبل البرنامج النصي و تمرير الماوس الحدث إلى جعل div مبهمة على التحويم.

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

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

إد:

مع اختبار بسيط على خطأ التحقق من صحة من: نوع الوثيقة لا تسمح عنصر "نمط" هنا. هذا هو فارغ XHTML الصارمة الوثيقة مع نمط عنصر داخل noscript عنصر.على noscript داخل الجسم.

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

المحلول

من أجل التحقق من صحة هذه المسألة: noscript مسموح فقط في body العنصر ، style يسمح فقط في head.ولذلك ، فإن هذا الأخير لا يسمح في السابق.

على القضية العامة:فأنت تريد أن تجعل div عنصر مرئية بشكل افتراضي ، ثم إخفاء ذلك عن طريق CSS + javascript.هذا هو التحسين التدريجي' نموذج.لاحظت أنك تقول لك "لا أريد أن أفعل هذا بسبب وميض" ، ولكن لست متأكدا بالضبط ما يسبب هذا - احتمالات يمكنك إصلاحه لذا ربما يجب نشر أن في شكل سؤال.

نصائح أخرى

noscript في الرأس هو HTML5 صالحة.لم يكن صالح من قبل.لقد اختبرت ذلك, أنه يعمل في الوقت الحالي Firefox, Safari, Chrome, Opera and IE.

<!doctype html>
<html>
    <head>
        <noscript>
            <style>body{background:red}</style>
        </noscript>
    </head>
    <body>
        <p>is this red? it should <script>document.writeln("not");</script> be. <noscript>indeed.</noscript></p>
    </body>
</html>

استخدام script كتلة في head إضافة style عنصر مع document.write:

<head>
...
 <script type="text/javascript">
 //<![CDATA[
  document.write('<style type="text/css">.noscript{display:none}</style>');
 //]]>
 </script>
...
</head>

ملاحظة عن جوابي

كتبت هذا المنصب بعد أن أدرك أنه كان يرجع تاريخها من عام 2008

منذ كان لي مشكلة مماثلة ، ظننت استمرار الرد مع الإجابة الحالية.

بلدي الفعلية الإجابة

مثل بوبي قال جاك style الوسم هو مسموح في الجسم.أنا نفسي هل نفس الشيء كما كنت (يشوع) عن ذلك.ولكن جاك "التحسين التدريجي" جعلت لي دون غير مجردة الحل ولكن بعد ذلك أدركت أن الحل الذي لم أجد إجابات على هذا الموضوع.

كل شيء يعتمد على التصميم الخاص بك هيكل.

اقتراحي هو بوضوح استخدام شيء من هذا القبيل modernizr في بداية جدا من الرأس واستخدام بول الايرلندي HTML5Boilerplate التوصيات.

قصة قصيرة طويلة

  1. Html الوسم لديه class مع سمات no-js
  2. رئيس الوسم يتضمن الأولى modernizr جافا سكريبت الأولى
  3. CSS عنصر (.hide-me) مع display:none في مكانها الصحيح
  4. ثم .no-js .hide-me { display:block }

في التفاصيل

انظر بول الايرلندي HTML5boilerplate و التكيف مع XHTML إذا كنت تريد :)

1.Html لديه سمات الطبقة مع .no-js

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

نقلا عن html5boilerplate.com

2.رئيس الوسم يتضمن الأولى modernizr جافا سكريبت الأولى

Modernizr التنفيذ بناء html الصفات مع ما هو معتمد.

سيتم بناء ما يشبه هذا:

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en">

ملاحظة هذا هو جوجل كروم modernizr اختبارات.

الأول هو js ولكن إذا Modernizr لا تعمل (لا جافا سكريبت) في no-js سوف البقاء هناك.

3.CSS عنصر (.hide-me) مع display:none في مكانها الصحيح

...أنت تعرف الباقي :)

ما خطأ التحقق من صحة ؟ <noscript> ينبغي أن يسمح في XHTML لكنه مستوى الكتلة ، لذلك تأكد من انها ليست في <p>, <span>, الخ

التحديث بالنسبة 2016:

من w3school:

الاختلافات بين HTML 4.01 و HTML5

في HTML 4.01, <noscript> الوسم يمكن استخدامها فقط داخل <body> العنصر.

في HTML5 ، <noscript> الوسم يمكن استخدامها على حد سواء في الداخل <head> و <body>.

الاختلافات بين HTML و XHTML

في XHTML ، <noscript> الوسم غير معتمد.

الحل لوجود توسيع القوائم (قوائم ، الخ..)

لقد وضعت في رأس مثل هذا

<header>
    <noscript>
        <link rel="stylesheet" href="assets/css/x_no_script.css">
    </noscript>
</header>

في x_no_script.css أنا وضعت محددات أردت أن 

max-height: 9999px;
overflow: visible;

في هذه الطريقة ، يجب توسيع القوائم عندما جافا سكريبت هو تعطيل أو غير موجود.

في حالة XHTML يستخدم الخدعة هو استخدام اثنين من ملفات CSS.عالمي واحد واحد واحد js-واحد اللف عالمية جافا سكريبت تمكين المتصفحات.

نمط.css:

.hidden {
  visibility:hidden;
}

على غرار شبيبة.css:

.hidden {
  visibility:visible;
}

test.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  <title>Test page</title>
  <link href='css/style.css' rel='stylesheet' type='text/css' />
  <script type="text/javascript">
  //<![CDATA[
    //document.write("<link href='css/style-js.css' rel='styleSheet' type='text/css' />"); 
    //is not legal in XHTML, we do the long way:
    var l=document.createElementNS("http://www.w3.org/1999/xhtml","link");
    l.setAttribute("rel", "stylesheet");
    l.setAttribute("type", "text/css");
    l.setAttribute("href", "/css/style-js.css");
    document.getElementsByTagName("head")[0].appendChild(l);
  //]]>
  </script>
</head>
<body>
  <div class="hidden">
    <p>Only displayed at JavaScript enabled browsers</p>
  </div>
</body>
</html>

الفكرة الرئيسية من قبل tutorials.de.XHTML صحة المعلومة من قبل استل Weyl بلوق.createElementNS نصيحة قبل CodingForums.

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