极客笔记CSS 渐进增强
在今天的网页开发领域，创建一个能在不同设备和平台上良好运行的网站是至关重要的。这就是渐进增强的作用所在。渐进增强是一种网页设计哲学，它专注于构建一个基本、功能完好的网站或应用程序，该网站在所有设备和浏览器上都能运行，并逐步增强网站的功能，以满足更强大的设备和浏览器的要求。
在本教程中，我们将讨论渐进增强的定义、重要性以及如何在我们的网页设计过程中实现它。
渐进增强的核心原则
我们应该遵循的渐进增强的核心原则包括：
- 为无障碍性而构建 - 我们必须确保所有基本内容和功能对所有网络浏览器都是可访问的，无论其功能如何。
-
使用干净和语义化的标记 - 我们应该将HTML标记保持简洁和语义化，为我们网站的内容提供清晰和易于理解的结构。
-
使用外部CSS和JavaScript进行增强 - 我们可以使用外部CSS和JavaScript文件为更强大的设备和浏览器提供增强的布局、样式和行为。
-
尊重最终用户的偏好 - 我们必须尊重用户网络浏览器的偏好和设置，例如字体大小和颜色方案，以提供个性化和可访问的用户体验。
-
注重灵活性 - 我们应该构建一个灵活和适应性强的网站，确保它可以轻松更新和适应新的技术和设备。
使用渐进增强的好处
以下是在网页开发中使用渐进增强方法的一些好处：
- 改进的用户体验
-
更好的可访问性
-
搜索引擎优化
-
更容易的维护和更新
-
成本效益的开发
-
未来的发展
实施渐进增强的步骤
用户可以按照以下步骤来实施渐进增强：
步骤1：识别网站的核心内容和功能
第一步是识别网站应为所有用户提供的核心内容和功能，无论其设备或浏览器如何。
步骤2：创建一个基本的、功能完好的网站版本
一旦完成了核心内容和功能的识别，使用干净和语义化的HTML标记创建一个基本的、功能完好的网站版本。该版本应在所有设备和浏览器上都可访问。
步骤3：使用CSS和JavaScript增强网站
在创建了网站的基本版本之后，使用外部CSS和JavaScript文件增强网站的布局、样式和行为。这些增强应该以不影响网站的基本功能和可访问性的方式添加。
步骤4：在不同设备和浏览器上测试网站
在不同设备和浏览器上测试网站，以确保其在所有平台上都可以访问和正常工作。这将有助于发现网站设计或功能方面的任何问题或限制。
步骤5：随时间监控和更新网站
随着新技术和设备的出现，监控和更新网站至关重要，以确保它对所有用户仍然可访问和正常工作。定期更新和维护将有助于确保网站在所有设备和平台上提供无缝的用户体验。
示例
在本示例中，我们将使用渐进增强原则构建一个导航菜单。
我们首先使用基本的HTML标记为导航菜单创建了一个无序列表，其中包含链接到网站上不同页面的链接。这为所有用户提供了一个简单易用的导航菜单。
接下来，我们使用CSS对导航菜单进行了增强，提供了更具视觉吸引力的设计。我们为链接的悬停状态和活动状态添加了不同的样式，这提高了在功能更强大的浏览器上使用的用户的体验。
之后，我们使用JavaScript为导航菜单添加了下拉菜单，允许用户直接从菜单访问子页面。这为功能更强大的设备和浏览器上的用户提供了更加吸引人的用户体验。
最后，我们确保导航菜单对包括残疾人或使用辅助技术的用户在内的所有用户都可访问。我们为菜单添加了键盘导航，允许用户使用 ‘Tab’ 键浏览菜单。
通过遵循这些渐进增强原则，我们可以构建一个为所有用户提供简单易用的用户体验的导航菜单，同时为功能更强大的设备和浏览器上的用户提供增强的功能和设计。
<html>
<head>
<style>
nav ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav a {
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
}
nav a:hover {
background-color: #555;
}
nav ul ul {
position: absolute;
top: 10px;
background-color: #333;
display: none;
}
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul a {
padding: 10px;
}
nav ul li:hover>ul {
display: block;
}
</style>
</head>
<body>
<nav>
<ul>
<li> <a href="#"> Home </a> </li>
<li> <a href="#"> About Us </a> </li>
<li> <a href="#"> Services </a>
<ul>
<li> <a href="#"> Service 1 </a> </li>
<li> <a href="#"> Service 2 </a> </li>
<li> <a href="#"> Service 3 </a> </li>
</ul>
</li>
<li> <a href="#"> Contact Us </a> </li>
</ul>
</nav>
<script>
// keyboard navigation
document.addEventListener('keydown', function(event) {
let nav = document.querySelector('nav');
let focusableElements = nav.querySelectorAll('a[href], button');
let focusedElement = document.activeElement;
if (event.keyCode === 9) {
if (event.shiftKey) {
if (focusedElement === focusableElements[0]) {
focusableElements[focusableElements.length - 1].focus();
event.preventDefault();
}
} else {
if (focusedElement === focusableElements[focusableElements.length - 1]) {
focusableElements[0].focus();
event.preventDefault();
}
}
}
});
// dropdown menus for more capable browsers
if ('querySelector' in document && 'addEventListener' in window) {
let nav = document.querySelector('nav');
if (nav) {
let navLinks = nav.querySelectorAll('li > a');
for (let i = 0; i < navLinks.length; i++) {
let subMenu = navLinks[i].parentNode.querySelector('ul');
if (subMenu) {
navLinks[i].addEventListener('click', function(event) {
event.preventDefault();
this.parentNode.classList.toggle('open');
});
navLinks[i].addEventListener('keydown', function(event) {
if (event.keyCode === 13) {
event.preventDefault();
this.parentNode.classList.toggle('open');
}
});
subMenu.addEventListener('keydown', function(event) {
if (event.keyCode === 9 && event.shiftKey) {
if (document.activeElement === this.querySelector('a:first-child')) {
event.preventDefault();
navLinks[navLinks.indexOf(this.parentNode.querySelector('a'))].focus();
}
}
});
subMenu.addEventListener('keydown', function(event) {
if (event.keyCode === 9 && !event.shiftKey) {
if (document.activeElement === this.querySelector('a:last-child')) {
event.preventDefault();
navLinks[navLinks.indexOf(this.parentNode.querySelector('a'))].focus();
}
}
});
}
}
}
}
</script>
</body>
</html>
总体而言，渐进增强是一种有价值的网页设计方式，能够确保我们的网站具备可访问性、灵活性和未来兼容性。通过遵循渐进增强的核心原则，我们可以创建出在不同设备和平台上都良好运行，并为所有用户提供无缝的用户体验的网站。