高质量的CSS

简介:

1.浏览器模式和DTD

我们平常用到的浏览器可能有多个模式,比如标准模式,兼容模式。在标准模式中,浏览器根据规范显示页面。兼容模式为了兼容老版本浏览器下的代码,用了很多非标准的解析方式。
DTD全称Document Type Definition(文档类型定义)。一个DTD包含元素的定义规则、元素间关系的定义规则、元素可使用的属性、可使用的实体或符号规则。
如果漏写了DTD,IE6,IE7,IE8就会触发兼容模式。DTD详细参考 http://www.w3school.com.cn/tags/tag_doctype.asp

2.如何组织CSS代码

《编写高质量代码》一书中推荐base+common+page的层叠结构。

2.1base层

base层力求精简通用,提供CSS reset功能和力度最小的通用类——原子类。该层会被所有页面引用,与具体UI无关。
由于每个浏览器的默认样式都不统一,所以可以在这层通过CSS reset覆盖浏览器的默认样式,统一定义成自己的样式。

2.2common层

common层位于中间,提供组件级的CSS类。代码尽可能封装复用。

2.3page层

page层位于最高层,控制具体页面的精确样式,所以每个页面都可能会有一个page。建议将网站所有page层代码放在一个文件里。分块写上注释,便于维护。

3.面向对象风格的CSS

顾名思义,CSS在书写时的命名规范,结构组织可以参考面向对象编程的一些规范。比如使用驼峰命名来区分单词,.itemList,使用“-”来表示从属关系,itemList-firstList。多用组合,少用继承等。
另外,本书还推荐少用低权重原则。多用class,少用子选择器。这样样式容易被覆盖,易于维护。

4.CSS Sprite

Sprite看起来好用,其实还有一些注意点:
1.它能合并的只能是用于背景的图片,对于<img src="" />设置的图片,是不能合并到CSS Sprite中的,这样会影响可读性。
2.不适用与横向和纵向都平铺的图片。
3.CSS Sprite最大的好处是减少服务器压力。这需要付出“降低开发效率”和“增大维护难度”的代价。如果你的网站流量并不大的话,并不推荐用这种方法。

5.其他问题

5.1 CSS hack

5.1.1 IE条件注释法

	<!--[if IE6]>
		只在IE6下生效
	<![endif]-->
	<!--[if gt IE6]>
		IE6以上都生效
	<![endif]-->
	<!--[if ! IE6]>
		只在IE6下不生效
	<![endif]-->

这是微软官方推荐的hack方式,它是最安全的hack方式。

5.1.2选择符前缀法

在CSS选择符前加一些只有特定浏览器才能识别的符号,从而让某些样式只对特定浏览器生效。例如“*html”只对IE6生效。“*+html”只对IE7生效。

5.1.3样式属性前缀法

在CSS属性名前加一些只有特定浏览器才能识别的符号,从而让某些属性只对特定浏览器生效。例如“_l”只对IE6生效。“*”只对IE6,IE7生效。
.box{
width:60px;
_width:60px;
*width:60px;
}

5.2超链接样式问题

只要遵循love hate原则就没问题:l( link )ov( visited)e h( hover)a( active)te。

5.3 hasLayout

IE奇葩的根源。这个在精通css系列中有讲。触发hasLayout会解决大部分IE下的bug。通过设置“zoom:1”和“posisiton:relative”来触发是最有保障的方式。
hasLayout设计初衷是为了辅助块级元素的盒模型解析的,如果用于行内元素,会有一些特殊的效果。

5.4块级元素和行内元素

常见块级元素:div,p,form,h1,caption,dd,dt,dl,table,ul,ol......
常见行内元素:a,img,strong,span,input,i,br......
区别:
1.块级元素独占一行,默认其宽度填满父元素宽度。行内元素不会独占一行,宽度随元素内容变化,没有width,height属性;
2.块级元素可以设置margin,padding。行内元素可以设置水平方向的margin,padding,竖直方向的不会产生边距效果;
display还有inline-block属性,IE6,IE7下会有bug,修复方法百度一下。





相关文章
|
5天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1134 2
|
4天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
662 11
|
14天前
|
人工智能 运维 安全
|
5天前
|
弹性计算 Kubernetes jenkins
如何在 ECS/EKS 集群中有效使用 Jenkins
本文探讨了如何将 Jenkins 与 AWS ECS 和 EKS 集群集成,以构建高效、灵活且具备自动扩缩容能力的 CI/CD 流水线,提升软件交付效率并优化资源成本。
317 0
|
12天前
|
人工智能 异构计算
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
|
13天前
|
机器学习/深度学习 人工智能 自然语言处理
B站开源IndexTTS2,用极致表现力颠覆听觉体验
在语音合成技术不断演进的背景下,早期版本的IndexTTS虽然在多场景应用中展现出良好的表现,但在情感表达的细腻度与时长控制的精准性方面仍存在提升空间。为了解决这些问题,并进一步推动零样本语音合成在实际场景中的落地能力,B站语音团队对模型架构与训练策略进行了深度优化,推出了全新一代语音合成模型——IndexTTS2 。
832 23
|
5天前
|
缓存 供应链 监控
VVIC seller_search 排行榜搜索接口深度分析及 Python 实现
VVIC搜款网seller_search接口提供服装批发市场的商品及商家排行榜数据,涵盖热销榜、销量排名、类目趋势等,支持多维度筛选与数据分析,助力选品决策、竞品分析与市场预测,为服装供应链提供有力数据支撑。