2022年01月31日 by 张 鑫旭 阅读 16254 次, 今日 28 次

最近遇到了需要使用CSS让background背景图标的变色的需求场景,使用背景混合模式实现的,可能大家以后也用得到,所以分享下。
阅读全文…
标签: background-blend-mode, mask, mix-blend-mode
发布在 CSS相关 | 3 条评论 »
2022年01月14日 by 张 鑫旭 阅读 24415 次, 今日 30 次

未读消息超过100显示为99+是常见的交互,目前主流实现一定是通过 JS 逻辑判断,其实纯 CSS 就能实现一模一样的功能,兼容性还不赖,进来看看吧。
阅读全文…
标签: calc, content, counter, css var, CSS函数, font-size, min, round(), 自定义属性
发布在 CSS相关 | 19 条评论 »
2021年12月29日 by 张 鑫旭 阅读 19163 次, 今日 53 次

JS 标签模板 tagged templates 是一个很有意思的语法特性,是模板字符串的高级形式,那应该什么时候使用标签模板呢,本文就根据我个人的理解给大家做下解答。
阅读全文…
标签: preact, replace, String, tagged templates, template, 标签模板, 模板字符串, 模板字面量
发布在 JS API | 9 条评论 »
2021年12月20日 by 张 鑫旭 阅读 27016 次, 今日 40 次

本文带大家深入了解下为什么涉及安全与财务的时候,不能使用 Math.random 方法进行随机,干货还不少,走过路过不要错过。
阅读全文…
标签: crypto, getRandomValues, Math, Math.random, nodejs, randomUUID, self, sort, 随机
发布在 JS API | 13 条评论 »
2021年12月8日 by 张 鑫旭 阅读 25065 次, 今日 34 次

解释下为何 flex 布局中, flex-end 对齐不会触发 overflow 滚动效果,以及介绍解决方法,希望可以帮到遇到类似场景的人。
阅读全文…
标签: css相关, flex, flex-end, flex布局, justify-content, overflow, 滚动
发布在 CSS相关 | 12 条评论 »
2021年11月24日 by 张 鑫旭 阅读 26602 次, 今日 42 次

本文标题虽然是 visibilitychange,但实际上讲的是包括 pagehide, unload, beforeunload 等事件在内的Web页面生命周期知识,希望本文的整理可以帮到大家的学习。
阅读全文…
标签: beforeunload, Event, hash, history, pagehide, pageshow, sendBeacon, visibilitychange, wasDiscarded, 生命周期
发布在 JS API | 12 条评论 »
2021年11月14日 by 张 鑫旭 阅读 40100 次, 今日 37 次
配合meter元素,纯CSS也能实现3色状态带强中弱提示的密码强度效果,有基础有深入,本文可以学到的东西挺多。

阅读全文…
标签: gradient, html, input, label, mask, meter, optimum, Safari, 伪元素
发布在 CSS相关, HTML相关 | 22 条评论 »
2021年11月2日 by 张 鑫旭 阅读 26644 次, 今日 32 次

主要介绍 currentTarget、currentScript、currentTime、currentNode 和 currentSrc 这5个属性 API,有些是 JS 对象属性,有些是 HTML 对象属性,都挺有用的。
阅读全文…
标签: childNodes, createEvent, createNodeIterator, createTreeWalker, currentScript, currentSrc, currentTarget, currentTime, NodeIterator, srcset, TreeWalker
发布在 HTML相关, JS API | 4 条评论 »