容器查询互动沙盒 - @container响应式组件
在卡片内调整容器尺寸,直观预览基于容器宽度的样式变化,学习和验证CSS容器查询。
UD5工具箱
GraphQL Introspection 是 GraphQL 规范中的一项功能,允许客户端通过发送特殊的 __schema 查询来获取 API 的完整类型系统信息。通过 Introspection,你可以了解:
注意:出于安全考虑,许多生产环境的 GraphQL API 会禁用 Introspection。如果获取失败,可能是该端点已关闭此功能。
alias: fieldName 语法为重命名字段...FragmentName 复用字段集合@include(if:) 和 @skip(if:) 进行条件查询在查询中使用 $variableName 声明变量,然后在"变量"标签页中以 JSON 格式提供值:
查询:
query ($code: ID!) {
country(code: $code) { name capital }
}
变量:
{ "code": "CN" }
变量使查询更加灵活和安全,避免字符串拼接带来的注入风险。
| 特性 | GraphQL | REST |
|---|---|---|
| 数据获取 | 单一端点,按需获取 | 多个端点,固定返回 |
| 过度/不足获取 | 精确获取所需字段 | 常见过度或不足 |
| 版本管理 | 无需版本号,渐进演化 | 通常使用版本号 |
| 学习曲线 | 较陡,需学习类型系统 | 简单直观 |
| 缓存 | 需额外工具支持 | 可利用HTTP缓存 |
Authorization 头在卡片内调整容器尺寸,直观预览基于容器宽度的样式变化,学习和验证CSS容器查询。
通过Web Serial API连接串口设备,实现一个简洁的终端界面收发文本数据。
输入文件名或MIME类型,查询可能对应的标准扩展名,反向查找方便,含音频视频文档等。
分析英文文本的句长、词汇难度,给出可读性评分与年级水平,并高亮难懂句子。
基于Web Crypto API模拟的3DES在线加解密,兼容旧版系统升级安全策略,支持多种填充方式。
通过navigator.languages显示用户浏览器设置的语言偏好列表。
可视化调整滚动条宽度、颜色、圆角和阴影,生成针对Webkit内核的CSS美化代码。
生成类似饼图或彩虹旋转的conic-gradient,调节起始角度和色标位置。
选择坐标纸、点阵或空白数学卷面模板,直接打印。
简短问卷评估你主要表达和接收爱的方式,改善伴侣关系。
展示各国使用的电源插头类型、标准电压和频率,出国旅行必备。
让儿童滑动温度计上的滑块来表达当下感受的生气、开心程度,增强情绪识别。
查看美、英、欧、日和厘米之间的鞋码换算表。
输入原胎与新胎规格,计算直径、周长、时速表误差变化。
通过内置数据查询中国或国外主要城市邮编,或输入地址反查。
输入城市或机场名给出IATA码,反向亦然,附带航站楼参考。
基于地理位置与时间估算紫外线强度,给出防晒霜SPF推荐及晒伤时间预警。
触发系统原生分享,支持分享文本、链接与文件,检查浏览器兼容性与支持级别。
输入MAC地址,提取OUI前缀并匹配内置IEEE注册表,识别设备网卡制造商。
按国家或货币名称查询对应的ISO 4217货币代码和符号(如¥、€)。
查找并列出国标语言代码、两位及三位字母,适用于HTML lang属性设置和国际化。
输入IPv4地址,自动告知属于哪一类(A,B,C),是否私有,以及网络和主机部分。
使用CompressionStream和DecompressionStream对文本进行实时的gzip或brotli压缩与解压。
调用联系人API列出可用联系属性,选中后显示(需环境支持)。
搜索知名品牌名称,显示其标志性的官方HEX颜色代码。
输入一个数字串,在已计算的圆周率小数位中查找首次出现位置。
请求串口权限,向设备发送文本命令并显示接收数据,用于嵌入式调试。
使用现代浏览器文件系统访问API打开、编辑并保存本地文件,演示权限流程。
打开一个始终置顶的小窗口,在其中显示自定义内容(例如笔记/时钟),实验新API。
实时显示当前页面可见状态,当切换标签页时记录时间并给出日志。