现代 CSS

译文

有关于CSS的面试题和练习

前端面试总是有很多同学讨论,面试官会问什么样的面试题?被面的人怎么回答面试问题?但很少有人会从面试题中深挖有价值的知识,换句话说有很多同学只是面对着如何回答面试官的问题,却忽略面试官想通过试题了解你的信息。当然,如果你处在一个需要面试别人有关于CSS方面技巧和知识,一时想起来还真有点难。根据的《Interview Questions and Exercises About CSS》所译,整理在一起,提供给大家参考。

基于设计的媒体查询

Responsive(响应式设计)对于今天来说并不是一个新东西,在互联网上有关于响应式设计的教程铺天盖地。而且国外有关于这方面的Web应用也是非常的多。今天也老话重谈,Spy根据的《Design-Based Media Queries》所译,向大家介绍Compass Design网站如何实现响应式设计,希望对大家有所帮助。

为什么要用和如何使用字体图标

图片是有诸多优点的,然而目前在网站设计这行业面临各种各样的挑战。图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的。图片还有一个缺点就是不能很好的进行“缩放”,因此,有时候在“响应式设计”中需要使用图像的最好解决方案就是不去使用图片。由于位图给Web制作带这诸多的不便,为了解决这些问题,CSS3给大家带来一个新的属性@font-face。

使用@font-face制作图标已不是什么秘密,也不是什么新技术,在互联网上这样的教程铺天盖地。但是我们依然给大家介绍一篇@font-face制作图标的教程。这篇教程主要向大家阐述了”为什么要用和如何使用字体制作图标“,从教程中,你可以找到@font-face制作图标的优势与不足,同时也能找到要如何得到制作图标的字体。

结合智能选择器的语义化的CSS

或许很多前端开发人员都会困惑一个问题,在书写HTML和CSS的时候,结构更重要还是功能更重要?在一些热门的框架例如Twitter Bootstrap里面我们也会看到使用a标签来作为按钮的元素的例子,这样是否合理?一起来读一读这篇文章吧,或许能够解开你的疑惑。

Sass Mixins——支持Retina的Icons Sprite

Sprites(国内称之为雪碧图),平常很多时候都是依赖于手工在制作软件中完成,或者依赖于第三方插件自动生成Sprites图。这样虽能实现雪碧图,但在来很多工作量。如果你开始使用Sass或者Compass,你可以发现他们有一个强大的功能,可能使用Sass的mixins自动生成雪碧图。特别是在Retina显屏的时代,使用Sass的mixins生成雪碧更让我们前端人员变得轻松。这篇的《Sass Mixins Icons Sprite with Retina Support》所译,在文章中详细介绍了如何使用Sass的Mixins自动生成普通显屏和Retina显屏的雪碧图。希望这篇文章对大家有所帮助。

停止使用很多的Sass变量

变量是Sass中很重要的一个部分,不过如何更好的使用好Sass中的变量也是一个很关键的知识点。从定义变量到使用变量,也延伸出类似于定义类名以及使用多类名的问题。Sass中的变量需要语义化定义变量名吗?需要定义多个变量名吗?在您使用Sass过程中是否也探讨过类似的问题?如果没有,我们就以这篇文章开始吧,一起探讨这个很有意义的问题。本文根据的《Stop using so many Sass variables》所译,初步探讨了Sass中变量名的定义以及是否多用更多的变量名。希望大家能喜欢。

七个高度有效的媒体查询技巧

随着移动设备以及用户终端种类的不断增加,响应式设计在Web是运用越来越广泛。而响应式设计中媒体查询又起着举足轻重的作用,可以说离开了媒体查询,响应式设计就没有了他的灵魂。换句话说,响应式设计做的优秀不优秀,看媒体查询的使用就能知道。到目前为止,智能移动设备的普及化,我们的响应式设计应该考虑移动先行。那么移动先行如何实现呢?媒体查询又对其有什么使用呢?欲想了解,烦请阅读根据的《7 Habits of Highly Effective Media Queries》译文,让你把媒体查询运用的更灵活。

表格元素的完全指南

HTML的表格的每一个元素都做了比较完整的讲解,并附有大量的demo,带领大家一步步地全面地了解表格,并且讲解了表格的适用范围、语义化等相关问题,希望大家能透过此文对表格有一个全面的认识。

写CSS最好方法:OOCSS+Sass

OOCSS非常棒。但在HTML标签中有很多不具语义化的类名也并不可怕。而在HTML标签上的类名会改变就是一件很有趣的事情。如果你把OOCSS和Sass结合在一起,你会得到两个优势:CSS模块不臃肿和HTML维持不变。

Sass的新特性

Sass是CSS的预处理器,这也是现在最常见讨论的一个话题。Sass最早是2007年由Hampton Catlin提出。Sass到现在已经走了很长的路了,到现在也是最常见的CSS预处理程序。如果您还不知道什么是Sass,我强烈推荐您阅读一下David Walsh写的这文章和Chris Coyier写的文章。不管什么情况之下,我将假定您基本都了解Sass,你们当中有一些人甚至是Sass的铁杆粉丝!这些都不先考虑,如果有一篇博客介绍Sass的未来特性,那多好。今天根据的《Looking Into the Future of Sass》所译,与大家分享Sass的一些新特性与功能。

页面

返回顶部