xml地图|网站地图|网站标签 [设为首页] [加入收藏]
从倒影说起,构架CSS基础样式库
分类:web前端

玩转CSS选择器(二) 之 浏览器支持,常见Bug,性能优化

2015/08/29 · CSS · 选择器

原文出处: Alsiso   

关于CSS Reset 那些事(四)之 构架CSS基础样式库

2015/08/05 · CSS · CSS Reset

原文出处: Alsiso   

有趣的CSS题目(4): 从倒影说起,谈谈 CSS 继承 inherit

2016/09/29 · CSS · CSS

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。

解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。

不断更新,不断更新,不断更新,重要的事情说三遍。

谈谈一些有趣的CSS题目(1): 左边竖条的实现方法

谈谈一些有趣的CSS题目(2): 从条纹边框的实现谈盒子模型

谈谈一些有趣的CSS题目(3): 层叠顺序与堆栈上下文知多少

所有题目汇总在我的 Github 。

前言

上一篇系列文章整理了CSS选择器的基础使用方法,因为内容较多且细致,写了很多DEMO,目前将它整理成适合移动端浏览器的CSS选择器的参考手册,方便学习CSS的人参考使用,马上就要搞定了,之后会放出 (笑脸)。

本节内容会跟着上一节的内容继续完善,首先会补充CSS选择器的浏览器支持情况(主要是说IE),比如我们最常用的s1,s2,…,sN群组选择器在IE7时才被支持,并且IE7还支持了很多我们没有想到的选择器,如子元素选择器,属性选择器,了解后你会发现IE7还是挺了不起的。

之后还会补充平常使用选择器遇到的一些问题以及解决方案,最后了解浏览器是如何读取选择器的,怎样使用选择器能达到高效率。

前言


先来回顾一下前几章节,我们都说了哪些内容:

  1. CSS Reset 历史 与 Normalize.css 介绍
  2. Normalize.css 源码解读
  3. Normalize-zh.css 出炉

围绕着CSS Reset这个话题我们已将讲了3章节,从中了解到CSS Reset的作用,Normalize.css的优势,以及它是如何帮我修复跨浏览器的兼容性问题的;

这一章节内容会弱化CSS Reset的主题,不是因为这章节与CSS Reset无关了,而是因为我们要基于它去扩展更多的内容,来帮助我们解决实际开发中更多的问题。

现在回到我们这一章节的标题,将它做下补充:

《关于CSS Reset 那些事(四)之 基于CSS Reset 构架CSS基础样式库》

4、从倒影说起,谈谈 CSS 继承 inherit

给定一张有如下背景图的 div:

图片 1

制作如下的倒影效果:

图片 2

方法很多,但是我们当然要寻找最快最便捷的方法,至少得是无论图片怎么变化,div 大小怎么变化,我们都不用去改我们的代码。

浏览器支持

CSS 基础库构思


了不起的IE7

当我们在开发网页时,如果网页需要兼容IE6,那么自然地会把IE6和IE7浏览器归为一路货色,对于不兼容的选择器和属性都将不再考虑使用,可是你是否知道IE7相比IE6增加了许多选择器可以用,如群组选择器,相邻选择器,兄弟选择器,属性选择器。

以下选择器是不支持IE6,仅支持 IE7 及以上的浏览器

为什么要做基础库

我上一章节的末尾抛出了几个问题:

1.假设你要做一个游戏单页面,网页上并不存在表单内容,那么你就要移除一些冗余的代码,开始自定义Normalize.css样式来满足自己的需求。

2.假设你要做一份文案策划的网页,包含很多文字排版时,此时Normalize.css也许并不完全适合你,因为它的默认字体设置和排版布局可能不能满足你的要求。

3.假设你要做一个企业类型的网站,并考虑跨浏览器兼容性,网站包含内容元素也很丰富,那么你可以选择使用Normalize.css来统一你的浏览器样式,但是它仅仅帮助我们解决了样式统一的问题是不够的,你是不是还要设计一套布局系统,来解决该网站的布局问题呢?

从以上几个问题可以看出,在构建大型网站的时候,我们可以把Normalize.css作为基础样式,然后根据不同的页面需求,进行添加样式覆盖它。

但是这只是我们的第一步,关于网页开发中更多的基础解决方案还有很多,比如刚刚说的布局系统,或许你还会用到很多常用的CSS问题解决方法,如浮动和清除浮动,自适应两端对其等等。

那么下一节,我们就来分析一下CSS 基础库到底包含什么内容?

法一:-webkit-box-reflect

这是一个十分新的 CSS 属性,使用起来十分简单,可以从各个方向反射我们内容。不过兼容性过于惨淡:

基本上是只有 -webkit- 内核的浏览器才支持。

图片 3

不过使用起来真的是方便,解题如下:

CSS

div{ -webkit-box-reflect: below; }

1
2
3
div{
    -webkit-box-reflect: below;
}

-webkit- 内核下查看Demo

See the Pen -webkit-box-reflect by Chokcoco (@Chokcoco) on CodePen.

box-reflect 有四个方向可以选,below | above | left | right 代表下上左右,更具体的可以看看 MDN 。

 

基本选择器

选择器 描述 版本
s1,s2,…,sN 群组选择器,同时匹配所有s1元素或s2元素 2.1
E > F 子元素选择器,匹配所有E元素的子元素F 2.1
E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 2.1
E ~ F 匹配任何E标签之后的同级F标签 3

什么是基础库

我认为基础样式库 始终 能帮我们解决开发时遇到的一些基础性问题:

  • 如浏览器样式不统一,需要重置样式;
  • 如基础表单样式过于难看不易操作,需要优化其样式;
  • 如布局样式需要重复编写,需要一套稳定复用的解决方案;
  • 如一些样式的浮动,对齐操作,需要统一管理起来进行多次复用;
  • 如常见的CSS动画效果,需要统一起来管理方便复用;
  • 如一些常用的图标,需要一套可复用的字体图标;
  • 如需要打印,提供一套更为合理的打印样式

基础库初衷和未来方向:

  • 最大程度减少开发难度
  • 提供简洁高效开发体验
  • 趋于模块化样式构建规范
  • 做为未来UI组件库核心基础
  • 始终站在巨人肩上

法二:inherit,使用继承

本题主要还是为了介绍这种方法,兼容性好。

inherit 是啥,每个 CSS 属性定义的概述都指出了这个属性是默认继承的 (“Inherited: Yes”) 还是默认不继承的 (“Inherited: no”)。这决定了当你没有为元素的属性指定值时该如何计算值。

灵活使用 inherit 继承父值,可以解决许多看似复杂的问题。对于本题,我们对图片容器添加一个伪元素,使用 background-image:inherit 继承父值的背景图值,就可以做到无论图片如何变,我们的 CSS 代码都无需改动:

CSS

div:before { content: ""; position: absolute; top: 100%; left: 0; right: 0; bottom: -100%; background-image: inherit; transform: rotateX(180deg);; }

1
2
3
4
5
6
7
8
9
10
div:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: -100%;
    background-image: inherit;
    transform: rotateX(180deg);;
}

Demo戳我

See the Pen image reflection by { background-image: inherit } by Chokcoco (@Chokcoco) on CodePen.

我们使用伪元素 background-image: inherit; 继承父元素的背景图,再使用 transform 旋转容器达到反射的效果。

说到底,CSS 属性的取值就是由默认值(initial)继承(inherit)加权系统构成的(其实还有 unset(未设置)revert(还原)),厘清它们的关系及使用方法对熟练使用 CSS 大有裨益。

 

所有题目汇总在我的 Github ,发到博客希望得到更多的交流。

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏支持我写出更多好文章,谢谢!

打赏作者

属性选择器

选择器 描述 版本
E[attr] 匹配att属性的E元素 2.1
E[attr=”val”] 匹配att属性且属性值等于val的E元素 2.1
E[attr~=”val”] 匹配att属性且属性值中的词列表有一个等于val的E元素 2.1
E[attr^=”val”] 匹配att属性且属性值为以val开头的字符串的E元素 3
E[attr$=”val”] 匹配att属性且属性值为以val结尾的字符串的E元素 3
E[attr*=”val”] 匹配att属性且属性值为包含val的字符串的E元素 3
E[att|=”val”] 匹配att属性且属性值为以val开头并用连接符”-“分隔的字符串的E元素 2.1

IE7浏览器,单复选框的checked在属性选择器中是不被支持的,这部分内容会在下面的常见问题中详细说明。

基础库的结构

JavaScript

normal.css [基于Normalize.css自定义模块,继承其优势,改善文字与部分细节] html5.css [html5样式修复,默认会导入normal.css,可按需引用] form.css [表单的一些基础样式,可按需引用] grid.css [响应式网格系统,优化命名与精简代码,可按需引用] utils.css [HTML中直接使用的工具类,可按需引用] iconfont.css [一套复用率极高的字体图标,可按需引用] animate.css [常用的动画效果组合,可按需引用] print.css [优化默认的打印样式,可按需使用]

1
2
3
4
5
6
7
8
normal.css   [基于Normalize.css自定义模块,继承其优势,改善文字与部分细节]
html5.css    [html5样式修复,默认会导入normal.css,可按需引用]
form.css     [表单的一些基础样式,可按需引用]  
grid.css     [响应式网格系统,优化命名与精简代码,可按需引用]  
utils.css    [HTML中直接使用的工具类,可按需引用]
iconfont.css [一套复用率极高的字体图标,可按需引用]
animate.css  [常用的动画效果组合,可按需引用]
print.css    [优化默认的打印样式,可按需使用]

我们按照需求,初步划分了基础样式库的结构,起初html5.css的内容是考虑直接放在normal.css里面的,但是为了考虑一部分人在页面中使用了像html5shiv的解决方案来兼容低版本浏览器,所以这里就体现出了分模块的便捷性,拆分为一个独立的css文件,需要时再进行使用,不过这里默认使用@import "html5.css"进行导入只是为了预览调试,请在实际使用中将代码拷贝至normal.css,或者使用yuicompressor进行压缩合并后再使用。

下一节我们来细化基础样式库的内容,看一看它都需要帮我们做哪一些事情。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 4 图片 5

2 赞 1 收藏 评论

伪类选择器

选择器 描述 版本
E:hover 设置元素在其鼠标悬停时的样式 2.1
E:first-child 匹配父元素的第一个子元素E 2.1

E:hover在IE6中只有a元素可用

CSS 基础库内容


关于作者:chokcoco

图片 6

经不住流年似水,逃不过此间少年。 个人主页 · 我的文章 · 63 ·    

图片 7

伪元素选择器

选择器 描述 版本
E:first-letter 选择文本块的第一个字母 2.1
E:first-line 选择元素的第一行 2.1

样式重置方案 normal.css

Normalize.css不仅统一了样式,还保留元素的可辨识性,这是我们应该继承和发扬的优点,normal.css也会参考借鉴Normalize.css所有优势,不过为了让其更简洁,让开发者更容易上手,我选择对它进行瘦身,比如移除一些不会用到的元素标签hgroup,将一些元素进行分模块管理,比如html5.cssform.css等,方便按需求灵活引用。

normal.css 包含内容以及调整部分

  • 字体约定62.5%,方便单位转换
  • 统一元素的内外边距
  • 设置全局字体,修复表单元素不继承父级font的问题
  • 添加链接基本样式
  • 移除列表元素的默认标识
  • 移除元素默认边框
  • 移除链接默认的下划线
  • 移除单元格间距让其边重合
  • 修复th不继承text-align,默认左对齐
  • 重置标题,采用自定义
  • 把所有斜体标签默认扶正
  • 统一引用标记
  • 统一上标和下标

平庸的IE8浏览器

虽然来到IE8的时代,但是对于新选择器的支持并不多,不过还好我们最常用的E:beforeE:after配合content属性都在IE8中得到了很好的支持。

以下选择器不支持IE6,IE7,仅支持 IE8 及以上的浏览器

HTML5元素 html5.css

html5.css主要是用于解决html5新元素在旧浏览器中的不识别,并且修复一些元素存在的隐性问题。

但是为什么不把html5.css这部分内容直接放入normal.css,而是考虑将其进行分模块管理呢? 是为了考虑一部分人在页面中已经使用了像html5shiv的解决方案来兼容低版本浏览器,所以这里就体现出了分模块的灵活性,拆分为一个独立的css文件,需要时再进行使用。

不过这里默认使用@import "html5.css"进行导入只是为了预览调试,请在实际使用中将代码拷贝合并至normal.css,或者使用yuicompressorGrunt进行压缩合并后再使用。

html5.css 包含内容以及调整部分

  • 修复HTML5新元素不能正确显示的问题
  • 修复progress元素的对其问题
  • 修复没有controls属性的audio显示出来
  • 修复hidden属性不起作用的问题
  • 修复svg元素overflow不正常的问题
  • 统一mark标签的样式
  • 修复拖动元素添加拖动的光标

伪类选择器

选择器 描述 版本
E:focus 设置对象在成为输入焦点时的样式 2.1

表单元素 form.css

form.css修复表单元素在不同浏览器下的默认样式,尤其是IE低浏览器版本下的一些怪异问题;并且还修复了一些表单显示状态,致力于提升用户体验;

form.css 包含内容以及调整部分

  • 统一fieldset元素的显示样式
  • 修复'legend'元素的若干问题
  • 修复表单元素字体与字号不继承的问题
  • 统一表单元素的垂直对其方式
  • 统一表单元素的overflow属性为visible
  • 重置按钮禁用时光标样式
  • 修复checkbox,radio的属性box-sizing: border-box;
  • 统一button,input内边距和内边框
  • 统一select的样式
  • 修复textarea只能为纵向拉伸

ui-btn 按钮组件包含的内容

  • 初始化默认按钮样式,增加不同状态下的效果
  • 提供多种场景按钮,如主要,警告与错误
  • 提供可定制的大小按钮,如较小,更小,一般,较大,更大
  • 提供组合式按钮
  • 支持iconfont.css,搭配图标按钮使用

伪元素选择器

选择器 描述 版本
E:before 在元素前面插入内容,配合”content”使用 2.1
E:after 在元素后面插入内容,配合”content”使用 2.1

使用示例

<button type="button" class="ui-btn">默认</button>

1
<button type="button" class="ui-btn">默认</button>

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:从倒影说起,构架CSS基础样式库

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文