标签 CSS 下的文章

清明时节雨纷纷，路上行人欲断魂！

今天是个特殊的日子，为了表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼，国务院决定，2020年4月4日举行全国性哀悼活动，10时起，全国人民默哀3分钟，汽车、火车、舰船鸣笛，防空警报鸣响。

从昨天接到通知，要把网站变成灰色，经过多方查找，找到网上流传的解决方案：

html {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

但是，发现IE10以上，把filter这个属性干掉了……所以高版本的IE跪了！！

不过方案还是有的，那就是强制让IE降级到IE9！

<meta http-equiv="X-UA-Compatible" content="IE=9" />

这样就可以保障所有的网站都变成灰色的了。

另外还有grayscale.js这种方案，但是看了下实现原理，是把所有img标签的文字都转成base64，然后灰度处理，这样性能会比较卡顿，所以不推荐用这种方式来做，而且这种方案是不支持样式背景图的……

1. node环境

下载：http://nodejs.cn/download/

2. node-sass安装

npm install -g node-sass

3. 启动监听命令

node-sass -w xxx.scss xxx.css --output-style expanded

4. 风格选项

nested：嵌套缩进的css代码，它是默认值

expanded：没有缩进的、扩展的css代码

compact：简洁格式的css代码

compressed：压缩后的css代码

项目中用到了弹窗居中，有些弹出正常，有些弹出就模糊。这就比较奇怪了，一样的样式，为啥会出不同的结果呢？

css水平居中是有很多办法的，项目里面用的是这样的居中方式：

position: absolute;
left: 50%;
transform: translateX(-50%);

然后一点一点的去掉样式，定位到是transform导致的！用搜索引擎查了下，果然不止我一个人有问题，看来有解决方案了。

原来出现模糊的原因是因为元素的高度、宽度中有奇数， 使用类似translate(-50%,-50%)之后，相当于宽度、高度除以2的效果，会出现 0.5px。像素就是最小的单位了，要么1，2，3，要么就是0，没有小数。

好在这个项目里面的弹出层宽度是可以设置宽度的，看了下这个模糊的弹出，设置的宽度是865px，好吧，那就改改宽度解决问题！但是，如果是不定高度垂直居中呢？这就比较棘手了，不能用这个方案了，所以transform对于居中不是一个好的解决方案，在实际项目中应该尽量避免此方案！

所以，如果考虑兼容就老老实实的用table + table-cell方式去居中，不考虑兼容的话使用flex方式去居中！

统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格，提供常用媒体查询语句和浏览器私有属性引用，并从业务层面统一规范常用模块的引用。

- 阅读剩余部分 -

真正的问题是什么？

CSS即层叠样式表，所以一层一层覆盖其实是其本质特征。真正的问题在于维护，许多人认为CSS仅是样式，不是代码，无需维护，所以任意书写，只要将自己需要的样式的优先级设为最高即可，才导致了深层级CSS的出现，因为每次添加一个样式就必须比以前的优先级高才能在页面看到。深层级不仅造成维护性降低，可读性也是一个问题，人不是机器，无法很优雅的按优先级阅读，所以很难确认一个样式用于哪里，其实还存在许多的冗余样式，在任何地方都被覆盖的样式。这样的代码在扩展性上，一开始反而是有优势的，因为添加一个新class，无需担心影响其他地方，但慢慢随着项目规模的增大，页面增多，需要复制样式的地方也越来越多，它们之间又存在微小的差异，设计的更改，需求的变化，这一切都会将这种快餐式的CSS推进柏油坑。因为难以维护，所以无法响应需求，所以无法复用，只能复制，恶性循环。

正如上面所说的，问题在于可读性、维护性、扩展性、复用性这几个方面。所以只要提高它们就能解决问题, 虽然这么说，也不是如此简单的。先来谈谈在CSS中，这些概念都有着怎样的意义。

- 阅读剩余部分 -