您无需 JavaScript 即可创建这些元素

响应式文本截断

星级输入

工具提示/下拉菜单

莫代尔

浮动标签输入

切换/折叠

结论

我们已经习惯于用 JavaScript 编写常见的 UI 元素功能，如手风琴、工具提示、文本截断等。但随着 HTML 和 CSS 获得新功能并且旧版浏览器不再受支持，我们越来越少地使用 JavaScript 来创建 UI 元素，而更多地关注代码的逻辑部分（验证、数据处理等）。

有些解决方案确实感觉有点老套，不够灵活，但对于小型项目以及单实例元素来说，这些方案还是很有用的。为什么要为网站上的单个手风琴折叠面板编写 JavaScript 函数（或者如果你怀旧的话，可以使用 jQuery）呢？我在我的个人网站页脚添加一个仅限移动设备使用的手风琴折叠面板时，就是这么想的。

以下是一些无需 JavaScript 即可创建的元素的示例。

响应式文本截断

CSS 文本截断实现起来非常简单，而且性能非常出色，因为我们不会编辑文本的 HTML 内容，而只会编辑其渲染效果。虽然单行文本截断在旧版浏览器中得到了很好的支持，但多行文本截断仅在较新的浏览器中受支持。

星级输入

星级评定是大多数评论表单和功能的必备元素。使用 CSS 实现星级评定的方法有很多：使用背景图片、JavaScript、图标等等。最便捷的实现方式是使用图标和原生单选框。

这种实现的缺点是，HTML 单选框的输入顺序是倒序的（评分值从 5 到 1），因为我们需要选择所有开始项，包括已选中的输入项，而这在 CSS 中是无法实现的。因此，我们反转了顺序，从已选中的输入项到第一个输入项依次选择。

这种实现非常灵活，可以轻松定制。

工具提示/下拉菜单

这是一个非常灵活的元素，因为它的 CSS 逻辑可以用于工具提示和下拉菜单，因为它们以类似的方式工作并且都支持悬停和单击（触摸）功能。

此实现的一个问题是由于它的focus样式，工具提示（下拉菜单）将在点击时保持打开状态，直到用户点击离开该元素（元素使用焦点）。

莫代尔

这是一个有点 hacky 的实现，完全依赖于 URL 的查询字符串。URL 中的 ID 需要与我们需要打开的模态元素匹配。

浮动标签输入

我在另一篇文章中介绍了浮动标签输入的实现，因为这个实现有点复杂。

让我们仅使用 HTML 和 CSS 创建一个浮动标签输入

Adrian Bece・19年11月6日

#webdev #教程 #css #html

切换/折叠

最近，HTML 引入了原生的手风琴（切换）元素和<details>元素<summary>，但使用这些元素的缺点是它们没有太多样式选项，因此开发者仍然继续使用它们自己的实现。幸运的是，借助复选框或单选框输入逻辑，我们可以创建可切换的元素和手风琴，而无需依赖 JavaScript。

使用此实现的缺点是它依赖于inputHTML 元素及其逻辑，从而需要额外的 HTML 代码，但另一方面，这会导致元素非常易于访问。

结论

如您所见，这些纯 CSS 实现依赖于 CSS 选择器逻辑（例如:focus和 ）:placeholder-shown来替代 JavaScript 逻辑。其中一些 CSS 解决方案可能被认为是 hacky，但它们性能卓越、灵活，并且不依赖于 JavaScript。

我在我的项目中使用了一些 CSS 解决方案，因此我可以避免添加任何额外的 JavaScript 或完全避免使用 JavaScript 进行视觉呈现。

当然，还有很多纯 CSS 的解决方案，但我发现这些最有趣。如果您使用了其他解决方案，请在评论中告诉我。

这些文章都是咖啡带来的灵感。所以，如果你喜欢我的文章，觉得它有用，不妨请我喝杯咖啡！我会非常感激的。

感谢您花时间阅读这篇文章。如果您觉得它有用，请点赞 ❤️ 或 🦄，分享并评论。