技术教程

1. 首页
2. 文章资讯
3. 技术教程

OpenTelemetry 全链路可观测（W3C TraceContext、采样与指标关联）

--- title: OpenTelemetry 全链路可观测（W3C TraceContext、采样与指标关联） keywords: - OpenTelemetry - TraceContext - 采样 - 指标 - 日志关联 description: 基于 W3C TraceContext 标准与 OpenTelemetry，构建日志、指标、链路的统一观测，介绍采样策略与关联方法并给出验证手...

技术教程 2026年04月30日 0 点赞 0 评论 5 浏览

PWA 图标：maskable 与安全区域适配

--- title: PWA 图标：maskable 与安全区域适配 keywords: - maskable - Web App Manifest - 图标安全区域 - 适配 - 角标 description: '介绍 PWA 的 maskable 图标与安全区域适配，使用 `purpose: maskable` 提供可裁剪区域，避免系统蒙版裁剪重要内容，并给出设计与清单示例。' categor...

技术教程 2026年04月30日 0 点赞 0 评论 5 浏览

PWA 安装信号：Web App Manifest 与可安装性条件

--- title: PWA 安装信号：Web App Manifest 与可安装性条件 keywords: - Web App Manifest - 可安装性 - maskable icon - display-mode - theme_color - 安装提示 description: 总结 PWA 的可安装性信号与必要条件，包含 Manifest 字段、Service Worker、HTTP...

技术教程 2026年04月30日 0 点赞 0 评论 5 浏览

Periodic Background Sync：定时后台任务与约束

--- title: Periodic Background Sync：定时后台任务与约束 keywords: - Periodic Sync - Service Worker - periodicsync - 权限策略 - 离线数据 description: 介绍 Periodic Background Sync 的注册与事件处理、权限与平台约束、与离线缓存/上报协作的工程建议，并提供示例与参考...

技术教程 2026年04月30日 0 点赞 0 评论 5 浏览

Permissions-Policy特性权限治理

--- title: Permissions-Policy特性权限治理 keywords: ["Permissions-Policy", "特性权限", "浏览器策略", "嵌入", "隐私"] description: 使用 Permissions-Policy 控制页面与嵌入内容的特性权限，降低滥用与隐私风险，构建可审计的安全基线。 categories: - 文章资讯 - 技术教程 ...

技术教程 2026年04月30日 0 点赞 0 评论 5 浏览

Permissions-Policy：特性治理与最小授权实践

--- title: Permissions-Policy：特性治理与最小授权实践 keywords: - Permissions-Policy - Feature Policy - iframe allow - geolocation - camera description: 通过服务器头或 iframe 精确限制特性使用范围，以最小授权原则防止滥用并改善合规与安全性。 categories:...

技术教程 2026年04月30日 0 点赞 0 评论 5 浏览

Permissions-Policy：限制第三方能力与安全治理

--- title: "Permissions-Policy：限制第三方能力与安全治理" keywords: - Permissions-Policy - Feature Policy - 第三方限制 - geolocation - camera description: "介绍 Permissions-Policy 的头部语法与策略设计，限制 iframe/第三方脚本的能力范...

技术教程 2026年04月30日 0 点赞 0 评论 5 浏览

CSS accent-color：原生控件主题化与无障碍

使用 accent-color 为复选框、单选、进度等原生控件赋予主题色，同时确保对比度与易用性，并提供兼容与降级方案。

技术教程 2026年04月30日 0 点赞 0 评论 5 浏览

CSS backface-visibility：3D 翻转的正背面控制

说明 `backface-visibility` 控制元素背面在 3D 翻转时是否可见，配合 `transform-style: preserve-3d`

技术教程 2026年04月30日 0 点赞 0 评论 5 浏览

CSS has 选择器：交互增强与性能边界

解释 CSS :has() 的关系选择能力（父选择器效果），展示交互增强用例（如有子元素时样式变化），并给出性能边界与工程建议。

技术教程 2026年04月30日 0 点赞 0 评论 5 浏览

CSS is() 与 where() 选择器：简化匹配与权重治理

使用 :is()/:where() 简化复杂选择器匹配，并通过 :where() 的零权重特性治理覆盖与级联，提升样式可维护性。

技术教程 2026年04月30日 0 点赞 0 评论 5 浏览

CSS object-fit 与 object-position：媒体裁剪与填充策略

介绍 `object-fit/object-position` 在图片与视频上的应用，选择合适的裁剪/填充策略并精确对齐兴趣区域，提升画面与版式的一致性与可用性。

技术教程 2026年04月30日 0 点赞 0 评论 5 浏览

CSS overflow-anchor：滚动锚定与内容插入的稳定性

说明滚动锚定机制与 `overflow-anchor` 属性的控制，在动态内容插入时避免滚动位置意外跳动，提升阅读与交互稳定性，并给出适用场景与示例。

技术教程 2026年04月30日 0 点赞 0 评论 5 浏览

CSS shape-outside：文本环绕与图文排版

说明 `shape-outside` 与 `shape-margin` 的用法，让文本沿自定义形状环绕排版，支持圆形/椭圆/路径等，提升图文版式表达并给出兼容与性能建议。

技术教程 2026年04月30日 0 点赞 0 评论 5 浏览

CSS 滚动捕捉：Scroll Snap 的交互与性能

介绍 CSS Scroll Snap 在滑块/轮播/分页滚动中的用法与参数，说明与惯性滚动与可访问性的协作，并给出性能注意与参考。

技术教程 2026年04月30日 0 点赞 0 评论 5 浏览