莫方教程网

专业程序员编程教程与实战案例分享

那些让人拍案叫绝的小技巧(前端冷知识)



前端世界日新月异,总有一些小技巧能让人眼前一亮。今天就来盘点那些让人拍桌叫绝的前端冷知识,或许它们就是你日常开发中的救命稻草。


1.pointer-events: none — 让元素直接“隐形”

需要一个完全不可触摸的元素?pointer-events: none 了解一下。这个属性能让元素直接从鼠标的感知范围中蒸发,点击、悬停完全无效,但视觉上仍然健在。

用法:

.invisible-touch {
  pointer-events: none;
}

场景:

  • 覆盖层不影响底层操作
  • 实现酷炫的“幽灵按钮”效果

2.CSS accent-color — 一键换主题,神清气爽

厌倦了手写 N 行 CSS 来自定义浏览器表单控件的颜色?accent-color 让你只需一句代码,轻松调整控件的配色风格:

:root {
  accent-color: #ff5722;
}

效果:

  • 单选框、复选框、进度条自动焕然一新。

3.will-change — 提前告诉浏览器准备加速

如果你的动画卡成了 PPT,可以试试 will-change。它能提前告知浏览器“我要动了,快点优化吧”:

.my-element {
  will-change: transform, opacity;
}

小心使用!因为它会消耗更多内存,别滥用哦。


4.CSS content-visibility — 元素未展示?浏览器直接装死

为了节省性能,content-visibility 可以让未出现在视口中的元素不参与渲染:

.lazy-container {
  content-visibility: auto;
}

实测对长列表、复杂页面有奇效!


5.scroll-behavior: smooth — 平滑滚动的秘密武器

还在写手动滚动的 JS 逻辑?其实只需要:

html {
  scroll-behavior: smooth;
}

点击锚点链接时,自动实现丝滑滚动效果。


6.HTML datalist — 搜索框的隐藏大佬

如果你想实现带提示的输入框,却又不想写复杂的 JavaScript,那 HTML5 的 datalist 来救场了:



  

简直是贫民窟前端的福音。


7.CSS :has() — 父选中子,前端扬眉吐气

:has() 是 CSS 4 的黑科技,能让父级根据子级的状态来改变样式:

.card:has(.active) {
  border: 2px solid green;
}

浏览器支持有限,但前景一片光明!


8.position: sticky — 固定定位的半截子弟

想实现一个只在滚动到某处时才“粘住”的效果?sticky 可比 fixed 更听话:

.sticky-header {
  position: sticky;
  top: 0;
}

用于表头、导航栏再合适不过。


9.clamp() — 优雅地限制 CSS 属性

想让字体大小自适应,但又不想太大或太小?用它设置自适应大小再也不怕翻车了

font-size: clamp(14px, 2vw, 18px);

这比写一堆媒体查询优雅多了。


10.JS 的 Intl — 日期和货币格式化的黑科技

还在用正则格式化日期或金额?别折腾了,Intl 自带标准 API:

const date = new Date();
console.log(new Intl.DateTimeFormat('en-US').format(date));

const money = 123456.789;
console.log(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(money));

国际化从未如此简单。


11.CSS 变量默认值:var() 的救命稻草

为避免变量未定义导致的灾难,var() 提供了默认值功能:

color: var(--main-color, #000);

优雅退化,何乐不为?


12.document.designMode — 页面直接变编辑器

想给用户一个神奇体验?试试这个:

document.designMode = 'on';

整个页面都变成可编辑状态,你就是 DOM 的上帝。


13.console.table() — 数据调试再也不眼瞎

调试复杂对象时,用 console.table():

console.table([{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }]);

表格展示数据,清晰又美观。


14.网络请求的秘密武器:navigator.sendBeacon()

需要在页面关闭前发送数据?

navigator.sendBeacon('/log', JSON.stringify({ event: 'page_unload' }));

它是异步的,比传统的 fetch 更适合这种场景。


15.CSS aspect-ratio — 比例控制的终极解决方案

想要一个完美的 16:9 容器?不用再算宽高比了:

.box {
  aspect-ratio: 16 / 9;
}

16. CSS 的 caret-color

还在用 ::selection 调色的你可能不知道,caret-color 可以直接改变输入框光标的颜色!

input {
  caret-color: hotpink;
}

下一次产品提光标颜色需求时,微微一笑:"这,还不是分分钟的事儿。"


17. Object.fromEntries 和 Object.entries 的配合

将对象转为二维数组再转回对象?没问题,Object.entries 和 Object.fromEntries 简直是形影不离的双胞胎。

const obj = { a: 1, b: 2 };
const entries = Object.entries(obj);
const newObj = Object.fromEntries(entries);
console.log(newObj); // { a: 1, b: 2 }

有了它俩,JSON 的增删改查都多了一种优雅的实现。


18 display: contents

你以为 display 只有 block、flex?错了!contents 能让元素只存在于 DOM 中,而不存在于布局中。

直接露面

这个属性太酷了,简直是前端里的隐身术!


19. window.isSecureContext

判断你的代码是否运行在 HTTPS 环境中?直接用 isSecureContext!

if (window.isSecureContext) {
  console.log('安全的环境');
} else {
  console.log('不安全,赶紧跑!');
}

20. scroll-margin 替代 scrollIntoView 的硬切

还在为滚动到某个元素时太 "贴脸" 而烦恼?scroll-margin 轻松解决:

section {
  scroll-margin-top: 20px;
}

终于可以和 JS 的 "强行滚动" 说再见了!


21. JS 的 ??(空值合并运算符)

const name = null;
console.log(name ?? "默认值"); // "默认值"

比 || 更智能,因为它只对 null 和 undefined 生效。


22. fetch 的 AbortController

"我只想取消请求,怎么就这么难?" 的时代结束了!

const controller = new AbortController();
fetch('https://api.example.com', { signal: controller.signal });
controller.abort();

这才是真正的请求管理,让你的网络请求变得更优雅。


23. window.matchMedia 的动态监听

响应式设计不一定要写死在 CSS 里,matchMedia 让 JS 也能监听媒体变化:

const mediaQuery = window.matchMedia('(max-width: 600px)');
mediaQuery.addEventListener('change', e => {
  console.log(e.matches ? '小屏' : '大屏');
});

24. CSS 的 accent-color

表单控件的风格化从未如此简单!

input[type="checkbox"] {
  accent-color: #ff5733;
}

还记得以前为了定制 checkbox 写的那一堆 JS 吗?忘掉它吧!


25. navigator.clipboard

复制粘贴不需要再靠第三方库,现代浏览器统统支持:

navigator.clipboard.writeText('Hello, World!');

简洁、强大,这功能迟来的让人心疼!


26. 动态 import

按需加载代码,让你的应用更轻量化。

import('module.js').then(module => {
  module.default();
});

27. :nth-of-type 的奇技淫巧

不只奇数、偶数,nth-of-type 支持自定义公式!

li:nth-of-type(3n+1) {
  color: red;
}

把样式公式玩明白,这波让你在团队技术分享中杀疯!


28. HTML 的 download 属性

让用户下载文件,不再需要后端支持,直接前端搞定:

下载 PDF

29. position: sticky 的魔法

在需要固定表头、侧边栏的时候,position: sticky 可能就是你的“真命天子”。但你知道它有个大坑吗?它必须有一个父级元素且父级不能有 overflow: hidden!要是设置了,sticky 就变“滑稽”了。

30. 字体也能让页面更快?

用系统字体 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;,不仅可以提高渲染速度,还可以迎合用户的设备体验。Win 用户看 Win,Mac 用户看 Mac,大家都说好。

31. 空标签也是一门艺术

在 HTML 中,有些标签看似“毫无作用”,比如 ,但它们其实是语义化标记的老祖宗,配合屏幕阅读器能大显身手。不信?试试吧。

32. ::before 和 ::after 是万能的

它们不仅能生成漂亮的分割线、虚拟元素,还能用来制作小装饰。加点内容、调个颜色,你的页面立刻“高级”了几分。

.button::after {
  content: "?";
  margin-left: 5px;
}

结果?按钮立刻变成“会发光的小星星”!

33. overflow: hidden 不止隐藏

你可能以为它只能用来隐藏溢出的内容,实际上,它还能触发 BFC,解决浮动布局问题,甚至连 CSS 动画的“抖动”也能轻松治好!

34. will-change 帮性能提速

告诉浏览器“我要动手了”,让它提前分配资源。比如对需要动画的元素设置:

.box {
  will-change: transform;
}

但别滥用,否则会让性能“压力山大”!

35. 图片懒加载,原来这么简单

还在手写懒加载逻辑?直接用 loading="lazy",图片不再和页面一股脑加载,用户滑到哪里,图片加载到哪里。这可是提升性能的“神器”!

多简单!多实在!浏览器原生支持,不用感谢我。

36. CSS 渐变文字

谁说文字只能黑白?用 background-clip: text,实现彩虹效果。

.text {
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  -webkit-background-clip: text;
  color: transparent;
}

有了这招,你的文字会成为页面焦点!

37. 不要小看 pointer-events

这个属性不仅可以让元素“隐形”于鼠标事件,还能防止无聊的用户对“装饰性”元素疯狂点击。

.decoration {
  pointer-events: none;
}

38. 伪类 :is() 让选择器不再啰嗦

以前选择多个类名,需要写一大堆。

h1, h2, h3, h4 {
  color: black;
}

现在用 :is(),简直省心省力:

:is(h1, h2, h3, h4) {
  color: black;
}

39. aspect-ratio = 图片/视频不变形

设置 aspect-ratio,不用 padding hack,轻松保持比例。

.img {
  aspect-ratio: 16 / 9;
}

40. backdrop-filter,朦胧效果一键开启

让背景虚化,美得不要不要的。

.glass {
  backdrop-filter: blur(10px);
}

支持的浏览器,直接“高大上”。

41. scroll-behavior: smooth:滚动的高级体验

无需 JS,平滑滚动交给 CSS。

html {
  scroll-behavior: smooth;
}

用起来,用户体验立刻满分。


42.CSS 可以画三角形!

"等下,CSS 还能画图?" 是的,只需要 border,你就能轻松搞定一个三角形:

.triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #000;
}

可别小看它,小三角撑起了无数网页的气泡提示。

43.CSS 中的 currentColor 是什么鬼?

它会继承 color 的值,这个用法超赞:

.border {
  border: 2px solid currentColor;
}

再改 color 属性时,边框颜色自动同步,别再死抠 border-color 啦!

44.冒泡 vs 捕获:事件流其实是两段式的!

浏览器事件分为捕获阶段和冒泡阶段:

document.body.addEventListener('click', () => console.log('冒泡阶段'), false);
document.body.addEventListener('click', () => console.log('捕获阶段'), true);

true 表示捕获阶段,false 或默认则是冒泡阶段,学会这个就能避免 "点击不生效" 的锅了!

45.正则表达式里的 (?=) 和 (?! ) 是什么?

  • (?=):正向预查
  • (?! ):负向预查

比如匹配以 abc 开头,但后面不能是 123 的字符串:

const regex = /abc(?!123)/;
console.log(regex.test("abc456")); // true
console.log(regex.test("abc123")); // false

46.页面切换时检测用户离开了!

window.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    console.log("用户偷偷溜走了!");
  } else {
    console.log("欢迎回来!");
  }
});

用户开小差的瞬间尽收眼底。

47.CSS 动画暂停

要实现 "悬停暂停动画",只需要:

.animation:hover {
  animation-play-state: paused;
}

48.隐藏滚动条但保留滚动功能

你是不是有过想隐藏滚动条但又不想影响滚动体验的需求?只需一句 CSS 就搞定:

.element {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.element::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

让你的滚动条瞬间隐身,还不影响用户滑动。


49.CSS“倒影”效果

实现一个酷炫的倒影,居然只需要一行代码!

.element {
  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.2))
          invert(100%);
}

没错,filter 属性堪称 CSS 的法术书!


50.强制元素在页面中间—不论页面有多复杂

垂直居中难?Flexbox 就是你的救星:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

不需要再用 position 和负 margin 画大饼了。


51.一行代码—让文字自动换行且优雅

长单词溢出边界时,难看又烦人?

p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

再长的词也能优雅地分行,不用手动插入空格。


52.利用“content” 动态加载图片

有趣的 ::before 和 ::after 可以这样用:

.element::before {
  content: url('your-image-url.png');
}

是不是瞬间觉得 content 的能力被低估了?


53.禁用输入框的自动填充背景色

浏览器自动填充表单的黄色背景色惹恼了你?用这个:

input:-webkit-autofill {
  background-color: transparent !important;
}

再也不用担心设计被破坏!


54.禁止点击右键菜单,但不影响用户体验

完全禁用右键并不是个好习惯,但如果有特殊需求:

document.addEventListener('contextmenu', event => event.preventDefault());

让用户点击右键无反应,低调而有效。


55.动态设置 Favicon 图标

想要你的网页在运行时切换图标?试试这个:

const link = document.querySelector("link[rel~='icon']") || document.createElement('link');
link.rel = 'icon';
link.href = 'new-icon.png';
document.head.appendChild(link);

是的,你的 Tab 页可以瞬间更换图标了。


56.使用图片当字体图标

字体图标不够酷?用 SVG 图片当字体:

.icon {
  background: url('icon.svg') no-repeat center / contain;
  display: inline-block;
  width: 1em;
  height: 1em;
}

更灵活,更轻量,还能自由调整大小。


57.检测用户是否启用深色模式

想要网站自动适配用户的主题偏好?只需要这样:

@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fff;
  }
}

你的网页会根据用户设置的深色模式自动切换!


58.让 console.log 更具表现力

调试代码也可以很酷炫:

console.log('%cHello, World!', 'color: green; font-size: 20px; background: yellow;');

彩色输出瞬间点亮你的调试体验!


59.滚动时让页面元素更生动

通过 Intersection Observer 实现滚动动画:

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate');
    }
  });
});

document.querySelectorAll('.item').forEach(item => observer.observe(item));

滚动到视口内的元素自动触发动画,让页面更有吸引力。


60.为链接添加点击后动态波纹效果

为按钮或链接添加水波纹动画,用户交互更有趣:

button {
  position: relative;
  overflow: hidden;
}
button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  to {
    transform: scale(10);
    opacity: 0;
  }
}

点击按钮时,水波纹效果瞬间提升互动性。


61.在 CSS 中检测触摸屏设备

根据用户的输入设备自适应样式:

@media (hover: none) and (pointer: coarse) {
  /* Touch-specific styles */
  button {
    font-size: 18px;
  }
}

简单有效,轻松应对触摸屏。


62.在页面加载时显示微型加载条

NProgress 是一个很棒的工具,只需几行代码:




瞬间提升用户的视觉体验!


63.检测网络状态变化

利用 JavaScript 动态响应网络状态:

window.addEventListener('online', () => console.log('Back online!'));
window.addEventListener('offline', () => console.log('Lost connection...'));

让你的应用更智能!


希望你读完这些冷知识后,能感叹一句:"原来前端还能这样玩!" 如果你也有想补充的冷知识,评论区摆摊,我们一起拍桌子~

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言