整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
载说明：原创不易，未经授权，谢绝任何形式的转载
有时候，提升你的应用程序的CSS只需要一个简单的一行升级或增强！了解这12个属性，开始将它们融入到你的项目中，享受减少技术债务、去除JavaScript，以及为用户体验赢得轻松的胜利。
你是否曾为视频嵌入时的宽高比感到困扰？例如，我们常见的高清视频宽高比是16:9。过去，我们可能需要使用一些复杂的方法来实现这个比例，比如大家熟悉的“padding hack”。但现在，有了一个更简洁的解决方案。
padding hack：https://css-tricks.com/aspect-ratio-boxes/
2021年9月开始，大多数主流浏览器都稳定支持了一个新的CSS属性：aspect-ratio。这个属性可以非常方便地定义元素的宽高比。比如说，对于一个高清视频，你只需要设置aspect-ratio: 16/9就可以了。如果你想要一个完美的正方形，设置aspect-ratio: 1即可，因为默认情况下第二个值也是1。
来看一个例子：
.aspect-ratio-hd {
aspect-ratio: 16/9;
}
.aspect-ratio-square {
aspect-ratio: 1;
}
值得一提的是，应用了aspect-ratio属性的元素在某种程度上是“宽容”的。这意味着当内容导致元素在至少一个维度上超出设定的比例时，元素仍然会增长或变形以适应内容。为了防止或控制这种行为，你可以添加额外的尺寸属性，如max-width，这在避免元素超出弹性盒或网格容器时可能是必要的。
虽然这个属性已经出现了一段时间，但它解决了一个重要的问题，并且可以说是“一行代码”的升级。
object-fit属性的作用是让img标签或其他替换元素（如视频）的内容表现得就像它们是容器本身，从而使这些内容能够像背景图片那样进行尺寸调整。
这个属性有几个值可以选择，但最常用的可能是以下两个：
在这两种情况下，object-fit与aspect-ratio结合使用是非常理想的，这可以确保在应用自定义宽高比时图片不会失真。
.image {
object-fit: cover;
aspect-ratio: 1;
/* Optional: constrain image size */
max-block-size: 250px;
}margin-inline是CSS逻辑属性中的一员，用于简化水平书写模式下（如英文、中文）的左右外边距设置。在传统的CSS中，你可能会分别设置margin-left和margin-right来达到这一目的。而使用margin-inline，可以更加简洁和高效地完成同样的任务。
传统方法
/* 之前的写法 */
margin-left: auto;
margin-right: auto;使用margin-inline
/* 使用margin-inline */
margin-inline: auto;为什么要使用margin-inline？
使用margin-inline的主要优势在于它的“逻辑性”。这意味着它可以根据文本的书写模式（如从左到右、从右到左）自动调整外边距。这对于设计能够适应多种语言和文化的网站尤其重要。
举个例子，对于从右到左书写的语言（如阿拉伯语），margin-inline-start将自动应用于右边距，而margin-inline-end应用于左边距。这样，无论内容是哪种书写模式，布局都能保持一致和谐。
浏览器兼容性
现在，margin-inline等逻辑属性已经得到了广泛的支持，兼容性超过了98%，尽管在某些情况下可能需要添加前缀。
text-underline-offset属性用于控制文本基线与下划线之间的距离。通过这个属性，开发者可以精确地定位下划线的位置，使其既不遮挡文字，又能起到强调作用。
/* 应用text-underline-offset */
a:not([class]) {
text-underline-offset: 0.25em;
}在这个例子中，所有没有class属性的a元素（通常是链接）的下划线被设置了0.25em的偏移量。
为什么要使用text-underline-offset？
结合其他属性使用
text-underline-offset可以与其他CSS属性结合使用，以实现更加丰富的视觉效果：
a {
text-decoration-color: blue; /* 下划线颜色 */
text-decoration-thickness: 2px; /* 下划线粗细 */
text-underline-offset: 0.25em; /* 下划线偏移量 */
}在Web前端开发中，为元素添加视觉焦点是一项基本且重要的任务。传统上，我们可能会使用box-shadow或伪元素来创建元素焦点时的自定义轮廓。但其实，有一个自2006年就已存在的CSS属性可能被许多人忽略了——outline-offset。这个属性可以让你轻松地控制元素轮廓的位置。
outline-offset属性允许你调整轮廓（outline）与元素边界之间的距离。通过设置正值，可以将轮廓向外推移；设置负值，则可以将轮廓向内拉近。
/* 应用outline-offset */
.outline-offset {
outline: 2px dashed blue; /* 蓝色虚线轮廓 */
outline-offset: var(--outline-offset, .5em); /* 轮廓偏移量 */
}在这个例子中，当元素获得焦点时，它将显示一个蓝色虚线轮廓，轮廓与元素边界之间的距离为0.5em。
使用场景
两个相对较新的CSS属性：scroll-margin和scroll-padding，它们在处理滚动行为时尤为重要。
scroll-margin的作用
scroll-margin系列属性允许你为元素在滚动位置上下文中添加一个偏移量。这在处理诸如固定导航栏遮挡锚点链接内容时特别有用。
/* 为所有具有id属性的元素添加scroll-margin */
[id] {
scroll-margin-top: 2rem;
}在这个例子中，任何具有id属性的元素，在通过导航滚动到它时，其顶部都会有2rem的额外空间，以避免被固定在顶部的导航栏遮挡。
scroll-padding的应用
与scroll-margin类似，scroll-padding属性可以在滚动视图内增加内边距。这不会影响元素在文档中的布局位置，但可以改善滚动到特定元素时的视觉体验。
随着暗黑模式在用户界面中的普及，为网站或应用程序提供光暗主题切换成为了一种流行趋势。CSS中的color-scheme属性为开发者提供了一种简单的方式来适配浏览器UI元素的光暗模式，今天我们就来深入探讨它的应用。
color-scheme属性允许网页告诉浏览器，其内容是为浅色模式、暗色模式，或两者皆适配的。设置此属性后，浏览器会自动调整表单控件、滚动条和CSS系统颜色等UI元素，以适应相应的主题模式。
/* 在根元素上设置color-scheme */
:root {
color-scheme: dark light;
}在元素级别使用color-scheme
你也可以在单个元素上使用color-scheme属性，以改善特定背景下的对比度和可读性。
/* 对暗背景的元素使用暗色模式 */
.dark-background {
color-scheme: dark;
}为什么使用color-scheme
在前端开发中，定制化表单元素的样式一直是一个挑战，尤其是对于复选框和单选按钮这样的原生UI控件。幸运的是，CSS引入了一个新属性accent-color，让这一任务变得更加简单和直观。
accent-color属性允许开发者改变复选框、单选按钮、进度条和滑块（range）等表单控件的主题色。通过这个属性，你可以轻松地为这些元素设置一个自定义的颜色，以匹配你的网站或应用程序的整体风格。
/* 使用accent-color自定义颜色 */
:root {
accent-color: mediumvioletred;
}在这段代码中，所有原生的表单控件（如单选按钮和复选框）将使用中紫罗兰红色作为它们的主题色。
在前端开发中，经常需要调整元素的宽度以适应其内容。传统方法如使用display: inline-block等，虽然能实现这一需求，但可能会影响元素的布局位置。幸运的是，CSS提供了一个更为优雅的解决方案——width: fit-content属性。
width: fit-content 属性允许元素的宽度自动调整以适应其内容的大小，相当于“收缩包裹”（shrink wrap）效果。这意味着元素的宽度会刚好足够容纳其内容，不会过大或过小。
/* 应用width: fit-content */
.fit-content {
width: fit-content;
}
在这个例子中，类名为.fit-content的元素将其宽度自动调整为恰好适应其内容的大小。
在网页设计中，处理滚动行为是提升用户体验的关键之一。特别是在有限维度的滚动区域（如侧边栏或滚动框），当滚动到达边界时，滚动行为可能会传递给背景页面，这可能会给用户带来不便。为了解决这个问题，CSS提供了一个属性overscroll-behavior。
overscroll-behavior属性允许开发者控制滚动区域的边界行为。当设置为contain时，它可以阻止滚动行为从一个滚动容器传递到其父容器或背景页面。
/* 设置overscroll-behavior */
.overscroll-container {
overscroll-behavior: contain;
}在这个例子中，类名为.overscroll-container的元素在达到滚动边界时，不会将滚动行为传递给其父级元素或背景页面。
在网页排版中，处理文本换行是一个经典问题，尤其是要避免在段落的最后一行留下孤立的单词（又称“孤行”）。2023年，CSS引入了一个新属性text-wrap，旨在解决这类排版问题。
text-wrap属性提供了对文本换行行为的更精细控制，其目标是均衡每行文本的字符数，从而避免不平衡的文本行和孤行现象。
balance：这个值的目标是均衡每行的字符数，使得文本行更加平衡和谐。
/* 应用text-wrap属性 */
.headline {
text-wrap: balance;
}
/* For demonstration */
max-inline-size: 25ch;text-wrap属性的pretty值是针对防止孤行设计的。它的算法会评估文本块的最后四行，根据需要做出调整，确保最后一行至少有两个单词。
/* 应用text-wrap属性的pretty值 */
.article-text {
text-wrap: pretty;
}在网页设计中，滚动条的出现和消失有时会导致不希望的布局变化。为了解决这一问题，CSS引入了一个新属性scrollbar-gutter，它允许在布局中预留滚动条的空间，防止这种不期望的布局偏移。
scrollbar-gutter属性的主要作用是在滚动容器中预留出滚动条的空间。即使在不需要滚动条的情况下，浏览器也会绘制一个“沟槽”（gutter），作为滚动容器的额外空间，避免了因滚动条消失而引起的布局变化。
/* 使用scrollbar-gutter属性 */
.container {
scrollbar-gutter: stable both-edges;
}
scrollbar-gutter的作用
至此，我们对几个CSS中的新特性进行了深入的探讨和分析。从text-wrap的平衡排版到scrollbar-gutter防止布局偏移的巧妙应用，这些现代CSS特性为前端开发者打开了新的大门。希望本文能帮助大家更好地理解这些新工具，从而在实际项目中运用得心应手，创造出更加美观、用户友好的网页。前端技术的世界总是充满惊喜和挑战，让我们保持好奇心，不断学习和探索，共同推动这个领域的发展。感谢大家的阅读，期待与大家在下一篇文章中再次相遇！
者 | Tim Anderson
译者 | 王强
策划 | Tina
AI 大模型超全落地场景&金融应用实践，8 月 16 - 19 日 FCon x AICon 大会联诀来袭、干货翻倍！
用于扩展 HTML 规范的 Htmx 项目发布了 2.0 版，这是该项目自 2020 年 11 月 发布 1.0 版以来的第一个主要版本。
Htmx 2.0 取消了对 Internet Explorer 的支持，并将扩展项移出了核心存储库，这样每个扩展都可以按照自己的节奏发布更新了。新版本还删除了一些已弃用的属性，并将 HTTP DELETE 请求更改为使用参数。
新版还加入了一些新特性，包括 htmx.swap() 方法，该方法用新内容替换现有内容。它替换并改进了现有的内部 selectAndSwap() 方法。新版还改进了与 Web 组件、可重复使用的自定义元素的集成。
新版发布博文解释说，为了避免破坏现有项目，1.x 版本将在 NPM（节点包管理器）中继续标注为为“latest”，2.x 还是“next”，直到 2025 年 1 月 1 日为止。迁移到 2.0 版并不困难，但根据迁移指南，用户可能需要做一些工作。
Htmx 是一种新的前端开发方法，侧重于 HTML 而非 JavaScript（尽管它是作为 JavaScript 库实现的）。Htmx 是从之前的一个项目 intercooler.js 发展而来的，后者是由 Htmx 发明者 Carson Gross 于 2013 年创建。这两个项目的灵感都来自于这样一种观点：HTML 的特性一直因为行业对 JavaScript 框架的关注而被限制住了，而 JavaScript 框架的复杂性却一直在增长。Gross 在 2020 年推出 1.0 版时写道：“HTML 导向的 Web 开发范式被抛弃，不是因为超文本是个坏主意，而是因为 HTML 没有足够的表达能力。htmx 旨在解决这个问题，并让你可以使用 Web 的原始超文本模型实现许多常见的现代 Web UI 模式。”
Htmx 现在支持包括异步请求、CSS 转换和使用 HTML 属性的 WebSocket 通信在内的特性。
尽管 Htmx 仍然不如 React 或 Angular 等框架那么出名，但它还是收获了开发人员的赞赏。之前就有人提到，“我绞尽脑汁想找出一个没有过度设计的 js 框架，找到 htmx 让我非常高兴”。另一个人则表示“Htmx 简直太棒了。我们正用它来完成一个重大项目。”
Gross 参与了 Hacker News 上的讨论并回答了问题。有人问他，是否在设法将 Htmx 的一些特性推向 HTML 标准？“我们正在与 Chrome 开发人员讨论这些想法，我持谨慎乐观的态度”，Gross 说。
Htmx 使用的是 XMLHttpRequest，而非更新、更强大的 fetch API。有人问，团队是否考虑过改用 fetch？“看过了，不幸的是 fetch() 和 xhr 有一组不相交的特性（特别是 xhr 的上传进度），所以我们决定不碰它”，Gross 回答道。
该项目在 GitHub 上根据 Zero-Clause BSD 许可开源。
原文链接：
https://devclass.com/2024/06/18/htmx-2-0-released-aims-to-replace-complex-javascript-frameworks-with-easily-understood-html-attributes/
声明：本文为 InfoQ 翻译，未经许可禁止转载。
原文链接：Htmx 2.0 发布：用易懂的 HTML 属性取代复杂 JavaScript 框架_架构_InfoQ精选文章
TML全局属性是所有HTML元素共有的属性。它们可以应用于所有元素，尽管它们可能对某些元素没有影响。
HTML元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。
属性和属性值对大小写不敏感。不过，万维网联盟在其HTML4推荐标准中推荐小写的属性/属性值。而新版本的(X)HTML要求使用小写属性。
class：为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id：定义元素的唯一id
style：规定元素的行内样式（inlinestyle）
title：描述了元素的额外信息(作为工具条使用)
HTML使用标签<a>来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。默认情况下，链接将以以下形式出现在浏览器中：
一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。
如果为这些超链接设置了CSS样式，展示样式会根据CSS的设定而显示。
在标签<a>中使用了href属性来描述链接的地址。
实例
<a href="https://www.kaikeba.com/">访问开课吧</a>1复制代码类型：[html]上面这行代码显示为：访问开课吧
点击这个超链接会把用户带到开课吧的首页。
使用target属性，你可以定义被链接的文档在何处显示。
实例
<ahref="https://www.kaikeba.com/"target="_blank">访问开课吧</a>
target="_blank":在新窗口中打开被链接文档。
target="_self": 默认，在相同的框架中打开被链接文档。
target="_parent":在父框架集中打开被链接文档。
target="_top": 在整个窗口中打开被链接文档。
target=framename:在指定的框架中打开被链接文档。 1234567891011复制代码类型：[html]HTML图像标签及其属性
在HTML中，图像由<img>标签定义。<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src指"source"。源属性的值是图像的URL地址。
定义图像的语法是：
<imgsrc="url"alt="some_text"> 1复制代码类型：[html]URL指存储图像的位置。
alt属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
height（高度）与width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素。
<imgsrc="logo.jpg"alt="kaikeba"width="300"height="120"> 1复制代码类型：[html]提示:指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。
开课吧广场-人才学习交流平台
*请认真填写需求信息，我们会在24小时内与您取得联系。
