《图解CSS3:核心技术与案例实战》——1.3节渐进增强

本节书摘来自华章社区《图解CSS3:核心技术与案例实战》一书中的第1章,第1.3节渐进增强,作者 大漠,更多章节内容可以访问云栖社区“华章社区”公众号查看

1.3 渐进增强
第一次听到“渐进增强”(Progressive Enhancement)一词是在前端重构交流会上。渐进增强并不是一种技术,而是一种开发的方式,更是一种Web设计理念。首先思考一个问题:“网站是否需要在每个浏览器中看起来都一样?”带着这个问题来看渐进增强。
1.3.1 渐进增强与优雅降级
正如前面所言,渐进增强是一种开发方式,更是一种设计理念。在编写Web页面时,首先保证最核心的功能实现,让任何低端的浏览器都能看到站点内容,然后考虑使用高级但非必要的CSS和JavaScript等增强功能,为当前和未来的浏览器提供更好的支持,给用户带来更好的体验。
在设计的时候,先考虑低端设备用户能否看到所有内容,然后在此基础之上为高端用户进行设计。不仅为高端设备用户提供一个完美的应用,也要为不同性能级别设备的用户设计不同级别的不那么完美的应用。这称为“优雅降级”。
目前而言,虽对“渐进增强”有所了解的人很多,但是要说普及或深入还远远没到时候。在大家平时的设计思维中有一种极强的固定思维,也就是想让网站在各个浏览器下表现一致。这种出发点本身并没有什么问题,但是这样会让领先的浏览器的优势无法充分显示出来。
因此,从今天开始要改变制作Web站点的思维,让网站能优雅降级,目标应该是——向尽可能多的用户提供尽可能优质的用户体验。这跟用户访问网站使用方式无关,无论通过iPhone、高端的桌面系统、Kindle,还是阅读器,用户都能得到尽可能独特且完美的体验。
1.3.2 渐进增强的优点
“向尽可能多的用户提供尽可能优质的用户体验”这一目标听起来相当不错。有的人制作Web站点时报怨,IE怎样才具有CSS3的效果。诚然,我们不使用渐进增强也可以实现,如为一些旧浏览器提供一套兼容方案,确保页面与现代浏览器保持一致。简单来说就是在支持CSS3的浏览器中使用CSS3特性,在不支持的浏览器中另写一套样式来模拟CSS3效果,实现让网站在所有浏览器都一样。
可以说,通过这种方法只是让低版本的浏览器渲染页面更好看一点,并没有得到实质性的提高。
因此,如果网站始终无法做到一模一样,为什么不使用CSS3技术使它在现代浏览器上看起来更靓丽呢?当然,某些CSS3特性在不支持的浏览器中是“无法模拟”的,但使用渐进增强,就无须为了让网站适合所有人而放弃这些技术。
CSS的渐进增强有别于CSS的hack。hack是浏览器厂商的一种手法,用来增强自己的竞争,而渐进增强起到锦上添花之效。所以前者应该尽量避免使用,而后者应该适当使用。
就样式而言,渐进增强的对象是一些现代浏览器,渐进增强的一些属性主要是CSS3的一些特性,或是IE低级版本不支持的一些属性,或是其他一些特殊情况。淘宝网上的一个例子如图1-7所示。


0f059090b0fc53edbac6ad0384358474dd8af69b

这里采用了CSS3的旋转特性transform,鼠标移上去时,三角会实现旋转的动画效果,并改变方向。之前,要实现图1-7所示的旋转效果,需要一大串JavaScript脚本。而使用transform仅仅需要几行代码。

#site-nave .menu:hover .menu-hd {-webkit-transform: rotate(180deg);-webkit-transform-origin-x:50%;-webkit-transform-origin-y:30%;-moz-transform: rotate(180deg);-moz-transform-origin-x:50%;-moz-transform-origin-y:30%;-o-transform: rotate(180deg);-o-transform-origin-x:50%;-o-transform-origin-y:30%;-ms-transform: rotate(180deg);-ms-transform-origin-x:50%;-ms-transform-origin-y:30%;transform:rotate(180deg);transform-origin-x: 50%;transform-origin-y: 30%;
}

采用渐进增强能给现代浏览器用户一个更好的体验,在不支持CSS3的IE浏览器也能正常使用,只不过体验会大打折扣。
以上只是一个简单的例子,本书后面还会介绍CSS3渐进增强的案例,例如text-shadow文字阴影、border-radius圆角属性、box-shadow盒阴影属性、CSS3渐变背景和CSS3选择器等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/281568.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里云云主机搭建网站攻略 - 云翼计划

阿里云服务器(云主机)搭建网站攻略 - 云翼计划 提示:此搭建攻略为2017版本,阿里云未跟新前。 最新搭建攻略请前往 Amaya丶夜雨博客 / 最新个人博客 https://www.amayaliu.cn 支持一下哦,谢谢。(9.5一…

记一次 .NET 某医疗器械 程序崩溃分析

一:背景 1.讲故事前段时间有位朋友在微信上找到我,说他的程序偶发性崩溃,让我帮忙看下怎么回事,上面给的压力比较大,对于这种偶发性崩溃,比较好的办法就是利用 AEDebug 在程序崩溃的时候自动抽一管血出来&a…

1251: 字母图形 [水题]

1251: 字母图形 [水题] 时间限制: 1 Sec 内存限制: 128 MB提交: 140 解决: 61 统计题目描述 利用字母可以组成一些美丽的图形,下面给出了一个例子: ABCDEFG BABCDEF CBABCDE DCBABCD EDCBABC 这是一个5行7列的图形,请找出这个图形的规律&…

WPF效果第二百零二篇之TreeView带连接线

前面文章中分享了TreeView支持多选;然而在项目上使用时,领导觉得不满意:体现不了真正的从属关系;既然领导都发话了;那就开整就行了;今天就再来个带有连接线的TreeView效果:1、来看看TreeViewItem的Template:2、展开和收缩动画:3、参考资料https://www.codeproject.com/tips/673…

ObjectTive C语言语法,[译]理解 Objective-C 运行时(下篇)

本文来自网易云社区作者:宋申易所以到底 objc_msgSend 发生了什么?很多事情。看一下这段代码:[self printMessageWithString:"Hello World!"];这实际上被编译器翻译成:objc_msgSend(self, selector(printMessageWithStr…

菜鸟学习MVC实录:弄清项目各类库的作用和用法

MVC模式即:模型(Model)-视图(View)-控制器(Controller) Model (模型):是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责数据库中存取数据View…

SSL服务器

2019独角兽企业重金招聘Python工程师标准>>> SSL 是一个安全协议,它提供使用 TCP/IP 的通信应用程序间的隐私与完整性。因特网的 超文本传输协议(HTTP)使用 SSL 来实现安全的通信。 在客户端与服务器间传输的数据是通过使用对称算…

微软Skype Translator将支持阿拉伯语即时语音翻译

据美国科技时代网(Tech Times)3月9日报道,日前,微软旗下即时翻译软件Skype Translator再添新语种,微软宣布Skype Translator已经支持阿拉伯语。Skype用户可通过使用阿拉伯语即时翻译与朋友、家人以及海外商业伙伴进行交流。 据报道&#xff0…

是什么让.NET7的Min和Max方法性能暴增了45倍?

简介在之前的一篇文章.NET性能系列文章一:.NET7的性能改进中我们聊到Linq中的Min()和Max()方法.NET7比.NET6有高达45倍的性能提升,当时Benchmark代码和结果如下所示:[Params(1000)] public int Length { get; set; }private int[] arr;[Globa…

在Identity框架中使用RoleBasedAuthorization

本文将介绍在 Identity 框架中如何使用 Sang.AspNetCore.RoleBasedAuthorization[1] 库。核心介绍Identity 和 jwt 的基本配置我们在这里不再赘述,可以参考最后的项目样例。核心的代码主要为 IRolePermission 的实现。internal class MyRolePermission : IRolePermi…

Magicodes.IE 2.7.0-beta发布

2.7.0-beta2022.10.27使用SixLabors.ImageSharp替代System.Drawing,感谢linch90 (见pr#454)2.6.92022.10.26fix: 动态数据源导出到多个sheet的问题 (见#449)2.6.82022.10.18Excel模板导出添加API,以支持通过…

Ubuntu 18.04上Qmmp安装教程

Qmmp,一个开源的基于Qt的多媒体播放器。它具有多种音频文件格式支持,DSP效果,视觉效果;输出系统支持(OSS4(FreeBSD),ALSA(Linux),Pulse Audio,JAC…

C# WPF 表格控件的前后台数据交互?

概述GridControl控件使用我们已经进行了实例讲解,这节内容我们列举一个特殊的应用场景:表格中有一列CheckBox,默认都处于勾选状态,当用户通过界面操作后,我们要确保用户至少选择了一项,相当于一次数据验证&…

Java(C#)基础差异-语法

1、long类型 Java long类型,若赋值大于int型的最大值,或小于int型的最小值,则需要在数字后加L或者l,表示该数值为长整数,如long num2147483650L。 举例如下: public static void main(String[] args) {/** …

android防止左向右滑出程序,Android——ViewPager禁止左右滑动的实现

目录1 背景用ViewPagerBottomNavigationView多个Fragment快速搭建的页面切换架构,一个有四个页面,因为测试需要,需要屏蔽掉中间的两个,做法是:设置不可点击选择:xml布局文件中,BottomNavigation…

Yii2 的快速配置 api 服务 yii2-fast-api

yii2-fast-api yii2-fast-api是一个Yii2框架的扩展,用于配置完善Yii2,以实现api的快速开发。 此扩展默认的场景是APP的后端接口开发,因此偏向于实用主义,并未完全采用restfull的标准,方便前端开发处理接口数据以及各种…

.NET6打包部署到Windows Service

1.安装Nuget包安装以下nuget包支持windows service<PackageReference Include"Microsoft.AspNetCore.Hosting.WindowsServices" Version"6.0.10" /> <PackageReference Include"Microsoft.Extensions.Hosting.WindowsServices" Version…

android emoji unicode编码表,unicode编码

unicode编码app是一款字符查找客户端应用&#xff0c;通过unicode编码可以方便寻找特定字符&#xff0c;查看字符表情详细的描述&#xff0c;并且利用unicode编码就可以快捷复制任意unicode编码&#xff0c;提高开发效率&#xff0c;非常的实用&#xff0c;快来下载unicode编码…

物联网商机诱人 芯片商大力搭建生态系统

应用需求变化多端的物联网&#xff0c;虽具备庞大的发展潜力及应用商机&#xff0c;但由于市场过于分散&#xff0c;几乎没有杀手应用可言&#xff0c;因此对有意耕耘相关市场的半导体业者而言&#xff0c;如何借力使力&#xff0c;寻找盟友共同搭建出的生态系统&#xff0c;遂…

ASP.NET Core 6框架揭秘实例演示[30]:利用路由开发REST API

借助路由系统提供的请求URL模式与对应终结点之间的映射关系&#xff0c;我们可以将具有相同URL模式的请求分发给与之匹配的终结点进行处理。ASP.NET的路由是通过EndpointRoutingMiddleware和EndpointMiddleware这两个中间件协作完成的&#xff0c;它们在ASP.NET平台上具有举足轻…