现代 CSS

HTML

12个很少被人知道的CSS事实

CSS不是一门很复杂的语言,但是即使你已经写css很多年了,也很有可能遇到一些新玩意儿-某些属性从来没用过,某些值从来未曾考虑,或者某些规范细则你从来不知道。我经常会遇到一些css小细节,所以我想在这片文章中和大家分享,需要承认的是,这篇文章中的很多东西并不具有实操价值,但也许你可以留作后用。

再谈等高列布局、水平垂直居中与置顶页脚

CSS中的等高布局、水平垂直居中以及置顶页脚(Sticky Footer)这几个效果(我喜欢把他们说成是CSS效果,而不喜欢说其是问题)并不是常陌生,而且很多同学都似乎有碰到过,也经常体验过。甚至在很多前端面试中也常被考官问到,有的时候还直接被考官给秒杀了。早前在水平垂直居中系列八种创建等高列布局如何将页脚固定在页面底部几篇文章中也或多或少介绍过。今天老调重谈,用几种新方法和大家探讨这几个效果,希望能帮助大家开拓思维。

使用calc()创建CSS网格

网格系统对于Web前端人员来说不是一个陌生的话题了,在w3cplus上介绍网格系统的教程并不少,不过这些网格系统都有其类似之处。在HTML中为了能应用好网格,都需要添加一些类名,而在样式中,不管你用了几列网格,都有一大串的样式代码。这让一个有代码洁癖的人员来说,总觉得不爽。幸好,CSS预处理器的出现,如Sass。可以让你的代码变得更简单一些,但和以前的网格也极其类似。有时试想,有没有更好的呢?今天看到Create a CSS grid using calc()觉得很有意思,通过calc()和Sass的结合,生成需要的网格。希望此篇文章对大家有所启发。

Flexible Images

玩过响应式设计的同学或多或少都会在一些媒体上纠结,比如说图片,视频等自适应问题。而且有关于这方面的解决方案各有各的说法,似乎是没有一种方案是绝佳的,这样一来让人倍感头痛。这或许就是前端的烦恼吧。我也一样,虽然整响应式设计蛮久的了,但对于图片方面的自适应处理还真没有找到一个好的方案,这回痛下决心,仔细找了一些相关教程阅读了一回。那么今天将整理一下,网络上有关于图片自适应(此处我称之为弹性图片)解决方案,希望这篇文章能帮助大家解决图片在响应式设计中给大家带来的烦恼。

Sass3.3新特性之连体符&

Hugo Giraudel在《Looking Into the Future of Sass》(译文Sass新特性)一文中向大家介绍了Sass的十大新特性。这些特性都将让你的工作变得更简单与方便。那么今天我主要想向大家介绍我自己对Sass3.3中几个新特性的理解与使用心得,希望对大家的学习有所帮助。

Sass中连体符(&)的运用

在CSS中,要想给一个元素赋予一定的样式,我们必须得先取到这个元素。那么就得需要选择器,通过选择器来选择指定元素,然后赋予所需的样式。而CSS选择器有很多种,比如层次选择器中的后代选择器兄弟选择器通用兄弟选择器等。而这些选择器都通过元素与元素之间的关系来确定的,当然在CSS中仅仅不只这几种选择器方式,还有其他优秀的选择器帮助你做更多的事情。而在这篇文章中我们主要探讨的是连体符&在Sass中,是如何让你的选择器变得更加的灵活,更加的简单。

走过的2013年

在新年将至的当中,大家都在思考,都在回味,都在总结,都在向往。我也同样不能脱俗,一直都在思考,为2013一年,为自己走过的这一年,为w3cplus这一年做一个总结,但一直不知道如何执笔开始。思来想去,有了下面的一些记录,只想让这些记录告诉我,2013看走过的一切,同时让我更好的迎接2014年,迎接新的一年,迎接新的人生。

自从有了W3cplus之后,我热衷于前端技术,喜欢前端的活动,更爱上了前端的技术分享。在2013年当中,在众多朋友一起努力之下,总共发表博文279篇,其中技术博文216篇,CSS3教程61篇,CSS3案例25篇,收集前端各类在线工具近100个,整理jQuery插件近300个。还有前端较为新的技术,包括Sass教程47篇,Grunt教程近10篇,响应式设计近27篇。而且在今年在众多同学的帮助之下,组织翻译外国博文近115篇。看到这些数字,也让自己感觉到在2013年当中没有白混,让我自己更好的准备迎接2014年。

Sass @at-root

说到BEM,很多人并不很喜欢,看见那些特长的类名就烦了,而且在写样式的时候,选择器要那么长,更是让人感到烦感。那么告诉大家一个解决的好文案,就是使用CSS的预处理器。在SassConf大会上,给我们传递了Sass3.3的新特性。这些新特性有很多意义,特别是指令,这让你的代码会得更佳清洁。今天我们主要一起来了解Sass中的特性的使用规范。使用@at-root和BEM的结合,让你尽显BEM的优势。

Sass制作Font Awesome图标

Font AwesomeDave Gandy通过字体制作的几百个icons图标。在前端界享有盛名。使用@font-face制作的图标可以随意的放大,并通过CSS中字体相关的CSS对图标进行美化,比如说可以改变图标颜色、大小和增加阴影等,但他也存在一定的弊端。为了使用部分图标,不得不加载所有图标的样式。如果你使用Sass将可以改变这一切,今天这篇文章就是介绍了Sass如何通过几个Mixins和Function等特性来实现按需开启需要的图标。

使用Sass减少重复性代码

在Web开发中,每一位写CSS的同学不管使用什么方式进行开发,都必须面对CSS代码中有很多重复性代码。就算你使用OOCSS或者大家讨论激烈的模块化开发,都会有一些代码使用不上。这样直接的后果就是让你的文件变得臃肿,并且难以维护。但是使用Sass,他可以让你避免这些问题。今天我们就通过Sass的@each、@for和@function等方法,来解决这个问题,帮助你减少重复性的代码,甚至是无用的代码,真正做到按需生产。

页面

返回顶部