了解浏览器对JavaScript功能的支持
咱们写网页能不依赖Javascript搞点动态什么的吗？不过你知道吗，不同浏览器对它的理解可能差得挺远，兼容性问题得小心点儿。怎么解决？看浏览器支不支持这个javascript功能这样才能确保咱的用户不会遇到卡顿啥的。实在不行怎么办？就来个小聪明的替换办法，这可是业内人常说的“优雅妥协”咯。
利用classList属性动态样式化HTML内容
如果浏览器能识别JavaScript那简直是太赞了！有了classList这个神奇的功能，我们就能随意调整HTML元素的类名字，让网页设计更具创意性。打比方说，通过改变元素类型，页面看起来也是富于变化，这画面肯定美翻天！
应用错误消息或不同样式的处理方式
别着急即便是有的浏览器对某个js功能玩不开，也总有解决的办法！比如让小爱心跳出来告诉人家这个东西暂时用不了，或者换个方法处理下html代码，所有平台都能看得清清楚楚！
创建div元素并设置ID
别急，咱们立马动手做做看。首先，得先搞个叫’element’的DIV元素出来，这个就是我老弟要折磨的靶子！
定义CSS类container
好，给你说说咋弄。首先，咱们得在CSS文件里搞个’mainbox’的类，把它打扮漂亮点儿。这样的话，你那大DIV元素就立刻变得美美的！学会了吗？就是靠设定类名和属性这种方法，轻松搞定网页元素美化，其实超简单的。
.container {
width: 300px;
height: 300px;
background-color: red;
border: 3px solid green;
border-radius: 12px;
}
#output {
font-size: 20px;
font-weight: bold;
color: blue;
}
Using the feature detection technique for the graceful degradation in the web development
var myDiv = document.getElementById('element');
let output = document.getElementById('output');
if ('classList' in myDiv) {
myDiv.classList.add('container');
output.innerHTML = 'classList is supported';
} else {
myDiv.className += ' container';
output.innerHTML = 'classList is not supported';
}
检查classList属性支持
啊咱在看网页的时候，就靠着那个设定好的div id找东西~不过得看看有没classList这个家伙~这货真的是个神器，像是功能强大的小包包，能帮你搞定各种类型的处理问题。而且，既然现在浏览器都支持classList，那改变或拿捏元素的分类就简单得跟玩儿似的啦!
根据支持情况添加类名
只要你的浏览器能用就行，给那个div加个’container’这个类就ok了。这样就能加到那些漂亮的css样式，无论网页怎么变都美美的！
回退选项示例：为CSS渐变添加回退选项
咱们做网页时，CSS渐变更是个门道。要是担心某些浏览器不认识linear-gradient这个函数，导致页面效果受影响怎么办？别急，换种方法——用line-gradient来实现背景渐变，然后再加上几个备用CSS代码。这样子就能让各种浏览器都美滋滋地上线我们做的页面！
.card {
width: 400px;
height: auto;
font-size: 2rem;
background-color: orange;
background-image: linear-gradient(to right, #14f71f, #d46a06);
color: white;
text-align: center;
}
/* Fallback styles */
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
.card {
background-image: none;
background-color: orange;
}
}
Using the fallback options for the gradient for the graceful degradation in the web development
This is a card element
示例：为CSS动画添加回退选项
遇事不要慌，CSS动效搞不定还有后招儿！别忘了，并非所有浏览器都支持这些动画函数和属性。例如当你尝试为网页上某物做动画时，就算浏览器没反应过来也没事，我们已经准备好了备选方案，仍然能让页面充满活力！
优雅降级策略与标准HTML、CSS属性应用
让网页开发变得简单，只需按照规矩用HTML和CSS。这样就能让手机、电脑、电视都能读懂我们给你创作的网页了。而且在设计网页时记得适当调整布局，挑选一款好用的浏览器解析代码，还要备好快速返回前页的功能。这样你的网站不仅安全可靠，而且用户体验也会全面提升！
.square{
background-color: blue;
color: white;
width: 100px;
font-size: 1.5rem;
padding: 20px;
margin-bottom: 20px;
position: relative;
animation: bounce 2s ease-in-out infinite;
animation-direction: alternate;
animation-delay: 0.1s;
animation-fill-mode: both;
animation-play-state: running;
}
@keyframes bounce {
0% {transform: translateY(0);}
100% {transform: translateY(-30px);}
}
/* Fallback styles */
.no-animation .square{
top: 0;
animation: none;
}
Using the fallback options for the animation for the graceful degradation in the web development
div1
div2
div3
window.onload = function () {
var squares = document.querySelectorAll('.square');
if (!('animation' in document.createElement('div').style)) {
for (var i = 0; i < squares.length; i++) {
squares[i].classList.add('no-animation');
}
}
};
。
评论0