Wie CSS mit Kommentar-Hacks richtig einbinden?

[Projecta]

Hallo,

ich möchte gerne eine basic.css mit diversen Reset-Angaben und grundlegenden Utility-Klassen einbinden.

Dabei tritt nun das Problem auf, dass einige Hacks so gestrickt sind, dass eine genaue Abfolge auch von Comment-Tags erforderlich ist.

zB um dem IE-mac Code vorzuenthalten:
CSS:

/* hide from ie-mac \*/
das hier wird vom IE-mac nicht gelesen
/* end hide ie-mac */

Nun kann ich die basic.css in den Stylesheets zwar einlesen, dann werden aber die Kommentare nicht wie gewünscht übernommen.
Auch nachträgliches Bearbeiten hilft nicht weiter, da TYPOlight in Eigenregie Kommentare wieder löscht bzw. ändert.

Wenn ich das Stylesheet direkt im Header einbinde hat das zur Folge, dass die basic.css zwar komplett eingebunden wird, jedoch erst nach den restlichen Stylesheets - geht also gar nicht.

Wie ist es mir möglich eine CSS-Datei so einzubinden, dass sie in der Reihenfolge noch vor den restlichen Stylesheets gelesen wird?

Vielen Dank für eure Hilfe im Voraus.

Schöne Grüße
Projecta

[xchs]

Hallo Projecta,

Wie ist es mir möglich eine CSS-Datei so einzubinden, dass sie in der Reihenfolge noch vor den restlichen Stylesheets gelesen wird?

Dafür müsstest Du allerdings in das Standard-Seiten-Template ("fe_page.tpl") eingreifen, was aber nicht besonders empfehlenswert ist. Gründe, welche dagegen sprechen, findest Du hier im Forum zuhauf.

Zum Problem mit dem Einlesen der "Kommentare": Du kannst ja mal im TYPOlight Ticketsystem einen entsprechenden Request machen und dabei Deine Vorstellungen darlegen. Voraussetzung dafür wäre allerdings, dass Du die Problematik auch in der Online-Demo nachstellen kannst.

[Projecta]

hi,

danke - manchmal liegt die Antwort direkt vor der Nase und du siehst sie nicht...

Da ich sowieso ein eigenes Template verwende kein Problem.

Mensch, ich bin heut wohl schon zu müde - Danke nochmals.

[xchs]

danke - manchmal liegt die Antwort direkt vor der Nase und du siehst sie nicht...
Da ich sowieso ein eigenes Template verwende kein Problem.
Mensch, ich bin heut wohl schon zu müde - Danke nochmals.

Kein Problem. Bitte halt dann auch darauf achten, dass das Seitentemplate bei Updates von TYPOlight entsprechend selbst überarbeitet werden muss (sofern nötig)

[lucina]

Dabei tritt nun das Problem auf, dass einige Hacks so gestrickt sind, dass eine genaue Abfolge auch von Comment-Tags erforderlich ist. zB um dem IE-mac Code vorzuenthalten:

Ich musste gerade zweimal lesen - IE for Mac ist doch wohl ein akademisches Problem, oder nicht? Ich habe eben mal meine Serverstatistiken für gute zwei Jahre zurückverfolgt, und der letzte User mit IE Mac kam bei mir im Oktober 2007 rein ...

Ohnehin sind ja die Browserhacks aus gutem Grund inzwischen aus der Mode gekommen, seitdem Tantek Celik seinen eigenen Code kritisch sieht, man alle Problemfälle von M$ inzwischen zielsicher via Conditional Comments behandeln kann und es in TYPOlight obendrein noch immer die Möglichkeit gibt, ein Stylesheet für die wirklich schwierigen Fälle im Bereich 'eigener Code' randvoll mit obskuren Selektoren zu befüllen und an beliebiger Stelle im Seitentemplate auszugeben ...

Rein interessehalber also: wozu brauchst Du das überhaupt?

Carolina.

[Projecta]

Hallo Carolina,

primär gehts mir um das gute alte clearen von floats.
Dazu verwende ich die imo am meisten verbreitete Technik:

CSS:

/* .clearfix-class wraps enclosing block element around inner floated elements */
.clearfix:after	{ content: "."; display: block; visibility: hidden; overflow: hidden; clear: both; height: 0.1px; font-size: 0; line-height: 0.0; }
.clearfix 		{ display: inline-block; }
/* hides from ie-mac \*/
* html .clearfix				{ height: 1%; }
*:first-child+html .clearfix	{ height: 1%; }
.clearfix	 					{ display: block; }
/* end hide from ie-mac */

Ich weiss zwar, dass es auch noch andere Ansätze geben soll, doch funktionieren die ebenfalls quer durch alle Brower einwandfrei?
Den ie-mac-Hack wegzulassen ist wahrscheinlich so wie du sagst heutzutage kein Verbrechen mehr - aber kostet ja auch nix, die 3 übrig gebliebenen ie-macler mitzunehmen...

Irgendwie denk ich mir halt, dass die Methoden, die große und erfolgreiche Webseiten einsetzen, schon irgendwie richtig sind, bin aber für jeden guten Vorschlag offen.

Schöne Grüße
Projecta

(ps: i love Coraline ... )

[lucina]

Also ohne Template-Änderungen einfach so:

/* Der Kern von Clearfix */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  font-size: 0; 
  height: 0;
  visibility: hidden;
}
<!--[if lte IE 7]>
<style type="text/css">
  .clearfix { height: 1%; }   /* oder { zoom: 1; } */
</style>
<![endif]-->

Vor allem die direkte Einbindung im *.tpl läge mir ja eher schwer im Magen ... und valide ist es obendrein.

Carolina.

[Projecta]

Hm,

du hast mich überzeugt ...

Man will halt immer alle irgendwie glücklich machen und auf Nummer sicher gehn - aber zeitgerecht scheint das heut wohl nicht mehr zu sein.

Den ie-mac werd ich einfach aus der Liste streichen und nur noch den Kern wie von dir beschrieben anwenden.

Das Einbinden in die tpl würd mir kein Kopfzerbrechen bereiten, denn ob ich jetzt die CSS irgendwo in meinem file-ordner liegen hät und über link rel= hole oder aber direkt importiere macht ja keinen Unterschied, da ich sowieso bei Tl-Updates auf grobe Änderungen in den Templates fe_page, nav_default und mod_login_1cl achten muss.

However, man sollte immer mit der Zeit gehen, und moderne Browser kommen wohl ohne die alten Hacks aus. CC und moderner Minimalismus - ich werd versuchen, mich daran zu halten.

Auch werd ich in Zukunft mal die angeblich aktuellst genialste Methode zum Clearen von Floats, nämlich das Setzen des parent-divs auf 'overflow:auto' testen. Mal sehn, wie sich das macht ( http://www.sitepoint.com/blogs/2005/...ing-of-floats/ ) ...

Danke
Projecta