宣布 Style Stage：社区 CSS 展示

这一期特别的现代 CSS 解决方案是关于一个新项目，它将为您提供展示 CSS 技能的机会。

尊敬的 CSS 社区：

我邀请您参与一个新项目，在这个项目中，您有机会在公开学习的同时挑战您的 CSS 和网页设计技能。

关于 Style Stage

StyleStage.dev不仅仅是一个关于该项目的信息登陆页面 - 它是基础 HTML，旨在由像您这样的贡献者重新设计！

Style Stage 最初是一个疯狂的想法，旨在重振Dave Shea创建的
CSS Zen Garden的精神，并展示了“通过基于 CSS 的设计可以实现什么”，直到 2013 年停止提交。

从那时起，CSS 领域已经有了很大的改进，包括可用的属性、可用于构建的工具、对解决可访问性问题的更深入理解，以及对性能影响的认识的提高。

如果您错过了发布会的直播，这里有经过轻微编辑的完整 Twitch 直播，或者您可以按主题查看Twitch 精彩集锦。我们涵盖了本文中的许多内容以及更多关于 CSS 的内容，最后构建了一个新的 11ty 功能 ✨。

我们为什么需要这个？

当最适合项目的是使用自然状态的 CSS 并与级联融为一体时，选择框架的趋势正在日益增长。

创建 Style Stage 样式表将挑战您探索诸如弹性框和网格等技术来排列页面，以及使用伪元素来添加额外内容和视觉效果。抓住机会，设计出一些令人眼前一亮的作品！目前为止，渐变和渐变transform: skew()很受贡献者的欢迎✨ 查看其他现代功能列表，从中汲取灵感，探索您可能想尝试的功能。

通过禁止访问 HTML（HTML 本身已经具备语义，且可访问），Style Stage 鼓励您在重新熟悉基础知识的同时发挥创意。在这个快节奏的行业中，我认为这是一大优势。

玩是位强大的老师！你能在保持易用性和高性能的同时突破多大的界限？这些技能值得练习，它们能让你在未来的项目中选择合适的工具。即使合适的工具是一个框架，你也能更深入地理解你所应用的样式是如何工作的，并提高你自定义它们的能力。

相信我 - 说“我可以用 CSS 做到这一点！”感觉很好。

要获得更多提示、想法和灵感，请查看资源。

订阅新闻简报，定期获取有关新样式和新功能发布的更新。您还可以获取RSS 源。

我如何贡献样式表？

查看StyleStage.dev了解更多详细信息以及源 HTML 和 CSS。

通过作为贡献者参与，只要 Style Stage 在线，您的样式表链接和任何资产链接仍然有效，并且遵守所有贡献者指南，您的作品就会与您提供的归属共享。

查看贡献步骤 >

指南 TL;DR

所有提交内容都将进行压缩、自动添加前缀，并根据CC BY-NC-SA 许可证进行前置处理，并使用您提供的元数据进行署名。您可以使用任何您喜欢的构建设置，但最终提交的内容应为编译后的、未压缩的 CSS。您保留原始图形的版权，并且必须确保所有使用的图形均已获得适当的许可。所有资源链接（包括字体）必须与外部资源保持绝对链接。样式表将保存到 Github 代码库中，检测到的违反指南的更改将被删除。

确保您的设计具有响应式设计，并通过了无障碍对比度测试（我们将使用 aXe 进行验证）。动画应通过 移除prefers-reduced-motion。尖端技术应提供必要的回退机制，以免严重影响用户体验。任何内容都不得永久隐藏，隐藏项目必须采用无障碍查看技术。页面加载时间不得超过 3 秒。

查看完整指南 >

（可能的）未来功能

• 暗模式切换- 可选择切换以改善用户体验，允许他们选择显示哪个主题，而不是prefers-color-scheme仅仅依靠值
• 样式索引预览图像- 改善浏览可用样式的体验

致谢

非常感谢Andy Bell (@hankchizljaw)抽出宝贵时间审核项目基础，并成为早期推动者！💫

还要感谢Miriam Suzanne（@MiriSuzanne）就如何发展该项目提出的一些很好的反馈和想法🚀

Katie Langerman (@KatieLangerman)的建议使项目描述和指南更加清晰

当然还有最初的六位贡献者——非常感谢你们在短时间内花时间创建出色的样式表，帮助实现这个项目！

一些统计数据

• Style Stage 的想法于 2020 年 7 月 2 日出现，该项目于 2020 年 7 月 10 日启动。
• 基于我最喜欢的静态站点生成器，11ty从我开发的 starter 开始
• 托管于Netlify
• 主舞台主题获得了 100 个灯塔和 PageSpeed 分数，以及 0.502 秒的速度指数🙌

以下是最初的 6 位贡献者：

• Jean Louise Tiston 的Retroish
• 唐尼·达马托 (Donnie D'Amato) 的《Skewten》
• 多米尼克·达芬（Dominic Duffin）的《紫色与粉彩》
• Shannon Crabill 的《蒸汽波》
• 凯蒂·兰格曼的《中心舞台》
• 米里亚姆·苏珊娜的《酷儿模式》