Реализация ненавязчивого Javascript - PullRequest
Новая
       15

Реализация ненавязчивого Javascript

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

Я переделываю старый сайт и стараюсь сделать Javascript / jQuery максимально ненавязчивым. Я ищу несколько советов по одной части проекта: UJ требует, чтобы, если Javascript отключен в браузере, все содержимое сайта все еще было доступно пользователю. Одна часть моего сайта имеет большой список товаров. Каждый элемент в списке имеет свое собственное описание, которое использует отображение CSS: ни один, чтобы скрыть его по умолчанию. Нажатие на элемент переключает видимость описания с помощью jQuery .toggle ():, так что человек, неспособный использовать Javascript (по какой-либо причине), никогда его не увидит. Если я использую Javascript / jQuery, а не CSS, чтобы скрыть описания, они все на мгновение видны при загрузке страницы, чего я хочу избежать. Так какое же самое лучшее решение?

Ответы [ 3 ]

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

в основном вы можете вставить класс "no-js" в ваш элемент html, например, 

<html class="no-js" lang="en">

и если на клиентском компьютере включен javascript, вы скоро удалите этот класс (используя modernizr или более простой фрагмент кода, такой как 

<head>
    <script>
    (function(d) { 
         d.className = d.className.replace(/(^|\b)no-js(\b|$)/, 'js');
    }(document.documentElement));
    </script>
    ...
</head>

таким образом вы можете избежать FOUC (флэш-содержимого неустановленного содержимого) , просто используя класс .no-js и .js в правилах css следующим образом: 

.yourlistitems { 
   display: block; 
}
.js .yourlistitems { 
   display: none; 
}

этот подход также используется H5BP
Обратите внимание, что на самом деле вам не нужно добавлять класс .no-js к каждому правилу: думая с точки зрения «прогрессивного улучшения» и «ненавязчивого javascript», вы сначала создадите код и стиль для страницы, которая также работает без javascript, а затем добавите функциональность (и специфичность стиля, добавив класс .js)

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

Задумывались ли вы об использовании метода, подобного методу, реализованному в Modernizr?

Классы CSS добавляются в тег HTML с помощью сценария, который приводит к совпадению различных селекторов CSS. 

<html>
<head>
    <!--
    Putting this script in the head adds the "js" 
    class to the html element before the page loads.
    -->
    <script type="text/javascript" language="javascript">
        document.documentElement.className = "js";
    </script>
    <style type="text/css">
        /*
        Only apply the hidden style to elements within the HTML element
        that has the js class
        */
        .js .description {display:none;}
    </style>
</head>
<body>
    <span class="description">Example</span>
</body>
</html>
0 голосов
/ 30 января 2012

Не могу сказать, действительно ли это помогает из-за возможных асинхронных операций, но вы можете добавить <script>, который добавляет ваш <style> with display: (block|inline|whatever), в котором вы переключаете все соответствующие показы на none !important, используя обычный JS, а не jQuery.

Так что в случае JS настройка отображения CSS будет переопределена заранее.

...