没有 JavaScript 的引导程序 4

欢迎来到本文的第四部分 - "没有 JavaScript 的引导程序"系列。在本文中，我们将继续探索如何不使用 JavaScript 来创建现代 Web 应用程序，而是使用 HTML 和 CSS。

用 CSS 实现表单验证

表单验证是 Web 应用程序中常见的功能。与其依赖 JavaScript 来验证表单，我们可以使用 CSS 中的伪类来实现。

首先，我们需要在表单元素的 label 元素中添加一个 for 属性，该属性的值与 input 元素的 id 属性相同。使用伪类 :valid 和 :invalid，我们可以向用户提供即时反馈，指示表单输入是否有效。

<label for="email">Email:</label>
<input type="email" id="email" required>

input:valid {
  border: 1px solid green;
}

input:invalid {
  border: 1px solid red;
}

以上代码将输入框的边框颜色更改为绿色或红色，以指示表单输入是否有效。

用 HTML5 实现图片懒加载

图片懒加载是一种优化 Web 应用程序性能的流行技术。我们可以使用 HTML5 的 lazyload 属性来实现这一点。

<img src="placeholder.png" data-src="image.jpg" loading="lazy">

在上面的代码中，我们使用了 data-src 属性来存储实际图像的 URL。使用 loading 属性，我们可以指示浏览器仅在其滚动到视图中时加载图像。

用 CSS 实现模拟滚动条

滚动条是一个常见的用户接口元素，但是它们使用 JavaScript 实现起来有点棘手。幸运的是，我们可以使用 CSS 来模拟滚动条。

<div class="container">
  <div class="content">Lorem ipsum dolor sit amet...</div>
</div>

.container {
  height: 200px;
  overflow-y: scroll;
}

/* 隐藏原生滚动条 */
.container::-webkit-scrollbar {
  display: none;
}

/* 模拟滚动条 */
.container:before {
  content: "";
  background: #f1f1f1;
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  border-radius: 5px;
}

.container:after {
  content: "";
  background: #888;
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 50%;
  border-radius: 5px;
}

.content {
  padding-right: 10px;
}

在上面的代码中，我们首先将包含内容的容器设置为具有滚动条的 overflow-y: scroll。然后，我们使用伪元素来创建一个模拟滚动条。由于我们隐藏了浏览器原生的滚动条，因此需要在 content 元素中添加 padding-right 属性以防止滚动条遮盖内容。

用 HTML 和 CSS 实现幻灯片

我们可以使用 HTML 和 CSS 来创建漂亮的幻灯片，而不需要使用 JavaScript。

<div class="slideshow">

  <input type="radio" name="slide" id="slide-1" checked>
  <input type="radio" name="slide" id="slide-2">
  <input type="radio" name="slide" id="slide-3">
  
  <div class="slides">
    <div class="slide">
      <img src="slide1.png">
    </div>
    <div class="slide">
      <img src="slide2.png">
    </div>
    <div class="slide">
      <img src="slide3.png">
    </div>
  </div>
  
  <div class="controls">
    <label for="slide-1"></label>
    <label for="slide-2"></label>
    <label for="slide-3"></label>
  </div>
  
</div>

.slideshow {
  position: relative;
  height: 300px;
}

.slides {
  display: flex;
  height: 100%;
}

.slide {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.controls {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.controls label {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #000;
  margin: 0 4px;
  cursor: pointer;
}

.controls label:hover {
  background: #000;
}

.slide {
  opacity: 0;
  transition: opacity 1s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

input[name="slide"]:checked + .slides .slide {
  opacity: 1;
  z-index: 1;
}

input[name="slide"]:checked + .controls label {
  background: #000;
}

在上面的代码中，我们首先创建了一个具有幻灯片功能的 HTML 结构。我们使用相同的 name 属性在单选框和标签之间创建了关联，以便控制幻灯片。在 CSS 中，我们使用 opacity 过渡来在幻灯片之间创建卡片翻转效果。我们还创建了一个控件样式，使用户可以手动在幻灯片之间导航。

结论

虽然使用 JavaScript 创建 Web 应用程序可以获得高度交互性和动态性，但是在某些情况下，使用 HTML 和 CSS 也可以完成同样的工作。在本文中，我们学习了如何使用 CSS 中的伪类、HTML5 的图像懒加载属性、用 CSS 模拟滚动条以及使用 HTML 和 CSS 创建幻灯片。