2021年02月13日 by 张 鑫旭 阅读 13980 次, 今日 5 次

介绍一个CSS项目,5.9K Star的CSS项目Water.css,适用于简单页面的美化,对于经常需要做演示页面的开发者会很有用。
阅读全文…
标签: css reset, dialog, form, normalize.css, ol, quickLayout, Water.css, zxx.lib.css, 按钮, 链接
发布在 CSS相关 | 3 条评论 »
2021年02月12日 by 张 鑫旭 阅读 19281 次, 今日 4 次

使用Grid布局让元素重叠应该是最佳技术实践了,比margin负值和absolute绝对定位使用更方便,可以使用grid-area和多个其他CSS属性实现,有兴趣可以进来一看究竟。
阅读全文…
标签: css相关, figcaption, figure, grid, grid-area, grid-column, grid-row, grid布局, inline-grid, 元素重叠, 层叠上下文, 绝对定位
发布在 CSS相关 | 4 条评论 »
2021年02月11日 by 张 鑫旭 阅读 20416 次, 今日 3 次

type=range类型输入框UI自定义兼容性很好很实用,但是只是单值选择,有没有可能直接两个拖拽按钮实现范围选择呢?可以的,活用CSS即可,JS只需做一点微小的支持。
阅读全文…
标签: CSS变量, input range, pointer-events, Shadow DOM, Web Components, 组件, 自定义元素
发布在 Web综合 | 5 条评论 »
2021年02月6日 by 张 鑫旭 阅读 19661 次, 今日 5 次

详细介绍CSS ::part伪元素,以及和Shadow DOM中<slot>一起使用的细节知识,多个demo和截图,希望可以帮到您的学习。
阅读全文…
标签: ::part, css相关, display:flow-root, Shadow DOM, slot, Web Components, 伪元素, 选择器
发布在 CSS相关 | 一条评论 »
2021年01月27日 by 张 鑫旭 阅读 33958 次, 今日 5 次

无需改变文本内容,直接一行CSS,就可以让简体中文变成繁体中文效果,就是这么神奇!
阅读全文…
标签: font-variant, font-variant-east-asian, iphone, 中文字体, 简体, 繁体, 苹方
发布在 CSS相关 | 17 条评论 »
2021年01月21日 by 张 鑫旭 阅读 27668 次, 今日 3 次

借助DOM API的自身特性转义或者反转义HTML,你会发现原来这么简单,这么轻松,本文内容短小精悍,可谓Web前端开发必学必会基本技巧之一。
阅读全文…
标签: createElement, createTextNode, decode, DOMParser, encode, innerHTML, parseFromString, textarea, textContent
发布在 JS API | 11 条评论 »
2021年01月4日 by 张 鑫旭 阅读 35592 次, 今日 3 次

本文内容主要3部分,一是说明为什么keyCode舍弃了,二是对比event.key和event.code,三是整理常用功能键的event.key和event.code值,方便使用时候快速查找。
阅读全文…
标签: code, javascript, key, KeyboardEvent, keyCode, keydown, 键盘
发布在 JS API | 25 条评论 »
2020年12月25日 by 张 鑫旭 阅读 18677 次, 今日 3 次

介绍5组部分功能重叠的DOM API,带大家看看你可能不知道的一些细节差异,希望这些对比可以对您的学习有所帮助。
阅读全文…
标签: append, dataset, dom, getAttribute, getElementById, innerText, querySelector, scrollIntoView, scrollIntoViewIfNeeded, textContent
发布在 JS API | 9 条评论 »
2020年12月13日 by 张 鑫旭 阅读 28765 次, 今日 3 次
本文内容可谓是大开眼界,纯CSS实现自动边缘定位、带视差滚动的,iOS微信列表左滑显示按钮的交互效果,CSS可以做的远比你想象的更多。
阅读全文…
标签: absolute, css相关, flex布局, perspective, scroll-snap-align, scroll-snap-type, 视差滚动
发布在 CSS相关 | 24 条评论 »
2020年12月6日 by 张 鑫旭 阅读 19119 次, 今日 4 次

各大现代浏览器在2018年底均支持了一个名为toggleAttribute的DOM API,专为HTML布尔属性设计,非常实用,不容错过。
阅读全文…
标签: getAttribute, hasAttribute, javascript, novalidate, polyfill, removeAttribute, required, reversed, setAttribute, toggleAttribute
发布在 JS API | 11 条评论 »