Weekly #018

2023-11-27

文章推荐

The Magic of Calc

https://courses.joshwcomeau.com/css-for-js/05-responsive-css/10-calc

本文介绍了 CSS 中的 calc 函数的使用方法。calc 函数可以进行数学运算，并将最终结果用作属性值。通过 calc 函数，可以进行单位转换、创建颜色和渐变效果，并与 CSS 变量结合使用。文章还提供了一个练习，让读者通过使用 calc 函数和 CSS 变量来创作独特的艺术作品。

Semantic inline lists

https://gomakethings.com/semantic-inline-lists

本文介绍了在网页中将列表以行内方式展示的方法。作者提到了使用 Flexbox 布局和添加 role 属性的方式，但也指出了它们的一些问题。作者还介绍了一种新的方法，通过将 list-style-type 属性设置为空字符串来实现相同的效果。然而，文章也提到了 CSS 对网页可访问性的影响，并建议根据实际情况决定是否需要保留列表的语义。

HTML Target Attribute

https://blog.bolajiayodeji.com/the-security-vulnerabilities-of-the-target-blank-attribute

这篇文章讲述了 HTML 中超链接标签的用法和目标属性，以及与之相关的安全漏洞和解决方案。文章提醒在使用 target="_blank" 属性时，要添加 rel="noopener noreferrer" 属性来防止恶意利用 window.opener API。同时还介绍了 rel="noopener" 和 rel="noreferrer" 属性的作用，可以提高网站的安全性和性能。

Width and Height in CSS

https://blog.jim-nielsen.com/2023/width-and-height-in-css

这篇文章解释了 CSS 中 width 和 height 属性的工作原理。width 属性通过查找父元素来确定宽度，表示元素所在容器的宽度，而 height 属性通过查找子元素来确定高度，表示元素内部元素的高度。关键在于 height: 100% 表示与内部元素一样高，而不是与所在容器一样高。因此，width: 100% 会填充整个屏幕宽度，而 height: 100% 不会填充整个屏幕高度。

An Interactive Guide to CSS Grid

https://www.joshwcomeau.com/css/interactive-guide-to-grid

本文介绍了 CSS Grid 布局的基本概念和用法。CSS Grid 是 CSS 语言中的一种布局算法，可以用来创建复杂和流动的布局。与其他布局模式不同，CSS Grid 可以通过 CSS 来定义网格结构，而不需要添加更多的 DOM 节点。通过使用 grid-template-columns 和 grid-template-rows 属性，我们可以定义网格的列和行。同时，CSS Grid 还提供了一些方便的功能，如使用 fr 单位实现灵活的列宽度分配，使用 repeat 函数简化网格定义，以及使用 grid-area 属性指定子元素在网格中的位置等。

//强烈推荐，作者写的这篇 An Interactive Guide to Flexbox 也值得一读。

Getting started with CSS container queries

https://developer.mozilla.org/en-US/blog/getting-started-with-css-container-queries

本文介绍了容器查询（container queries）的概念和用法。容器查询是一种可以根据元素大小而不是视口大小来调整样式的方法，可以用于构建更灵活、更简洁的布局。文章以一个新闻列表布局为例，展示了如何使用容器查询来处理不同屏幕尺寸下不同的布局需求，并介绍了容器查询的语法和嵌套容器的使用。

Textareas with auto-increasing height using CSS

https://www.amitmerchant.com/textarea-auto-increase-height

这篇文章介绍了文本区域的固定高度问题，以及一个实验性的 CSS 规则，即 form-sizing 属性。文章提到了使用 rows 属性来增加文本区域高度无法确定用户输入的文本数量，所以无法设置一个固定的 rows 值，而 form-sizing 属性可以根据用户输入的文本自动增加 textarea 的高度。作者期待这个实验性的 CSS 规则能够尽快被实现，因为它将成为 CSS 规范的一个重要补充。

//发现自科技爱好者周刊（第 278 期）。

Bento Grid layout responsivo em 40 linhas de CSS

https://dev.to/lixeletto/bento-grid-layout-responsivo-em-40-linhas-de-css-b2j

本文介绍了 Bento Grid 的概念和实现方法，以及如何在 Apple Watch Ultra 的布局中应用该概念。Bento Grid 是一种以小方格的形式组织 UI 的方法，在水平、垂直或两者方向上占据不同数量的单元格。作者通过使用 Flexbox 和 Grid 布局实例解释了如何定义列和行来实现 Bento Grid，并使用 CSS 变量来控制每个元素的位置和大小。

Modular CSS and different ways to structure your stylesheets

https://gomakethings.com/modular-css-and-different-ways-to-structure-your-stylesheets

这篇文章讨论了在没有使用编译器的情况下如何处理模块化的 CSS 文件。作者进行了一些测试，比较了将 CSS 文件合并成一个文件和分成多个模块文件进行加载的效果。结果显示，在使用 CSS @import 规则进行模块导入时，性能差异并不大，对于一些慢速 3G 连接的用户来说，可能是可以接受的。作者建议在使用这种方法之前先对自己的代码进行测试，以确保性能表现符合要求。

Elevate your CSS debugging skills with these Chrome DevTools tricks in 2024

https://utilitybend.com/blog/elevate-your-css-debugging-skills-with-these-chrome-devtools-tricks-in-2024

这篇文章介绍了 Chrome 开发者工具中的一些新的 CSS 调试工具。包括查看 CSS 图层、检查选择器的特异性、清晰显示嵌套样式、支持高清颜色格式、线性时间支持动画编辑器、透明度偏好设置、编辑@property 自定义属性、滚动驱动动画调试工具等。