做网站优化有必要广州专业网站建设性价比高

当前位置： 首页 > news >正文

做网站优化有必要,广州专业网站建设性价比高,软件学校网站模板,找小网站的关键词文章目录 1.5 渐进式增强1.5.1 利用层叠规则实现渐进式增强1.5.2 渐进式增强的选择器1.5.3 利用 supports() 实现特性查询启用浏览器实验特性 1.5 渐进式增强 要用好 CSS 这样一门不断发展演进中的语言#xff0c;其中一个重要的因素就是要与时俱进#xff0c;及时了解哪些功… 文章目录 1.5 渐进式增强1.5.1 利用层叠规则实现渐进式增强1.5.2 渐进式增强的选择器1.5.3 利用 supports() 实现特性查询启用浏览器实验特性 1.5 渐进式增强 要用好 CSS 这样一门不断发展演进中的语言其中一个重要的因素就是要与时俱进及时了解哪些功能是新鲜出炉的尤其是那些仅有部分常见浏览器支持的新功能提前了解是很有必要的。 CSS 同时支持向前与向后兼容的精心设计让样式代码能够同时在旧新两大类浏览器中流畅运行。只需稍加考虑这些前沿特性就能在您的 CSS 中得以完美呈现即便它们尚未对所有用户开放。 为此可以给旧版浏览器设计一套可接受但功能较少的 CSS 样式而把那些只能在最新版浏览器中呈现的新特性放到新的 CSS 图层layer上。这么一来您的样式代码就是面向未来的随着升级浏览器的用户越来越多这些新功能新特性也将逐步登台亮相。这种实现方案就叫做 渐进式增强progressive enhancement。 想知道一项特定功能的浏览器版本支持情况请查看 https://caniuse.com 或 MDN 相关文档 https://developer.mozilla.org/en-US/docs/Web。 由于在互联网早期浏览器更新迭代的速度较慢一些开发人员就总认为那些全新的 CSS 特性几年内都难登大雅之堂。但时至今日所有主流浏览器都是基业常青的其新版本的更新发布不仅频繁而且往往是自动进行的。一些新功能仅仅只需数月就能将浏览器的支持率从 0% 拉升至 80%。之后便会因为用户延迟更新或者囿于公司政策而使更新速度放缓。但无论如何只要没有明确需求要支持旧版浏览器新特性通常都会在得到主流浏览器支持后的一两年内稳定下来。 利用适当的渐进式增强配置您甚至可以即刻小试牛刀无需恭候多时——尽管也得看该功能的具体适配情况以及您希望尝试新特性的迫切程度。 1.5.1 利用层叠规则实现渐进式增强 启用渐进式增强最简单的办法是将其构建到层叠规则之中。当浏览器遇到无法解析的样式声明会直接忽略。考察如下样式代码 aside {background-color: #333333; /* 设置一个既安全又普遍支持的十六进制颜色值 /background-color: #333333aa; / 使用更新的十六进制编码格式覆盖上一个值 / }因为第二个样式声明出现在第一个之后利用前面介绍的层叠规则就能断定这些元素的背景色层叠值最终花落谁家。 第二个声明使用了一个相对较新的八位的十六进制颜色编码格式第 7 位和第 8 位数指定了一个 alpha 通道值表示部分透明。该语法在大多数浏览器中均有效仅有部分旧版浏览器不支持例如 Internet Explorer 浏览器。因此如果用户恰巧用的是 IE 浏览器该样式就会被忽略层叠值为第一个样式声明的值。尽管该用户无法获得带透明效果的完整体验但至少还能看到一个完全可用的版本。当前页面不会因此而“崩溃”或抛出错误浏览器也会继续解析其余 CSS 并丢弃未能识别的样式声明。 从调试的角度来看这样的处理似乎有些奇特因为 CSS 从不抛出任何错误。但这恰恰是 CSS 正常运行的一个重要组成部分也是为了实现渐进式增强的最终目标而精心设计的。 1.5.2 渐进式增强的选择器 渐进式增强的实施并不仅限于新的属性或新的样式值语法层面还可以体现在新的选择器上。浏览器如果支持该语法就能正常渲染否则将忽略整个规则集。 还有一个重要细节需要特别注意当规则集有多个选择器时只要任何一个选择器不被支持或无效浏览器渲染时将忽略整个规则集。例如以下样式代码 input.invalid, input:user-invalid {border: 1px solid red; }本书撰稿时伪类 :user-invalid 还是 CSS 的一个新增特性更多详细信息请参阅 附录 A。落后几个版本的浏览器或许理解 input.invalid 的含义但由于无法理解 :user-invalid即使第一个选择器匹配成功这些样式也同样不会生效。 要启用这样的新选择器最好的办法是将它们分开书写 input.invalid {border: 1px solid red; } input:user-invalid {border: 1px solid red; }这将不可避免地引入冗余样式但也是当下最好的解决方案了。在使用新的伪类、伪元素或者属性选择器时请务必牢记这一点请参阅 附录 A。 遇到上面列举的几个简单情况尚且只需要重复几行样式代码但偶尔也会遇到需要重复大段 CSS 的情况。这种情况下一些开发人员为了尽量避免样式冗余很可能会选择一直等下去直到浏览器对该选择器的支持情况令人满意后才会谨慎启用新的功能特性。 1.5.3 利用 supports() 实现特性查询 前面提到的分而治之的方法足以应对因启用新特性而对现有样式的影响较小的情况但偶尔也会遇到给支持新特性的浏览器定制多套不同样式声明的复杂情况。此时就可以利用 CSS 的 特性查询feature query 技术根据浏览器是否支持某个功能特性来定制化开发更大规模的样式效果。 特性查询的写法类似 supports (display: grid) { … }注意supports 规则后面有一个带括号的样式声明。如果浏览器能识别该声明本例即为网格布局则后面大括号内的所有规则集都会生效否则予以忽略。 也就是说您可以提供一套旧的样式布局如浮动布局留待备用。这些样式未必是最理想的方案甚至不得不做出一些让步但足以满足实际需求。然后再利用特性查询让完整版的网格布局样式在页面生效。 网格布局方案目前已在所有现代浏览器中得到广泛支持但以前却并非如此。用它来演示 supports 的用法再好不过。如图 1.15 所示在示例页面添加一组超链接并将其布局到一个小型网格中 图 1.15 定义在 supports 代码块内的一组链接网格 首先将如下 HTML 代码添加到页面标题和页脚之间的 main 元素中 代码清单 1.24 添加到页面的一组超链接 pTry some of our newest coffees:/p div classcoffeesa href/coffees/costa-ricaCosta Rica/aa href/coffees/ethiopiaEthiopia/aa href/coffees/guatamalaGuatemala/aa href/coffees/kenyaKenya/aa href/coffees/mexicoMexico/a /div接着添加样式将其设置为网格布局。首先给旧版浏览器提供一套回退样式然后利用特性查询再提供一套完整功能的网格布局版本。代码如下 代码清单 1.25 利用功能查询来实现渐进式增强 .coffees {margin: 20px 0; } .coffees a {/ 为旧版浏览器提供一套回退样式 /display: inline-block;min-width: 300px;padding: 10px 15px;margin-right: 10px;margin-bottom: 10px;color: black;background-color: transparent;border: 1px solid gray;border-radius: 5px; }supports (display: grid) { / 仅对能识别网格布局的浏览器生效如下样式 /.coffees {/ 为现代浏览器定义网格布局 /display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 10px;}.coffees a {/ 覆盖干扰当前网格布局的回退样式 */margin: unset;min-width: unset;} }上述代码中备用方案和其他基本样式如颜色位于特性查询代码块外因此将对所有浏览器生效。在不支持网格布局的浏览器中打开示例页面会看到类似网格布局的备用样式效果而所有基于网格布局的相关样式都在特性查询代码块内因此仅在浏览器支持网格布局时才会生效。 本书第 5 章还会进一步深入考察网格布局如果对上述代码不熟悉也无须担心。 试想一下要是没有 supports 代码块最终样式会有何不同甚至可以临时注释掉里面的样式在现代浏览器中查看样式回退的效果再酌情调整。 supports 规则可用于查询各种 CSS 特性的支持情况使用 supports (mix-blend-mode: overlay) 可以查询混合模式blend mode的支持情况详见本书第 11 章使用 supports (color: color-mix(in oklab, red, white)) 还能查询 color-mix 特性的支持情况详见本书第 13 章。 CSS 特性查询还支持以下几种写法 supports not(declaration)——仅当目标声明不受支持时生效特性查询块中的特定样式规则supports (declaration) or (declaration)——支持任一目标声明则生效对应的样式规则supports (declaration) and (declaration)——同时支持两个目标声明则生效相应的样式规则supports selector(selector)——仅当浏览器能识别目标选择器时生效相应的样式规则例如 supports selector(:user-invalid) 有了渐进式增强的解决方案您可以实现跨浏览器为所有用户提供定制化的用户体验甚至包括今后的浏览器。一个新的 CSS 语法特性放到能识别的浏览器内就能渲染无法识别的也自然不会渲染。Web 设计师兼教育家 Jen Simmons 半开玩笑地称它为“量子 CSS”Quantum CSS对于一个 CSS 特性“可以同时拥有启用和不启用、生效和不生效两种状态”“use it and not use it at the same time. It works and it doesn’t work at the same time”。 CSS 的这种语言特性又被称为 CSS 的 弹性机制resilience。CSS 这门语言以及类似的 HTML 语言是高容错设计理念的产物。随着将来 CSS 新功能的不断涌现您可以充分利用它来扩充自己的工具箱。 启用浏览器实验特性 W3C 联盟与浏览器厂商一道共同制定并开发了 CSS 规范。这也意味着在 CSS 规范最终确定之前一些浏览器可能就已经开始支持某项特性功能的研发了。为了防止正处在生产环境中的网站贸然引入尚待稳定的 CSS 样式效果这些实验性功能仅对有意在浏览器设置中启用它们的开发人员开放。这样也有利于在规范最终确定前进行早期实验和效果反馈。如果您也想接触这些实验性功能知道如何开启它们也是至关重要的。 在 Chrome 和 Opera 中可以通过启用一个标志开关flag来完成该操作。在 Chrome 的地址栏内输入 chrome://flags 并按 Enter 键跳转Opera 浏览器则跳转至 opera://flags。然后下翻或搜索找到“实验性网络平台功能”Experimental Web Platform Features并单击启用该选项。 如果习惯用 Firefox 浏览器则需要下载并安装 Firefox 开发者版本https://www.mozilla.org/en-US/firefox/developer/或 Firefox Nightly 版本https://nightly.mozilla.org/。如果习惯用 Safari 浏览器则需要安装 Safari 技术预览版Safari Technology Preview或 Webkit Nightly Builds 版本。