saber酱的抱枕

努力变强

02/14
02:56
软件

使用 UnCSS 移除冗余的 CSS 规则

CSS 文件里出现冗余的规则是很常见的,比如我们引用了某个 UI 框架的 CSS 文件,里面包含了所有组件的样式规则。但是我们在一个页面里不可能用到所有的组件,那么用不到的规则就是冗余的,我们可以使用 NodeJS 的 UnCSS 包来去掉冗余的规则。

UnCSS GitHub 页面

首先安装 UnCSS:

npm install -g uncss

之后指定要分析的页面的 url,并设置输出的文件名:

uncss http://127.0.0.1:5500/index.html > styles.css

如上示例,UnCSS 会分析指定 url 的页面,提取所有被使用的 CSS 规则,保存到一个新的 CSS 文件里。非常快速便捷。

上面的示例是分析单个页面,我们也可以通过配置文件来让 UnCSS 批量处理多个页面。不过我还不清楚有没有分析整站的办法。

使用 UnCSS 移除冗余的 CSS 规则

01/16
07:43
学习

CSS 文字两端分散对齐

现在 CSS 实现文字的两端分散对齐效果已经很简单了,如下我们要把几句话分散对齐:

念 奴 娇

大 江 东 去

千 古 风 流 人 物

谈 笑 间 樯 橹 灰 飞 烟 灭

my name is saber

代码如下:

<style>
	.justify {
		width: 360px;
		text-align: justify;
		text-align-last: justify;
	}
</style>
<p class="justify">念 奴 娇</p>
<p class="justify">大 江 东 去</p>
<p class="justify">千 古 风 流 人 物</p>
<p class="justify">谈 笑 间 樯 橹 灰 飞 烟 灭</p>
<p class="justify">my name is saber</p>

现在时间 2019 年 1 月,以上代码在现在最新版的 Chrome、Firefox、Edge、IE 、手机 QQ 里均测试通过。
Read More →

CSS 文字两端分散对齐

09/19
09:40
学习

JavaScript 转换 CSS 里的长度单位

CSS 的常用长度单位有 px、em、rem、pt 等。今天我遇到一个情况,有两个网站都使用了 rem 作为单位,但是根元素(html)的字号并不相同,需要进行转换。

移植页面的根元素字号是 20px,CSS 规则如:
height: 4rem;

我的根元素字号是 100px,需要除以 5,改成:
height: 0.8rem;

因为需要修改的地方很多,所以我写了个正则来处理。本文的代码并不是一个通用的工具,只是提供了解决思路。

这次的情况是同一种单位之间的转换,有时候我们可能需要进行不同单位之间的转换,思路都是一样的,根据需要修改代码即可。
Read More →

JavaScript 转换 CSS 里的长度单位

11/21
09:00
软件

手机QQ浏览器的坑

今天上线了一个手机站,然后我打算在手机上看看效果。考虑到兼容性,我就不用chrome了,安装了个手机QQ浏览器,看看有什么新发现。

问题1:不支持background-size的简写。如下简写方式:

background: url(../images/jjtitbg.png) 0 0 no-repeat/100%;

和分开写应该是等价的:

background: url(../images/jjtitbg.png) 0 0 no-repeat;
background-size: 100%;

chrome浏览器的pc和移动版都支持简写,但是qq浏览器不行,直接判定这条规则无效,不显示背景图了。没想到X5内核竟恐怖如斯。我去QQ浏览器的论坛上提建议,结果帖子竟然无法提交。你开心就好。
Read More →

手机QQ浏览器的坑

06/5
13:58
学习

使用CSS美化表单(checkbox、radio)

今天做的网站上有个地方的单选按钮是这样的:

 使用CSS美化表单(checkbox、radio)

这个需要做美化,我找到了一个办法,步骤如下:

1.先把按钮隐藏,然后放一个i标签来伪装成按钮。把我们自己做的按钮图片设置为i标签的背景图。

2.按钮被隐藏起来了,怎么选中/反选按钮的状态呢?这就需要用label标签把按钮、i标签以及文字包裹起来,这样点击i标签和文字就可以设置按钮的选中状态了。

html代码如下:

<label><input type="radio" name="sex" value="男" checked><i></i> 男</label>
<label><input type="radio" name="sex" value="女"><i></i> 女</label>

3.在按钮的选中状态改变后,css怎样能相应的改变图片呢?我原以为要用js来判断选中状态,不曾想css里也有对应的选择器了。

css代码如下:

input[type="radio"] {display:none;} /*隐藏按钮*/
label i {  } /*设置通用样式,如宽高等*/
input[type="radio"] + i {  } /*这里设置未选中时的背景图,内略*/
input[type="radio"]:checked + i {  } /*这里设置选中时的背景图,内略*/

这是什么操作?我查了下,原来这是 :checked 是一个css3的伪类选择器,可以匹配每个选中的输入元素(仅适用于单选按钮或复选框)。

除此之外还有个识别禁用状态的 :disabled 伪类选择器,这次我没有使用。

+号选择器则代表相邻的元素。
Read More →

使用CSS美化表单(checkbox、radio)

06/5
12:03
学习

img元素不能使用after、before伪元素的研究

通过使用css的after、before伪元素,我们可以对html元素追加内容。今天我在对img元素使用after、before伪元素时发现不生效,后来确定是after、before伪元素对于img标签这类不支持内嵌其他标签的标签无效。

如下图,是对p标签使用after,正常。

::before ::after css img 伪元素 无效

注意,如果生效的话,我们在开发者工具里能看到红框处添加了伪元素。

下面是对img元素使用after,css规则是正确加载了的,但是没有给img标签追加伪元素。

::before ::after css img 伪元素 无效

后来我思考了一下,发现伪元素生效时,在html里追加的伪元素是位于标签内的。但img标签不能再嵌套其他标签,所以这时候伪元素就不生效了。

以此类推,其他一些不能嵌套子元素的标签应该一样不能使用after、before伪元素。

后来我去MDN上看了看这俩伪元素的定义,确实是这样。国内的一些网站上的资料则是说在元素前/元素后追加伪元素,害人不浅。

img元素不能使用after、before伪元素的研究

04/2
08:00
学习

解决display: inline-block;的间隙问题

css的display: inline-block是替代浮动(float)的一个好办法。inline-block布局不会有float的一些缺点:脱离文档流、破坏inline box(具体来讲就是float的元素要等高,否则下面的float元素会被上面的卡住)。inline-block不会脱离文档流,元素高度不同也不会卡住。但是inline-block的元素之间会有空隙。

如下代码:

<div id="a"></div>
<div id="b"></div>
<style>
	#a,#b{width: 100px;height: 150px;display: inline-block;}
	#a{background: #0c0;}
	#b{background: #0ff;}
</style>

两个div都是inline-block布局,默认会有空隙:

解决display: inline-block;的间隙问题

(IE8的空隙还比其他浏览器少了1px)

那怎么办呢?有两个解决办法:

1.使两个元素的代码之间没有空隙。如上例,则时两个div的代码挨在一起,中间不要换行。这样就没有空隙了。

2.给应用了inline-block布局的元素的父元素添加css属性:font-size: 0; 这样就OK了。

以上两个方法都兼容所有浏览器。

解决display: inline-block;的间隙问题

ps:以前chrome不吃font-size: 0;这一套,不过较新版本的chrome也支持了。

解决display: inline-block;的间隙问题

03/8
00:00
学习

使用 ::before 和 ::after 伪元素来制作CSS3动画

我们经常对html元素使用hover选择器来做一些效果,比如当鼠标放在一个a标签上时改变文字颜色:

a{color: #F4A801}  //超链接的文字是橘黄色
a:hover{color: #FF0000}  //当鼠标经过时变成红色

如果加上css3的一些过渡属性就会出现变化的过程,成为简单的css3动画。

但是之前我没想到 ::before 和 ::after 这俩伪元素也可以用类似hover的选择器触发它们的动画。今天见识到了,感觉很棒。

如下效果,当鼠标放到这个按钮上时会在底部展开一条线:

查看更多

这个是怎么做的呢?

按钮是A标签,需要给它设置相对定位和超出隐藏:

a{position: relative;overflow: hidden;}

然后用::before伪元素在底部做一条线,只不过一开始没让这条线显示出来。::before伪元素需要设置绝对定位,这样可以让它位于按钮内部。

最后,当鼠标经过按钮时(hover)改变::before伪元素的css属性,如同文章开头的代码中改变a标签的属性一样,只是写法不同:

a:hover::before{
    /*css属性*/
}

最终实现的代码如下:

<a href="" id="more">查看更多</a>
<style>
	#more{display: inline-block;width: 150px;height: 48px;line-height: 48px;text-align: center;font-size: 20px;color: #fff;text-decoration: none !important;text-shadow:none !important;background: #8EE964;
		/*最后的por和ovh是必须的*/
		position: relative;overflow: hidden;
	}
	#more:before{
	  /*设置初始状态*/
	  content: "";
	  position: absolute;
	  left: 50%;
	  right: 50%;
	  bottom: 0;
	  background: #ff9d2e;
	  height:5px;
	  /*transition-property 设置过渡时要改变的属性 若不设置则为all*/
	  transition-property: left, right;
	  transition-duration: 0.3s;
	  transition-timing-function: ease-out;
	}
	#more:hover:before, #more:focus:before, #more:active:before {
		/*当鼠标经过、或按钮被焦点、被激活时对before的属性进行改变*/
	  	left: 0;
		right: 0;
	}
</style>

ps:
我这次没使用::after伪元素,大家可以按需使用。

伪元素前面写两个冒号是符合标准的写法,写一个冒号是为了兼容比较旧的浏览器,实际使用中写一个或两个均可。

如有需要,也在hover外部定义动画,然后在hover内引用。如:

#more:hover:before, #more:focus:before, #more:active:before {
  	animation:showUnderline .3s forwards;
}
@keyframes showUnderline {
	to{
		left: 0;
		right: 0;
	}
}

注意,@keyframes定义的动画和直接在样式里写的动画有区别:
以鼠标hover时执行动画为例,@keyframes定义的动画,当鼠标离开后没有逐渐恢复至原来状态的过程,而在元素样式内定义的则有。
以本文的按钮为例,@keyframes定义的动画,当鼠标离开按钮后那个底边不会逐渐向中间收缩,而是瞬间就消失了。

使用 ::before 和 ::after 伪元素来制作CSS3动画