说说你最熟悉的 HTML5 / CSS / ES Next 的新特性？

对于 HTML5，我最熟悉的新特性包括：语义化标签的增加，例如 header、section、footer 等；视频和音频标签的支持和 canvas 绘图功能。对于 CSS，我最熟悉的新特性包括：弹性布局（Flexbox）、网格布局（Grid）、过渡（Transition）和动画（Animation）效果。对于 ES Next，则包括箭头函数、解构赋值、Promise 对象、async/await 等。

相关问题

"next": "^11.0.1"+"antd":"4.23.0"报错：./node_modules/antd/es/badge/style/index.less Global CSS cannot be imported from within node_modules.

这个错误是因为你尝试从 `node_modules` 中引入全局 CSS 文件，而 Webpack 默认不允许这样做。你可以通过在 Webpack 配置文件中添加一些选项来解决这个问题。

在 `webpack.config.js` 中，添加以下代码：

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/,
        use: [
          // ...
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
    ],
  },
  // ...
};

这段代码将启用 JavaScript 解析 Less 文件，并将其转换为 CSS 文件。由于这是全局 CSS 文件，因此需要将 `less-loader` 改为 `style-loader` 和 `css-loader`。

如果你在使用 `create-react-app`，则可以通过在 `package.json` 中添加以下内容来解决这个问题：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^4.23.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "style": {
    "modules": true,
    "sourceMap": true,
    "importLoaders": 2,
    "localIdentName": "[name]__[local]___[hash:base64:5]"
  }
}

这将启用 CSS modules，并为它们生成局部类名。