Cascadea 是一款专为 macOS 设计的网页样式编辑器，允许用户通过编写 CSS 代码来自定义任何网站的视觉外观。它直接集成到 Safari 浏览器中，实现了实时编辑与预览，是网页设计师、前端开发者和高级用户进行网站样式调试与个性化定制的强大工具。
一、核心界面与工作区详解
Cascadea 的界面设计简洁，主要分为三个核心区域：
- 侧边栏（样式列表区）
- 位于窗口左侧，显示所有已创建样式规则的网站域名列表。
- 每个条目右侧显示开关按钮，可快速启用/禁用对应样式。
- 支持通过文件夹分类管理多个样式。
- 中央编辑区（代码编辑器）
- 占据窗口主要区域，提供语法高亮的 CSS 代码编辑环境。
- 支持自动缩进、代码补全（输入属性时提示）和语法错误高亮。
- 顶部标签页显示当前编辑的样式所属网站。
- 底部状态栏与工具栏
- 左侧显示当前样式状态（如“已保存”、“已启用”）。
- 右侧提供“刷新页面并注入样式”、“禁用/启用”等操作按钮。
- 包含快速跳转到 Safari 对应页面的按钮。
二、完整操作流程：从创建到导出
1. 创建新样式
操作位置： 菜单栏 > “文件” > “新建样式”，或使用快捷键 Command + N。
具体步骤：
- 按下
Command + N，弹出新建样式对话框。 - 在“应用于”字段输入目标网站的 URL 或域名（如
example.com）。支持通配符（如*.example.com）。 - 输入样式名称，点击“创建”。
2. 编写与编辑 CSS 代码
操作位置： 中央编辑区。
具体步骤：
- 在编辑器中直接输入 CSS 代码，例如：
body { background-color: #f0f0f0; } - 代码实时保存，无需手动保存操作。
- 可通过顶部标签页切换编辑不同网站的样式。
3. 在 Safari 中实时预览
操作位置： Cascadea 窗口底部工具栏，或 Safari 浏览器。
具体步骤：
- 确保样式开关已启用（侧边栏条目右侧按钮为蓝色）。
- 在 Safari 中打开目标网站，样式将自动注入并生效。
- 若修改代码后需重新加载，点击 Cascadea 工具栏的“刷新”按钮（或按
Command + R）。
4. 导出样式
操作位置： 菜单栏 > “文件” > “导出样式…”。
具体步骤：
- 在侧边栏选中要导出的样式或文件夹。
- 点击“文件” > “导出样式…”（
Command + Shift + E）。 - 选择导出格式（如 CSS 文件或 Cascadea 备份文件），指定存储路径。
三、常用功能进阶技巧
1. 使用浏览器检查器辅助编写
在 Safari 中打开“开发者工具”（Option + Command + I），检查元素获取类名或 ID，将其复制到 Cascadea 中作为 CSS 选择器，可精准定位元素。
2. 利用变量统一主题色
在样式顶部定义 CSS 自定义属性（变量），便于全局修改颜色主题：
:root {
--main-color: #3366cc;
--background: #ffffff;
}
body {
background-color: var(--background);
}
a {
color: var(--main-color);
}3. 为特定设备或条件编写媒体查询
在编辑器中直接添加响应式代码，例如隐藏移动端侧边栏：
@media (max-width: 768px) {
.sidebar {
display: none;
}
}四、常见问题与解决方案
问题1：样式在某个网站上未生效
可能原因与解决：
- URL 匹配错误： 检查样式的“应用于”字段是否与网站域名完全匹配（可尝试使用通配符
*.）。 - 样式被禁用： 确认侧边栏中该样式开关已启用。
- CSS 特异性不足： 网站原样式优先级更高，尝试增加选择器特异性（如添加
!important）。
问题2：代码修改后页面未更新
解决步骤：
- 确保 Cascadea 中已保存修改（自动保存，可查看状态栏）。
- 点击 Cascadea 工具栏的“刷新”按钮（
Command + R），强制重新注入样式。 - 检查 Safari 中是否缓存了旧样式，可尝试 Safari 的“刷新”操作（
Command + R）。
问题3：样式影响多个不想修改的网站
解决： 将样式的“应用于”字段范围缩小，避免使用过于宽泛的匹配（如 http://）。使用完整域名或更精确的 URL 路径。
五、快捷键汇总表（Mac版）
| 功能 | 快捷键 | 说明 |
|---|---|---|
| 新建样式 | Command + N |
创建针对新网站的样式 |
| 保存样式 | Command + S |
手动保存当前编辑的样式（通常为自动保存） |
| 刷新页面并注入样式 | Command + R |
重新加载 Safari 页面并应用最新样式 |
| 启用/禁用当前样式 | Command + E |
快速切换当前样式生效状态 |
| 查找代码 | Command + F |
在编辑器中查找文本 |
| 注释/取消注释行 | Command + / |
对选中行添加或移除 CSS 注释 |
| 导出样式 | Command + Shift + E |
将选中样式导出为文件 |
| 打开 Safari 对应页面 | Command + Option + O |
跳转到当前样式对应的 Safari 标签页 |
| 显示/隐藏侧边栏 | Command + 1 |
切换样式列表区的可见性 |
通过以上介绍，您可以全面了解 Cascadea 的核心功能与操作流程。这款工具将 CSS 编辑与浏览器实时预览无缝结合，极大地提升了网站样式定制与调试的效率。请根据实际需求灵活运用其编辑、管理和调试功能。
“`
