前言  说起Custom Element那必然会想起那个相似而又以失败告终的HTML Component.HTML Component是在IE5开始引入的新技术,用于对原生元素作功能"增强",虽然仅仅被IE所支持,虽然IE10也开始放弃它了,虽然掌握了也用不上,但还是不影响我们以研究的心态去了解它的:) 把玩HTML Component  HTML Component简称HTC,它由定义和应用两部分组成.定义部分写在.htc文件中(MIME为text/x-component),由HTC…

前言  通过<WebComponent魔法堂:深究Custom Element 之 面向痛点编程>,我们明白到其实Custom Element并不是什么新东西,我们甚至可以在IE5.5上定义自己的alert元素.但这种简单粗暴的自定义元素并不是我们需要的,我们需要的是具有以下特点的自定义元素: 自定义元素可通过原有的方式实例化(<custom-element></custom-element>,new CustomElement()和document.createEle…

前言  最近加入到新项目组负责前端技术预研和选型,一直偏向于以Polymer为代表的WebComponent技术线,于是查阅各类资料想说服老大向这方面靠,最后得到的结果是:"资料99%是英语无所谓,最重要是UI/UX上符合要求,技术的事你说了算.",于是我只好乖乖地去学UI/UX设计的事,木有设计师撑腰的前端是苦逼的:(嘈吐一地后,还是挤点时间总结一下WebComponent的内容吧,为以后作培训材料作点准备. 浮在水面上的痛 组件噪音太多了!  在使用Bootstrap的Modal组…

一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; console.log(el.getAttribute('hello')); // IE67下输出test,其他浏览器输出null “搞毛啊?”,苦逼的Jser对着浏览器大呼一声.然后就用下面蹩脚的方式草草处理掉了. function getAttr(el, prop){ return el[prop] || el…

前言  每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display:inline;*zoom:1;.然后发现盒子间无端端多了个不可选的空白符,于是想尽办法修复这个bug.  直到一天拜读了@一丝姐.@HAX等高人的秘笈后才顿悟,原来我错了.那不是bug,是我不懂而已. 先行者--IE5.5中的inline-block  当我们为支持IE5.5/6/7而添加这段hack时*display:inline;*…

前言  对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考.  <CSS魔法堂:重新认识Box Model.IFC.BFC和Collapsing margins>  <CSS魔法堂:你一定误解过的Normal flow>  <CSS魔法堂:Absolute Positioning就这个样>  <CSS魔法堂:说说Float那个被埋没的志向>  深入细节后会发现3中定位模式之间,Box…

一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面目吧! 二.由于篇幅较长,特设目录一陀 三.HTML4下实现简单拖拽 四.HTML5下实现简单拖拽 五.如何启用DnD效果 六.draggable属性详解 七.DnD的生命周期 八.DnD中最重要的数据传递对象──DataTransfer对象 九.[object DataTransferItemLi…

前言 当我们以position:absolute之名让元素脱离Normal flow的控制后,以为通过left和top属性值即可让元素得以无限的自由时,却发现还有各种神秘的力量左右着它的来去,于是我们意识到自己力量的微弱,开始迷茫不前. 后来有幸拾到各路前辈高人的秘笈,终于打通任督二脉,记录在案以便日后查阅. 以Normal flow为基础 Q:不是说好以左上角为原点(0,0)吗?怎么top:auto;right:auto;bottom:auto;left:auto;时的效果和Normal fl…

前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗? text-align属性详解 The 'text-align' CSS property describes how inline content like text and inline-level element etc. is aligned in its parent block element.Does not control…

前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊......于是通过本篇来一探究竟:) line-height到底有多height? 行距.行间距傻傻分不清  首先看看"有道词典"的解析! Leading = Line Space + Font Size(即是 行距 = 行间距 + 字体大小) Leading: 指相邻文本行间上一个文本…