前端文档查询

# html 和 css

一些页面上的功能、样式排版等

# 响应式排版

传统上，JavaScript 用于根据屏幕尺寸操纵字体大小。随着 CSS 自定义属性（变量）和 clamp()函数的出现，响 应式排版变得轻而易举。

  • 旧方法（JavaScript）
<p id="responsiveText">This is some text</p>

<script>
  const screenWidth = window.innerWidth
  const baseFontSize = screenWidth > 768 ? '20px' : '16px'
  document.getElementById('responsiveText').style.fontSize = baseFontSize
</script>
1
2
3
4
5
6
7
  • 新方法（CSS 自定义属性）
:root {
  --base-font-size: 16px;
}
p {
  font-size: clamp(var(--base-font-size), 5vw, var(--base-font-size * 1.25));
}
1
2
3
4
5
6

CSS 自定义属性和 clamp()创建一个响应式且可扩展的排版系统，无需 JavaScript 也可以实现。

# 深色模式开关

实现暗模式切换通常使用 JavaScript 来处理。现在，prefers-color-scheme 媒体查询和 CSS 自定义属性无需编 写脚本即可实现无缝的暗模式体验。

旧方法（JavaScript）

<label class="switch">
  <input type="checkbox" onclick="toggleDarkMode()">
  <span class="slider"></span>
</label>

<script>
  function toggleDarkMode() {
    document.body.classList.toggle('dark-mode');
  }
</script>
1
2
3
4
5
6
7
8
9
10

新方法（CSS 和媒体查询）

:root {
  --background-color: #fff;
  --text-color: #000;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #333;
    --text-color: #fff;
  }
}
body {
  background-color: var(--background-color);
  color: var(--text-color);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

通过利用 CSS 自定义属性和 prefers-color-scheme 媒体查询，无需任何 JavaScript 干预即可实现暗模式。

# 交互式悬停过渡

创建复杂的悬停过渡需要使用 JavaScript 来实现更复杂的效果。借助过渡属性和高级 CSS 伪元素，现在无需一 行 JavaScript 即可实现这些过渡。

旧方法（JavaScript）

<div onmouseover="expandElement(this)" onmouseout="shrinkElement(this)">Hover me</div>
<script>
  function expandElement(element) {
    element.style.transform = 'scale(1.2)';
  }
  function shrinkElement(element) {
    element.style.transform = 'scale(1)';
  }
</script>
1
2
3
4
5
6
7
8
9

新方法（CSS）

div {
  transition: transform 0.3s ease-in-out;
}
div:hover {
  transform: scale(1.2);
}
1
2
3
4
5
6

过渡属性简化了悬停效果，使其无需 JavaScript 即可流畅且具有交互性。

# 占位符动画

输入字段中的占位符动画通常使用 JavaScript 完成。CSS 中的 ::placeholder 伪元素现在无需编写脚本即可实 现时尚且动态的占位符动画。

旧方法（JavaScript）

<input type="text" onfocus="animatePlaceholder(this)" onblur="resetPlaceholder(this)">
<script>
  function animatePlaceholder(input) {
    input.placeholder = 'Type something...';
  }
function resetPlaceholder(input) {
    input.placeholder = '';
  }
</script>
1
2
3
4
5
6
7
8
9

新方法（CSS）

input::placeholder {
  transition: all 0.3s ease-in-out;
}
input:focus::placeholder {
  transform: translateY(-100%);
  opacity: 0.7;
}
1
2
3
4
5
6
7

当输入字段获得焦点时，::placeholder 伪元素上的 CSS 动画会产生视觉上吸引人的效果。

# 图片延迟加载

传统上，JavaScript 用于延迟加载图像。img 元素中的加载属性提供了本机解决方案，无需额外的脚本。

旧方法（JavaScript）

<img src="image.jpg" alt="Lazy-loaded Image" id="lazyImage">
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const lazyImage = document.getElementById('lazyImage');
    lazyImage.src = lazyImage.dataset.src;
  });
</script>
1
2
3
4
5
6
7

新方法（HTML 加载属性）

<img src="image.jpg" alt="Lazy-loaded Image" loading="lazy" />
1

load="lazy" 属性可确保浏览器延迟加载图像，从而减少对自定义 JavaScript 实现的需求。

# 滚动触发的动画

滚动上的动画元素传统上涉及 JavaScript。通过引入 scroll-margin-top CSS 属性，我们现在无需一行 JavaScript 即可触发动画。

旧方法（JavaScript）

<div class="animate-me" onscroll="animateElement(this)">Scroll to animate</div>
<script>
  function animateElement(element) {
    // JavaScript animation logic
    // ...
  }
</script>
1
2
3
4
5
6
7

新方法（CSS）

.animate-me {
  opacity: 0;
  transition: opacity 0.5s;
  scroll-margin-top: 20vh;
}
.animate-me.in-view {
  opacity: 1;
}
1
2
3
4
5
6
7
8

CSS 与滚动边距顶部属性一起，无需 JavaScript 即可实现平滑的滚动触发动画。

# 可定制的表单控件

设置表单控件的样式以匹配特定的设计通常需要 JavaScript。随着 :focus-within 伪类和 CSS 自定义属性的出 现，我们无需编写脚本即可实现此目的。

旧方法（JavaScript）

<input type="text" class="custom-input" onfocus="highlightInput(this)" onblur="resetInput(this)">
<script>
  function highlightInput(input) {
    input.classList.add('focused');
  }
  function resetInput(input) {
    input.classList.remove('focused');
  }
</script>
1
2
3
4
5
6
7
8
9

新方法（CSS）

.custom-input {
  border: 2px solid var(--input-border);
}
.custom-input:focus-within {
  border: 2px solid var(--input-border-focused);
}
:root {
  --input-border: #ccc;
  --input-border-focused: #007bff;
}
1
2
3
4
5
6
7
8
9
10

:focus-within 伪类和 CSS 自定义属性为可定制的表单控件提供了纯 CSS 解决方案。

# 全页叠加菜单

新方法（CSS 和 :checked）

#menuToggle {
  display: none;
}
#menuToggle:checked + label {
  /* Styles for open menu */
}
label {
  cursor: pointer;
}
1
2
3
4
5
6
7
8
9

通过利用 :checked 伪类，我们可以在没有 JavaScript 的情况下创建全页覆盖菜单。

# 渐变边框

新方法（CSS 圆锥梯度）

.gradient-border {
  border: 5px solid;
  border-image: conic-gradient(from 0deg at 50% 50%, red, yellow, green, blue, purple);
  border-image-slice: 1;
}
1
2
3
4
5

conic-gradient 属性简化了渐变边框的创建，无需 JavaScript。

# 多列布局

.multi-column {
  column-count: 3;
  column-gap: 20px;
}
1
2
3
4

CSS 中的 column 属性允许创建优雅的多列布局，而无需依赖 JavaScript。

# 自定义复选框和单选按钮样式

input[type='checkbox'] {
  display: none;
}

input[type='checkbox'] + label {
  width: 20px;
  height: 20px;
  background-color: #ccc;
  display: inline-block;
}

input[type='checkbox']:checked + label {
  background-color: #007bff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

利用 :checked 伪类可以在不使用 JavaScript 的情况下创建自定义复选框样式。

# 无缝页面转换

body {
  scroll-behavior: smooth;
}
1
2
3

滚动行为属性可以实现平滑滚动，而不需要 JavaScript 事件侦听器。

# 等高列的柔性盒（Flexbox）

.flex-container {
  display: flex;
}
.flex-container > div {
  flex: 1;
}
1
2
3
4
5
6

Flexbox 布局允许灵活且等高的列，无需 JavaScript 调整。

# 动态渐变文本

.gradient-text {
  background-clip: text;
  color: transparent;
  background-image: linear-gradient(to right, #ff8c00, #ffcd00);
}
1
2
3
4
5

background-clip 属性和 Linear-gradient 使得动态渐变文本可以通过纯 CSS 实现。

# 在图像上叠加文本

.image-container {
  position: relative;
}
.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
1
2
3
4
5
6
7
8
9

Position 属性简化了在图像上叠加文本的过程，无需 JavaScript 计算。

知识汇总   |