2021年02月16日 by 张 鑫旭 阅读 36935 次, 今日 38 次

HTML字符串转DOM方法有好几个,本文盘点下各个方法的特性和优缺点,以及您可能不知道的相关DOM API方法的其他细节,希望可以对大家的学习有所帮助。
阅读全文…
标签: childNodes, children, createContextualFragment, createRange, dom, DOMParser, firstChild, firstElementChild, innerHTML, insertAdjacentHTML, parseFromString, template
发布在 JS API | 6 条评论 »
2021年02月15日 by 张 鑫旭 阅读 36663 次, 今日 35 次

本文介绍多种使用JS检测用户是否缩放页面的方法,有的针对PC桌面端浏览器,有的针对mobile移动端浏览器,您会学到不少新的API,以及新颖的实现思路。
阅读全文…
标签: @media, devicePixelRatio, innerWidth, localStorage, matchMedia, outerWidth, resize, ResizeObserver, visualViewport, zoom
发布在 JS实例 | 15 条评论 »
2021年02月14日 by 张 鑫旭 阅读 15360 次, 今日 27 次

本文介绍一种CSS小技巧,可以实现线条从元素或字符的中间穿过,实现不难,但是思路很巧妙,希望本文的技术关键时候可以帮到您。
阅读全文…
标签: 3d, line-through, perspective, rotateX, rotateY, text-decoration, transform, transform-style, translateZ
发布在 CSS相关 | 2 条评论 »
2021年02月14日 by 张 鑫旭 阅读 18276 次, 今日 27 次

CSS全局关键字包括inherit、initial、unset和revert,其中inherit最实用,其次是revert,本文就简单介绍下revert关键字及其作用。
阅读全文…
标签: all, inherit, initial, list-style-type, ol, revert, ul, 全局关键字
发布在 CSS相关 | 3 条评论 »
2021年02月13日 by 张 鑫旭 阅读 21550 次, 今日 32 次

Web组件开发可能需要引入外部CSS到Shadow DOM中,本文就介绍3种各有优缺点CSS import的方法,帮助大家更好地进行web components组件开发。
阅读全文…
标签: @import, adoptedStyleSheets, CSSStyleSheet, export, fetch, Shadow DOM, Web Components
发布在 CSS相关, JS实例 | 6 条评论 »
2021年02月13日 by 张 鑫旭 阅读 14967 次, 今日 31 次

介绍一个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 张 鑫旭 阅读 20288 次, 今日 32 次

使用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 张 鑫旭 阅读 21463 次, 今日 36 次

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

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

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