CSS中最大和最小的宽度/高度

CSS中宽度和高度，是每个元素最基本的属性，也是CSS中最难懂的一部分。我们常常用父元素来限制一个元素的宽度，同事也可以让它动态化。最大（maximum）和最小（minimum）宽度在控制元素的宽度上很有用。 文章中通过宽度和高度的最大和最小的CSS属性，并用可能的使用场景和提示...

如何用CSS Variables和React Context创建一个主题引擎

CSS变量（Variables）是一个很酷的东西，你可以用它做很多事情，比如在你的应用里使用ease适配主题。 作者在本文中展示如何将CSS变量集成到React中，并使用Context创建一个主题组件（ThemeComponent），文中有详细的代码示例。

旧CSS，新CSS

在”远古时代“，是没有CSS的。 作者从事Web设计和开发有二十多年的时间，经历过CSS从”远古时代“到”现代化“的过程（从0到1）。时间跨度太长，作者根据自己的记忆将CSS的发展历程用几个阶段来阐述。 内容很长，暂列每个阶段（详见原文）： The very earl...

多行渐变色链接

不知道你有没有看过[CSS Tricks](https://css-tricks.com/)重新改版的页面，应该对它渐变色的链接印象深刻。如果没有看过它的网站，可以看看上面的图。 作者在本文中分享如何知错一个渐变色链接。 暂列几个示例代码，供大家参考： .gradient-te...

CSS媒体查询完整指南

媒体查询是一种通过浏览器特定的特点、特性和用户偏好等运行特定代码的方法。世界上最常用的媒体查询是以viewport变化来应用不同的样式代码。响应式设计的想法💡就是由此而来。 /* When the browser is at least 600px and above */ @...

Chrome88新发布的支持：aspect-ratio

Chrome 前两天发布了新版本：v88，一个挺吉利的版本。这个版本里有一个新支持的CSS特性值得开发者关注一下，那就是aspect-ratio。 aspect-ratio 之前在CSS中就存在，只不过是被当做媒体查询属性使用的。通过区分不同设备的宽高比来应用一些特殊的样式，如...

今天你可以用CSS做这些事

CSS近些年来有了很快的变革和发展，很多新特性可以让前端页面实现非常丰富且流量的交互，很大程度上提升了前端页面的体验。 作者在文中介绍了多个现代CSS中非常好用且强大的CSS功能，如砖型布局、:is选择器、clam()、ch和ex单位、最新的文本装饰和一些好用的CSS属性。 这些...

如何使用 Web 蓝牙 API

几周前，我偶然发现了一个我以前不知道存在的浏览器 API；那就是 Web 蓝牙 API。看起来它已经在开发中有 7 年以上的时间了，我很高兴大多数浏览器现在都支持它。我非常喜欢“一次构建，到处运行”的理念，这也是 Web 蓝牙令人兴奋的原因之一。您无需为 Android、iOS、...

学习这些视口相关的 CSS 单位（100vh、100dvh、100lvh、100svh）

在本教程中，我们将讨论使用经典的 100vh 单位创建全屏部分时面临的挑战，并讨论一些出色的替代 CSS 单位。 英雄或全屏部分是 UI 设计的重要组成部分。它们存在于不同类型的网站中，从登陆页面到作品集网站，旨在在首次吸引访客的注意力。英雄部分的常见组成部分包括幻灯片、图片、视...

什么是“实用优先”的 CSS？

在你充分理解 CSS 之前，你实际上无法真正理解“实用优先”的 CSS，因此本文主要将讨论 CSS。然而，矛盾的是，你对 CSS 的了解越深，你对“实用优先”的 CSS 的欣赏可能就越少。你可能会开始质疑为什么它应该存在。你甚至可能会开始质疑为什么 你 存在。 我会尽力解释。 在...