Progressive enhancement is the fundamental base methodology for front end development. It is a layered approach to Web Design, which is put effort on the content rather then the format.
These layers are depended on previous one, JavaScript needs CSS and CSS needs HTML, because your content is in the bottom layer HTML, so even you remove the JavaScript and CSS the most important information still be there.
The first step in progressive enhancement is to lay the content out, structured in a meaningful way with HTML.
<!doctype html>
<html>
<head>
<title>Great Home Page</title>
<meta charset="utf-8">
</head>
<body>
<div id="header ">
<h1><a href="/">Great Home Page</a></h1>
</div>
<div id="nav ">
<ul>
<li><a href="/about">About</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/staff">Staff</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
<div id="main ">
[content here]
</div>
<div id="footer ">
<p>© 2012 Awesome Site</p>
</div>
</body>
</html>In this example, you can see that you have a basic document with a header, navigation, content area, and footer. As far as structuring a document, this is right where you want to be, not thinking about how this HTML will render in a browser, because it doesn’t matter at this point.
<!doctype html>
<html>
<head>
<title>Great Home Page in HTML5</title>
<meta charset="utf-8">
</head>
<body>
<!-- replacing DIV with the new HEADER element -->
<header id="header" role="banner">
<h1><a href="/">Great Home Page in HTML5</a></h1>
</header>
<!-- replacing DIV with the new NAV element -->
<nav id="nav " role="navigation ">
<ul><li><a href="/about">About</a></li>
<li><a href="/articles">Articles</a></li>
<li><a href="/staff">Staff</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<!-- replacing DIV with the new ARTICLE element -->
<article id="main" role="main">
[content here]
</article>
<!-- replacing DIV with the new FOOTER element -->
<footer id="footer" role="contentinfo">
<p>© 2012 Awesome Site</p>
</footer>
</body>
</html>New elements in HTML5 such as header , nav , section ,article , aside, and footer open up opportunities for designers to further describe the content within an element.
After your document is laid out in a meaningful structure, you can start accessing that structure with CSS and applying the design. This can be the most important layer in progressive enhancement because of how flexible it is. Knowing CSS will help you write better JavaScript.
Keeping your CSS in a completely separate file and linking it to your HTML document is, by a wide margin, the most desirable and best way to apply design to a site.
It is best to keep all your CSS in one file, even though you could, in theory, attach as many as you want. Linking any asset (CSS file, JavaScript file, image) to an HTML document fires off what is called an HTTP request , which just means the browser has to go get the asset and download it before it’s view-able to the user.
#nav {
background:#c00;
padding:10px;
overflow:hidden; }
#nav ul {
list-style:none;
margin:0;
padding:0; }
#nav li {
float:left; }
#nav li a {
padding:0 10px; color:#fff; }Everything must be fully functional without JavaScript.In CSS, you apply style and in JavaScript you apply JavaScript and behavior. We’re going to talk about three ways:
■ Inline JavaScript
■ Embedded JavaScript
■ External JavaScript
But we only recommend ‘External JavaScript’
Making a JavaScript file external isn’t that different from doing the same to a CSS file. The script element you learned about in the previous section has an available attribute called src (source), which allows you to pull an external JavaScript file into an HTML document and execute the containing functions.
<script src="js/script.js"></script>
</body>
</html>We will use the bottom of the document to ensure that our JavaScript is the last item loaded. Because we used progressive enhancement, and our site is fully functional without JavaScript,
Content of script.js
/*
The Function,
define the thing you want to happen
*/
function doTheThing(){
alert("This is the thing! ");
}
/*
The Variable,
get the element you want to do it on
*/
var elem = document.getElementById("about");
/*
The Event Listener,
set up something to listen for the event you want, then execute the function
*/
elem.addEventListener("click", doTheThing, false);