CSS Clearfix / CSS Reset / CSS Hacks 2016

Elma · #1 (**permalink**) 12.08.2016, 22:40

Moin.

Ich bin gerade dabei, eine Webseite zu erstellen und beschäftige mich daher gerade mit CSS. Ich lese verschiedene Webseiten zu dem Thema und gehe ein paar Tutorials durch.

Oft stolpert man über den Begriff "Clearfix" bzw "CSS Reset". Vor Allem in Quellen die schon ein paar Jahre alt sind, bzw sich auch mit dem Thema "Abwärtskompatibilität" befassen und dann auch noch sogenannte CSS Hacks mit dazu nehmen.

Nun ist meine Frage, ob in der heutigen Zeit solche Clearfix, CSS Reset oder CSS Hacks überhaupt noch notwendig sind. Oder zumindest in einer Form wie es vor 5 Jahren wohl noch üblich war.

Momentan arbeite ich komplett ohne Clearfix oder CSS Reset oder CSS Hacks. Bisher konnte ich keine Nachteile erkennen.

Oftmals geht es in den Quellen speziell um den Internet Explorer, für den ich aber keine große Extrawurst mehr machen will.
Der Internet Explorer wird eh durch Edge abgelöst. Lediglich den IE11 würde ich noch halbwegs berücksichtigen wollen.
Ansonsten will ich meine Ressourcen und Zeit nicht mit altem Kram vergeuden, sondern mich ums wesentliche kümmern.

Also ist die Frage: Wenn man "den alten Kram" ignoriert, braucht man in der heutigen Zeit überhaupt noch CSS Clearfix, CSS Reset und CSS Hacks?

Gibt es vielleicht einen aktuellen und kompakten Beispiel Code, den man einfach pauschal "zur Sicherheit" einfügen kann, ohne sich groß damit befassen zu müssen? Ich will aber auch kein "CSS Reset Monster" einbauen wo dann der Reset größer ist als mein eigentliches Layout.

MrMurphy · #2 (**permalink**) 13.08.2016, 10:41

Hallo

Zitat:

Also ist die Frage: Wenn man "den alten Kram" ignoriert, braucht man in der heutigen Zeit überhaupt noch CSS Clearfix, CSS Reset und CSS Hacks?

Das betrachtest du leider viel zu undifferenziert.

Clearfix

Clearfix steht im direkten Zusammenhang mit float.

Clearfix ist ein Überbegriff für verschiedene Lösungen, mit denen floats "eingeschlossen" werden können. Clearfix sagt also nicht aus, welche der vielen Möglichkeiten dafür verwendet wird. Es gibt also nicht das Clearfix, sondern viele unterschiedliche.

Früher wurde float mangels besserer Alternativen zum Layouten missbraucht. Ähnlich wie vor float Tabellen. Seit der hinreichenden Unterstüztung von Flexbox ist das nicht mehr notwendig.

float hat aber aktuell und zukünftig seine Berechtigung dafür eingesetzt zu werden, wofür es gedacht ist. Dann muss auch gecleart werden, wo bei Clearfix häufig sinnvoller ist als die direkte clear-Anweisung.

Also ja: Clearfix ist auch zukünftig sinnvoll, auch wenn float insgesamt weniger verwendet werden wird.

CSS Reset

Auch CSS Reset ist ein Oberbegriff, der unterschiedliche Lösungen zusammenfasst. Das ist bereits seit über 10 Jahren veraltet und wurde durch CSS Normalisierungen abgelöst.

Dabei ging es weder bei Resets noch bei Normalisierungen ausschließlich darum nur die unterschiedlichen Browservorgaben anzupassen. Sondern auch Vorgaben zu ändern, die bei allen Browsern zwar gleich sind, aber in der Praxis eher nicht gewünscht sind.

Resets und Normalisierungen waren auch immer als Schablone oder Grundlage gedacht, die jeder Webseitenersteller individuell anpassen oder überschreiben sollte.

In dem Sinn sind entschlackte und individuell angepasse CSS Normalisierungen immer noch sinnvoll. Um unterschiedliche Browser-Vorgaben aneinander anzupassen sind sie aber nur noch in Ausnahmen erforderlich.

CSS Hacks

Das ist ein sehr schwammiger Begriff. Für eine Beurteilung müsste erst mal geklärt werden, was du darunter verstehst.

So wie ich CSS Hacks verstehe beschreiben sie Lösungen für Layout- und Darstellungswünsche, die mit der vorgesehenen Verwendung von CSS nicht machbar sind.

Für mich sind mit den neuen Möglichkeiten von CSS3 (auch im Zusammenspiel mit SVG) die meisten CSS Hacks überflüssig geworden. Das werden Andere anders sehen und haben genau so recht wie ich.

Zitat:

Gibt es vielleicht einen aktuellen und kompakten Beispiel Code, den man einfach pauschal "zur Sicherheit" einfügen kann, ohne sich groß damit befassen zu müssen?

Nein, einen optimalen Code gibt es nicht. Jeder Beispielcode kann und sollte individuell angepasst werden.

Gruss

MrMurphy

Thielo · #3 (**permalink**) 13.08.2016, 11:08

Clearfix: Ja, warum auch nicht, 3 Zeilen CSS die helfen und niemandem wehtun.

CSS-Reset: auch hier ein Ja. Gestern erst noch gelesen, wie jemand einem Container im Body 100% Breite gegeben hat, und sich wundert, der Container würde nicht 100% breit gehen
Hier nutze ich: normalize.css

CSS-Hacks: Hab ich in der Form wie wir sie "damals" benutzt haben schon ewig nicht mehr gesehen. Lediglich Polyfills und eventuell zusätzliches CSS für Browser die neuere Regeln nicht verstehen, aber das sind keine Hacks.

Elma · #4 (**permalink**) 13.08.2016, 11:43

Danke.
In vielen Tutorials ist das etwas unklar beschrieben oder sie sind aus einer Zeit, wo man noch viel mit Workarounds arbeiten musste.

Ich habe versucht, Workarounds so gut es geht zu vermeiden.
Momentan ist es ein Float Layout.
Es ist mit 3 Spalten und Zentrierung gemacht, dazu eine feste Kopfzeile.
Wäre es sinnvoller, auf Flexbox zu gehen?

Hier mal, was ich bis jetzt habe.

HTML:

HTML-Code:

<!doctype html>

<!-- V 0.1 -->

<html lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
   	<meta name="viewport" content="width=device-width, initial-scale=1.0">
   	<meta name="description" content="testseite">
   	<title>Test-Webseite</title>
   	<link type="text/css" rel="stylesheet" media="screen" href="layout.css" />
</head>

<body>

	<div id="header">
	<p>Mein erstes Test-Layout</p>
	</div> 

	<div id="wrapper">
		<div id="spacer"></div>


	
		<div id="nav" role="navigation">
		Steuerung
			<ul>
      			<li><a href="#">Seite 1</a></li>
      			<li><a href="#">Seite 2</a></li>
      			<li><a href="#">Seite 3</a></li>
      			<li><a href="#">Seite 4</a></li>
  			</ul>


		</div>

		<div id="sidebar" role="navigation">
		sidebar
		</div>

		<div id="main" role="main">
			
			<div class="article">
   			<h1>Überschrift des Artikels</h1>
   			<img src="blau.jpg" /> 
   			<p>
   	    	Artikel Text
   			</p>    
			</div>

			<div class="article">
   			<h1>Überschrift des Artikels</h1>
   			<img src="blau.jpg" /> 
   			<p>
   	    	Artikel Text
   			</p>    
			</div>
		
		</div>

		<div id="spacer"></div>

		<div id="footer">
		<p>Footer</p>
		</div>

	</div>


</body>
</html>

CSS

HTML-Code:

/*
    CSS Layout v 0.1
*/


* {
    margin: 0px;
    padding: 0px;
    border: none;
}

html {
    background-color: #F0F0E9; 
    color: #000; 
    font-family: Verdana, Helvetica, Arial, sans-serif;
    text-align: left;
    font-weight: normal;
    
    /*background-image: url("grid.png");
    background-repeat: repeat;*/

    height: 100%;
}

body {
    min-width: 600px;
    width: auto;
    height: 100%;
   
}

html, body 
{

    
    width:100%;
    height:100%;

}

#spacer {
    width:100%;
    height:100px;  
}

/*Kopf*/
#header {
    margin: 0;
    background-color: #FFD700;
    
    width:100%;
    height:78px;
    border-color: #DAA520;
    border-bottom-style: solid;
    border-width: 2px;

    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
}

/*Hauptnavigation*/
#nav {
    float:left;
    position: fixed;*/
    margin: 0;
    width: 100px; 
   
	background-color: #F0E68C;
	border-color: #DAA520;
    border-style: solid;
    border-width: 2px;

}

#nav ul li {
    margin: 2px;
    /* background-color:#FFFACD;   */
    }
  
/* Linkes Menue */
#sidebar {
    float:right;
    
    margin: 0;
    width: 100px; 
    background-color: #F0E68C;
    border-color: #DAA520;
    border-style: solid;
    border-width: 2px;
}

/* Hauptbereich */
#wrapper {

    position:relative;
	
    max-width: 1800px;
    width:1200px;
    min-width: 600px;

    min-height: 100%;

	
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
    margin-right: auto;

    padding-top: 0px;
    padding-bottom: 0px;
   
}

#main {
	margin-left: 155px;
    margin-right: 155px;
    overflow: auto;
}

/*Artikel*/
.article {
    margin-bottom: 20px;
  	border-color: #DAA520;
    border-style: solid;
    border-width: 2px;
    background-color: #FFF;


}

#footer {
    position: absolute;
    bottom: 0px;
    width:100%;
    height:25px;
            
}

MrMurphy · #5 (**permalink**) 13.08.2016, 12:05

Hallo

Zitat:

Wäre es sinnvoller, auf Flexbox zu gehen?

Ja. Wobei du dein Grundlagenwissen zunächst auf den aktuellen Stand bringen wolltest.

Gruss

MrMurphy

Elma · #6 (**permalink**) 13.08.2016, 14:03

Hi.

Ist der Code, den ich oben gepostet habe, nicht auf dem aktuellen Stand?

Es soll Floating Layout sein. Ich hab da schon versucht, die Workarounds für ältere Browser heraus zu lassen. Wie z.B. den Min-Height Workaround den man oft sieht:

HTML-Code:

div { 
   min-height: 500px; 
   height:auto !important; 
   height: 500px; 
}

Dennoch war es etwas Tricky, den Footer zu positionieren, so dass er immer unten ist, auch wenn die Seite das Fenster nicht ausfüllt.

Natürlich könnte ich auch sagen, ich steig direkt auf Flexbox ein und fange nicht noch groß mit einem Floating Layout an, auch wenn das in vielen CSS Tutorials immer noch Stand der Dinge ist

MrMurphy · #7 (**permalink**) 13.08.2016, 14:37

Hallo

Das Grundproblem dir zu helfen ist das du nur "entweder - oder" beziehungsweise "schwarz-weiß" siehst.

Zitat:

Ist der Code, den ich oben gepostet habe, nicht auf dem aktuellen Stand?

Nein.

Zitat:

Es soll Floating Layout sein.

Es ist unsinnig bestimme Lösungen verwenden zu wollen und die dann krampfhaft anzupassen.

Sinnvoller ist zunächst zu bestimmen, was man erreichen will und dann zu schauen, welche Lösung dafür am geeignetsten ist.

Zitat:

Ich hab da schon versucht, die Workarounds für ältere Browser heraus zu lassen.

Es ist unsinnig auf in der Praxis nicht mehr verwendete Browser Rücksicht zu nehmen. Zumal für mit korrekten HTML und CSS erstellte Webseiten spätere Fallbacks kein Problem darstellen.

Zitat:

Wie z.B. den Min-Height Workaround den man oft sieht:

Oft? So einen Workaround kenne ich nicht und er ist unsinnig.

Wenn Webseiten mit sauberem, aktuellem HTML und CSS erstellt werden sind Workarounds überhaupt nicht notwendig.

Zitat:

Dennoch war es etwas Tricky, den Footer zu positionieren, so dass er immer unten ist, auch wenn die Seite das Fenster nicht ausfüllt.

Nicht mit Flexbox.

Wobei Sticky Footer in der Praxis überhaupt nicht gebraucht werden.

Zitat:

Natürlich könnte ich auch sagen, ich steig direkt auf Flexbox ein

Das ist zu eingeschränkt. Lerne die Grundlagen von aktuellem HTML und CSS. Wenn du dich nur mit Teillösungen beschäftigst setzt du dir selbst unnötige Grenzen.

Gruss

MrMurphy

MrMurphy · #8 (**permalink**) 14.08.2016, 02:12

Hallo

Zitat:

Hier mal, was ich bis jetzt habe.

Ich habe aus deinem Quelltext mal eine aktuelle responsive Webseite mit einem Sticky Footer erstellt. Die Höhe von header und footer passen sich ihrem jeweiligen Inhalt an. Höhenangaben (height) sind deshalb für beide nicht notwendig und stören sogar.

Zunächst deine Datei:

Quelltext Elma

Ich habe mir eine Vorlage erstellt, die für über 90% aller Layouts verwendet werden kann. Es handelt sich um ein sogenanntes Holy Grail Layout, dem ich etwas Inhalt hinzugefügt habe:

Vorlage Holy Grail Layout

Dann erfolgen die Anpassungen an das durch deinen Quelltext erkennbare Layout:

Seite mit Elmas Layout

Zum Schluß wird noch ein Fallback für ältere IE ab dem IE7 hinzugefügt. In allen anderen Browsern, auch dem IE11, sind natürlich keine Änderungen sichtbar. Um das Fallback anzuschauen muss die Seite also in einem älteren IE aufgerufen werden.

Achtung: Der Dokumentmodus im IE11 und neueren verhält sich teilweise anders als originale IE 7, 8 und 9. Der Dokumentenmodus ist nur eine Emulation. Um das Fallback korrekt zu testen muss die Website deshalb in originalen älteren IE aufgerufen werden:

Seite mit Elmas Layout und IE Fallback

Noch ein Beispiel mit etwas mehr Text in header und footer ohne Änderungen im CSS um zu zeigen, wie sie sich ihrem Inhalt flexibel anpassen und nur so viel Platz beanspruchen, wie sie auch benötigen:

Mehr Text in header und footer

Zum Schluß noch ein eher praxisorientiertes Beispiel mit mehr Inhalt und gefloateten Grafiken, die durch ein Clearfix eingefangen werden, wie float aktuell sinnvoll in seiner ursprünglichen Aufgabe verwendet werden kann:

Mehr Inhalt mit Bildern, float und clearfix

Gruss

MrMurphy

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
mit JS CSS Hacks ansprechen	Camelrider	Javascript & Ajax	8	14.07.2009 10:04
CSS Tips & Tricks	Webnauts	Ressourcen	0	25.08.2006 23:04
CSS Hacks werden zum Problem für IE7	Floele	Offtopic	24	17.10.2005 11:31
[link] CSS hacks bzw. filter	new user	Ressourcen	0	12.01.2004 12:08