Weekly #020

2023-12-11

文章推荐

Oh No, Overflow!

overflow 属性用于控制当放入一个盒子内的内容比盒子本身大时会发生什么。它可以让内容溢出盒子，完全隐藏，或者可以滚动显示。然而，不同操作系统和浏览器对滚动条的显示方式并不一致。常见的导致溢出的原因包括图片、长单词、变换和弹性盒子布局。为了解决溢出问题，可以在溢出元素的父元素上设置 overflow 属性。

The hanging-punctuation property in CSS

https://chriscoyier.net/2023/11/27/the-hanging-punctuation-property-in-css

CSS 中的 hanging-punctuation 属性可以让标点符号悬挂在文本之外，以此来获得更好的排版效果。这个属性可以在引用块等元素中使用，但需要注意可能会引发水平滚动条的问题。为了在所有浏览器上都能正常显示，可以使用负的 text-indent 值来进行支持性检测。

A Few Ways CSS Is Easier To Write In 2023

https://www.smashingmagazine.com/2023/11/few-ways-css-easier-write-2023

这篇文章讨论了现代 CSS 的一些新特性和技术，以及它们对 CSS 编写的影响。作者认为，虽然现代 CSS 带来了一些新的特性，但与两三年前相比，并没有改变 CSS 的编写方式，只是使 CSS 更加简洁、灵活和适应性强。文章介绍了一些新特性的应用，如：is() 伪类、逻辑属性、margin-trim 属性等，以及如何使用这些特性来编写更高效和可维护的 CSS 代码。同时，文章还提到了一些传统的解决方案，如使用 margin:auto 来实现居中对齐和使用固定像素单位来保持元素的比例等。

Sizes=“auto” pretty much requires width and height attributes

https://ericportis.com/posts/2023/auto-sizes-pretty-much-requires-width-and-height

这篇文章解释了关于自适应图像的一个奇怪问题，即使用 sizes=auto 属性时，需要在 <img> 元素中添加 width 和 height 属性。文章还提供了解决方法，即在 HTML 中添加 width 和 height 属性，并在 CSS 中使用 height: auto 来修复可能出现的布局问题。文章还解释了为什么需要这样做，以及默认情况下图像的自然尺寸如何影响布局尺寸。

工具介绍

Ansel

https://ansel.photos

Ansel 是一款开源的照片编辑软件，旨在帮助数字艺术家实现对原始数字照片的个人诠释。Ansel 允许您管理图片集合，非破坏性地编辑原始数字照片，并将结果导出为常见的文件格式。它具有颜色处理、色彩匹配、色彩校准、色调修正和图像重建等多种功能，同时它还具有先进的色彩科学和独立的色彩控制，使艺术家能够精确和细致地处理图像。

SVG.io

https://svg.io

一个免费的 Text-to-SVG 网站，让你轻松地将文本转换为 SVG 图像，并且这些图像可以用于商业用途，但需要注意第三方版权和许可的问题。

Clone UI

https://clone-ui.design

一个基于 AI 的工具，可根据简单的文本提示来生成 UI 组件，并能轻松地将生成的代码复制粘贴到你的 Tailwind 项目中。

UI Faces

https://uifaces.co

一个由免费、AI 生成的免费高分辨率头像库，适用于各种模型设计，并且包含了人类、外星人、卡通、抽象和机器人等不同类型的头像。

PDFWind

https://www.pdfwind.com

PDFWind 是一个免费的在线工具，可以用来转换、编辑和优化 PDF 文件。它能够快速处理文件，不占用您计算机的资源和空间。PDFWind 非常重视安全性，所有操作都在 TLS 连接下进行，并且支持多种文件格式，例如 jpg、png、docx、odt、xlsx、pptx 等。