适用于CSS和Javascript的10种有用的备用方法

最新推荐文章于 2022-06-30 16:02:30 发布

cune1359

最新推荐文章于 2022-06-30 16:02:30 发布

阅读量215

点赞数

文章标签： python java web html css

代码后备是与众多唯一身份访问者妥协的完美解决方案。并非所有网络上的人都使用相同的操作系统，网络浏览器甚至物理硬件。所有这些因素都会影响您的网页在屏幕上的实际呈现方式。使用新CSS或JavaScript技巧时，您经常会遇到此类技术错误。

但是，不要让这些陷阱使您沮丧！在本指南中，我为Web设计人员汇总了一些最常见的后备技术 ，这些技术着重于CSS和JavaScript / jQuery。当所有其他方法都失败时，您希望至少为用户提供基本的页面功能。在用户体验设计领域中，至高无上。

请查看下面的指南，并在评论部分让我们知道您的想法和问题。

1.带有图像的圆角

CSS3技术已经飞涨到主流的网页设计中。最引人注目的特性之一是border-radius ，它可以实时生成圆角。这些几乎在任何按钮，div或文本框中看起来都很漂亮。唯一的问题是Web浏览器之间有限的支持。

许多较旧的浏览器（包括Internet Explorer 7）不支持此属性。因此，为了使圆角适用于所有标准浏览器，您需要使用图像构建后备。

标准代码在主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块并将它们显示在悬停上。

此解决方案的唯一问题是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，您现在真的不能忽略它们。

（图片来源： github ）

上一节中提到的条件注释对于重新格式化页面区域很有用。例如，如果您在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中轻松完成。但是，如果您不是该软件的专家，那么这可能会很麻烦。

另一种选择是退回到普通的背景颜色和更简单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上仍有扩展的空间。

您可以通过两种方法检测移动浏览器并显示备用布局或样式表。首先是通过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版本仍然不能使用这些转换。

关于此代码的最好之处在于，它仍将回退以提供图像之间的基本过渡效果。虽然大部分动画是通过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样式的开关，从而可以在较旧的浏览器中正常降级。该代码使用背景图像替换用户交互之间的开/关样式。

默认情况下，原始输入复选框元素是隐藏的，其值是通过JavaScript调用确定的。这意味着您可以通过jQuery在任何时候动态提取值，但是在单击“提交”按钮后，它也将被传递到表单中。

假设JavaScript已关闭或在较旧的浏览器中不受支持，则该脚本将默认为常规HTML输入。这还将禁用CSS的较新的复选框样式，因此它将看起来好像没有任何更改。该脚本的行为更像是具有清晰后备的美学领先者，而不是其他任何东西。但是这些滑块看起来很棒，并且可以将相同的技术应用于其他表单输入字段，例如选择菜单和单选按钮。

10. HTML5支持的视频

新HTML5规范在许多领域都非常进步。视频和音频元素都增强了对大量媒体文件的本机支持。但是事实证明，在受HTML5支持的浏览器之间，它们并不都同意文件类型。

Mozilla Firefox通常支持.OGG视频，您可以将VLC用作转换器。 Google Chrome和Safari查找.MP4或H.264编码的.MOV文件。由于存在这些差异，您通常必须包括三种不同的视频格式–上面列出的两种以及.FLV后备广告。

值得庆幸的是，一些非常聪明的家伙将一个名为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/

cune1359

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
适用于CSS和Javascript的10种有用的备用方法

代码后备是与众多唯一身份访问者妥协的完美解决方案。并非所有网络上的人都使用相同的操作系统，网络浏览器甚至物理硬件。所有这些因素都会影响您的网页在屏幕上的实际呈现方式。使用新CSS或JavaScript技巧时，您经常会遇到此类技术错误。但是，不要让这些陷阱使您沮丧！在本指南中，我为Web设计人员汇总了一些最常见的后备技术，这些技术着重于CSS和JavaScript / jQuer...
复制链接

扫一扫