CSS技巧和工作总结

Posted on

工作确实是两点一线的生活。而且偶尔还加班,不过也算是正规的做一些东西了,个人成长来说也还不错。很多稍微有深度的知识也有所接触。于是想写点东西记录下自己的成长。以后再回顾的时候也算有所收获。

CSS层叠水平

CSS的层叠看起来很简单,可以通过z-index来进行调整,但是实际上并没有那么简单。层叠水平总共有7阶,我们实际在使用中的时候要充分考虑。

  1. 形成堆叠上下文环境的元素的背景与边框
  2. 拥有负 z-index 的子堆叠上下文元素 (负的越高越堆叠层级越低)
  3. 正常流式布局,非 inline-block,无 position 定位(static除外)的子元素
  4. 无 position 定位(static除外)的 float 浮动元素
  5. 正常流式布局, inline-block元素,无 position 定位(static除外)的子元素(包括 display:table 和 display:inline )
  6. 拥有 z-index:0 的子堆叠上下文元素
  7. 拥有正 z-index: 的子堆叠上下文元素(正的越低越堆叠层级越低)

这里有个重点概念是堆叠上下文,那么元素是如何形成堆叠上下文呢?

  1. 根元素 (HTML)
  2. z-index 值不为 "auto"的 绝对/相对定位
  3. 一个 z-index 值不为 "auto"的 flex 项目 (flex item),即:父元素 display: flex|inline-flex
  4. opacity 属性值小于 1 的元素
  5. transform 属性值不为 "none"的元素
  6. mix-blend-mode 属性值不为 "normal"的元素
  7. filter值不为“none”的元素
  8. perspective值不为“none”的元素
  9. isolation 属性被设置为 "isolate"的元素
  10. position: fixed
  11. 在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值
  12. -webkit-overflow-scrolling 属性被设置 "touch"的元素

如果符合上面规则,会形成层叠上下文。层叠上下文的背景一定是最下面的,想要通过z-index来调整浮动在其他元素上方是不可能的。

DOM Ready

如果巧妙的在DOM加载完成之后来执行JS呢,最简单的方法是把JS放在body的最下方。但这样处理有些麻烦,最简单的方法是使用setTimeout方法,设置延迟时间为0。延迟时间为0并不意味着这段代码会立即执行,而是等到所有JS加载和执行完毕,DOM也加载完毕的时候才执行。

Safari Scroll

手机版Safari在滑动的时候如果有动画执行,会导致整个页面空白。当滑动结束的时候才会渲染。我们不得不采用给所有元素添加transform: translate3d(0,0,0)属性, 来使Safari强制使用GPU加速。

CSS动画性能加速

CSS动画尽量使用transform: translate3d(0,0,0)来实现,因为ransform3d api会强制开启GPU加速提高页面的流畅度。在公司的项目中,从使用background-position进行动画效果换成transform之后,动画流畅度得到了显著的改善。

参考:

Stack Overflow

The stacking context

层叠顺序(stacking level)与堆栈上下文(stacking context)知多少?

tagged: css

JavaScript对象的常见操作

Posted on

工作也算是稳定了,不过理想和现实的差距还是很大。程序员的职责是把枯燥的工作自动化,而不是去进行重复劳动。最近在写JavaScript程序的时候,遇到了很多对象相关的操作。所以写点东西来总结下这半个月的成长。

JavaScript对象复制

JavaScript对象默认全部是拷贝引用,也就是所谓的浅拷贝。所以我们在对象操作的时候,要记住是否需要进行拷贝。一般我们使用对象的时候,都是需要对其某个属性进行修改。所以正确的写法是:

    const bar = { a: 1, b: 2, c: {d: 4}}
    const foo = {...bar, b: 3}
    foo.c.d =10
    console.log(bar.c.d)
    // { a: 1, b: 2, c: {d: 10}}

这样就同时进行拷贝和修改。注意这里使用的是JavaScript的es6语法。如果要在浏览器运行,你需要 Babel 来进行转换。注意,如果对象里面还有对象的话,这种方式也仅仅是浅拷贝。深拷贝必须遍历所有属性进行复制,在效率上有很大问题,所以我们尽量不要去用深度拷贝来解决问题。 这里对象的复制是使用的Object.assign 针对对象的简单类型可以进行复制,但是对象还是引用。如果实际的应用场景确实需要进行深度拷贝,可以使用Lodash。提供了很多常用的类库。

JavaScript数组

针对数组,现在已经不推荐用for循环来进行处理了,请使用数组的map, filterreduce来处理数组的操作。相信这三个方法足以满足需求。

JavaScript开发规范

现在JavaScript已经是es6的时代,所以我们也需要顺应时代学习新知识。这里我建议大家读读airbnb的JavaScript Style Guide。这里不仅教会你正确的编码格式,更多的是优秀的写法。如何合理的拷贝对象,遍历数组等等。

目前就写到这里,工作之后并没有多少成长。写博客都发呆了很久该写什么。。。

CSS笔记和杂谈

Posted on

这应该是最长的一次博客断更吧。。。因为年后辞职加上来日本工作的原因。导致很长时间都没有更新自己的博客了。很是惭愧,本来定的目标就是每月一篇很简单的任务。但居然空档了这么长时间,这就是正所谓的生于忧患死于安乐吧。找到了工作就松懈了,所以今天又重新捡起来继续写。公司的新人课题是做一个简单的CMS网站,也算重新复习了一下网页制作吧,因为一直再写JS的项目,基本的HTML和CSS的设计都有点生疏了。。。

CSS一行多列设计

这是一个最基本的设计布局。在一行上有多列的内容,最简单的例子是导航栏。HTML的大致结构是这样的:

    <ul>
    <li>HTML/CSS</li>
    <li>JavaScript</li>
    <li>CMS</li>
    </ul>

默认的话,这三列内容是向下排列的,如何让它们横着排列呢?这时候有三种解决方案:第一,是采用float使得所有的li列表浮动表示在一行。但这时候记得使用clear去清除浮动属性。这种设计方案的好处是兼容性强,但新手容易处理不好float属性对布局的影响和忘记清除float属性。第二种解决方案是对li使用display:inline-block;使得li并排一行,这种方案的好处是容易理解和兼容性高。但如果li之间的HTML源代码有回车的话会导致相邻的li有很细微的间距。所以对像素级别的设计方案来说并不推荐。第三种方案是使用flex布局。这是目前来说最灵活的一种布局方案了,特别对于多屏幕自适应来说非常友好。但是对浏览器版本要求比较高,IE11以下都不支持。所以这个简单的布局方案要根据自己的业务情况进行具体选择,并没有银弹。

子DIV溢出方案

有些时候根据需求我们设计的子DIV要比父DIV超出一定范围,这时候要怎么设计才好呢?有时候会想到利用position: relative;来改变子DIV的文档流进行实现。但这种方式实在是不推荐,因为会影响父DIV在页面的布局。我建议的解决方案是使用margin来进行溢出,margin不仅可以输入正数,也可以使用负数。当使用负数的时候就会朝反方向扩展达到溢出的目的。

多行文字垂直居中

实际开发中,我们经常会遇到这种常见的需求,对于一行文字来说,很简单,我们只要把heightline-height设置成一样的高度就可以了。但是对于多行文字的话,我们还是需要一些技巧的。首先,我们需要在文字外面再套一层元素进行设置。HTML结构大致是这样:

    <div>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
      </div>

然后我们在div上设置heightline-height一样高,使得span元素保持垂直居中。然后再修改span元素的CSS属性,设置正常的line-height和display: inline-block;以及vertical-align: middle;

参考

remove-whitespace-inline-block

display

Vertical align multiple lines of text

tagged: css