我最无法忍受的一个事情就是多余的代码。不论是页面中的CSS还是JavaScript,还是浮肿的HTML代码或没有优化的图片,这是我们的懒惰和错误让成千上万的访问用户受连累。有一个非常棒的工具,叫做Helium,它能帮助程序员找出样式表中无用的或有问题的样式规则。让我们来看看是如何使用它!
如果当你翻开一本书的时候,里面飞出来一只蝙蝠,或是一条会喷火的龙,你会有什么感觉?惊奇!赞叹!目瞪口呆!我想到了电影《哈利波特》里的那份会动的报纸。这里将会给你带来一种类似的奇观——一本书里的大千世界。随着浏览器技术的不断革新,越来越多的可能成为了现实。这里就是现代网页技术的典型代表。
计数器(counter),“老一辈”程序员估计对这个东西印象深刻,早期的网站页面上经常会有这个东西,如今这种特征都变成了笑话。CSS里自己实现了一种计数器,很简单,很直接。使用CSS计数器,你可以实现简单的纯CSS的计数功能,并能将其显示到页面上。下面我们简单的看一下CSS计数器是如何使用的!
如今的这个年代,流行在Web页面上使用了大量的JavaScript,我们需要寻找各种方式来优化它们,使它们更快。我们使用事件委托来让事件监听器更有效率,使用降频技术来限定某些方法的使用次数,使用各种JavaScript加载器来动态加载我们需要的资源,等等。
翻滚的海面,摇摇欲坠的灯塔,密布的乌云,暴风雨中的海燕。在加上CSS三维视差效果,虽是童话的世界,但亦真亦幻,令人神往。本作品是使用轻量级的js视差效果引擎parallax.js实现。在智能移动设备上效果更佳。
@supports是CSS和JavaScript规范中非常有用的补充。对浏览器新功能的检查已经是我们编程中非常常见的必要工作。@supports给我们提供了更底层的支持,而之前多少年我们都是用自定义方法实现。我估计,接下来的几年里,随着flexbox布局的普遍流行,我们将会看到对@support标记更加广泛的使用。
CSS类名的结构性和统一性非常的重要,有些程序员喜欢使用首字母大写,有些喜欢用连接线,有些喜欢用下划线。最近我发现的一个非常有意思的东西是,在HTML和CSS里,你可以用Unicode(包括中文)来命名类名。不信咱们就试一下!
有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作。在给Mozilla Developer Networks改版设计的过程中,我发现使用CSS媒体查询(media queries)虽然非常的有效,但有时
CSS动画非常的有趣;这种技术的美就在于,通过使用很多简单的属性,你能创建出就连皮克斯动画制作公司也会赞叹的漂亮的消隐效果。其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容。本文就是要用最简单的方法向大家介绍如何创建这种效果。
在一些像维基百科这样的信息类网站上,把外部链接用某种形式标明出来是一种常见的做法。对于浏览者,这能方便的告诉他将访问一个外部资源。很多网站会在服务端检查外部链接,并在链接上加入`rel=external`属性或`external`类来区别这些链接。
进入2014年后,我们这些Web开发者开始慢慢发现需要面对一种困难,就是传统的JavaScript技术开始失效。很多年来我们一直依赖的那些JavaScript技巧技术,在如今CSS3兴起的情况下,很多的特效被浏览器内置的CSS功能替代。以前我们一直需要的一个功能——JS动画中结束时会触发回调函数——现在改用CSS动画后,如何触发这些回调动作?
自从大概两年前用CSS给SIGT设计了logo后,我心里一直有个想法,我认为使用Verdana字体和CSS里的绝对定位技术能画出更复杂的图案,也就是说,直接用HTML代码生成嵌入式的矢量图。