CSS秘密花园翻译系列

这是新一代的css书籍,也是新一代的css。css不再是一种围绕复杂浏览器和浏览器骇客的简单语言,他现在是驾驭在80种w3c特性之上的深入的强大的复杂的生态系统。在赋予这种css意义与解决问题的设计原则上,在所有我认识的真正的编程高手中,没人能比他做得更好。

——Jeffrey Zeldman

Lea Verou百科全书式的思维自成一派,感谢Lea Verou的这本内容丰富的书,我们得以一窥原生css能做到任何我们能想到的事。即使你认为它超出了css的范畴,我想这本书里依然有些秘密能帮你实现。

——Jeremy Keith

如果你想深入学习css技术,体验最棒的练习,以及一些发散性的智慧,快来读这本书吧,我超喜欢这本书!

——Eric A. Meyer

Lea是一位极其聪明的程序员,这本书满满的都是智慧并且有用的点子,即使对于那些很了解css的人。更有甚者,在这本书的运作下,你会对你的作品有更棒的感觉。

——Chris Coyier

这是一本即时经典的书,这么多超赞的点子能让你马上优化你产品的用户体验设计。

less最常见的几种mixin

1.将类或ID样式mixin,这是最基础的mixin。写法为在要mixin的样式中加入.class;#id;,便可以将这个类的样式全部写入你要mixin的的类中。

2.函数式mixin,上一种方法用于被mixin的类也是要输出到css文件中的样式,而这一种则属于函数——他本身不会输出,只有在调用的时候才会输出。这一种又分为三个分支。

2.1不带参数的函数式mixin

此种和第一种的唯一区别在于不会主动输出到css中。

2.2带参数的函数式mixin

这种无非是调用的时候带上参数,如果不写@name:value;的话,一定要按顺序写参数值。如果写@name:value;的话,就没有顺序了。有的带参数的函数式mixin。参数是有默认值的,因此它不依赖与参数。最后就是模式匹配的那种,针对某一个参数做不同的处理,如参数是dark就返回一个更暗的颜色等等。

2.3带条件和参数的函数式mixin

这种是最复杂的,他通过when、and、not关键字来对mixin增加条件判断,能做更精确的处理。

总体说来,less让css的书写偏向编程式了,不仅能以DOM结构来写嵌套的css,还能用函数来极大的减少工作量。不过十行less代码,便能写出bootstrap的栅格系统。

less的import标签

import标签带有6种参数,分别介绍下这几种的用法。

1.reference,对引入的文件不直接显示在输出的css中,除非less文件中用到了引用文件的mixin或extend

2.inline,引入但不编译,是为了方便把所有的css文件归为一个。

3.less,将引入的文件视为less文件,无视扩展名。意味着即使他是.css,也会把他当做less来处理。

4.css,同上。

5.once,表示该文件只会被引入一次,后面引入相同文件的import语句将会被忽略。这是import的默认值

6.multiple,与上一个正好相反,可以多次引入同一个文件,虽然不知道这有什么用,但存在即合理,不知道是因为我层次太低了。

css小技巧

1.line-height的值,最好是写数值,最终得到的值就是font-size*那个值。

2.能用em做单位就用em做单位保证不亏,特别是用于媒体查询时,更可以用rem 做单位。如果都用rem的话,只需要设置html的字体大小,即可实现你需要的效果。

3.按照首字母顺序写,这一点在属性多的时候很有用,经常动辄十几条属性写在一起,不按某个规律的话,后期维护很耗时。

4.

bootstrap的banner轮播

各大电商的网站上都有轮播,这个效果bs提供了现成的模板。

顶层父类为.carousel.slide ,然后分为三大子元素部分。

第一层子元素,轮播框下半部分的导航圆点,是一个.carousel-indicators的列表。

内部的li的data-target属性指向轮播框,date-slide-to为0开始的数组角标,.active可以控制初始显示的banner。

第二部分子元素,轮播框的主体,.carousel-inner,这里面就装着所有的轮播信息,包括图片和文字。

图片和文字是兄弟关系,他们是.item的直接子元素,img无需添加额外的类或data属性,但是文字需要包裹在.carousel-caption中以便于区分h标题和p段落。

主体内的N个.itme就对应着N个轮播的banner。

第三部分子元素,是控制器,即轮播框的左右两侧的按钮。

.carousel-control佐以left和right表明是左侧还是右侧,bs默认使用a标签来做控制,href指向轮播框,data-slide的值为prev和next两种。

一般情况是左侧为prev,右侧为next。a标签里的内容为.glyphicon-chevron-right的span,来表示箭头。

bs模态框中的tabindex属性

近期使用模态框时发现了一件很奇怪的事,bs的模态框无法使用ESC关闭,即使按照文档的指示设置了keyboard:true;也并没有什么卵用。

慢慢摸索,才发现那个被我遗忘的属性在这里居然起着至关重要的作用。

tabindex在h5只是一个规定元素的 tab 键控制次序的属性,看起来和是否能用ESC关闭模态框一点关系都没有。

但测试才知道,如果没有这个属性,ESC键无效。我在css和js源码中都搜索过,并没有tabindex字样出现,也就是说这是浏览器对他的解释。

仔细分析确实是这样,tabindex让modal框在出现后获取焦点,于是keypress事件才能生效。

也就是说,如果在模态框出现后人为的将焦点停在模态框上,如点击一个input或一个无关紧要的按钮之后,ESC依然有效。

到这里,我们就看出来,modal之所有能用ESC键关闭,是因为bs监听了modal的keypress事件,并设置为ESC按下时关闭modal。

而在浏览器中,keypress能生效就必须先获取焦点,所以bs为了能在modal出现后不点击任何元素就能使用ESC关闭modal,就为modal添加了tabindex属性。

bootstrap导航(ul)风格

这一章说的是bs导航,用ul的导航,不是nav的导航条。

li和li里的a都设为block但是相对定位,在.nav-tabs的浮动下,实现了导航效果。

而.nav-stacked能达到垂直排列的效果,也是因为取消了li的浮动。

.nav-justified实现两端对齐是因为对a添加了text-align:center;并表格化导航。

 

bootstrap辅助类风格

一、情境文本颜色和情境背景颜色

这个只是设置了不同的颜色,有兴趣的可以把他背下来。bs既然选这几种颜色,说明他们符合大众的审美观,以后用在自己的网页里绝对不会被批评。

二、关闭按钮

button添加.close类,右浮动,0.2的透明,以及1px的盒阴影。

三、三角符号

在以前搞java的时候,也做过一些网页,也用过css和js,但从来没见过不是矩形的元素。

后台突发奇想,然而并不知道怎么实现,百度之后才知道,原来是这样。

非矩形元素的实现靠的是边框,所以他的宽度和高度都要设置为0,再设置3边的边框,就能画出三角形了,没有设置边框的是尖头。

只设置相邻两边的边框,就会成为一个直角三角形。

四、快速浮动与清除浮动

对float增加!important来达到浮动的目的,如果不加这个设置可能会因为css优先级的问题导致浮动失效。

而clear来清除浮动,因为这个不存在优先级问题,所以不需要!important

五、让内容块居中

块级元素剧中的最简单方法就是设置左右外边距为自动。因为这个样式用的非常频繁,所以bs本着以人文本的精神,将其单列出来。

六、显示或隐藏

通过最高优先级的display:none;来实现,但是.show是通过display:block来实现,我有点不敢苟同。

万一它是行内元素呢,突然一下设置成块状不是要爆炸?所以要显示,最好还是用js来移除.hidden类。

bootstrap图片风格

bs中提供的图片样式只有三种,圆角img-rounded,圆形img-circle,缩略图img-thumbnail。

唯一值得一说的是缩略图,他的css代码不算csshack的兼容都有9行,恐怖如斯。

具体是怎么样呢?

行内元素,100%宽度,背景色初始化,边框,padding,以及刚刷新时的过渡。

最值得称赞的是刚刷新时那0.2秒的过渡效果,我怎么就想不到呢?

 

bootstrap输入框组风格

输入框组一般用在需要对input添加额外控件的时候,如填写邮箱的input后添加默认邮箱地址(@及之后的),这时就需要他们好好的紧挨着排列在一起。

于是bs干脆将输入框组input-group设为表格,input及额外的input-group-addon、input-group-btn都设为单元格,并设置边框合并。

虽然bs声明不支持input一侧有多个input-group-addon,但是他们既然是单元格,哪有不能重复的道理,又不是绝对定位right:0!

所以,实验结果是肯定可以在一侧使用多个input-group-addon,至于实用性,就不多说了。

如果是要添加额外的元素是按钮,就不能使用input-group-addon了,而是要用input-group-btn来包裹按钮,这是为了能在不通浏览器实现同样的效果。