Dynadot 推出 .gay 域名首年免费活动

为庆祝 .gay 域名三周年，该服务商推出了这一活动。

Dynadot 说自 2020 年推出以来， .gay 域名不仅在互联网上开辟了一个充满活力、包容性的空间，而且从根本上重塑了 LGBTQ+ 社区及其盟友的数字格局。

活动时间 9 月 19 日 - 9 月 27 日
优惠码 DOTGAY23

领取地址

#书摘 #css #前端
《CSS 选择器世界》键盘焦点伪类 :focus-visible
:focus-visible 伪类虽然和 :focus-within 伪类看起来很相似，但两者的作用大相径庭，被浏览器开始支持的时间也有较大区别：:focus-within伪类已被浏览器支持很多年了，而:focus-visible伪类则在2022年3月才被所有现代浏览器支持。
1. :focus-visible伪类的作用及背景变化
:focus-visible伪类匹配的场景是元素聚焦，同时浏览器认为聚焦轮廓应该显示。
是不是很拗口？规范就是这么定义的。:focus-visible的规范并没有强行约束匹配逻辑，而是交给了UA（也就是浏览器）
2. 在所有现代浏览器下，鼠标点击链接元素 <a> 的时候是不会出现焦点轮廓的，但是使用键盘访问的时候会出现。点击链接元素时只会触发:focus伪类，而键盘访问此链接元素时不仅会触发:focus伪类，还会触发:focus-visible伪类。

3. 这就是:focus-visible伪类的作用，可以用来区分用户的操作是鼠标点击，还是键盘访问。不过，这种判断并不完全准确，因为:focus-visible伪类匹配与否是浏览器自行决定的，没有特定的规范。目前看来，浏览器会出现默认轮廓的场景都会匹配:focus-visible伪类。

在 Chrome90 版本之前的浏览器下，有些元素的焦点轮廓就算是在点击操作下也会出现的。包括下面这些场景：
● 设置了背景的 <button> 按钮；
● HTML5 中的 <summary> 元素；
● 设置了 HTML tabindex 属性的元素。
这其实是我们不希望看到的，因为点击鼠标是目标明确的主动操作，此时出现轮廓是没有必要的，反而让操作界面变得难看了。
但是，又不能简单地通过设置 outline:none 来处理，因为这样会使使用键盘访问时应当出现的焦点轮廓被隐藏，从而带来严重的无障碍访问问题。
在这种场景下，:focus-visible伪类可谓天降神兵，只需要一条短短的CSS规则就可以兼顾视觉表现和无障碍访问：


:focus:not(:focus-visible) {

outline: 0;
}​​



此时，无论对于 <summary> 元素还是设置了 tabindex 属性的元素，在点击的时候都不会出现轮廓，同时，键盘访问时的 outline 轮廓依然保留，两全其美。
当然，由于现在的Chrome浏览器和Safari浏览器默认点击 <button> 按钮或者 <summary> 元素时都不会出现轮廓，因此，:focus-visible伪类的作用就没有以前那么明显了。准确地说是浏览器自己优化了之前的一些无障碍访问策略，使得无须使用:focus-visible伪类手动进行相关的优化了。

:focus-visible 伪类目前的作用就变成了用来区分用户行为是鼠标行为还是键盘行为。
https://memo.cosine.ren/m/336

#书摘 #css #前端
《CSS 选择器世界》7.4 非常实用的整体焦点伪类 :focus-within
整体焦点伪类 :focus-within 非常实用，且兼容性不错，目前已经可以在实际项目中使用，包括移动端项目和无须兼容IE浏览器的桌面端项目。
1. :focus-within 伪类和 :focus 伪类的区别
ChS :focus-within 伪类和 :focus 伪类有很多相似之处，那就是伪类样式的匹配离不开元素聚焦行为的触发。区别在于，:focus 伪类样式只有在当前元素处于聚焦状态的时候才匹配，而 :focus-within 伪类样式在当前元素或者当前元素的任意子元素处于聚焦状态的时候均匹配。

子元素聚焦可以使父元素的样式发生变化，这是CSS选择器世界中很了不起的革新，因为 :focus-within 伪类的行为本质上是一种父选择器行为，子元素的状态会影响父元素的样式。由于这种父选择器行为需要借助用户的行为触发，属于 “后渲染”，不会与现有的渲染机制冲突，自然也不会带来性能问题，因此浏览器在规范出现后不久就快速支持了。

2. :focus-within 伪类实现无障碍访问的下拉列表
:focus-within伪类非常实用，一方面它可以用在表单控件元素上（无论是样式自定义还是交互布局），例如输入框聚焦时高亮显示前面的描述文字，我们可以不把描述文字放在输入框的后面（具体见5.4.2节中的示例），按正常的DOM顺序即可：


<div class="cs-normal">
<label class="cs-label">用户名：</label>
<input class="cs-input">
</div>
.cs-normal:focus-within .cs-label {
color: darkblue;
text-shadow: 0 0 1px;
}​​


读者可以手动输入 https://demo.cssworld.cn/selector2/7/4-1.php 体验与学习。

另一方面，它可以用于实现完全无障碍访问的下拉列表，即使下拉列表中有其他链接或按钮也能正常访问。例如，要实现一个类似图7-10所示的下拉列表效果。
HTML结构如下：
:focus 伪类的区别
ChS :focus-within 伪类和 :focus 伪类有很多相似之处，那就是伪类样式的匹配离不开元素聚焦行为的触发。区别在于，:focus 伪类样式只有在当前元素处于聚焦状态的时候才匹配，而 :focus-within 伪类样式在当前元素或者当前元素的任意子元素处于聚焦状态的时候均匹配。

子元素聚焦可以使父元素的样式发生变化，这是CSS选择器世界中很了不起的革新，因为 :focus-within 伪类的行为本质上是一种父选择器行为，子元素的状态会影响父元素的样式。由于这种父选择器行为需要借助用户的
我们在父元素 .cs-details 上使用 :focus-within 伪类来控制下拉列表的显示和隐藏，如下：


.cs-datalist {

display: none;

position: absolute;

border: 1px solid #ddd;

background-color: #fff;

}
/* 下拉列表展开 */

.cs-details:focus-within .cs-datalist {

display: block;
}​​


本例中共有5个 <a> 元素，其中一个用于触发下拉显示的 .cs-summary 元素，另外4个在下拉列表中。无论点击这5个 <a> 元素中的哪一个，都会触发父元素 .cs-details 设置的 :focus-within 伪类样式，因此可以让下拉列表一直保持显示状态；点击页面任意空白处，下拉列表自动隐藏，效果非常理想。
读者可以手动输入 https://demo.cssworld.cn/selector2/7/4-2.php 体验与学习。

https://memo.cosine.ren/m/334

demo.cssworld.cn

:focus-within高亮输入框前面的描述文字 » CSS选择器世界demo演示

CSS选择器世界demo实例演示页面之 :focus-within高亮输入框前面的描述文字

#书摘 #css #前端
《CSS 选择器世界》7.3 聚焦行为伪类:focus与用户体验
:focus是一个从IE8浏览器开始支持的伪类，它可以匹配当前处于聚焦状态的元素。

1. 与:active伪类不同，:focus伪类默认只能匹配特定的元素，包括：
● 非disabled状态的表单元素，如 <input> 输入框、 <select> 下拉框、`<button>` 按钮等；
● 包含href属性的 <a> 元素；
● <area> 元素，不过可以生效的CSS属性有限；
● HTML5中的 <summary> 元素。

除上述特定元素之外，其他HTML元素应用:focus伪类是无效的。
如何让普通元素也能响应:focus伪类呢？设置了HTML contenteditable 属性的普通元素可以应用:focus伪类，例如：


<div contenteditable="true></div>
<div contenteditable="plaintext-only"></div>​​



因为此时 <div> 元素是一个类似 <textarea> 元素的输入框。
设置了HTML tabindex属性的普通元素也可以应用:focus伪类，例如，下面3种写法都是可以的：


<div tabindex="-1">内容</div>
<div tabindex="0">内容</div>
<div tabindex="1">内容</div>​​



如果期望 <div> 元素可以被Tab键索引，且被点击的时候可以触发:focus伪类样式，则使用tabindex="0"；如果不期望 <div> 元素可以被Tab键索引，且只在它被点击的时候触发:focus伪类样式，则使用tabindex="-1"。对于普通元素，不存在使用自然数作为tabindex属性值的场景。

2. 模拟表单元素的键盘可访问性 [type="radio"]`、 `[type="checkbox"]`、`[type="range"] 类型的`<input>`元素的UI往往不符合网站的设计风格，需要自定义样式，常规实现一般都没问题，关键是很多开发人员会忘了键盘的无障碍访问。
以 [type="checkbox"] 复选框为例，我们需要隐藏原生的`[type="checkbox"]` 复选框，使用关联的 <label> 元素自定义的复选框样式（如果不需要兼容IE和IE Edge浏览器，则无须 <label> 元素模拟）。

● 对于原生复选框元素的隐藏，要么设置透明度opacity:0，要么剪裁，千万不要使用visibility:hidden或者display:none进行隐藏，虽然IE9及以上版本的浏览器的功能是正常的，但是这两种隐藏是无法被键盘聚焦，键盘不可访问。
● 不要忘记在原生复选框聚焦的时候高亮显示自定义的输入框元素，可以是边框高亮，或者外发光，通常都使用相邻兄弟选择符(+)实现，特殊情况下也可以使用兄弟选择符(~)，如高亮多个元素时。

市面上有不少UI框架，如何区分品质？很简单，使用Tab键索引页面元素，如果输入框有高亮显示，则这个UI框架比较专业，如果什么反应都没有，建议换一种UI框架。

https://memo.cosine.ren/m/334

#优质博文 #前端 #react
RSC 就是套壳 PHP ？带你从零实现 React Server Component

via 公众号 支付宝体验科技

Weixin Official Accounts Platform

RSC 就是套壳 PHP ？带你从零实现 React Server Component

跟随 React 核心开发者 Dan Abramov 的思路，从零开始实现 React Server Component，顺带实现基于 RSC 的 SSR，附完整代码。

#优质博文 #前端 #碎碎念
使用 Next.js + Hexo 重构我的博客
想这么干很久了，不能再咕了呜呜呜呜再咕博客要坏掉了
打算用 Next.js + tailwind + ts 重构我这小博客了，顺便把坏掉的掘金外链图也修一修，预计排期：不知道。

Sukka's Blog

使用 Next.js + Hexo 重构我的博客 | Sukka's Blog

在咕咕了一整年、只发布了三篇文章（其中两篇还是译文）之后，我决定还是稍微花一点时间好好折腾一下自己的博客，以 React 作为抓手，通过 Next.js 和 Hexo 深度共建，对标 Gatsby，打通静态 HTML 与用户交互之间的垂直领域屏障，实现多维矩阵闭环，为个人博客赋能（咳咳咳），然后水出 2022 年第一篇文章（逃）

#Web

👻 用新的 Emoji 来聊天吧 —— Emoji Kitchen

👉 Google 此前在自家的 Android 键盘中加入名为 Emoji Kitchen 的功能，可以让两个不同的 emoji 表情组合成一个新的表情。

💻 如今这一项功能已被下放到网页版，在 Google 搜索框中键入 “Emoji Kitchen” 就可以直接使用网页版，生成结果还是比较有趣的和细致的，这个结果并不是生硬的进行拼凑，而是考虑到了很多场景（例如高楼大厦的黑夜+钻石，得到的是大厦中升起一颗钻石，而大厦的黑夜+蝎子，得到的就是一个哥斯拉级别的蝎子在拆楼，而不是楼中升起一只蝎子）

🌐 之前还在 Figma 上看到也有人只做了类似 Emoji Kitchen 的插件 —— Emoji Kitchen Browser，可以实现 emoji 表情拼接，从而得到一个矢量图的效果，但是我个人感觉这个生成的效果并没有 Google 这个版本的更注重 A+B 两个表情生成 C 的场景合理性。

#优质博文 #前端 #浏览器
多图预警，前端应该掌握的浏览器调试技巧大揭秘！

Weixin Official Accounts Platform

多图预警，前端应该掌握的浏览器调试技巧大揭秘！

超实用~

#书摘 #css #前端
《CSS 选择器世界》使用 :active 伪类实现点击反馈
:active 伪类可以用于设置元素激活状态的样式，可以通过点击鼠标主键或者用手指或者触控笔点击触摸屏触发激活状态。具体表现如下，按下触发:active伪类样式，抬起取消:active伪类样式的应用。:active伪类支持任意HTML元素，例如 <div>`、`<span> 等非控件元素，甚至是自定义元素。
然而，落地实现时:active伪类并没有理论上那么完美，表现为以下3点。
1. IE浏览器下:active样式的应用是无法冒泡的

img:active {
outline: 30px solid #ccc;
}
p:active {
background-color: teal;
}

<p><img src="1.jpg"></p>​​


此时，点击 <img> 元素的时候，在IE浏览器下，`<p>` 元素是不会触发:active伪类样式的，实际上祖先元素的:active样式也应当被应用；在Chrome和Firefox等浏览器下，其表现符合预期。

2. IE浏览器下，`<html>`、`<body>` 元素应用:active伪类设置背景色后，背景色是无法还原的。
具体来说，鼠标键按下时确实应用了:active设置的背景色，但是抬起后背景色没有还原，而且此时无论怎么点击鼠标，背景色都无法还原。这是一个很奇怪的bug，普通元素不会有此问题，这个问题甚至比在IE7浏览器下链接元素必须失焦才能取消:active样式还要糟糕。

3. 键盘访问无法触发:active伪类。例如，`<a>` 元素在focus状态下按下Enter键的事件行为与点击一致，但是，不会触发:active伪类。

4. 最后，:active伪类的主要作用是反馈点击交互，让用户知道他的点击行为已经成功触发，这对于按钮和链接元素是必不可少的，否则会有体验问题。由于:active伪类作用在按下的那一段时间，因此不适合用来实现复杂交互。

https://memo.cosine.ren/m/330

#书摘 #css #前端
《CSS 选择器世界》:hover伪类与悬停交互开发
:hover 是各大浏览器最早支持的伪类之一，最早只能用在`<a>`元素上，其设计的初衷是改变链接元素的颜色：


a { color: blue; }
a:hover { color: darkblue; }​​


由于 :hover 实现浮层元素的显示与隐藏效果非常方便，于是当时出现了很怪异的现象：`<a>`元素满天飞，甚至`<a>`元素里面嵌套`<div>`元素以实现悬停交互效果，完全不符合HTML元素原本语义。例如：


<a href="javascript:void(0)">

菜单

<div class="list">列表</div>
<a>

list {
display: none;
position:absolute;
}

a:hover .list {
display: block;
}​​


CSS所有新特性的出现都源自用户需求和开发需求。同样，当意识到仅`<a>`元素支持:hover伪类非常影响开发效率之后，浏览器迅速跟进升级。目前，所有主流浏览器中，:hover伪类已经可以在任意HTML元素中使用了，其中包括自定义元素：


x-element:hover {}​​


需要注意的有如下几点，
- 如果是移动端开发，强烈建议不要使用:hover伪类实现交互效果，因为对于手机和iPad这类移动设备，常见的交互操作都通过触屏，而不是鼠标。虽然在这些设备上，:hover也能触发，但消失并不敏捷，体验反而不佳。
- 对于带有交互的行为，一定不能只使用:hover伪类，而需要额外的处理，可以通过增加:focus伪类来优化体验
- 但对于本身就带有链接或按钮的浮层元素，使用:focus伪类是不可行的，因为虽然可以触发浮层的显示，但是浮层内部的链接和按钮无法被点击，这是由于通过键盘切换焦点元素时浮层会因失焦而迅速隐藏。不过这是有其他解决方法的，那就是使用整体焦点伪类 :focus-within

https://memo.cosine.ren/m/329

#书摘 #css #前端
《CSS 选择器世界》 忽略属性值大小写的正则匹配运算符
正则匹配运算符是属性选择器中新增的运算符，它可以忽略属性值的大小写，使用字符i或者I作为运算符值，但约定俗成都以小写字母i作为运算符。语法如下：

[attr~="val" i] {}
[attr*="val" i] {}​​



作为对比示意，假设有选择器`[attr*="val"]`，则：

<!-- 不匹配 -->

<div attr="VAL"></div>

<!-- 匹配 -->
<div attr="Text val"></div>
<!-- 不匹配 -->
<div attr="Value"></div>

<!-- 不匹配 -->
<div attr="Val-ue"></div>​​



如果选择器是 `[attr*="val" i]`，则：

<!-- 匹配 -->

<div attr="VAL"></div>

<!-- 匹配 -->

<div attr="Text val"></div>
<!-- 匹配 -->
<div attr="Value"></div>
<!-- 匹配 -->
<div attr="Val-ue"></div>​​



可以看到，属性值的大小写被忽略了。

https://memo.cosine.ren/m/328

#书摘 #css #前端
《CSS 选择器世界》CSS属性选择器搜索过滤技术
我们可以借助属性选择器来辅助实现搜索过滤效果，如搜索通讯录、城市列表，这样做性能高，代码少。
HTML结构如下：

<input type="search" placeholder="输入城市名称或拼音" />
<ul>
<li data-search="重庆市chongqing">重庆市</li>
<li data-search="哈尔滨市haerbin">哈尔滨市</li>

<li data-search="长春市changchun">长春市</li>

...
</ul>​​


此时，当我们在输入框中输入内容的时候，只要根据输入内容动态创建如下CSS代码就可以实现搜索匹配效果了，无须自己写代码进行匹配验证。

var eleStyle = document.createElement('style');
document.head.appendChild(eleStyle);
// 文本框输入

input.addEventListener("input", function() {

var value = this.value.trim();

eleStyle.innerHTML = value ? '[data-search]:not([data-search*="'+ value +'"])
{ display: none; }' : '';

});​​


https://memo.cosine.ren/m/327

#书摘 #css #前端
《CSS 选择器世界》6.3 属性值正则匹配选择器
属性值正则匹配选择器包括下面3种：

[attr^="val"]

[attr$="val"]

[attr*="val"]​​


这3种属性选择器就完全是字符匹配了，而非单词匹配。其中，尖角符号`^`、美元符号`$`以及星号`*`都是正则表达式中的特殊标识符，分别表示**前匹配、后匹配和任意匹配**。

1. [attr^="val"]
[attr^="val"] 表示**匹配attr属性值以字符val开头的元素**。例如：

<!-- 匹配 -->
<div attr="val"></div>

<!-- 不匹配 -->

<div attr="text val"></div>
<!-- 匹配 -->

<div attr="value"></div>

<!-- 匹配 -->

<div attr="val-ue"></div>​​


- 这种选择器可以匹配中文，如果匹配的中文不包含特殊字符（如空格等），则引用中文的引号是可以省略的，例如：

[title^=我] {}​​


- 理论上可以匹配空格，但由于IE浏览器会自动移除属性值首尾的空格，因此会有兼容性问题
例如，下面的样式可以对HTML格式进行验证：

/*高亮类属性值包含多余空格的元素*/

[class^=" "] {
outline: 1px solid red;
}​​



实际开发中，开头正则匹配属性选择器用得比较多的地方是**判断`<a>`元素的链接地址类型**，也可以用来显示对应的小图标，例如：

/* 链接地址 */

[href^="http"],
[href^="ftp"],
[href^="//"] {

background: url(./icon-link.svg) no-repeat left;
}
/* 网页内锚链 */

[href^="#"] {

background: url(./icon-anchor.svg) no-repeat left;

}


/* 手机和邮箱 */


[href^="tel:"] {


background: url(./icon-tel.svg) no-repeat left;


}


[href^="mailto:"] {


background: url(./icon-email.svg) no-repeat left;


}​​



2. [attr$="val"]
[attr$="val"] 表示**匹配attr属性值以字符val结尾的元素**。例如：

<!-- 匹配 -->
<div attr="val"></div>
<!-- 匹配 -->
<div attr="text val"></div>
<!-- 不匹配 -->

<div attr="value"></div>
<!-- 不匹配 -->
<div attr="val-ue"></div>​​



该选择器的使用细节和 [attr^="val"] 的一致，这里不再赘述。
**在实际开发中，结尾正则匹配属性选择器用得比较多的地方是判断`<a>`元素的链接的文件类型**，也可以用来显示对应的小图标。例如：

/* 指向PDF文件 */
[href$=".pdf"] {

background: url(./icon-pdf.svg) no-repeat left;
}

/* 下载zip压缩文件 */

[href$=".zip"] {

background: url(./icon-zip.svg) no-repeat left;
}
/* 图片链接 */
[href$=".png"],
[href$=".gif"],
[href$=".jpg"],
[href$=".jpeg"],
[href$=".webp"] {

background: url(./icon-image.svg) no-repeat left;
}​​



3. [attr*="val"]
[attr*="val"] 表示**匹配attr属性值包含字符val的元素**。例如：

<!-- 匹配 -->
<div attr="val"></div>

<!-- 匹配 -->

<div attr="text val"></div>

<!-- 匹配 -->
<div attr="value"></div>

<!-- 匹配 -->
<div attr="val-ue"></div>​​



它也可以用来匹配链接元素是否是外网地址，例如：

a[href*="//""]:not([href*="example.com"]) {}​​


https://memo.cosine.ren/m/326