女王控的博客

全部

165 篇文章

HTMLUnknownElement与HTML5自定义元素

HTMLUnknownElement元素 在网页中,随便写一个标签,例如: 这个 就是一个HTMLUnknownElement元素。 在HTML规范中,HTMLUnknownElement元素是一个被认可的合法的元素,CSS可以无障碍使用,例如: 则实时效果如下(用户名大写): ZHANGXINXU HTMLUnknownElement继承HTMLElement中的方法,因此,基本上,常用的HTML方法都是可以畅快使用的,例如,文字变红色,可以直接: 不同点 在HTML… »

如何借助content属性显示CSS var变量值

变量作为字符动态呈现 CSS var变量(CSS自定义属性)很好用,然后,有时候,需要这些变量能够同时作为字符在页面中呈现,我们想到的是使用::before/::after伪元素配合content属性,但是,把CSS变量直接作为content属性值是没有任何效果的。 借助CSS计数器呈现CSS var变量值 也就是虽然content属性本身不支持变量,但是counter-reset… »

CSS not伪类用法一览

优先级 如果对所有CSS伪类的优先级(也就是我们常说的选择器权重)进行分类,你会发现总共只有两个级别,0级和10级。 0级指没有优先级,1级是标签选择器,10级是类选择器,属性选择器,100级是ID选择器。 伪类,伪类,既然带有“类”字,自然其优先级好类选择器一致。 但是,其中有个特殊,那就是逻辑伪类的优先级都是0。例如::not(),:is(),:where()等。 逻辑伪类整个选择器语句的优先级是由括号里面内容决定的,不同的逻辑伪类规则不一样,其中:not… »

iframe和HTML5 blob实现当前页预览

实现方式 通常会新建一个另外的独立页面,专门用来接收传入的前端代码,通过新开窗口或者嵌入iframe页面的方式达到最终效果,其中可能会用到HTML5 postMessage等通信技术。 然而实际上,对于这个预览效果,如果代码是我们自己控制,而不是全权交给用户编辑的,是没有必要新建一个另外的预览页面,亦或者是在新窗口(新标签页)中浏览的。可以直接在当前页面构建一个文档上下文,实现更加方便快捷的预览。 核心原理 需要注意的是,当我们使用 new Blob… »

JS检测CSS属性浏览器是否支持

原生CSS.supports语法 返回布尔值true或者false,用来检测是否支持某CSS属性。 实际开发的时候,需要使用到对CSS检测场景,往往都是针对低版本的IE浏览器,例如IE9-IE11,低版本的IE浏览器并不支持浏览器原生支持的CSS.supports()方法。 JS赋值再取值的检测方法 当浏览器不支持某个CSS属性的时候,就算你强制设置,获取的计算值也不会是你设置的属性值 注意点 getComputedStyle… »

0%