• CSS Grid中的陷阱和绊脚石

    Posted by : lon.y@qq.com on 2018年4月3日

    2017年3月,CSS Grid在几个星期内就被发送到Chrome、Firefox和Safari的生产版本中。很高兴,大家可以使用它来解决实际问题。 CSS Grid是一种不同的布局方式,在大家开始使用规范的时候,有很多常见的问题。这篇文章的目的是回答其中的一些问题,并且将会是Smashing Magazine中有关于CSS Grid一系列文章中的一篇。 为什么使用CSS Grid而不是CSS Flexbox? 在CSS网格布局在浏览器中可用之前,很多人都

    阅读全文...

  • 推荐15个 JavaScript 和 CSS 库

    Posted by : lon.y@qq.com on 2018年3月24日

    Tutorialzine的使命是让开发者与最新的Web开发发展同步。因此,我们每月都会精选一批最优秀的资源推荐给大家,相信这些资源你绝对值得拥有! ClarifyJS ClarifyJS可以让你串联一串方法,以任意顺序执行。通常的JavaScript方法是从左到右执行的,ClarifyJS可以让你改变它们执行的顺序。而且,通过选择是否让进程等待某个特定的异步方法完成还是执行后继续,也能控制异步方法。 Superstruct Superstruct提供了一种

    阅读全文...

  • CSS 布局解决方案(终结版)

    Posted by : lon.y@qq.com on 2018年3月21日

    前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局。 居中布局 水平居中 1)使用inline-block+text-align (1)原理、用法 原理:先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。 用法:对子框设置display:inline-block,对父框设置text-align:center。 (2)代码实

    阅读全文...

  • 50道 CSS 基础面试题(附答案

    Posted by : lon.y@qq.com on 2018年3月17日

    1 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? 标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin 低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin 2 box-sizing属性? 用来控制元素的盒子模型的解析模式,默认为content-box context-box:W3C的标准盒子模型,设置元素的 height/width 属

    阅读全文...

  • CSS 变量让你轻松制作响应式网页

    Posted by : lon.y@qq.com on 2018年3月8日

    如果你之前没有听说过CSS变量,那么现在我将告诉你:它是CSS的新特性,让你能够在样式表中使用变量的能力,并且无需任何配置。 实际上,CSS变量能够让你改变以往设置样式的老方法: h1{ font-size:30px; } navbar > a { font-size:30px; } 而使用了CSS变量之后: :root { --base-font-size: 30px; } h1 { font-size: var(--base-font-size); }

    阅读全文...

  • 别天真了,第三方 CSS 并不安全

    Posted by : lon.y@qq.com on 2018年3月8日

    最近一段时间,关于 通过 CSS 创建 “keylogger”(键盘记录器) 的讨论很多。 有些人呼吁浏览器厂商去“修复”它。有些人则深入研究,表示它仅能影响通过类 React 框架建立的网站,并指责 React。而真正的问题却在于认为第三方内容是“安全”的。 第三方图片 如果我将上述代码引入我的文件中,即表示信任 example.com。对方可能会删除资源,给我一个 404,导致网站不完整,从而破坏这种信任关系。或者,他们可能会用其他非预期的数据来替代小

    阅读全文...

  • 2018年3月十大好玩的CODE PEN

    Posted by : lon.y@qq.com on 2018年3月7日

    WEB开发社区总是不乏天才型的程序员、设计师和艺术家,正是由于他们不断推陈出新, 引领着WEB的发展。在codepen上,每天都有数以百计的优秀作品诞生。 这篇文章中, 我们将回顾下3月份的优秀codepen demo, 赶快来看看吧! Donut progress bar 在这个demo中, 进度条是由”辛普森家族”成员的图片组成的,每点击下箭头, 就会出现一张新的照片。 Energy 3 这个充满魔性的demo展示了很多射向不同方向的线条的运动轨迹以及

    阅读全文...

  • 利用CSS注入(无iFrames)窃取CSRF令牌

    Posted by : lon.y@qq.com on 2018年3月6日

    CSS相信大家不会陌生,在百度百科中它的解释是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。那么,它仅仅只是一种用来表示样式的语言吗?当然不是!其实早在几年前,CSS就已被安全研究人员运用于渗透测试当中。这里有一篇文章就为我们详细介绍了一种,使用属性选择器和iFrame,并通过CSS注入来窃取敏感数据的方法。但由于该方法需要iFrame,而大多数主流站点都不允许该操作,因此这种攻击方法并不实

    阅读全文...

  • 分享手淘过年项目中采用到的前端技术

    Posted by : lon.y@qq.com on 2018年3月1日

    当你陪着家人嗑着瓜子,和家人一起看着春晚,顺便拿着手淘参与春晚抽奖互动的时候,杭州还有两百多程序员还奋战在一线当中。现在年也过完了,奖也抽了,红包也拿了。也该好好回来工作的时候了。这次很荣幸,自己能参与手淘过年项目(红包开光和春晚互动项目)的项目中,虽然仅仅参与其中的部分工作,但事后感觉有些东西还是应该总结总结的,为之后的项目做准备。那么简单的来总结一下,我自己在参与项目中用到的一些前端技术。 这些技术其实也并不是什么鲜为人知的技术栈,因为这些技术点已经出

    阅读全文...

  • 在 css 中什么是好的注释?

    Posted by : lon.y@qq.com on 2018年3月1日

    Robert C. Martin写的《Clean Code》是我读过的最好的编程书籍之一,若没有读过,推荐你将它加入书单。 注释就意味着代码无法自说明 —— Robert C. Martin Martin在文中详细讨论了代码注释,我不会完全重复他的话。简而言之,他的意思就是,这些注释是注定会过时的。程序执行时会忽视注释,所以无法保证这些说明注释会准确的描述代码作用。所以最好的方式是让代码自说明,如此,按照代码逻辑,程序员和程序获取到的信息是一致的。 思考如

    阅读全文...