body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.article-section {
margin-bottom: 20px;
}
.code-example {
background-color: #f4f4f4;
border-left: 3px solid #ccc;
padding: 15px;
font-family: ”Courier New”, Courier, monospace;
overflow-x: auto;
}
.open-ai-heading {
display: none;
}
Vad är Progressiv Förstärkning?
Progressiv förstärkning är en designstrategi för webbutveckling som betonar bygga en grundläggande nivå av tillgänglighet och funktionalitet innan man lägger till avancerade funktioner och stilar. Metoden börjar med enkel HTML, vilket gör det möjligt för webbsidor att vara funktionella även i äldre webbläsare eller under nätverksbegränsningar.
Struktur med HTML
I progressiv förstärkning börjar man alltid med en solid HTML-struktur. Här är ett enkelt exempel på en grundläggande webbstruktur:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="UTF-8">
<title>Min Grundläggande Webbplats</title>
</head>
<body>
<header>
<h1>Välkommen till Min Webbplats</h1>
</header>
<nav>
<ul>
<li><a href="#hem">Hem</a></li>
<li><a href="#om">Om</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>
<main>
<section id="hem">
<h2>Hem</h2>
<p>Välkommen till vår fantastiska sajt!</p>
</section>
</main>
<footer>
<p>© 2023 Min Webbplats</p>
</footer>
</body>
</html>
Det här exemplet visar grundläggande HTML-struktur; rubriker, navigation och sidvisning.
Användning av CSS för Förbättrad Design
När grundstrukturen är på plats används CSS för att förbättra designen och användarupplevelsen. Här är en grundläggande CSS-exempel för att lägga till stil:
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
margin: 0;
padding: 0;
}
header, nav, main, footer {
margin: 20px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
nav ul {
list-style-type: none;
padding: 0;
}
nav li {
display: inline;
margin-right: 10px;
}
a {
text-decoration: none;
color: #008cba;
}
a:hover {
text-decoration: underline;
}
Med dessa CSS-stilar förbättras användargränssnittet samtidigt som grundläggande funktionalitet bibehålls.
Tillägg av JavaScript för Interaktivitet
Den sista aspekten är att lägga till JavaScript för att förbättra användarinteraktion, utan att äventyra den grundläggande funktionaliteten i en webbläsare som inte stöder JavaScript. Här är ett exempel:
document.addEventListener('DOMContentLoaded', function() {
let navLinks = document.querySelectorAll('nav a');
navLinks.forEach(function(link) {
link.addEventListener('click', function(event) {
alert('Du klickade på ' + link.textContent);
});
});
});
Detta JavaScript-exempel lägger till en klickhanterare till navigationslänkarna, vilket ger användarna ett enkelt larm när länkar klickas.