- 博客(247)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 css `svh` 单位
svh是css中的一个视口相对单位。表示小视口高度（small viewport height。）, 他为了解决移动设备上浏览器窗口尺寸变化的问题引入的单位。小视口指的是浏览器界面最小时的视口尺寸在移动设备上，当地址栏、工具栏等浏览器UI元素完全展开时，此时的视口高度就是小视口高度与 dvh（动态视口高度）和 lvh（大视口高度）形成对比。
2025-12-03 13:53:40
401
原创 CSS content-visibility
是一个强大的性能优化工具，特别适合内容丰富的长页面。通过智能地跳过不可见内容的渲染，可以显著提升页面加载速度和交互体验。但在使用时需要注意浏览器兼容性和潜在的可访问性问题，合理搭配来避免布局抖动。
2025-11-29 23:22:02
314
原创 css `currentColor`和`inherit`
currentColor = 当前元素自己的 color 的别名。inherit = 从父元素继承属性值。这两个完全不是一个用途。
2025-11-22 09:48:42
386
原创 grid：`grid-template-columns: repeat(2, minmax(0, 1fr))；`
最稳、最专业的“两列等宽 Grid”写法，防止内容过长时破坏布局。
2025-11-20 20:38:03
376
原创 grid: auto-fit 和 auto-fill区别
auto-fill = 保留空列，不让元素挤占它们auto-fit = 折叠空列，让元素撑满空间（更自然）90% 情况下，用 auto-fit。
2025-11-20 20:02:22
299
原创 使用 speechSynchesis.speak()为web程序添加语音
摘要：本文介绍了如何使用浏览器内置的Web Speech API实现文本转语音功能。核心是通过SpeechSynthesisUtterance对象设置文本内容、语言、语速等参数，配合speechSynthesis.speak()方法实现朗读。文章详细说明了参数配置、事件监听、语音控制（暂停/恢复/停止）以及多语音选择等功能，并指出移动端可能需要用户交互才能触发语音播放。该技术适用于网页朗读、语音助手、教育应用等多种场景，无需额外付费即可实现TTS功能。
2025-11-16 19:50:00
324
原创 JavaScript判空最佳实践
✅ 适用于现代 JavaScript / TypeScript / React 项目🎯 目标：避免空值异常，保持逻辑清晰、类型安全。
2025-11-09 20:48:09
239
原创 html`contenteditable`
在 HTML 中，contenteditable 是一个全局属性，用于指定元素的内容是否可被用户编辑。它可以让用户直接在网页上修改元素的内容，而无需借助额外的表单控件。浏览器兼容性：contenteditable 在所有主流浏览器（如 Chrome、Firefox、Safari、Edge）中均受支持。
2025-10-23 22:51:24
329
原创 javascript `designMode`
document.designMode 是一个文档级别的属性，当设置为 ‘on’ 时，会使整个HTML文档进入可编辑状态，用户可以像在文字处理器中一样直接编辑页面内容。与 execCommand 配合：可以使用 document.execCommand() 执行各种编辑命令。如果我们只希望网页的某些部分可编辑并且只需要基本的编辑功能，我们可以使用。丰富的编辑功能：支持加粗、斜体、列表、对齐等格式操作。内容保持：编辑后的内容会保留在DOM中，直到页面刷新。全局编辑：启用后，整个文档内容都可编辑。
2025-10-22 23:03:03
286
原创 `list-style-type: decimal-leading-zero；`在有序列表`＜ol＞＜/ol＞` 中将零添加到一位数前面
【代码】`list-style-type: decimal-leading-zero；`在有序列表`＜ol＞＜/ol＞` 中将零添加到一位数前面。
2025-10-19 21:09:09
169
原创 使用css `focus-visible` 改善用户体验
focus-visible 是提升网页可访问性的关键 CSS 伪类，它只在键盘操作时显示焦点样式（如蓝色轮廓），避免鼠标点击时不必要的视觉干扰。最佳实践是同时使用 :focus 和 :focus-visible：前者为旧浏览器提供基础支持，后者通过 :focus:not(:focus-visible) 移除冗余样式。适用于按钮、表单等交互元素，而模态框等特殊场景仍需保留 :focus。现代实现可结合轮廓和阴影增强可访问性（如 box-shadow），平衡功能与美观。
2025-10-19 18:47:04
244
原创 css`scrollbar-gutter`防止滚动条可见性变化时发生布局偏移
scrollbar-gutter 属性只在元素需要显示滚动条时才会生效。如果内容没有超出容器，就不会有滚动条，自然也就没有"滚动条凹槽"防止滚动条可见性变化时发生布局偏移。
2025-10-19 18:38:02
202
原创 css使用 :where() 来简化大型 CSS 选择器列表
CSS的:where()伪类函数可简化复杂选择器并实现零特异性。它不会增加选择器权重，使样式更容易被覆盖，适用于基础样式、组件样式和响应式设计。通过合并多个选择器，能显著减少代码量，如将多容器内的标题、列表等元素统一样式。特别适合需要频繁自定义的组件基础样式，用户可轻松覆盖默认设置。:where()是CSS Selectors Level 4规范中的实用功能，能有效提升样式表的可维护性。
2025-10-19 17:08:08
599
原创 css `dorp-shadow`
CSS 的 drop-shadow() 滤镜函数可为透明元素创建贴合形状的阴影效果。与 box-shadow 不同，它通过元素的 Alpha 通道生成阴影，特别适合不规则图形和透明元素。语法包含偏移量、模糊半径（可选）、扩展半径（可选）和颜色参数。建议常规布局用 box-shadow，图标和透明元素用 drop-shadow 以获得更自然的效果。该属性为网页设计提供了更精准的阴影控制能力。
2025-10-19 16:27:34
781
原创 css`text-wrap:pretty`
text-wrap: pretty 是 CSS 新增的文本换行属性，用于优化段落和标题的换行效果。它通过智能选择换行点，避免段落末尾出现孤立的短词，使排版更美观自然。该属性支持 wrap、nowrap、balance 和 pretty 四种值，其中 pretty 在保持内容不变的前提下调整换行策略。目前 Chrome 117+、Edge 117+ 和 Safari 17+ 已支持，Firefox 仍需实验性标志。通过示例可见，pretty 能有效改善文本布局的可读性。
2025-10-16 22:28:47
233
原创 css:`target-before and :target-after 和 scroll-target-group`
摘要：CSS 新增 scroll-target-group: auto 属性和 :target-before/current/after 伪类组合，用于实现无JS的滚动指示器。当容器设置 scroll-target-group 后，浏览器会自动关联锚点与滚动目标，根据滚动位置为导航链接动态添加三种状态：已滚过（before）、当前可见（current）和未到达（after）。该特性目前仅在 Chrome Canary 和 Safari TP 等实验性浏览器中支持，可实现纯CSS的滚动导航高亮效果。（149字
2025-10-15 22:50:23
449
原创 css `scrollbar-width` 渲染一个细滚动条甚至隐藏它，同时保持区域可滚动
CSS的scrollbar-width属性用于控制滚动条宽度，支持auto(默认)、thin(细条)、none(隐藏)和实验性长度值。它能在保持区域可滚动的前提下优化UI空间，适用于侧边栏等狭窄空间(thin)或需要隐藏滚动条的场景(none)。该属性目前主要兼容Firefox浏览器。
2025-10-12 20:31:38
258
原创 css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
本文介绍了CSS的font-variant-numeric: tabular-nums属性，它用于设置等宽数字以确保表格、金额等数据对齐精准。与比例数字(proportional-nums)不同，表格数字使所有数字宽度一致，避免错位。适用场景包括表格、时间显示、数据 ( ͡° ͜ʖ ign)数据可视化等。文章还列举了其他OpenType数字特性，如老式数字(oldstyle-nums)、带斜杠的零(slashed-zero)等，并提供了CodePen演示链接。
2025-10-01 21:14:51
336
原创 css `isolation: isolate`
CSS的isolation: isolate属性用于强制创建新的层叠上下文，避免混合模式污染和控制z-index层级关系。与默认值auto不同，它能确保元素视觉效果的独立性。这个属性虽然不常见，但在处理复杂布局时非常实用。
2025-09-23 22:14:35
469
原创 `CookieStore` API
摘要：CookieStore API 是现代浏览器提供的更强大的 Cookie 操作接口，相比传统的 document.cookie 具有显著优势。它支持 Promise 风格 API，可在 Service Worker 中使用，提供监听 Cookie 变化的能力，并能更便捷地设置安全属性。常用方法包括 get()、set()、delete() 和事件监听，其中 set() 方法支持 expires、sameSite 和 secure 等安全配置。建议敏感 Cookie 采用 sameSite:'Lax'
2025-09-21 23:19:16
370
原创 css 给文本添加任务图片背景
用CSS实现文本背景填充效果：通过background-image为文本设置背景图，结合-webkit-background-clip:text和-webkit-text-fill-color:transparent属性，将背景裁剪为文字形状并透明化文字颜色，实现文字填充任意背景的效果。示例代码展示了如何为h1标题添加图片背景，在线演示可在CodePen查看。这种方法仅需几行CSS即可创建视觉冲击力强的文字效果。
2025-09-21 21:43:49
236
原创 javascript `AbortController`
AbortController是浏览器提供的API，用于取消异步操作，如fetch请求、Streams和WebSocket。它包含controller对象（创建/触发取消）和signal对象（传递给目标API）。基本用法是创建controller，将signal传给fetch，调用abort()取消请求。多个任务可共享同一个signal实现批量取消。也可用于自定义异步任务，通过监听abort事件实现取消逻辑。提供aborted、reason等属性和方法，支持自定义取消原因。
2025-09-21 20:28:16
315
原创 不使用 Javascript 的情况下创建可折叠面板：`::marker`伪元素
用纯CSS实现可折叠面板，无需JavaScript。通过details和summary标签配合::marker伪元素，实现面板展开/收起时图标切换：默认显示"👉"，展开时变为"👇"。这种方式简洁高效，适用于现代浏览器，展示了CSS的强大功能。
2025-09-21 13:05:36
392
原创 `loading=“lazy“` 延迟加载任何屏幕外图像来提高我们网站的性能
摘要 使用loading="lazy"属性可以延迟加载屏幕外的图像，这是提升网站性能的有效方法。通过在<img>标签中添加该属性，当图片不在可视区域时不会立即加载，从而加快页面加载速度并改善用户体验。这种简单实现方式对网站优化有明显效果。
2025-09-21 12:40:03
661
原创 `css`使单词保持连贯的两种方法
这篇文章介绍了两种在CSS中保持单词连贯的方法：1）使用 （不换行空格）强制连接单词，如st goto me；2）使用white-space: nowrap样式禁止换行。文中还提供了一个CodePen示例，展示了这两种技术的实际应用效果。
2025-09-20 20:32:27
241
原创 CSS 两行代码即可调整任何块元素的大小
只需两行CSS代码即可让块元素可调整大小：给目标元素添加resize: horizontal实现水平调整功能，配合overflow-x: auto确保内容自适应。这段代码适用于div、p、th等常见块级元素，无需JavaScript即可创建直观的尺寸调整交互效果。通过CodePen示例可查看实际效果。
2025-09-20 20:02:11
115
原创 `html` 将视频作为背景
这段代码演示了如何将视频设置为全屏背景。通过CSS定义了一个占满整个视口(.wrapper)的容器，其中的视频(.video)使用绝对定位和object-fit: cover属性确保视频始终填满容器并保持比例。在CodePen示例中，用户可以看到实际效果，视频作为背景可以自适应不同屏幕尺寸。这种技术常用于网站的全屏视频背景设计。
2025-09-20 18:17:12
310
原创 `HTML`实体插入软连字符: `­；`
这篇文章展示了一个HTML实体插入软连字符()的代码示例。通过CodePen嵌入的iframe演示了如何在HTML中使用软连字符实体，该字符在需要时才会显示为连字符。示例代码简单明了，适合开发者学习HTML特殊字符实体的使用。
2025-09-20 16:47:22
367
原创 `inputmode=‘numeric‘` input在移动设备下对于纯数字输入的技巧
摘要：处理数字输入时，对于邮政编码、信用卡号等关键数字字段，应避免使用type="number"。推荐使用inputmode="numeric"配合pattern="[0-9]*"属性，这能在移动设备上提供更好的数字键盘体验。示例代码展示了两种输入方式的对比，建议在移动设备上查看实际效果。这种方法能确保数字输入的正确性，同时避免type="number"可能带来的副作用。
2025-09-20 16:10:13
493
原创 `Web Check`：用于分析任何网站的一体化 OSINT 工具
Web-Check是一款开源网站分析工具，可对目标网站进行全方位技术检测。它能提供IP信息、SSL/TLS配置、DNS记录、HTTP安全头等关键数据，帮助评估网站安全性和性能。工具还支持重定向链分析、路由追踪、SEO评分、子域名发现及威胁检测等功能，适用于安全审计、性能优化和网络监控等场景。通过开源项目形式提供，用户可自主部署使用。
2025-09-20 14:40:17
292
原创 素材库网站分享
SVG logo素材库推荐：svgl.app收录分类清晰的品牌矢量图（如浏览器Logo），SimpleIcons提供3000+单色品牌图标，Iconify整合多开源图标库，SVGRepo含10万+免费素材。品牌Logo选svgl（彩色）或SimpleIcons（单色），UI设计推荐Iconify/SVGRepo，需风格统一可搭配Feather Icons。多数免费，部分支持API调用或开源集成。
2025-09-20 14:04:15
705
原创 成千百个free API 的基本存储库，用于练习编程和创建项目
摘要：Public-APIs 是一个开源项目，收集了各类免费开放的 API 资源。项目托管在 GitHub 上（https://github.com/marcelscruz/public-apis），并设有官方网站（https://publicapis.dev/），为开发者提供便捷的 API 查询和使用服务。该资源库涵盖多种类型的 API，方便开发者快速查找和集成所需功能。
2025-09-20 13:55:46
150
原创 CSS 创建漂亮的文字肖像
这段代码展示了一个使用CSS创建文字肖像的创意效果。通过CodePen嵌入的实例演示了如何将文字巧妙排列形成肖像图案，体现了CSS在艺术设计方面的灵活性。开发者liu874396180运用文本排版技巧，不借助图像就实现了视觉冲击力强的作品。该技术适用于网页艺术装饰、创意文字展示等场景，展现了前端开发中CSS的强大表现力。
2025-09-19 22:33:29
276
Windows6.1-KB2999226-x64.rar
2020-03-01
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人