cosine - 前端人の日常频道 - 呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等网页：https://tg.cosine.ren本频道的搜索Bot 来辣 👉 @cosSearchBot私聊直接发消息就可以搜索啦～🔖tags#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态图频：Cosine 🎨 Gallery @CosineGallery猫片： @cosine_cat联系频道主：@cosine

呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu

#优质博文 #阮一峰的科技周刊 #前端
科技爱好者周刊（第 274 期）：加密通信的最后一块拼图

『如果 cloudflare-ech.com 发生故障，或者种种原因无法访问，那么所有 Cloudflare 托管的网站是否都无法访问？

这是很现实的问题，因为 Cloudflare 是世界最大 CDN 服务商，很多网站都放在上面。而且，它对免费用户都启用了 ECH，还无法关闭（这是付费功能），等于是让免费用户当小白鼠。

我今天写这个话题，就是想提醒大家。如果由于 ECH 的问题，托管在 Cloudflare 的网站无法访问，有两个解决办法。

一个是站长向 Cloudflare 付费，关了 ECH；另一个是访问者不要使用加密 DNS，因为 ECH 依赖加密 DNS，没有了它，就不会触发 ECH。』

1. CSS 嵌套来了（英文）📓
以前的 CSS 不支持嵌套的写法。但是，现在 Firefox 和 Safari 的正式版本，都已经支持这种写法了
2. CSS 重置详解（2023版）（英文） 📓 著名 CSS 作者 Chris Coyier 的最新文章，解释浏览器的 CSS 重置（CSS reset）每一行的意思。
3. 我用 Web Components 开发了自己的网站（英文） 📓 作者记录怎么使用 Web Components 这种技术，开发自己的网站，他对结果非常满意。如果你想了解 Web Components，这是一篇不错的参考资料。
4. 我的创业技术栈（英文） 📓 作者记录了自己创业所使用的各种 SaaS 服务，免费的优先。【跟我司很像】

#资源推荐 #tools
1. LocalSend 🧰 一款开源的跨平台文件传送软件，不需要互联网连接，依靠共享 Wifi 分享文件。
2. Mycelite 🧰 一个 SQLite 扩展，用来从一个 SQLite 实例同步到另一个，适合从本地向服务端同步数据。
3. Auto-i18n 🧰 它使用 GitHub Actions 和 ChatGPT，将仓库里面的 Markdown 文件翻译成其他语言，适合制作网站的国际化版本。【这个好诶】#AI #i18n
4. little-rat 🧰 一个 Chrome 插件，用来统计并关闭其他插件发出的 HTTP 请求，可以了解插件是否在偷偷上传数据。

WebKit

CSS Nesting and the Cascade

You might have noticed that Safari Technology Preview 179 includes an update to CSS Nesting that adds support for the new “relaxed parsing behavior”.

优质博文阮一峰的科技周刊前端资源推荐 tools AI i18n

12:30 · Oct 18, 2023 · Wed

#开源 #建站 #工具

⚙

IT Tools - 又一款开源的在线工具箱程序

🌐

演示

📄ToolsIT Tools 内置了近百种开发者常用的在线工具，你可以通过 Docker 一键部署

看了一下代码，貌似还可以部署到 Vercel ，不过开发者并未提供方法

该项目更新频繁，如果你想做一个工具站，那么可以尝试一下

📑相关阅读

傲星工具箱 - 一款开源的在线工具箱程序

📮投稿 📢频道 💬群聊 🔎索引

开源建站工具

11:00 · Oct 18, 2023 · Wed

#优质博文 #前端 #工程化
Bun 的炒作：我们是如何没有从 yarn 中学到任何东西

务必一看

英文原文：Bun hype. How we learned nothing from Yarn

微信公众平台

Bun 炒作的太火了，不过是另一个 yarn 的故事？

最近 Bun 被炒的火热，很多人都觉得我们又迎来了历史性的新工具，好用，快速！但是有人提出了反对意见，觉得 Bun 只不过是 yarn 和 npm 之间上演的故事的一个翻版。

优质博文前端工程化

03:11 · Oct 18, 2023 · Wed

Animated Covers

❗️ Source Code

Save and Share 🚀

👉 @frontend_trend

16:21 · Oct 17, 2023 · Tue

#碎碎念
喜，后三章就不做笔记了了解就可

碎碎念

15:45 · Oct 17, 2023 · Tue

#书摘 #css #前端
《CSS 选择器世界》默认选项:default伪类
CSS :default伪类选择器只能作用在表单元素上，匹配处于默认状态的表单元素。

虽然:default伪类用来标记默认状态，以避免选择混淆，但实际上，它更有实用价值的应用应该是“推荐标记”。
例如，某产品有多个支付选项，其中商家推荐使用微信支付
以前的做法是默认选中微信支付选项，并在后面加上“（推荐）”。这样实现有一个缺点：如果以后要改变推荐的支付方式，需要修改单选框的checked属性和“（推荐）”文字的位置。
有了:default伪类，可以让它变得更加简洁，也更容易维护。


input:default + label::after { 
   content: '（推荐）'; 
} 
 
<p><input type="radio" name="pay" id="pay0"> <label for="pay0">支付宝</label></p> 
<p><input type="radio" name="pay" id="pay1" checked> <label for="pay1">微信</label></p> 
<p><input type="radio" name="pay" id="pay2"> <label for="pay2">银行卡</label></p>

由于:default伪类的匹配不受之后checked属性值变化的影响，因此“（推荐）”会一直跟在“微信”的后面，功能不会发生变化。这样做之后维护更方便了，例如，如果以后想将推荐支付方式更换为“支付宝”，则直接设置“支付宝”对应的<input> 单选框为checked状态即可，“（推荐）”文字会自动跟在“支付宝”的后面，整个过程我们只需要修改一处代码。
读者可以手动输入 https://demo.cssworld.cn/selector2/11/1-3.php 体验与学习。

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

demo.cssworld.cn

:default伪类与自动添加推荐 » CSS选择器世界demo演示

CSS选择器世界demo实例演示页面之 :default伪类与自动添加推荐

书摘 css 前端

15:36 · Oct 17, 2023 · Tue

#书摘 #css #前端
《CSS 选择器世界》占位符显示伪类 :placeholder-shown

:placeholder-shown 伪类的匹配和 placeholder 属性密切相关。:placeholder-shown顾名思义就是“占位符显示伪类”，表示当输入框的placeholder内容显示的时候，匹配该输入框。使用场景如下

1.可用于实现Material Design风格占位符交互效果：输入框处于聚焦状态时，输入框的占位符内容以动画形式移动到左上角作为标题存在。

首先，使浏览器默认的 placeholder 效果不可见，只需将 color 设置为 transparent，CSS如下：


/* 默认placeholder颜色透明不可见 */ 
.input-fill:placeholder-shown::placeholder { 
   color: transparent; 
}

然后，用下面的.input-label元素替代浏览器原生的占位符而成为我们看到的占位符。我们可以采用绝对定位：


.input-fill-x { 
   position: relative; 
} 
.input-label { 
   position: absolute; 
   left: 16px; top: 14px; 
   pointer-events: none; 
}

最后，在输入框聚焦以及占位符不显示的时候对 <label> 元素进行重定位（缩小并移动到上方）：


.input-fill:not(:placeholder-shown) ~ .input-label, 
.input-fill:focus ~ .input-label { 
   transform: scale(0.75) translate(0, -32px); 
}

效果达成！显然，这要比使用JavaScript写各种事件和判断各种场景简单多了。
眼见为实，读者可以手动输入 https://demo.cssworld.cn/selector2/11/1-1.php 体验与学习。

2.:placeholder-shown与空值判断
由于placeholder内容只在空值状态的时候才显示，因此我们可以借助:placeholder- shown伪类来判断一个输入框中是否有值。
例如：


textarea:placeholder-shown + small::before, 
input:placeholder-shown + small::before { 
   content: '尚未输入内容'; 
   color: red; 
   font-size: 87.5%; 
} 
<input placeholder=" "> <small></small> 
<textarea placeholder=" "></textarea> <small></small>

可以看到输入框中尚未输入内容的时候出现了空值提示信息

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

demo.cssworld.cn

:placeholder-shown与占位符交互 » CSS选择器世界demo演示

CSS选择器世界demo实例演示页面之 :placeholder-shown与占位符交互

书摘 css 前端

15:26 · Oct 17, 2023 · Tue

#书摘 #css #前端
《CSS 选择器世界》 :target 伪类与锚点
假设浏览器地址栏中的地址如下：
https://www.cssworld.cn/#cs-anchor
则 #cs-anchor 就是“锚点”，对应术语是哈希，即JavaScript中location.hash的返回值。

URL锚点可以和页面中id匹配的元素进行锚定，浏览器的默认行为是触发滚动定位，同时进行:target伪类匹配。

举个例子，假设页面有如下HTML代码：


<ul> 
   <li id="cs-first">第1行，id是cs-first</li> 
   <li id="cs-anchor">第2行，id是cs-anchor</li> 
   <li id="cs-last">第3行，id是cs-last</li> 
</ul>

以及如下CSS代码：


li:target { 
   font-weight: bold; 
   color: skyblue; 
}

则第二行列表的颜色为天蓝色，同时文字加粗显示。
这就是:target伪类的作用——匹配URL锚点对应的元素。

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

书摘 css 前端

15:10 · Oct 17, 2023 · Tue

#书摘 #css #前端
《CSS 选择器世界》姗姗来迟的关联伪类 :has()
:has() 伪类是一个功能非常强大的伪类，它可以实现类似父选择器和前面兄弟选择器的功能。

:has()伪类的语义非常明确，和渲染表现保持一致。举个简单的例子，下面的CSS代码表示如果 <a> 元素里面有 <img> 元素，则 <a> 元素就匹配：