实现不显眼的 Javascript

发布于 2024-12-29 12:07:48 字数 326 浏览 1 评论 0原文

我正在重新设计一个旧网站，并专注于使 Javascript/jQuery 尽可能不引人注目。我正在寻找有关该项目一部分的一些建议：UJ 要求，如果浏览器中关闭了 Javascript，则所有网站内容仍然可供用户使用。我网站的一部分有大量的项目列表。列表中的每个项目都有自己的描述，默认情况下使用 CSS display:none 隐藏它。单击该项目会使用 jQuery .toggle(): 切换描述的可见性，因此无法使用 Javascript（无论出于何种原因）的人将永远不会看到它。如果我使用 Javascript/jQuery 而不是 CSS 来隐藏描述，那么当页面加载时它们都会立即可见，这是我想避免的。那么最好的解决方案是什么？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

-黛色若梦 2025-01-05 12:07:48

基本上你可以在 html 元素中插入一个类“no-js”，就像这样

<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（无样式内容的闪存）只需在 css 规则中使用 .no-js 和 .js 类，如下所示：

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

这种方法也被 H5BP
使用
请注意，您实际上并不需要在每个规则前面添加 .no-js 类：考虑“渐进式增强”和“不显眼的 javascript”，您将首先为页面编写代码和样式无需 JavaScript 即可工作，然后您将添加功能（和样式特异性，在 .js 类前面）

basically you can insert a class "no-js" in your html element, like so

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

and if javascript is enabled on the client you soon remove that class (using modernizr or a simpler code snippet like

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

in this way you can avoid the FOUC (flash of unstyled content) simply using .no-js and .js class in the css rules like so:

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

this approach is also used by H5BP
Note that you don't really need to prepend .no-js class to each rule: thinking in terms of "progressive enhancement" and "unobtrusive javascript" you will code and style first for a page that also works without javascript, then you will add functionality (and style specificity, prepending the .js class)

回复收藏 0 原文

爱给你人给你 2025-01-05 12:07:48

您是否考虑过使用类似于 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>

Have you thought about using a method like the one implemented with Modernizr?

CSS classes are added to the HTML tag by a script that causes different CSS selectors to match.

<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 原文