Sidhuvud med pseudo-element

Som utvecklare försöker jag ofta effektivisera, både i mitt workflow och i den kod jag producerar. Detta kan vara att börja använda något verktyg som automatiserar en del i processen eller arbeta fram nya sätt att optimera kodfragment.

Jag stötte på Harry Roberts artikel Using the <body> element as a wrapper för ett drygt år sedan och gillade idén då den tar bort behovet av ett separat wrapper-element vars enda uppgift är anpassa bredden och centrera innehållet på sidan.

Nackdelen med tekniken är att element inte kan sträcka sig hela webbläsarens bredd utan är begränsade till body-elementets bredd, något som är vanligt för att till exempel lägga en enfärgad platta bakom för sidhuvud och sidfot.

För sidhuvudet finns ett par potentiella lösningar som att lägga en bakgrundsbild på HTML-elementet som sedan upprepas horisontellt. Förutom nackdelen med ytterligare en HTTP request för att hämta bilden får vi problem om sidhuvudet behöver ändra storlek, kanske för att fungera bättre på enheter med mindre skärmar.

En lösning på detta som jag utvecklat och använt på ett par projekt är att utnyttja pseudo element i CSS för att skapa en enfärgad platta och sedan positionera denna i sidans topp i förhållande till HTML-elementet och bakom body-elementet.

Nedan följer exempelkod för att få detta att fungera. Jag har också satt upp ett exempel på CodePen.

<!DOCTYPE html>
<html>

<body>
	<header>
		<h1>Sitename</h1>
	</header>
	
	<section>
		&nbsp;
	</section>
	
	<footer>
		&nbsp;
	</footer>
</body>

</html>
/*--- CSS ---*/
html {
	background-color: #eee;
}

body {
	width: 600px;
	margin: 0 auto;
}

body:before {
	content: '';
	height: 3em;
	position: absolute;
	left: 0;
	right: 0;
	z-index: -1;
	background-color: #000;
}

body > header {
	height: 3em;
	color: #fff;
	line-height: 3em;
}

Förutsättningen för använda detta är att psuedo elementet på body-elementet måste ha position: absolute och z-index: -1 och relatera till HTML-elementet. Med andra ord kan body-elementet inte ha position: relative vilket kan ställa till problem med z-index i äldre versioner av Internet Explorer eller om man vill positionera objekt inom body-elementet.

Förutom detta är stödet för denna teknik är ganska bra och det bör fungera smärtfritt i alla webbläsare med stöd för pseudo-element, det vill säga IE8+.

Publicerad:

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *