前端老鹰

前端菜鸟

开源项目: https://gitee.com/chunyu-cms/chunyu-cms

赞

1

|

搜索文章

HTML <link rel="preload">：提前加载关键资源的性能优化利器

在网页性能优化中，“资源加载时机”是影响用户体验的关键因素——一个延迟加载的核心CSS可能导致页面“闪白”，一段未及时加载的关键JS可能让交互按钮失效。

25天前
77
1
评论

HTML <link rel="preload">：提前加载关键资源的性能优化利器

CSS counter-reset 与 counter-increment：用 CSS 实现自动编号的黑科技

在网页开发中，自动编号是一个常见需求 —— 从文章的章节编号、评论楼层，到列表项的序号，都需要有序的数字标识。传统做法要么手动输入编号（维护成本高），要么用 JavaScript 动态生成...

26天前
78
1
评论

CSS counter-reset 与 counter-increment：用 CSS 实现自动编号的黑科技

JavaScript Array.prototype.flatMap ()：数组 “扁平化 + 映射” 的高效组合拳

在 JavaScript 数组处理中，我们经常需要先对每个元素进行转换（映射），再将结果 “铺平”（扁平化）。比如将数组中的每个字符串按空格拆分，然后合并成一个新数组。

27天前
63
点赞
评论

JavaScript Array.prototype.flatMap ()：数组 “扁平化 + 映射” 的高效组合拳

CSS accent-color：一键定制表单元素的主题色，告别样式冗余

在前端开发中，表单元素（如复选框、单选按钮、进度条）的样式定制一直是个麻烦事。默认样式往往与网站主题格格不入，而手动修改又需要大量 CSS 代码（甚至动用伪元素），还可能破坏元素的原生交互体验。

28天前
135
点赞
评论

CSS accent-color：一键定制表单元素的主题色，告别样式冗余

HTML <picture> 元素：让图片根据设备 “智能切换” 的响应式方案

在响应式设计中，图片适配是一个绕不开的难题：同一张高清图片在大屏设备上清晰美观，但在小屏手机上可能加载缓慢；而适合手机的小图在桌面端又会模糊失真。

1月前
269
5
1

HTML <picture> 元素：让图片根据设备 “智能切换” 的响应式方案

CSS overscroll-behavior：解决滚动穿透的 “边界控制” 专家

在前端开发中，你是否遇到过这样的尴尬场景：当你在弹窗（Modal）中滚动内容，滚动到顶部或底部后继续滑动，背后的页面会跟着一起滚动？这种 “滚动穿透” 现象不仅影响用户体验，还会让界面显得不够专业。

1月前
160
2
评论

CSS overscroll-behavior：解决滚动穿透的 “边界控制” 专家

CSS :is () 与 :where ()：简化复杂选择器的 “语法糖”

在 CSS 编写中，你是否遇到过这样的场景：需要给多个不同父元素下的子元素设置相同样式，结果写出一长串重复的选择器？

1月前
189
1
评论

CSS :is () 与 :where ()：简化复杂选择器的 “语法糖”

CSS scrollbar-width：轻松定制滚动条宽度的隐藏属性

在前端设计中，滚动条往往是一个容易被忽略的细节。默认的滚动条样式常常与页面设计格格不入，尤其是宽度 —— 过宽的滚动条会挤占内容空间，过窄又可能影响用户操作。

1月前
151
1
评论

CSS scrollbar-width：轻松定制滚动条宽度的隐藏属性

CSS content-visibility：提升页面渲染性能的 “智能渲染开关”

在前端开发中，你是否遇到过这样的问题：页面包含大量 DOM 元素（如长列表、复杂表格）时，滚动变得卡顿，交互响应迟缓？这往往是因为浏览器需要不断渲染屏幕外的元素，浪费了大量计算资源。

1月前
17
点赞
评论

CSS content-visibility：提升页面渲染性能的 “智能渲染开关”

HTML <dialog> 元素：原生弹窗解决方案，无需再写复杂遮罩

在前端开发中，弹窗（Modal）是一个高频出现的组件——登录框、确认提示、信息展示等场景都离不开它。但传统的弹窗实现往往需要：创建多层嵌套的div（弹窗内容+遮罩层）、编写大量CSS控制定位和显示隐藏

1月前
181
点赞
评论

HTML <dialog> 元素：原生弹窗解决方案，无需再写复杂遮罩

个人成就

文章被点赞 38

文章被阅读 4,348

加入于

2020-12-24