CSS и пазл с видимостью - PullRequest
Новая
       2

CSS и пазл с видимостью

3 голосов
/ 27 января 2012

Я работаю на 100% Javascript-сайте, который использует класс 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>

[Позже: пример упрощен для ясности]

Это разрешимо?Спасибо.

Ответы [ 2 ]

2 голосов
/ 27 января 2012

Вместо того, чтобы скрывать тело: 

body { display: none; }

Можете ли вы сделать все в теле скрытым? 

body * { display: none; }

Затем переопределите это для noscript или для div внутри noscript, например, 

body noscript #requirements { display: block; }

Редактировать

Возвращаясь к этому после комментария Шакера и глядя на мою тестовую страницу с Firebug, стало очевидно, в чем проблема.

body * { display: none; } относится к всему внутри тела на любой глубине , поэтому даже если я правильно настрою отображение <noscript> правильно, содержимое внутри он все еще не отображается.

Решение состоит в том, чтобы нацелиться более конкретно, используя селектор child вместо селектора потомка .

Учитывая этот html, я ничего не вижу, когда включен javascript, но вижу содержимое блока <noscript>, в котором перечислены требования к моему сайту, когда javascript отключен. 

<!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, и, конечно, этот блок отображает только если JavaScript отключен.

1 голос
/ 27 января 2012

Вы правы, поскольку вы скрыли родительский элемент, независимо от того, какой стиль вы добавили к его дочерним элементам, вы не сможете увидеть его, пока не раскроете тело. Лучше всего было бы изменить его, чтобы вы не скрывали тело по умолчанию, а вместо этого добавили в свой первый тег сценария в примере простой 

document.body.className='specialbody';

Это добавит класс specialbody до того, как что-либо будет отображено, но только если javascript работает.

...