《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 1.5 CSS3及其他

简介:

本节书摘来异步社区《移动网页设计与开发 HTML5+CSS3+JavaScript》一书中的第1章,第1.5节,作者:【英】Peter Gasston,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.5 CSS3及其他

正如HTML5对应HTML4.01一样,CSS3对应的是CSS2.1。CSS3是对一些现有CSS2.1功能进行标准化的进化迭代;因为在不同浏览器中,这些功能的执行会略有差异。另外,在这个网络发展的新时代,网络浏览器可以被嵌入任何设备,所以CSS3还引入了一套全新的功能,使得CSS能符合新时代的要求。

改造浏览器的第一类CSS3功能在很大程度上是视觉效果上的,并且,这些功能基于开发人员已经使用多年的编辑程序:使用任何来源的字体、圆角,并在文本和框上放置阴影。登录之后是一系列新的选择器,这些选择器能使文件寻访式样变得更容易;此外,它们能产生更动态的效果,如2D和3D的转换以及过渡动画。

除了许多光彩夺目的视觉效果,CSS3的真正革命来自于媒体查询。媒体查询是一种语法,使用这种语法,就可以根据浏览器的尺寸和功能,为浏览器提供样式,这是迈向多设备式样的第一步。第3章会讲到媒体查询,还会讲到CSS的一系列其他属性,这些属性对于创建响应式和适应式网站非常有用。

CSS还面临另一个重大挑战:如何解决布局的问题—即要使布局能够真正具备支持被用户代理查看的功能。这些功能包括动态用户界面属性和CSS控制网格系统。在第4章中会有更多相关内容。

不同于CSS2.1,CSS3不是一个单一的规范。在CSS2.1中,一切都放在同一个文档里描述,这种行为导致了文档太大且太复杂。相反,CSS3是模块化的,它是一系列更短更特定的规范,可以由浏览器通过模块化的方式来实现。和使用HTML5一样,如果打算等到CSS3“准备就绪”再使用它,那这种想法就太愚蠢了,因为某些模块将会很快就绪并实现,而另一些模块需要等待很长的时间。

CSS模块有级别数字,这些数字可以显示它们经历了多少迭代;有些模块已经到了级别4,这些级别4模块的可以先于级别3的模块实现。然而,这并不意味着,有一天我们会迎来CSS4。这种情况是不可能发生的。因为CSS3是一个简称,它表示“任何比CSS2.1更新颖的东西”,总有一天,这种区别将被摒弃,一切都将只是CSS。

1.5.1 供应商特定前缀

当浏览器以实验或予标准的方式来实现功能时,为了能确保安全,避免兼容性问题,浏览器往往使用带有规范化属性名称的供应商特定前缀。例如,当CSS Apes模块提出了名为“gorilla”的新属性,Firefox和WebKit都在对这种新属性进行稍有差别的实验性的实现。可是,新属性在两个浏览器中产生的效果是不同的,所以,如果Firefox和WebKit都使用该属性名称时,通常会在属性名称前加上供应商前缀以避免一些潜在的冲突:

3406ce1fa20f8a316296077af386774346fe6673

供应商特定前缀本是一个伟大的想法,但事实上,情况变得有些混乱。和其他方面问题一样,一些前缀的属性被开发人员如此广泛地使用,以至于其他浏览器厂商也感觉有必要使用它们竞争对手的供应商前缀,这样做很公平,但却让整件事变得有些荒谬。

浏览器厂商正试图让这个系统处于他们的掌控之中,但有时,使用供应商前缀属性会难以避免。大多数情况下,在我的代码示例中,我都使用无前缀属性。

1.5.2 CSS框架和预处理器

如今,使用一些帮手为CSS开发助一臂之力,成为了非常时髦的事儿,尤其是致力于大型开发团队或是大项目的时候。通常,这些帮手以框架或预处理器的形式参与进来,并且往往两者同时参与CSS开发。

框架是一套预先定义的CSS规则,使用这些规则可以使开发更快速。它们通常包括版式和窗体,很多时候,还包括布局模式。Blueprint.css是一种非常珍贵的老框架,被用于许多知名网站;但目前流行的框架是Twitter推出的Bootstrap。Bootstrap提供了许多预先格式化的布局、排版和表单选项,以及一系列可重用的组件,甚至还提供JavaScript的扩展性。

预处理器是运行于服务器端的程序,它使用CSS类语言来提供扩展语法和简写语法;因为CSS类语言在生成时,可转变成正确格式化样式表。这些扩展不但有节省时间的功能,如变量和嵌套的规则;而且还有自定义功能,它们赋予用户难以置信的权力。在预处理器竞争中,Sass最受欢迎,而LESS紧跟其后,成为前者最主要的竞争对手。

虽然在现代网络开发中,框架和预处理器两者都有各自不同的作用,但在本书中,我不会讨论或使用它们。因为,我教授的是更基本的语言,同时也是它们两者所依赖的语言。

相关文章
|
11天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
1天前
|
JavaScript 前端开发 测试技术
探索现代JavaScript开发的最佳实践
本文探讨了现代JavaScript开发中的最佳实践,涵盖ES6+特性、现代框架使用、模块化与代码分割、测试驱动开发、代码质量与性能优化、异步编程、SPA与MPA架构选择、服务端渲染和静态站点生成等内容,旨在帮助开发者提升代码质量和开发效率。
|
2天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
5天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第36天】本文将引导您探索Node.js的世界,通过实际案例揭示其背后的原理和实践方法。从基础的安装到高级的异步处理,我们将一起构建一个简单的后端服务,并讨论如何优化性能。无论您是新手还是有经验的开发者,这篇文章都将为您提供新的视角和深入的理解。
|
10天前
|
Web App开发 存储 JavaScript
深入浅出Node.js后端开发
【10月更文挑战第31天】本文将引导你进入Node.js的奇妙世界,探索其如何革新后端开发。通过浅显易懂的语言和实际代码示例,我们将一起学习Node.js的核心概念、搭建开发环境,以及实现一个简单但完整的Web应用。无论你是编程新手还是希望拓展技术的开发者,这篇文章都将为你打开一扇通往高效后端开发的大门。
|
6天前
|
运维 监控 JavaScript
鸿蒙next版开发:分析JS Crash(进程崩溃)
在HarmonyOS 5.0中,JS Crash指未处理的JavaScript异常导致应用意外退出。本文详细介绍如何分析JS Crash,包括异常捕获、日志分析和典型案例,帮助开发者定位问题、修复错误,提升应用稳定性。通过DevEco Studio收集日志,结合HiChecker工具,有效解决JS Crash问题。
23 4
|
10天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
21 4
|
10天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第30天】本文将通过一个Node.js的简单示例,引导你进入Node.js的世界。我们将从基础概念讲起,然后一步步深入到代码实现,最后总结Node.js在后端开发中的优势和应用场景。无论你是前端开发者还是后端新手,这篇文章都将为你打开一扇了解Node.js的大门。
21 2
|
17天前
|
JavaScript 前端开发
javascript开发的简单的弹幕插件
这是一个原生javascript开发的简单的弹幕插件,具有美观、易用,占用的资源较低等特点,可以给弹幕设置内容、颜色、头像、链接地址等属性,鼠标悬停等,简单实用,欢迎下载!
35 5
|
8天前
|
Web App开发 JavaScript 前端开发
探索后端开发:Node.js与Express的完美结合
【10月更文挑战第33天】本文将带领读者深入了解Node.js和Express的强强联手,通过实际案例揭示它们如何简化后端开发流程,提升应用性能。我们将一起探索这两个技术的核心概念、优势以及它们如何共同作用于现代Web开发中。准备好,让我们一起开启这场技术之旅!
19 0

热门文章

最新文章