分类： CSS

发布于

CSS `Display Mode` (`fullscreen`, `standalone`) 媒体查询与 PWA 体验

各位观众老爷们，晚上好！今天咱们来聊聊 CSS 媒体查询里的 display-mode 这货，以及它跟 PWA (Progressive Web App) 体验之间不得不说的故事。这玩意儿听起来挺玄乎，但其实理解起来就像理解“你妈觉得你冷”一样简单直接。 开场白：啥是 Display Mode？ 首先，咱们得搞清楚 display-mode 是个啥玩意。简单来说，display-mode 是一个 CSS 媒体查询，它能告诉你你的 PWA 当前是以哪种模式运行的。这几种模式就好像你穿不同的衣服一样，虽然都是你，但场合不一样，穿的衣服也不一样嘛。 主要有以下几种模式： browser: 顾名思义，就是普通的浏览器标签页里运行。就像你平时浏览网页一样。 minimal-ui: 也是在浏览器里，但浏览器提供的 UI 元素会少一些。通常会隐藏地址栏，给你更大的内容展示空间。 standalone: 像个独立应用一样运行，隐藏了浏览器的所有 UI 元素，看起来更像原生 App。 fullscreen: 全屏模式，霸占你的整个屏幕，啥浏览器 UI 都看不见。玩游戏或者看视频的时候经常用到。 Disp …

继续阅读“CSS `Display Mode` (`fullscreen`, `standalone`) 媒体查询与 PWA 体验”

发布于

CSS `Device Posture API` (提案) 结合 `media-query`：折叠屏设备姿态适配

各位观众老爷，大家好！今天咱们来聊聊一个听起来有点科幻，但实际上已经离我们不远的玩意儿：CSS Device Posture API，以及它和media-query的结合，专门解决折叠屏设备上的适配问题。 一、折叠屏：甜蜜的负担？ 折叠屏设备，酷炫是真酷炫，但适配起来那叫一个头疼。想想看，一个屏幕能变成两种甚至三种形态，你的网页、你的APP，得跟着变脸才行。传统的响应式设计？emmm…只能说聊胜于无，毕竟它主要针对的是屏幕尺寸，而折叠屏带来的更多是形态的变化。 二、Device Posture API：姿势很重要！ 这时候，Device Posture API就闪亮登场了。这玩意儿的作用就是告诉浏览器，你的设备现在是什么“姿势”，比如： Continuous: 设备可以自由旋转，没有明显的折叠状态。 Folded: 设备已经折叠起来，可能只露出一个小的封面屏幕。 Separated: 设备完全展开，呈现一个更大的屏幕。 Rear: 设备背面朝向用户。 Unknown: 浏览器无法确定设备姿态。 有了这些信息，我们就可以针对不同的姿势，编写不同的CSS样式了。 三、Media …

继续阅读“CSS `Device Posture API` (提案) 结合 `media-query`：折叠屏设备姿态适配”

发布于

CSS `Environment Variables` (`env()`) 结合 `safe-area-inset` 等系统级信息

各位好，欢迎来到今天的“CSS Environment Variables & Safe Area Insets” 讲座。今天咱们就一起扒一扒CSS这位老兄的新玩具，看看它能玩出什么花样，尤其是跟那些“安全区域”搅和在一起的时候。准备好了吗？咱们这就开始！ 开场白：CSS 的“环境意识”觉醒 话说CSS一直以来都像个专注的艺术家，埋头苦干，只管把样式画出来，至于它画在什么环境里，那可不管。但时代变了，现在是响应式设计的天下，CSS也得有点“环境意识”才行。 这就引出了咱们今天的主角之一：env() 函数，还有它的小伙伴 safe-area-inset-*。 第一部分：env() 函数：CSS 的千里眼 env() 函数，顾名思义，就是用来读取“环境变量”的。这里的“环境变量”不是指操作系统里的那些，而是由浏览器或者宿主环境（比如你的App WebView）提供的一些信息。 语法： property: env(variable-name, fallback-value); variable-name：你要读取的环境变量的名字。 fallback-value：可选参数，如果环境变量 …

继续阅读“CSS `Environment Variables` (`env()`) 结合 `safe-area-inset` 等系统级信息”

发布于

CSS `color-scheme` `light` / `dark` `root-only` 行为与组件适配

各位观众，早上好！今天咱们来聊聊CSS color-scheme 属性，特别是 light / dark root-only 这几个关键字，以及如何让你的组件更好地适应用户的浅色/深色模式偏好。这玩意儿听起来有点玄乎，但其实只要掌握了窍门，就能让你的网站在各种环境下都表现得棒棒哒。 一、color-scheme 属性是个啥？ 简单来说，color-scheme 属性就是告诉浏览器，你的网站支持哪些配色方案。它可以接受多个值，比如 light、dark，甚至还可以接受自定义的值。 :root { color-scheme: light dark; } 这行代码的意思是，这个网站支持浅色和深色两种配色方案。浏览器会根据用户的系统偏好，自动选择合适的配色方案。 二、root-only 是个什么妖孽？ root-only 关键字就比较特殊了。它告诉浏览器，这个配色方案只应该应用于根元素（通常是 <html> 元素）。这意味着，只有根元素的背景色和文本颜色会受到配色方案的影响，其他元素的颜色则不会。 :root { color-scheme: light dark root-only …

继续阅读“CSS `color-scheme` `light` / `dark` `root-only` 行为与组件适配”

发布于

CSS `media-query` `forced-colors` `active` / `none` 值的应用策略

大家好，我是今天的主讲人，代号“像素搬运工”。今天咱们不搬砖，搬点颜色，聊聊 CSS 的 forced-colors 这个有点冷门但关键时刻能救命的家伙。 开场白：颜色背后的故事 各位有没有遇到过这样的情况：网页在你电脑上看起来美轮美奂，换到别人电脑上，或者换个操作系统，颜色就直接崩盘，对比度低到看不清，或者刺眼到想把屏幕砸了？ 这时候，就要请出我们的主角 forced-colors 了。 forced-colors 是一个 CSS media query 特性，它检测用户是否要求操作系统强制使用有限的颜色调色板。简单来说，就是用户通过操作系统设置，强制网页使用一套特定的颜色方案。这通常是因为用户有视觉障碍，或者需要更高的对比度才能看清屏幕。 forced-colors 登场：active vs none forced-colors 有两个值： active：表示用户启用了强制颜色模式。 none：表示用户没有启用强制颜色模式。 咱们可以利用这两个值，在用户启用强制颜色模式时，提供一套专门适配的样式，确保网页的可访问性和可用性。 实战演练：代码说话 光说不练假把式，咱们直接上代码。 / …

继续阅读“CSS `media-query` `forced-colors` `active` / `none` 值的应用策略”

发布于

CSS `media-query` `prefers-contrast` `more/less` 值的精确应用

各位观众老爷，晚上好！我是你们的老朋友，今晚咱们就来聊聊 CSS media-query 中 prefers-contrast 这个家伙，尤其是它那两个有点神秘的参数：more 和 less。这玩意儿乍一看挺简单，但真正用起来，你会发现水深得很。别怕，今天咱们就一层层扒开它的外衣，看看里面到底藏着什么。 开场白：对比度，一个被忽视的小可爱 在Web开发的世界里，我们总是把目光聚焦在色彩、布局、动画这些花里胡哨的东西上，很容易忽略对比度这个默默奉献的小可爱。但对于一些视力障碍人士，或者在光线不佳的环境下使用设备的用户来说，对比度至关重要。它直接影响到内容的易读性和可访问性。 prefers-contrast 这个媒体查询就是为了解决这个问题而生的。它可以让我们根据用户的操作系统或浏览器设置，调整网页的对比度，从而提供更好的用户体验。 prefers-contrast: 基础用法，不废话直接上代码 首先，我们来看看 prefers-contrast 的基本用法。它接受三个值： no-preference: 用户没有指定对比度偏好。 more: 用户偏好更高的对比度。 less: 用户偏好更 …

继续阅读“CSS `media-query` `prefers-contrast` `more/less` 值的精确应用”

发布于

CSS `Constraint-Based Layout` (约束布局) 与 `CSS Grid` 的数学关系

各位观众老爷们，晚上好！ 咱们今天来聊聊CSS布局界的两大高手：Constraint-Based Layout（约束布局）和CSS Grid。 这俩家伙看起来都挺厉害，都能把元素安排得井井有条，但它们之间到底有什么数学关系？ 别急，咱们这就来扒一扒它们的底裤，看看它们到底是怎么用数学来玩转布局的。 一、 Constraint-Based Layout：数学约束的舞者 Constraint-Based Layout，顾名思义，就是基于约束的布局。 简单来说，就是通过一系列的数学约束条件，来确定元素的位置和大小。 就像解方程组一样，给出一堆约束条件，然后让浏览器自己去算出一个最优解。 约束的类型 Constraint-Based Layout 中的约束类型多种多样，但最常见的莫过于以下几种： 相等约束（Equality Constraint）： 比如，"A 的左边缘等于 B 的右边缘"，或者 "A 的宽度等于 B 的高度的一半"。 不等约束（Inequality Constraint）： 比如，"A 的顶部边缘必须小于等于 B 的底部边缘& …

继续阅读“CSS `Constraint-Based Layout` (约束布局) 与 `CSS Grid` 的数学关系”

发布于

CSS `Functional Programming` 思想在 `CSS Variables` 与 `calc()` 中的体现

各位观众老爷们，大家好！今天咱们不聊八卦，来点硬核的，聊聊 CSS 里那些隐藏的“函数式编程”小心机。别害怕，虽然名字听起来高大上，但保证你听完之后，感觉 CSS 也能玩出花儿来！ 咱们今天要聊的核心是：CSS Variables (自定义属性) 和 calc() 函数，以及它们如何体现函数式编程的思想。 什么是函数式编程？别怕，三句话概括： 纯函数： 给定相同的输入，永远返回相同的输出，没有副作用（不改变外部状态）。 不可变性： 数据一旦创建，就不能被修改。 函数是一等公民： 函数可以像变量一样传递和使用。 听起来有点抽象？没关系，咱们用 CSS 的例子来解释。 一、CSS Variables：变量，但不仅仅是变量 CSS Variables，又称自定义属性，用 — 开头定义。它们允许你存储值，并在整个样式表中重复使用。乍一看，这好像只是提高了代码的可维护性，避免了到处复制粘贴。但实际上，它也为函数式编程的思想埋下了伏笔。 :root { –base-color: #3498db; –spacing-unit: 16px; } body { background-color: …

继续阅读“CSS `Functional Programming` 思想在 `CSS Variables` 与 `calc()` 中的体现”

发布于

CSS `LCH` 颜色空间 `Gamut Mapping` (色域映射) 与颜色校正

大家好，我是颜色世界的导游，今天咱们来聊聊CSS LCH 颜色空间里的 Gamut Mapping (色域映射) 和颜色校正，这两个家伙听起来高大上，其实也没那么玄乎，本质上就是“颜色搬运工”和“颜色美容师”。准备好了吗？咱们这就出发！ 第一站：LCH 颜色空间的“前世今生” 在进入 Gamut Mapping 和颜色校正之前，咱们得先了解一下 LCH 颜色空间是个啥。简单来说，LCH 是一种基于人眼感知设计的颜色模型，它把颜色分解成三个部分： L (Lightness)： 明度，从 0 (黑) 到 100 (白)。想象一下亮度调节滑块。 C (Chroma)： 色度，颜色的鲜艳程度，从 0 (中性灰) 到理论上的无穷大（但实际设备有上限）。 类似于颜料的浓度。 H (Hue)： 色相，就是我们常说的颜色名称，比如红、绿、蓝等等，用角度表示，从 0 到 360 度。想象一下色轮。 LCH 的优点在于它更符合人类的视觉感知。比如，在 RGB 中，改变一个数值可能同时影响明度和色度，而在 LCH 中，你可以单独调整亮度，而不影响颜色的鲜艳程度。 第二站：为什么要进行 Gamut Mappi …

继续阅读“CSS `LCH` 颜色空间 `Gamut Mapping` (色域映射) 与颜色校正”

发布于

CSS `Trigonometric Functions` (`sin()`, `cos()`) (提案) 创建复杂形状

各位前端的侠士们，晚上好！今天咱们来聊点刺激的，关于CSS Trigonometric Functions，也就是CSS三角函数 (sin(), cos(), tan(), atan(), asin(), acos()) 的提案。别害怕，虽然听起来像数学课，但其实有了它们，咱们就能在CSS里玩转复杂的形状和动画，摆脱图片和SVG的束缚，想想都觉得兴奋！ 开场白：CSS，不止于盒模型 咱们都知道，CSS的世界里，盒模型是基石。但时间长了，天天对着矩形、圆形，是不是有点审美疲劳？想象一下，如果咱们能用CSS直接绘制出各种奇形怪状，那该有多酷！这就是CSS三角函数提案的意义所在：它试图打破盒模型的限制，赋予CSS更强大的图形绘制能力。 什么是CSS三角函数？ 简单来说，CSS三角函数就是允许咱们在CSS里使用正弦 (sin())、余弦 (cos())、正切 (tan()) 以及对应的反函数 (asin(), acos(), atan())。这些函数接收一个角度作为参数，返回一个介于 -1 和 1 之间的数值 (对于 sin() 和 cos())，或者一个角度值 (对于反函数)。 为什么要用C …

继续阅读“CSS `Trigonometric Functions` (`sin()`, `cos()`) (提案) 创建复杂形状”