zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Clearfix / CSS Reset / CSS Hacks 2016

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.08.2016, 22:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.08.2016
Beiträge: 5
Elma befindet sich auf einem aufstrebenden Ast
Standard CSS Clearfix / CSS Reset / CSS Hacks 2016

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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.08.2016, 10:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.056
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.08.2016, 11:08
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.379
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #4 (permalink)  
Alt 13.08.2016, 11:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.08.2016
Beiträge: 5
Elma befindet sich auf einem aufstrebenden Ast
Standard

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;
            
}

Geändert von Elma (13.08.2016 um 11:46 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 13.08.2016, 12:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.056
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 13.08.2016, 14:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.08.2016
Beiträge: 5
Elma befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 13.08.2016, 14:37
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.056
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 14.08.2016, 02:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.056
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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

Geändert von MrMurphy (14.08.2016 um 11:18 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:50 Uhr.