文章

发布于

CSS `HDR Color` (`Rec.2020`, `Display-P3`) 支持与感知均匀性色彩空间

各位观众老爷，大家好！今天咱们就来聊聊CSS里那些个“高大上”的色彩玩意儿：HDR Color（Rec.2020, Display-P3）和感知均匀性色彩空间。别怕，听名字唬人，其实理解起来很简单，保证你听完能跟人吹牛皮！ 第一部分：HDR Color，让你的屏幕亮瞎眼 啥叫HDR？High Dynamic Range，高动态范围。简单来说，就是能显示更亮、更暗，以及更多的颜色。以前的sRGB色彩空间就像个小房间，HDR色彩空间就像个大别墅，住的颜色多了去了。 CSS支持两种主要的HDR色彩空间：Rec.2020和Display-P3。 Rec.2020： 这货是个野心家，目标是覆盖人眼能看到的大部分颜色。但目前来说，大部分显示器还hold不住它，只能显示它的一部分子集。 Display-P3： 相对务实一点，是苹果搞出来的，比sRGB颜色更广，而且现在很多显示器都支持，兼容性更好。 怎么在CSS里用它们？ 很简单，用color()函数。这函数就像个万能钥匙，可以打开各种色彩空间的大门。 /* 使用Display-P3 */ body { background-color: color …

继续阅读“CSS `HDR Color` (`Rec.2020`, `Display-P3`) 支持与感知均匀性色彩空间”

发布于

CSS `color()` 函数：在 CSS 中直接使用 `Display-P3` 等广色域颜色

各位观众老爷们，大家好！今天咱们来聊聊CSS里的“色彩大爆炸”—— color() 函数，以及它如何让我们在网页上直接玩转广色域色彩，让你的设计瞬间高大上。准备好了吗？Let’s roll! 第一部分：色彩空间是个啥？为啥需要广色域？ 在咱们深入 color() 函数之前，先得搞清楚色彩空间的概念。 简单来说，色彩空间就是用来定义和表示颜色的一个数学模型。不同的色彩空间能表示的颜色范围是不一样的。 sRGB： 这是网页上最常用的色彩空间，也是历史最悠久的。它的优点是兼容性好，几乎所有设备都能正确显示。但缺点也很明显：能表示的颜色范围比较窄，尤其是绿色和蓝色区域，和真实世界相比差远了。想象一下，你看到一片翠绿的草地，用sRGB一显示，可能就变成了一种平淡无奇的颜色。 Display P3： 这是苹果公司推出的一种广色域色彩空间，比sRGB能表示的颜色范围广得多，尤其是在红色和绿色区域。这意味着在支持Display P3的设备上，你能看到更鲜艳、更逼真的色彩。想想你在iPhone或MacBook上看到的图片，是不是感觉色彩更丰富？ Rec.2020： 这是广播电视领域使用的一种 …

继续阅读“CSS `color()` 函数：在 CSS 中直接使用 `Display-P3` 等广色域颜色”

发布于

CSS `color-mix()` `space` 参数：在不同颜色空间进行颜色混合

早上好，各位颜色爱好者，今天我们来聊聊CSS color-mix() 中那个神秘又强大的 space 参数。 开场白：颜色，不仅仅是RGB 大家平时写CSS，颜色是不是 red、blue、#ffffff 这样直接招呼？ 或者更高级一点，用 rgba() 加上透明度？ 没毛病！ 但颜色世界远比你想象的精彩。它不仅仅是红绿蓝的简单组合，还涉及色彩的感知、物理特性，以及各种数学模型。color-mix() 函数的 space 参数，就是打开这个精彩世界的一把钥匙。 color-mix() 基础回顾：先学会走路，才能跑 在深入 space 参数之前，咱们先快速回顾一下 color-mix() 的基本用法。这就像学开车前，先得知道方向盘和油门在哪儿。 color-mix() 函数的基本语法是： color-mix( in <color-space>, <color> <percentage>?, <color> <percentage>? ) <color-space>: 这就是我们今天要重点讨论的 space 参数，指定颜 …

继续阅读“CSS `color-mix()` `space` 参数：在不同颜色空间进行颜色混合”

发布于

CSS `text-decoration-skip-ink`：下划线跳过文字下缘

各位观众老爷们，掌声在哪里！今天咱们就来聊聊CSS里一个有点意思，但又经常被忽视的小家伙——text-decoration-skip-ink。别看名字长，其实作用很简单，就是让你的下划线、上划线、删除线，在碰到文字下缘（比如字母’g’, ‘j’, ‘y’的尾巴）的时候，优雅地跳过去，而不是无情地穿过去。 好，废话不多说，咱们这就开始今天的讲座！ 1. 什么是text-decoration-skip-ink？ 首先，让我们来明确一下text-decoration-skip-ink到底是干嘛的。 简单来说，它控制的是文本装饰线（下划线、上划线、删除线）在绘制时，是否跳过字母的降部（descender）。降部指的是字母下伸的部分，比如’g’，’j’，’p’，’q’，’y’这些字母的下半部分。 如果没有text-decoration-skip-ink，这些装饰线会直接穿过这些字母的降部，看起来可能有点拥挤 …

继续阅读“CSS `text-decoration-skip-ink`：下划线跳过文字下缘”

发布于

CSS `line-clamp` `Safari` `line-clamp` 和 `overflow-wrap` 的兼容性问题

嘿，大家好！我是你们今天的 CSS 讲师，我们今天来聊聊一个让人又爱又恨的 CSS 属性：line-clamp。特别是在 Safari 浏览器里，它和 overflow-wrap 的兼容性问题，简直能让你抓狂。别担心，今天我们就来把这个坑填平！ 开场白：line-clamp，你的老朋友，还是老冤家？ line-clamp 属性，顾名思义，就是限制元素显示文本的行数。这在很多场景下都非常有用，比如新闻标题、产品描述等等，可以保持页面整洁，防止内容溢出。但是，事情往往没那么简单。尤其是在 Safari 浏览器里，line-clamp 的表现常常让人摸不着头脑，和 overflow-wrap 搭配使用时，更是容易出现各种奇怪的现象。 第一部分：line-clamp 的基本用法 首先，我们来回顾一下 line-clamp 的基本用法。要让 line-clamp 生效，你需要配合以下几个属性一起使用： display: -webkit-box;: 将元素设置为 -webkit-box 布局。 -webkit-box-orient: vertical;: 设置垂直方向的布局。 overflow: …

继续阅读“CSS `line-clamp` `Safari` `line-clamp` 和 `overflow-wrap` 的兼容性问题”

发布于

CSS `counter-set` (提案)：直接设置计数器值，更灵活的列表编号

各位观众老爷，晚上好！我是你们的老朋友，今天咱们来聊聊一个CSS新玩意儿——counter-set。这玩意儿啊，说白了，就是让你能更任性地控制列表编号，想从哪儿开始就从哪儿开始，想设成啥数就设成啥数，简直是列表界的“乾坤大挪移”。 一、为啥要搞个counter-set？ 在没counter-set之前，咱们用CSS计数器来做列表编号，一般都是这么玩的： ol { counter-reset: my-counter; /* 初始化计数器 */ } li::before { counter-increment: my-counter; /* 每次递增计数器 */ content: counter(my-counter) “. “; /* 显示计数器值 */ } 这段代码很简单，就是定义了一个名为my-counter的计数器，然后在每个<li>元素前面显示计数器的值，并且每次递增。 但是！问题来了。如果我们想让某个列表项的编号直接从一个特定的值开始，或者想在列表的中间突然跳到另一个编号，那可就麻烦了。以前的做法要么是改HTML结构，要么是用JavaScript，总之就是不优雅。 …

继续阅读“CSS `counter-set` (提案)：直接设置计数器值，更灵活的列表编号”

发布于

CSS `font-synthesis` `weight` / `style` / `small-caps` 的浏览器实现细节

各位观众老爷，大家好！今天咱们来聊聊CSS font-synthesis 这个有点冷门但关键时刻能救命的属性，特别是它的 weight, style, 和 small-caps 这三个小伙伴。这玩意儿涉及到浏览器如何“脑补”缺失的字体变体，属于底层实现细节，了解一下绝对不亏。 开场白：字体家族的那些事儿 话说，咱们在网页上显示文字，得先有字体吧？字体家族就像一个大家庭，里面有不同的成员，比如“微软雅黑”这个大家族，可能包含“微软雅黑 Regular（常规）”，“微软雅黑 Bold（加粗）”，“微软雅黑 Italic（斜体）”等等。 问题来了，如果设计师想要用一个特定的字体变体（比如“微软雅黑 ExtraBold Italic”），但是用户的电脑上偏偏没有这个变体，那怎么办？难道显示一片空白？ 这时候，font-synthesis 就登场了！它告诉浏览器，如果找不到完全匹配的字体变体，能不能尝试“合成”一个出来。 font-synthesis 的语法 font-synthesis 属性可以接受以下值： none: 禁用所有字体的合成。浏览器必须完全匹配字体，否则就用默认字体显示。 wei …

继续阅读“CSS `font-synthesis` `weight` / `style` / `small-caps` 的浏览器实现细节”

发布于

CSS `initial-letter` `align-to-line-grid` (提案)：首字下沉与基线网格对齐

各位前端小伙伴们，早上好/下午好/晚上好！我是今天的主讲人，很高兴能和大家一起聊聊一个CSS里比较冷门但又挺有意思的属性——initial-letter，以及一个与之相关的提案 align-to-line-grid。 这俩家伙，一个负责首字下沉，另一个负责让首字下沉的时候还能规规矩矩地对齐网格线。听起来是不是感觉有点像强迫症患者的福音？别急，我们慢慢展开。 第一部分：initial-letter——首字下沉的艺术家 顾名思义，initial-letter就是用来设置首字母样式的。它接收两个值： initial-letter: <number> <integer>? <number>：首字母占据的行数。比如，initial-letter: 2，首字母就占两行的高度。 <integer> (可选)：首字母沉降的行数。这个值可以理解为首字母基线距离第一行基线的距离。如果省略，浏览器会自己算一个合适的值。 我们先来个简单的例子： <p class=”drop-cap”> 这是一个段落，我们来做个首字下沉的效果。 </p> …

继续阅读“CSS `initial-letter` `align-to-line-grid` (提案)：首字下沉与基线网格对齐”

发布于

CSS `text-spacing` `trim-start` / `trim-end` (提案) 标点挤压与对齐

各位观众老爷，大家好！今天咱们来聊聊一个CSS界的新鲜玩意儿，它叫text-spacing，以及它里面两个小弟trim-start和trim-end。这哥仨儿要是用好了，能让你的文本排版瞬间精致起来，尤其是处理中文、日文、韩文（CJK）文本的时候，效果杠杠的。咱们废话不多说，直接上干货！ Part 1: 啥是text-spacing？ 简单来说，text-spacing属性就是用来控制文本字符间距的。但是，它可不是简单的letter-spacing的替代品。letter-spacing是粗暴地在每个字母之间插入固定间距，而text-spacing更加智能，它会根据字符的类型，进行精细化的间距调整。 text-spacing属性可以设置一个或者两个值。一个值的时候，同时影响trim-start和trim-end。两个值的时候，第一个值影响trim-start，第二个值影响trim-end。 目前，text-spacing还处于提案阶段，所以浏览器支持情况可能不太好。但是，了解一下总是没错的，说不定哪天就普及了呢！ Part 2: trim-start和trim-end：标点符号挤压的利器 …

继续阅读“CSS `text-spacing` `trim-start` / `trim-end` (提案) 标点挤压与对齐”

发布于

CSS `Transform Functions` `matrix()` / `matrix3d()` 的手写与解析

各位靓仔靓女，早上好！今天我们来聊聊CSS transform 里的 matrix() 和 matrix3d() 这两个看起来有点吓人的函数。别怕，其实它们就是把我们常用的变换操作，比如平移、旋转、缩放、倾斜，一股脑儿打包成一个矩阵而已。理解了矩阵的本质，你就掌握了操控网页元素的“变形金刚”的钥匙！ 开场白：矩阵的魅力 你可能在数学课上见过矩阵，一堆数字排列成方阵。当时你可能觉得它跟你的生活八竿子打不着，但是，在图形学里，矩阵可是个宝贝。它可以表示各种变换，而且最酷的是，多个变换可以合并成一个矩阵，一次性应用到元素上。是不是有点像“乾坤大挪移”？ 第一部分：2D 矩阵 matrix() matrix(a, b, c, d, tx, ty) 是 CSS 中 2D 变换的矩阵表示。这六个参数代表着一个 3×3 的矩阵（虽然实际上你只需要写 6 个数字）： [ a c tx ] [ b d ty ] [ 0 0 1 ] 这个矩阵会作用于元素的每个像素点 (x, y)，计算公式如下： x’ = a*x + c*y + tx y’ = b*x + d*y + t …

继续阅读“CSS `Transform Functions` `matrix()` / `matrix3d()` 的手写与解析”