练小习的专栏

97 篇文章
57 人订阅

全部文章

练小习

腾讯 · 高级前端开发工程师 (已认证)

使用自定义标记来构建页面

在用html5来搭建页面的时候,为了兼容不支持html5标记的浏览器,需要把html5标记全部createElement一遍。

2106
练小习

腾讯 · 高级前端开发工程师 (已认证)

SVG图形绘制入门第一弹

之前很长一段时间,我是不重视SVG的,认为他就是在AI里画画,然后导出来做个矢量图标。直到我在上家公司遇到图表的绘制,因为不会写不得已而拿插件实现,而插件绘制的...

2157
练小习

腾讯 · 高级前端开发工程师 (已认证)

表格列的hover状态与选中状态

组织表格列的交互状态一直是很头疼的事情,他不像行那样有天然的tr包裹可控,只有一个虚无缥缈的col元素可以操作,而且原生的col样式在操作的时候也是有各种坑。

21511
练小习

腾讯 · 高级前端开发工程师 (已认证)

CSS Hack整理

CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析CSS没有达成一致前,我们只能用这样的方法来完成这样的任务. 我...

1898
练小习

腾讯 · 高级前端开发工程师 (已认证)

css绘图,实现一些特殊形状

还是和前面的tips一样,多用after和before,能省俩标签!俩!比如这一堆的形状 <!DOCTYPE HTML> <html> <head> <met...

1898
练小习

腾讯 · 高级前端开发工程师 (已认证)

max-width:100%在td或者table-cell里渲染不符合预期小笔记

一直没太注意有这个坑,td或者table-cell的元素里,如果没有指定容器宽度,那么容器里的img标签max-width:100% 在IE7-11,以及fir...

2026
练小习

腾讯 · 高级前端开发工程师 (已认证)

js运算符优先级笔记

运算符的优先级决定了表达式中运算执行的先后顺序,优先级高的运算符最先被执行。 下面是一个简单的例子: 3 + 4 * 5 // 计算结果为23 乘法运算符...

1898
练小习

腾讯 · 高级前端开发工程师 (已认证)

JSHint的选项配置笔记

asi 如果是真,JSHint会无视没有加分号的行尾, 自动补全分号一直是Javascript很有争议的一个语法特性。默认,JSHint会要求你在每个语句后面...

1789
练小习

腾讯 · 高级前端开发工程师 (已认证)

canvas生成图片

今天接到个小需求:前端生成个二维码并且以img标签的方式在web上展示出来。 二维码就不用说了,搜一下实现的各种插件一大堆,这里我用基于jquery的qrcod...

2606
练小习

腾讯 · 高级前端开发工程师 (已认证)

移动端全兼容的flexbox速成班

说起flexbox,都算是件陈年旧事了,它是2009年W3C提出的一种全新的可伸缩的CSS布局方式。依赖flexbox,我们可以更简单,高效的完成可伸缩式页面的...

1939
练小习

腾讯 · 高级前端开发工程师 (已认证)

比例字体&等宽字体

我们都知道等宽字体和比例字体的区别,就在于比例字体(Monospaced Font)即每个字母宽度是按一定比例自动调整的,而等宽字体(Proportional ...

3586
练小习

腾讯 · 高级前端开发工程师 (已认证)

浏览器工作原理分析与首屏加载

前言 谈到浏览器原理的分析,在网上影响最大的一篇文章莫过于以色列开发人员塔利·加希尔的研究成果。文中详细的描述了Webkit和Gecko两个浏览器引擎的工作原理...

34210
练小习

腾讯 · 高级前端开发工程师 (已认证)

关于flex布局的目前兼容性写法

flex虽然使用起来很方便,但是他的兼容性由于历史版本的原因,一直很让人头疼,低版本IE就不用说了,webkit目前也不是所有版本都能支持同一写法,测试半天之后...

2507
练小习

腾讯 · 高级前端开发工程师 (已认证)

一些伪元素的小玩意儿

在shadow的处理上,text-shadow本身就能很好的完成投影效果 text-shadow: #666 1px 1px 0; 用伪元素虽然可以完成一模一样...

1825
练小习

腾讯 · 高级前端开发工程师 (已认证)

如何让一个层位于iframe之上.flash之上

蓝色理想 goos 摘录一段CSS参考手册的话: z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释:元素...

1949
练小习

腾讯 · 高级前端开发工程师 (已认证)

带你轻松打开SVG动画的大门

初学SVG的时候,感觉那一坨一坨的代码难读难懂,现在回过头仔细想想,是因为那时候看文档缺少一些具体的实例,导致学习起来很枯燥。如今SVG已经在前端各个领域都有所...

2076
练小习

腾讯 · 高级前端开发工程师 (已认证)

文字上右下环绕广告的写法

很久一段时间,我都在寻求一种文字从上-右-下方向环绕广告位的一个办法,而在找到之前,基本都是利用发布编辑器的所见即所得模式来实现广告的环绕。或者是利用程序截取一...

17210
练小习

腾讯 · 高级前端开发工程师 (已认证)

The Cat and the Hat CSS Selectors

One of the trickier aspects of encapsulating Shadow DOM CSS is figuring out how ...

1927
练小习

腾讯 · 高级前端开发工程师 (已认证)

一个搜索条样式,包括select的美化

一直以来用CSS控制select都没有实现过。还是只能用JS来模拟。 by youku <!DOCTYPE html PUBLIC "-//W3C//DTD X...

1805
练小习

腾讯 · 高级前端开发工程师 (已认证)

css属性transparent有时候并不是透明的

两天前我发了个求助,今天终于在朋友的帮助下找到了答案,关于transparent以及rgba(0,0,0,0),在webkit与没有抗锯齿的浏览器下对borde...

1988

扫码关注云+社区