less快速入门

前端的世界出了很多框架和工具,其实冷静的想想,思维方式与后端大同小异,less的出现为了提高写css的效率。其实如果没有less,我相信也会有人去弄一个类似的工具来提高开发效率。nodejs的出现让,npm的丰富,出现了很多工具,不要被这些工具的表象迷惑。有过服务器端开发经验的人都知道,思路就是那些,基本也成了套路。当然这些东西仍然有学习的必要,因为已经有很多人在用了,圈子成熟。不用重复造轮子。今天我借助less官网学习less,快速入门下,希望给路过的人一点点帮助。 继续阅读“less快速入门”

高效CSS3动画或transition避免reflow

CSS3提供了3D变换的属性,让我们可以操作网页内容在一个3维的空间。并且这些被投射到3D空间的元素也可以使用transition,keyframe实现动画效果。3D变换当然需要浏览器的支持。3D变换中一个关键的属性:Perspective,可以指定给元素,也可以作为transform的属性。Perspective:使用CSS长度表示(px,em,rem等等),它定义了从viewport到3D元素的距离

继续阅读“高效CSS3动画或transition避免reflow”

纯CSS3动效

首先,什么是CSS3不能做的目前?(①不能控制滚动条scroll ②渐变没有动画效果)

使用原则:渐进式增强以及优雅的降级,因为在目前的浏览器环境下,对CSS3的支持有一些差异。不过相信这些差异随着时间的推移可以忽略。现在我们需要考虑如果浏览器不支持当前的CSS3特性,网站是否可以正常使用(所谓优雅降级)。这里记录一些常见的动效,并使用纯css实现。 继续阅读“纯CSS3动效”

写好js代码DOM和浏览器模式

写高效js代码的一些最佳实践:分解关注点。HTML:内容构建  CSS:样式呈现  JavaScript:行为交互。DOM操作是非常耗性能的,尽量遵循以下原则:

DOM访问遵循:①避免在循环里面访问DOM  ②把DOM元素引用赋值给一个局部变量来使用  ③使用选择器API()  ④缓存HTML元素的length

DOM操作遵循:DOM增删改操作会触发浏览器重绘(渲染)和回流(布局),尽量批量操作,构建大的DOM树,先在内存构建好了在添加。 继续阅读“写好js代码DOM和浏览器模式”

写好js代码重用及常见设计模式

谈到代码重用,首先想到的就是继承,GoF有这样的建议:对象组合优于继承。js继承通过原型来实现,基本实现如:function inherit(C,P){C.prototype=new P();}

或function inherit(C,P){var F=function(){};F.prototype=P.prototype;C.prototype=new F();} 继续阅读“写好js代码重用及常见设计模式”

写好js代码开端

创建javascript对象非常容易,但是要把代码写的比较容易维护和扩展,多团队协作,就需要一些模式来约束。javascript本身没有命名空间,模块(ES6有了),但是目前ES6各个浏览器对模块化的支持很不到位。所以,还是有必要学习下创建对象的模式。

继续阅读“写好js代码开端”

嵌套Fixed定位元素,被嵌套的元素层级异常或失效

最近发现一个问题,Fixed定位元素嵌套会引发被嵌套的元素层级异常或失效。具体说明如下:

有这样一个布局:

<style>
.container4{width:100%;height:200px;background-color:cyan;position: fixed;z-index: 1;}
.container5{position: fixed;width:100%;height:100%;background: blue;z-index: 99;}
.container6{position: relative;width:100%;height:300px;background-color:rgba(100,0,100,1);z-index: 2;}
</style>
<div id="container4" class="container4">ddd
  <div id="container5" class="container5">eee</div>
</div>
<div id="container6" class="container6">fff</div>

继续阅读“嵌套Fixed定位元素,被嵌套的元素层级异常或失效”