CSS中-webkit-locale属性的含义、作用及使用相关问题咨询

1. 该属性是否属于CSS官方规范内容？ #

不属于。-webkit-locale是WebKit内核专属的私有CSS属性，仅Chrome、Safari等基于WebKit/Blink内核的浏览器支持，没有被纳入W3C发布的CSS官方标准，因此Gecko内核的Firefox不会生成也不识别该属性。

2. 它的具体作用是什么？ #

作用是将HTML元素的lang属性值同步给WebKit渲染内核，为和语言相关的渲染逻辑提供依据，具体覆盖场景包括：

• 匹配对应语言的字体 fallback 优先级规则
• 正确实现不同语言的换行、连字符、标点挤压排版规则
• 辅助屏幕阅读器、语音朗读等无障碍功能匹配对应语言的发音逻辑
• 适配列表序号、CSS计数器等内容的语言格式化规则

3. 能否手动在CSS代码中设置该属性值？ #

可以手动设置，但兼容性仅局限于WebKit/Blink内核浏览器，设置语法和普通CSS属性一致：

/* 仅WebKit内核浏览器生效 */
div {
  -webkit-locale: "ja-JP";
}

手动设置的属性优先级高于浏览器根据lang属性自动生成的默认值。

4. 实际前端开发场景中是否应该设置该值？ #

完全不需要手动设置。WebKit内核会自动读取元素的标准lang属性，生成对应的-webkit-locale值，你只需要给元素正确设置符合HTML规范的lang属性即可。手动设置反而会导致属性值和lang属性不一致的风险，也对非WebKit内核浏览器没有任何作用。

5. 该属性的适用元素范围是什么？ #

在支持该属性的WebKit/Blink内核浏览器中，它适用于所有HTML元素，不止根元素<html>。如果页面内的子元素单独设置了lang属性，浏览器也会自动为对应的子元素生成匹配lang值的-webkit-locale样式。

内容的提问来源于stack exchange，提问作者Winston de Greef