<sub id="rrh1b"><menuitem id="rrh1b"></menuitem></sub>

    <th id="rrh1b"><address id="rrh1b"><dfn id="rrh1b"></dfn></address></th><th id="rrh1b"></th>

    <th id="rrh1b"></th>

    <sub id="rrh1b"></sub>

        <sub id="rrh1b"><meter id="rrh1b"></meter></sub>
        <address id="rrh1b"><menuitem id="rrh1b"><font id="rrh1b"></font></menuitem></address>

          首页»HTML/CSS»爱上朴实的CSS细节

          爱上朴实的CSS细节

          来源:vivienchen.me 发布时间:2012-09-20 阅读次数:

            未来的CSS太让人兴奋了:一方面,是全新的页面布局方式;另一方面,是酷炫的滤镜、颜色等视觉效果。这些CSS,受开发者追捧,被杂志和博客文章铺天盖地地介绍。

          如果说这些特性是CSS华丽的一面,那我们来看看它朴实的一面:很不起眼的东西,如选择器、单位、函数(方法)。我经常说这是繁琐的东西,但我意思是它们能干漂亮的活,这就是我要分享的。

            怎么?#30340;兀?#35753;我们看看这些效果最好的朴实的CSS细节——这些细节远远没有那些酷炫的CSS效果那么引人注目。它们有些已经存在一段时间了,但值得我们更好地认识,而有些则刚刚面世。虽然不起眼,但是它们可以提高我们的工作效率——以谦虚的姿态。

          爱上朴实的CSS细节

            相对单位

            聪明又有前瞻头脑的开发者们已经使用相对单位了——如em或者百分比——所以,开发者们了解这个问题?#21644;?#24448;因为元素的继承性而需要使用计算器作为辅助工具来计算大小。例如,现在普遍的做法是给页面的字体设置全局尺寸,然后用相对单位来定义页面中其它的元素。CSS大概会这样写:

          html { font-size: 10px; }
           
          p { font-size: 1.4em; }

            这样写是没问题,直到有个子元素需要设置一个不同的字体大小,比如,在这样的标签当中:

          The cat sat on the <span>mat</span>.

            如果你要设置span的字体大小为1.2em,你需要做什么?拿出计算器,算算1.2除以1.4是多少,结果如下:

          p span { font-size: 0.85714em; }

            这个问题不局限于em。如果用百分比?#21019;?#24314;响应式的流式布局网站,而百分比是与容器相关的,所以,如果要定义一个元素为它的容器的40%,它的高是75%,宽则需要设置为53.33333%。

            很明显,这很不方便。

            根相关的长度单位

            为了修复字体大小定义的问题,现在可以使用单位rem(root em)。rem同样是相对单位,但是它所?#26434;?#30340;是固定的基本值,这个固定的基本值也就是文档的根元素的字体大小(在HTML文件中,就是html元素)。假设和上个例子一样,同样设定10px的字体大小为根元素的大小,那么CSS这样写就OK了:

          p { font-size: 1.4rem; }
           
          p span { font-size: 1.2rem; }

            这两个CSS规则都是相对于根元素的字体大小,这样的代码更加优雅和简便,特别是在设置简单的数?#31561;?0px或者12px的时候。这样和使用px值很相似,不同点在于rem是可扩展的。

            在整篇文章介绍的特性中,rem特性相对来说是兼容性比较好,高级浏览器都能支持,包括IE9在内,除了Opera Mobile。

            窗口相关的长度单位

            觉得rem单位很酷吧,如果还有另外一组单位能解决百分比的问题,那就更酷了。它和rem的?#35272;?#30456;似,不同点在于,它相对的不是文档的根元素,而是相对于设?#22797;?#21475;本身的大小。

            这两个单位就是vh和vw,即是相对于窗口大小的高和宽。每个单位在前面加上数字,代表的是多少个百分比。

          div { height: 50vh; }

            在上面的例子,高度被设定为窗口高度的一半。1vh相当于一个百分比的窗口高度,所以50vh即是50%的窗口高度。

            如果窗口大小变了,那么这个值也随之改变。这相对百分比来说,?#20040;?#26159;不需要担心父容器,?#36824;?#23427;的父容器如何,10vw的元素会一直是10%的窗口大小。

            相应地,有vmin单位,相当于vh或者vw的最小值,最近还宣布有vmax单位会被加到规?#27573;?#26723;里面(虽然在这篇文章发布的时候还没有)。

            现在支持这个特性的有IE9+、Chrome和Safari 6。

            运算式的值

            如果你在做响应式的流式布局网站,经常会遇?#20132;?#21512;单位的问题——用百分比设置栅格,但是又用固定像素宽度设置margin。如:

          div {
           
          margin: 0 20px;
           
          width: 33%;
           
          }

            如果布局只用到padding和border,你可以使用box-sizing来解决,但?#23884;?#20110;margin就无能为力了。更好、更灵活的方法是使用calc()函数,设置不同单位之间的数学方程式,如:

          div {
           
          margin: 0 20px;
           
          width: calc(33% - 40px);
           
          }

            它不仅可以用来计算宽,还可以用来计算长度——如果有必要,还可以在calc()里面再加calc()。

            这个特性IE9+和Firefox都支持,Firefox需要加上 -moz- 前缀(在版本16或17可能不用加前缀),Chrome和Safari也支持,但需要加上 -webkit- 前缀。然而,移动Webkit还不支持。

            加载字体库的部分字体

            优越的性能往往很重要,尤其是市场上各?#25351;?#26679;的移动设备——导致连接速度的差异和不确定性——更加体现了这个重要性。其中一个加快页面加载速度的方法,就是减少外部文件个数,@font-face的一个新属性unicode-range就是为此而生。

            这个属性就是unicode-range(编码?#27573;В?#20195;表的是编码字体的参数?#27573;А?#22312;加载外部文件的时候,只有那些被使用的字体才会被加载,而不是整套字体库。下面的代码演示了如?#26410;觙oo.ttf字体库中仅加载三个字体:

          @font-face {
           
          font-family: foo;
           
          src: url('foo.ttf');
           
          unicode-range: U+31-33;
           
          }

            这点对于使用字体图标的页面尤其有用。我测试过,使用unicode-range,加载字体文件的时间平均减少了0.85秒,也不是小数目了。当然,你可能不会这么想。

            这个属性,目前可以在IE9+、Webkit浏览器(如Chrome和Safari)中运?#23567;?/p>

            新的伪类

            单位和值都应该好好利用,但是,让我更兴奋的是选择器和伪类。完善的选择器模式,即使只有少数浏览器支持,都让我兴奋不已。引?#20204;?#24067;斯的话:你要?#39068;?#26639;的里面修得和外面一样漂亮,即使别人看不到里面——因为你自己知道。

            ?#19994;?#19968;次使用:nth-of-type()的时候,简直是一次突破,就像?#39029;?#20986;了思想的桎梏。好吧,我有些夸张了。但有些新的CSS伪类,确实值得狂热一番。

            否定伪类

            你大概不知道:not() 伪类的好,除非你亲自实践一番。带有参数的:not() 其实就是普通的选择器——不是复合选择器。一组元素加上选择器 :not(),表示满足这个参数的元素会被排除出去。听起来有些复杂吧?但是实际上非常简单。

            假设:要对项目列表的奇数行进行选择,但是最后一行除外。如果是以前,需要这样写:

          li { color: #00F; }
           
          li:nth-child(odd) { color: #F00; }
           
          li:last-child { color: #00F; }

            现在,通过设定:last-child作为否定伪类的参数,就可以把最后一个元素排除,这样少了一?#20889;?#30721;,从而更加的简洁和易维护。

          li { color: #00F; }
           
          li:nth-child(odd):not(:last-child) { color: #F00; }

            否定伪类看起来并没有什么惊人之处,你可以不用它,但是它还是挺实用的。?#20197;?#32463;把它用在基于Webkit的项目当中,优势还是挺明显的。说实话,它是我最?#19981;?#30340;伪类之一。

            是的,我有最?#19981;?#30340;伪类。

            在本文提到的特性当中,否定伪类是兼容性最好的,它被IE9+和高级浏览器支持(不需要加浏览器产商前缀)。如果你熟悉jQuery,你可能习惯用它——版本1.0开始就有了,以及相似的not()方法。

            “?#35270;?#20110;”伪类

            :matches()伪类可以用普通的选择器、复合选择器、逗号隔开的列表或任何的选择器组合作为参数。太棒了!但是,它能做什么?

            :matches()伪类最强大的地方就是聚合多行选择器。例如,要选择父容器里面其中几个不同子容器里面的p元素,在这之前,代码或许会写成这样:

          .home header p,
           
          .home footer p,
           
          .home aside p {
           
          color: #F00;
           
          }

            有了:matches()伪类,就可以把共同点提取出来,缩减代码量。该例子里面,选择器的共同点是以home为起点、以p为终点,所以可以用:matches()把中间的所?#24615;?#32032;集合起来。是不是有些困惑?看?#21019;?#30721;就明白了:

          .home :matches(header,footer,aside) p { color: #F00; }

            这其实是CSS4的一部分(确切地说,是CSS选择器第四等级),这份规?#27573;?#26723;还提到将会有类似的语法(以逗号隔开的复合选择器)应用于:not()伪类。兴奋ing!

            目前,:matches()可以在Chrome和Safari浏览器中运行,但是要加上前缀-webkit-,Firefox也支持,但是要按?#31449;?#30340;写法:any(),同时要加上-moz-前缀。

            你爱上这些朴实的CSS细节了吗?

            这篇文章讲到的特性,最赞的一点是它们解决了现实的问题,从琐碎而繁复的选择器到建立响应式网站的新挑战。实际上,?#31227;?#24453;每一个特性被使用到最普通的项目当?#23567;?/p>

            新特性如滤镜可能很直观很华丽,但是我更愿意发现隐藏在深处的实用小技巧。

            在积极探索的过程中,每一个特性可以让你的职业生涯更顺利——想到这里,就不会觉得繁琐了。

          文章来自:Learning to Love the Boring Bits of CSS

          QQ群:WEB开发者官方群(515171538),验证消息:10000
          微信群:?#26377;?#32534;微信 849023636 邀请您加入,验证消息:10000
          提示:更多精彩内容关注微信公众号:全栈开发者中?#27169;╢sder-com)
          css
          网友评论(共0条评论) 正在载入评论......
          理智评论文明上网,拒绝恶意谩骂 发表评论 / 共0条评论
          登录会员中心
          彩运

            <sub id="rrh1b"><menuitem id="rrh1b"></menuitem></sub>

            <th id="rrh1b"><address id="rrh1b"><dfn id="rrh1b"></dfn></address></th><th id="rrh1b"></th>

            <th id="rrh1b"></th>

            <sub id="rrh1b"></sub>

                <sub id="rrh1b"><meter id="rrh1b"></meter></sub>
                <address id="rrh1b"><menuitem id="rrh1b"><font id="rrh1b"></font></menuitem></address>

                    <sub id="rrh1b"><menuitem id="rrh1b"></menuitem></sub>

                    <th id="rrh1b"><address id="rrh1b"><dfn id="rrh1b"></dfn></address></th><th id="rrh1b"></th>

                    <th id="rrh1b"></th>

                    <sub id="rrh1b"></sub>

                        <sub id="rrh1b"><meter id="rrh1b"></meter></sub>
                        <address id="rrh1b"><menuitem id="rrh1b"><font id="rrh1b"></font></menuitem></address>

                          广西快乐双彩开奖彩票控 中国足彩网安全 排列5口诀 2o8香港内部透码图纸 羽毛球运动员 4x4矩阵怎么计算 2019年王中王一肖中特论坛 辽宁十一选五开奖现场 谁有极速时时彩计划 京东商城的京东彩票入口在哪 河南福彩双色球 青海十一选五电子派奖 河北快三开奖结果号码 二肖中特今晚 中国体彩十一运夺金