其他
前端快讯｜Chrome 119 新增对 :user-invalid 和 :user-valid CSS 伪类的支持
【前端快讯 09月23日】Chrome 119 新增对 :user-invalid 和 :user-valid CSS伪类的支持，Chrome 119 稳定版本将于2023年10月25日正式发布。Firefox 88 和 Safari 16.5 已增加对改伪类的支持。
issue 讨论：
Chrome Platform Status:
1.伪类介绍
:user-valid 和 :user-invalid 伪类分别标识输入正确和不正确的表单元素，但只有在用户与该元素进行大量交互后才会出现。这与 :valid 和 :invalid 伪类比较类似，但是有个限制条件，这些伪类只有在用户与表单元素进行交互后才能够匹配。
伪类应用规则：
如果控件未获取焦点，且值有效，则应用该伪类。 如果控件获得焦点，且该值在获得焦点时有效（包括为空），则应用该伪类。 如果控件有焦点，且获得焦点时值无效，则在每次按键时重新验证。 如果元素为必填项，则只有当用户更改了值或试图提交表单时，才会应用前面的规则。
其结果是，如果控件在用户开始与之交互时是有效的，那么只有当用户将焦点转移到另一个控件时，有效性样式才会改变。但是，如果用户试图更正先前标记的值，控件会在该值变为有效时立即显示。只有当用户更改必填项或试图提交未更改的无效值时，才会将其标记为无效。
2.伪类使用
使用 :user-valid 和 :user-invalid 伪类，在 input 失去焦点时会自动提示
<style>
:root {
--color-default: grey;
--color-invalid: red;
--color-valid: green;
}
* {
box-sizing: border-box;
}
body {
max-width: 46em;
width: 90%;
height: 50vh;
margin: 0 auto;
display: grid;
place-items: center;
}
form {height: 200px; border: 1px solid #ccc; border-radius: 5px; padding: 10px;display:flex; flex-direction: column;justify-content: center;}
input {
font-size: 2em;
display: block;
width: 100%;
border: 2px solid var(--color-default);
}
.error-message {
display: none;
font-weight: bold;
color: var(--color-invalid);
}
input:focus {
outline: none;
}
input:user-invalid {
border-color: var(--color-invalid);
}
input:user-invalid ~ .error-message {
display: block;
}
input:user-valid {
border-color: var(--color-valid);
}
</style>
<form>
<label for="email">E-MAIL:</label>
<input type="email" id="email" placeholder="" required autocomplete="off"/>
<p class="error-message">Please enter a valid e-mail address</p>
</form>
效果图如下：
整体的体验比使用 :valid 和 :invalid 伪类的实现的效果会更好有些。
大家都在看