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 3 days ago
background-clip升级，支持边框或文字应用背景
3 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12341 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、渐变边框的实现 在过去，渐变边框的主要实现方法，一是嵌套或伪元素模拟嵌套，二是使用border-image属性，相关实现在“被低估的border-image属性”一文中有介绍。 但是border-image属性实现渐变边框有个知名的弱点，那就是不支持圆角！ 如果支持圆角，哪怕border-image属性的语法再难以理解，也还是与应用场景的。 本以为这件事情就到此为止了，没想到峰回路转，background-clip属性升级了，居然可以用来实现边框背景效果了，那自然将边框背景设置成渐变不再话下，需要用到全新的属性值 border-area. border-area与渐变边框...
来了来了，Flex/Grid布局的间隙装饰线它来了
6 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12316 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、先讲下历史 间隙装饰线其实由来已久，在大多数前端从业人员还未入行的时候就已经支持了，大家如果查看 column-rule 属性的兼容性，会发现极佳。 但是，请注意，column-rule 属性生效是有前提的，那就是只能在Columns布局中有效。 而Columns布局我已经快10年没有在实际项目中使用了。...
Screen.isExtended、getScreenDetails与多显示器开发
12 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12253 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、如何判断是多显示器 screen.isExtended属性和window.getScreenDetails()都可以判断当前用户是否是多显示器。 代码示意： if (screen.isExtended) { console.log("用户拥有多显示器")...
纯CSS实现repeat(–n, anything)循环展示或相加功能
18 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12312 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、神奇效果抢先看 去年9月有介绍过CSS @function自定义函数，那么有没有可能自定义一个名为repeat(--n, anything)的函数，实现字符循环拼接或者数值相加的功能呢？ 还真可以，例如： <div class="target"></div&gt...
CSS新单位dvh、lvmin、vi、cqb等初解
24 days ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12289 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、CSS又出新单位了 一不留神，CSS又多了几十个我不认识的单位。 来来来，排排站，给大家露个脸。 dvb, dvh, dvi, dvmax...
前端快讯：setHTML()和Element.startViewTransition已支持
about 1 month 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时代网站智能体无障碍访问开发指南
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12289 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一些公司信息提前说明： 本文会大量出现Cloudflare这家公司名称，这是一家美国旧金山跨国互联网基础设施厂商，大家应该见过这件公司的静态资源CDN，DDoS 防御，近期在推动网站智能体的标准和规范上特别的积极。 Mintlify则是2021 年由工程师 Han Wang、Hahnbee...
浏览器原生支持JSON模块导入与开发啦！
about 1 month ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12241 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、原生JSON模块导入 现在所有的主流浏览都已经支持直接import JSON文件并直接解析为JSON数据了。 过去和现在 在过去，我们想要在项目中导入JSON，写法多半是这样的： import config...
CSS color-scheme属性与light-dark()颜色函数
about 2 months 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事件
about 2 months 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属性简介
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12232 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一句话，border-shape是用来实现不规则边框效果的。 一、这次不妨从案例入手 首先，我们使用AI生成一个五角星的勾勒路径。 帮我生成一个 五角星 SVG，使用 <path&gt...
CSS contrast-color()函数简介
2 months ago
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12109 本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。 一、无障碍访问专用颜色函数 CSS contrast-color()函数是专为无障碍访问设计的。 WCAG – Web Content...