代码后备是与众多唯一身份访问者妥协的完美解决方案。 并非所有网络上的人都使用相同的操作系统,网络浏览器甚至物理硬件。 所有这些因素都会影响您的网页在屏幕上的实际呈现方式。 使用新CSS或JavaScript技巧时,您经常会遇到此类技术错误。
但是,不要让这些陷阱使您沮丧! 在本指南中,我为Web设计人员汇总了一些最常见的后备技术 ,这些技术着重于CSS和JavaScript / jQuery。 当所有其他方法都失败时,您希望至少为用户提供基本的页面功能。 在用户体验设计领域中,至高无上。
请查看下面的指南,并在评论部分让我们知道您的想法和问题。
1.带有图像的圆角
CSS3技术已经飞涨到主流的网页设计中。 最引人注目的特性之一是border-radius
,它可以实时生成圆角。 这些几乎在任何按钮,div或文本框中看起来都很漂亮。 唯一的问题是Web浏览器之间有限的支持。
许多较旧的浏览器(包括Internet Explorer 7)不支持此属性。 因此,为了使圆角适用于所有标准浏览器,您需要使用图像构建后备。
![CSS3圆角生成器](https://i-blog.csdnimg.cn/blog_migrate/37295cc91e26533f18f7b37834da8afa.png)
![CSS3圆角生成器](https://i-blog.csdnimg.cn/blog_migrate/37295cc91e26533f18f7b37834da8afa.png)
标准代码在主div上使用常规CSS3属性,同时在每个角落容纳图像。 您可能需要在主容器中设置一些额外的div,用于在背景中显示转角图像。
#mainbox {
-webkit-border-radius: 5px; /* Safari */
-moz-border-radius: 5px; /* Firefox\Gecko Engine */
-o-border-radius: 5px; /* Opera */
border-radius: 5px;
}
#mainbox .topc {
background: url('corner-tl.png') no-repeat top left;
}
#mainbox .topc span {
background: url('corner-tr.png') no-repeat top right;
}
#mainbox .btmc {
background: url('corner-bl.png') no-repeat bottom left;
}
#mainbox .btmc span {
background: url('corner-br.png') no-repeat bottom right;
}
为了避免压力,我强烈建议您使用RoundedCornr之类的应用。 它是一个浏览器内Web应用程序,它同时使用CSS3和图像生成圆角CSS。 这对于无法使用Photoshop或GIMP等图形软件的设计人员来说尤其有用。
2. jQuery下拉菜单系统
下拉菜单系统非常适合当今的Web。 但是,最大的问题是访问者在未启用JavaScript的情况下访问您的网站。 在这种情况下,您的所有菜单都不起作用! 最好的解决方案是使用CSS显示/隐藏每个子菜单div块并将它们显示在悬停上。
![CSS-Plus jQuery菜单](https://i-blog.csdnimg.cn/blog_migrate/cf350118d049a0c4bc23c2749b647e7e.png)
![CSS-Plus jQuery菜单](https://i-blog.csdnimg.cn/blog_migrate/cf350118d049a0c4bc23c2749b647e7e.png)
此解决方案的唯一问题是Internet Explorer 6不支持这些CSS悬停选择器。 但是IE7 +的效果很好。 当然,如果首先启用JavaScript,则所有浏览器都可以正常运行。 本教程有关CSS Plus的代码是我发现的最好的资源之一。 它不仅提供了jQuery解决方案,还提供了IE问题所需CSS。
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
}
/* CSS fallback */
#nav li:hover > ul.child {
display: block;
}
#nav li:hover > ul.grandchild {
display: block;
}
您可以尝试的另一种替代解决方案是仅公开显示IE6中的每个菜单。 您可以使用Internet Explorer条件注释来基于浏览器版本应用样式表。 当然,这不是最漂亮的解决方案,但它只会起作用。
如果您不担心Internet Explorer 6太过担心,那么甚至不用担心这种替代的后备。 上面的教程和后续代码足以在所有主要浏览器中使用严格CSS加载JavaScript菜单。
3.目标Internet Explorer样式
我敢肯定,我们都知道Microsoft Internet Explorer出现的渲染问题。 我可以对他们的最新IE8以及IE9的未来前景表示赞赏。 但是,仍然有少量用户在运行IE6 / IE7,您现在真的不能忽略它们。
![](https://i-blog.csdnimg.cn/blog_migrate/a7501cffdd9b8c518d610c0e73bcb55a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a7501cffdd9b8c518d610c0e73bcb55a.png)
上一节中提到的条件注释对于重新格式化页面区域很有用。 例如,如果您在IE6中有一个带有子导航的下拉菜单,而该菜单仅使用JavaScript进行显示,那么尝试CSS作为后备方法会很不幸。 最好的解决方案是将每个子列表显示为导航块。
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css" />
<![endif]-->
将以上代码添加到文档标题中,然后可以为每个子导航指定显示类型。 关于这种后退的最好的部分是,您可以覆盖CSS,并且在启用JavaScript时仍可以动态显示/隐藏菜单。 否则,您将只显示一个打开的链接列表。 您可以使用类似的代码,例如我在下面添加的代码。
#nav li {
position: relative;
width: 150px; /* must set a finite width for IE */
}
#nav li ul { /* sub-nav codes */
display: block;
position: absolute;
width: auto; /* define your own width or set in the li element */
}
#nav li ul li {
width: 100%;
}
4.旧版IE不透明度/透明度
Internet Explorer的许多烦人的错误之一就是处理不透明性。 可以通过opacity属性更改CSS3中的alpha-transparency设置。 但是,以Microsoft的方式,只有Internet Explorer 9当前支持此功能。
针对IE6 +的最佳解决方案是通过filter
(仅IE可以识别的专有设置)。 查看下面的简短代码示例:
.mydiv {
opacity: 0.55; /* CSS3 */
filter: alpha(opacity=55); /* IE6+ */
}
您需要做的就是将以上行包含在任何需要透明度的元素内。 请注意,类似于CSS3属性,所有子元素也将继承此不透明度更改。 如果您正在寻找针对IE8的较新方法,请查看下面的代码。 它的行为与我们的filter属性仅由Microsoft IE8解析器识别的行为相同。
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=55)"; /* IE8 */
5.使用后备图像创建CSS3按钮
按钮是用于各种界面的绝佳Web元素。 它们可以充当表单输入,导航项甚至直接页面链接。 使用CSS3,现在可以使用许多独特的样式来格式化按钮,例如背景渐变,框阴影,圆角等。
但是,您不能相信所有访问者都可以呈现这些较新的属性。 在为按钮(甚至相似的UI元素)构建后备设计时,有两个不同的选项。 第一种是包括完全按照CSS外观设计的背景图像。 这可以在Photoshop中轻松完成。 但是,如果您不是该软件的专家,那么这可能会很麻烦。
![Web Designer WallCSS3圆形按钮教程](https://i-blog.csdnimg.cn/blog_migrate/b5e6a0169b9de032da6dac03e56fbeea.png)
![Web Designer WallCSS3圆形按钮教程](https://i-blog.csdnimg.cn/blog_migrate/b5e6a0169b9de032da6dac03e56fbeea.png)
另一种选择是退回到普通的背景颜色和更简单CSS样式。 我正在使用CSS-Tricks关于CSS3渐变的出色文章中的一些代码示例。 所有主要的浏览器,包括Safari,Firefox,Chrome,甚至Opera,都支持这些属性。 遗留浏览器的支持是您遇到问题的地方:较旧的Mozilla引擎,IE6 / 7,甚至可能是Mobile Safari。
.gradient-bg {
background-color: #1a82f7; /* uses a solid color at worst */
background-image: url('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png');
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);
background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);
background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
}
仅将图像用作备用方法的唯一小问题是,当用户单击按钮时,您将不会进行活动状态更改。 您可以为这些正常状态与活动状态建立两个不同的映像,尽管这会花费一些额外的工作。 仅这个原因可能会促使您使用纯背景色而不是后备图像。 尝试几种不同的解决方案,以查看哪种布局最适合您。
6.检查手机内容
2012年的另一个巨大趋势是移动Internet浏览的普及。 智能手机无处不在,通过3G / Wi-Fi传输的数据越来越多。 因此,许多设计师将寻求为移动用户提供一个后备布局。
几种流行的移动Web浏览器将呈现类似于桌面环境的页面。 为此,移动Safari和Opera最为人所知,甚至支持许多常见的jQuery脚本。 但是这些页面并不总是适合移动设备使用,并且在UX上仍有扩展的空间。
![Apple iPhone 4S型号-黑色](https://i-blog.csdnimg.cn/blog_migrate/6647cca5bd58ac1a9df9ca67c2d2af4f.png)
![Apple iPhone 4S型号-黑色](https://i-blog.csdnimg.cn/blog_migrate/6647cca5bd58ac1a9df9ca67c2d2af4f.png)
您可以通过两种方法检测移动浏览器并显示备用布局或样式表。 首先是通过JavaScript,它可以很好地用作前端工具。 我在下面添加的脚本非常简单,仅检查iPhone / iPod Touch用户。 “检测移动浏览器”是一个很棒的网站,它提供了可以运行的更详细的脚本。
// Redirect iPhone/iPod Touch
function isiPhone(){
return (
(navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPod") != -1)
);
}
if(isiPhone()){
window.location = "m.yourdomain.com";
}
现在,另一种选择是通过后端语言(例如PHP)进行检查。 您可以检查称为HTTP_USER_AGENT
的变量。 如果您搜索这些条款,就会有数十个网站出现。 但是,我仍然建议我在上一段中添加的“检测移动浏览器”链接。
该站点具有免费的可下载脚本,这些脚本不仅可以用PHP进行解析,还可以解析大量其他流行的后端语言。 这些包括ASP.NET,ColdFusion,Rails,Perl,Python,甚至包括基于服务器的代码,例如IIS和Apache。
7.具有优美后备功能的Slicebox滑块
从2011年我最喜爱的免费赠品CSS3有可能成为Slicebox 3D图像滑块释放了Codrops 。 它在支持浏览器的浏览器中利用了漂亮CSS动画过渡,目前在Google Chrome浏览器和最新的Safari浏览器中。 奇怪的是,即使是最新的Firefox或IE9版本仍然不能使用这些转换。
![Codrops动画转场图片库](https://i-blog.csdnimg.cn/blog_migrate/a10f4e64b9df8f7b618071f73f2cd7fb.png)
![Codrops动画转场图片库](https://i-blog.csdnimg.cn/blog_migrate/a10f4e64b9df8f7b618071f73f2cd7fb.png)
关于此代码的最好之处在于,它仍将回退以提供图像之间的基本过渡效果。 虽然大部分动画是通过jQuery执行的,但是考虑到有多少浏览器无法支持华丽CSS3动画,标准CSS后备选项仍然非常可靠。
另外,Codrops最近还发布了另一个滑动图像面板 ,该面板利用了更具创意CSS3技术。 该图像滑块是使用CSS中的背景图像创建的,因此即使没有过渡效果,它的行为也非常流畅。
8. jQuery脚本CDN故障安全方法
jQuery库对于在Web上开发JavaScript几乎已经变得至关重要。 许多备用CDN供应商都创建了静态URL,在这些URL中托管了所有jQuery发行版。 Google,Microsoft甚至jQuery本身都为开发人员以及其他一些鲜为人知的网站创建了CDN门户。
可能有数十万依赖这些提供程序的开发人员。 如果由于某种原因导致任何链接断开或服务器脱机,该怎么办? 最好是托管一个本地副本并仅在需要时实施它。 好吧,来自CSS-Tricks的出色的后备代码段可助您一臂之力!
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-1.7.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
9.独特HTML5复选框
HTML5为一些新颖的时尚样式打开了门户。 这种增强的Web体验的一部分是通过表单和输入元素实现的。 复选框只是一个示例,可以对其进行大量自定义以满足您的需求。
我遇到了这个精彩CSS / jQuery教程,该教程早在2011年Spring就发布了。它提供了一种简单的方法来为您的复选框创建Apple样式的开关,从而可以在较旧的浏览器中正常降级。 该代码使用背景图像替换用户交互之间的开/关样式。
![TutorialZine设计-具有优雅回退功能的iOS风格的iPhone复选框](https://i-blog.csdnimg.cn/blog_migrate/de7bf0b7edfdd4c02ab75c6dd31b01e7.png)
![TutorialZine设计-具有优雅回退功能的iOS风格的iPhone复选框](https://i-blog.csdnimg.cn/blog_migrate/de7bf0b7edfdd4c02ab75c6dd31b01e7.png)
默认情况下,原始输入复选框元素是隐藏的,其值是通过JavaScript调用确定的。 这意味着您可以通过jQuery在任何时候动态提取值,但是在单击“提交”按钮后,它也将被传递到表单中。
假设JavaScript已关闭或在较旧的浏览器中不受支持,则该脚本将默认为常规HTML输入。 这还将禁用CSS的较新的复选框样式,因此它将看起来好像没有任何更改。 该脚本的行为更像是具有清晰后备的美学领先者,而不是其他任何东西。 但是这些滑块看起来很棒,并且可以将相同的技术应用于其他表单输入字段,例如选择菜单和单选按钮。
10. HTML5支持的视频
新HTML5规范在许多领域都非常进步。 视频和音频元素都增强了对大量媒体文件的本机支持。 但是事实证明,在受HTML5支持的浏览器之间,它们并不都同意文件类型。
Mozilla Firefox通常支持.OGG视频,您可以将VLC用作转换器。 Google Chrome和Safari查找.MP4或H.264编码的.MOV文件。 由于存在这些差异,您通常必须包括三种不同的视频格式–上面列出的两种以及.FLV后备广告。
![基本HTML5和Flash视频播放器VideoJS](https://i-blog.csdnimg.cn/blog_migrate/9551ea6a558ab5697d570291b0bcf13d.png)
![基本HTML5和Flash视频播放器VideoJS](https://i-blog.csdnimg.cn/blog_migrate/9551ea6a558ab5697d570291b0bcf13d.png)
值得庆幸的是,一些非常聪明的家伙将一个名为VideoJS的库放在一起。 这是一种非常小JavaScript版本,可以在一个标签中一次性实现Flash和HTML5视频。 它是免费下载和开源的,因此也欢迎开发人员做出贡献。 Flash和HTML5视频播放器均被定制为完全相同,因此所有用户都将拥有相同的体验。 查看他们HTML5视频嵌入代码示例:
<video id="mainVid" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="480" poster="https://assets.hongkiat.com/uploads/code-fallback-methods/default_preview_img.png"
data-setup="{}">
<source src="my_video.mp4" type="video/mp4">
<source src="my_video.webm" type="video/webm">
</video>
遵循类似的路线, html5media项目提供了一种将所有流媒体合并为一个文件类型的方法。 不幸的是,即使VideoJS也不适合每个浏览器。 html5media项目试图做的是解决浏览器不兼容问题,以支持所有平台之间的任何视频文件类型。 而且实际上效果很好!
结论
我希望这份有用的后备方法指南对于世界各地的Web开发人员都将派上用场。 建立适应各种软件规格的网站可能很难。 当您使用许多不同的语言(例如CSS和JavaScript)时,尤其如此。
但是趋势表明,我们正在接近一个网页设计的支持时代。 从未有更多的浏览器和Web标准达成共识,尤其是在CSS3和HTML5中。 这些技术只是构建符合标准的网页时要考虑的众多技术中的一些。 作为Web开发人员,您将不断希望遵循最新的设计趋势,并进行调整以最适合您的受众。
翻译自: https://www.hongkiat.com/blog/css-javascript-fallback-methods/