Everything you care about in one place
Follow feeds: blogs, news, RSS and more. An effortless way to read and digest content of your choice.
Get Feederzhangxinxu.com
张鑫旭-鑫空间-鑫生活
Get the latest updates from 张鑫旭-鑫空间-鑫生活 directly as they happen.
Follow now 177 followers
Latest posts
Last updated 2 days ago
前端快讯：setHTML()和Element.startViewTransition已支持
2 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12246 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、先说setHTML方法 之前有介绍过setHTMLUnsafe()方法，稍等，让我找一下。 找到了，就是这篇：介绍两个DOM新方法setHTMLUnsafe和getHTML 是去年4月份介绍的，距今有15个月。 当时setHTML()方法还未支持，谁知才没过多久，Chrome浏览器就已经支持了此特性。 关于setHTML setHTML()方法设置HTML字符串内容的时候，会自动进行XSS过滤，会自动移除<script>、<frame>、<iframe>、<embed>、<object>、<use>以及事件处理程序属性。...
AI时代网站智能体无障碍访问开发指南
3 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12289 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一些公司信息提前说明： 本文会大量出现Cloudflare这家公司名称，这是一家美国旧金山跨国互联网基础设施厂商，大家应该见过这件公司的静态资源CDN，DDoS 防御，近期在推动网站智能体的标准和规范上特别的积极。 Mintlify则是2021 年由工程师 Han Wang、Hahnbee...
浏览器原生支持JSON模块导入与开发啦！
11 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12241 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、原生JSON模块导入 现在所有的主流浏览都已经支持直接import JSON文件并直接解析为JSON数据了。 过去和现在 在过去，我们想要在项目中导入JSON，写法多半是这样的： import config...
CSS color-scheme属性与light-dark()颜色函数
16 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12241 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、从light-dark()颜色函数开始 light-dark()这个 CSS 函数接受两种颜色或两个图像，并根据当前页面的配色方案返回一种颜色或一个图像，无需 prefers-color-scheme 媒体查询进行匹配。 关于prefers-color-scheme...
全是好东西！HTML command属性和JS toggle事件
18 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12237 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、先说command属性 HTML command属性只能设置在按钮元素上，可以触发元素内置的方法，而这个方法是可以自定义设置的。 比方说下面这个点击按钮显示弹框的实现： <button commandfor="my-dialog" command="show-modal"&gt...
全新的CSS border-shape属性简介
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12232 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一句话，border-shape是用来实现不规则边框效果的。 一、这次不妨从案例入手 首先，我们使用AI生成一个五角星的勾勒路径。 帮我生成一个 五角星 SVG，使用 <path&gt...
CSS contrast-color()函数简介
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12109 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、无障碍访问专用颜色函数 CSS contrast-color()函数是专为无障碍访问设计的。 WCAG – Web Content...
新特性速递：focus()行为新增focusVisible控制
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12203 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、focus()的两种控制 平时让一个输入框聚焦，我们可以这么设置： input.focus() 默认情况下，控件元素通过focus()方法获取焦点，浏览器会通过滚动的方式让元素重定位到页面可视区域内。 但有时候，这种行为会影响体验，毕竟页面会突然跳一下。 如果不希望这种滚动行为触发，可以这么设置。 input.focus({...
1分钟速度了解text-align match-parent声明
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12196 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、直接进入正题 text-align:match-parent声明的作用就是使用和父元素一样的对齐方式。 可仔细一想，这个属性值就很奇怪，text-align本身就具有继承特性，为何还要多此一举设计一个match-parent呢？ 因为现实开发中存在一个极为罕见的使用场景。 且看案例： <div class="box"&gt...
光标的形状也能设置了，就是CSS caret-shape属性
about 2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12180 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、温故知新：光标颜色 2018年的时候，分享过CSS改变光标颜色的caret-color属性，详见“CSS改变光标颜色caret-color简介及其它变色方法”一文。 现在，除了光标的颜色，光标的形状也能改变了，这个CSS属性就是caret-shape属性。 caret-shape: auto caret-shape: bar;...
pretext与文字四面环绕效果的实现
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12177 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、pretext项目简介 特意看了下，这篇文章标题写好的时候，是4月9日，正好过去了一个月，终于排到了。 现在pretext在社区的讨论没有前段时间那么火了。 做前端开发这么多年，有一个心心念念的布局效果一直想要实现，那就是完全文字环绕效果。 CSS shapes布局可以实现一侧环绕，但是想要完整环绕，一直没有什么好的解决方案。 pretext的出现让我意识到有了比较好的解决方法了。...
JSON.rawJSON方法的作用是什么？
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12158 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 在前端开发中，JSON对象的方法我们最常用的就是parse和stringify，几乎每天都在和它们打交道——接口请求后用parse解析数据，提交数据前用stringify序列化对象。 但如果你最近关注JS的新特性，会发现多了一个不怎么起眼但却很实用的方法：JSON.rawJSON。 很多同学看到这个方法会一脸疑惑：stringify已经能序列化数据了，为什么还要整个rawJSON？它到底解决了什么问题？ 今天我们就抛开晦涩的官方文档，用最接地气的方式，把JSON.rawJSON的作用、用法和避坑点讲明白，看完就能直接用到项目里。 一、stringify的“隐形坑” 在讲rawJSON之前，我们先看一个日常开发中很容易踩的坑，也是rawJSON诞生的核心原因。 大家都知道，JavaScript里的数字都是浮点数，这就导致有些超大整数无法被精确表示。比如我们有一个超大的ID值：12345678901234567890，当我们用stringify序列化它时，会发现一个诡异的问题：...