日常工作中了解获得到的css新知识、js新知识点： 个人技术博客

探索 CSS 和 JavaScript 的最新特性

随着前端技术的不断进步，CSS 和 JavaScript 也在不断地引入新特性，以提升开发效率和用户体验。本文将介绍一些最新的 CSS 属性和 JavaScript API，帮助开发者更好地利用这些工具来构建现代化的 Web 应用。

一、CSS 新属性

1. 容器查询（Container Queries）

容器查询是 CSS 的一个重大改进，允许开发者根据容器的大小而不是视口的大小来应用样式。这对于组件化开发特别有用，因为组件的样式可以根据其所在容器的尺寸进行调整，而不依赖于整个页面的尺寸。

@container (min-width: 500px) {
  .item {
    background-color: lightblue;
  }
}

2. 子网格（Subgrid）

子网格特性允许子元素继承父网格的布局，从而在嵌套网格布局中实现更一致的对齐。这对于复杂布局的管理提供了极大的便利。

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr;
}
.child {
  display: subgrid;
  grid-template-columns: subgrid;
}

3. 宽高比（Aspect-ratio）

宽高比属性使得开发者可以轻松设定元素的宽高比，而不再需要使用 padding hack 等技术。这在处理响应式设计和媒体元素时尤为实用。

.box {
  aspect-ratio: 16 / 9;
}

4. 滚动捕捉（Scroll Snap）

滚动捕捉属性使得滚动操作更为流畅和直观。通过设置捕捉点，用户在滚动时，元素会自动对齐到指定的位置，提升用户体验。

.container {
  scroll-snap-type: x mandatory;
}
.item {
  scroll-snap-align: center;
}

5. :is() 和 :where() 伪类

这两个新伪类简化了复杂选择器的编写。:is() 伪类可以减少重复代码，而 :where() 伪类则提供了一个不增加优先级的选择器匹配方式。

:is(h1, h2, h3) {
  color: red;
}

二、JavaScript 新 API

1. Promise.any()

Promise.any() 方法接受一组 Promise，并返回第一个成功的 Promise。这对于需要同时处理多个异步操作，但只关心第一个成功结果的情况非常有用。

Promise.any([
  fetch('/api/endpoint1'),
  fetch('/api/endpoint2'),
  fetch('/api/endpoint3')
]).then(response => {
  console.log('First successful response:', response);
});

2. 弱引用（WeakRefs）

WeakRef 是一种创建对象的弱引用的方法，这种引用不会阻止对象被垃圾回收。弱引用可以用来优化内存管理，特别是在处理大量短期对象时。

let obj = { name: 'example' };
let weakRef = new WeakRef(obj);
obj = null; // obj 可以被垃圾回收

3. Intl.DateTimeFormat.formatRange()

这个 API 允许开发者格式化一个日期范围，而不是单个日期。这对于显示事件或活动的起止时间非常有帮助，提供了更友好的用户界面。

const formatter = new Intl.DateTimeFormat('en', { month: 'long', day: 'numeric' });
const date1 = new Date(2020, 6, 1);
const date2 = new Date(2020, 6, 10);
formatter.formatRange(date1, date2); // "July 1 – 10"

这些新的 CSS 属性和 JavaScript API 进一步丰富了前端开发者的工具箱，使得开发过程更为高效和便捷。通过合理地利用这些新特性，开发者可以创建出更加响应和动态的 Web 应用，提升用户体验。

京ICP备2023019034号-7