Artikel mit ‘CSS’ getagged

I will get nude

Donnerstag, 09. April 2009

Naked day 09 Heute ist zum vierten Mal CSS Naked Day und ich mache mit. Webseiten werden ohne Stylesheet, nur im reinen HTML-Markup dargestellt. Der Hintergrund der Aktion CSS Naked Day besteht darin, dass man in der Lage sein sollte, seinen Lesern durch den korrekten Gebrauch von XHTML und semantischem Markup Inhalte auch ohne schmückendes Beiwerk zugänglich zu machen. Ich denke, dass meine Inhalte auch ohne CSS zugänglich sind. Schön sieht das so allerdings nicht aus.

Tags:,
Veröffentlicht in Allgemein | Keine Kommentare »

The Art & Science of CSS kostenlos

Mittwoch, 26. November 2008

the art Science css

Sitepoint stellt The Art & Science of CSS zum kostenlosen PDF-Download. Den Downloadlink bekommt man nach Angabe einer Emailadresse, oder als Sitepoint-Follower bei Twitter. Das Buch hat 227 Seiten und ist in die 7 Kapitel Headings, Images, Backgrounds, Navigation, Forms, Rounded Corners und Tables unterteilt. Nach kurzem Anlesen freue ich mich jetzt auf eine informative und spannende Lektüre.

Tags:,
Veröffentlicht in Allgemein | Keine Kommentare »

Conditional Comments ohne zusätzliche http requests

Freitag, 07. November 2008

Agt Utilities 256 Wie ich letztlich schon beschrieben habe, werden Conditional Comments oft als Browserweiche benutzt. Mit ihnen ist es möglich browserspezifisch Dateien zu referenzieren und es sind halt oft die speziellen Stylesheets, die für die verschiedenen Versionen des Internet Explorers geladen werden. So weit, so schön. Der Nachteil an der Sache ist, dass dadurch jedesmal auch ein weiterer http request stattfindet. Warum das problematisch sein kann, möchte ich gerne in den nächsten Tagen thematisieren. Zunächst nur einmal soviel: zu viele http requests verlangsamen den Seitenaufbau, weil die Browser nur eine begrenzte Anzahl gleichzeitiger Connections zulassen.
Eine wirklich feine Art, dieses Problem zu umgehen und dabei weiterhin die Vorteile der Conditional Comments als Browserweiche zu nutzen, fand ich bei Paul Hammond:


If you use this HTML:

<!--[if IE ]>
  <body class="ie">
<![endif]-->
<!--[if !IE]>-->
  <body>
<!--<![endif]-->

with CSS that looks something like:

div.foo {
    color: inherit;
}
.ie div.foo {
    color: #ff8000;
}

Klasse Sache. Muss ich die Tage hier mal ein wenig umbauen.

Tags:,
Veröffentlicht in Allgemein | Keine Kommentare »

Conditional Comments

Sonntag, 26. Oktober 2008

Conditional Comments (CC) sind eine prima Sache, wenn es darum geht schnelle und flexible Browserweichen zu erstellen. Uns Webbastler stehen dazu einige Werte und Operatoren zur Verfügung. An Werten nutzen wir die verschiedenen Versionsbezeichnungen des Internet Explorers (IE 5, IE 5.0, IE 5.5, IE 6, IE 7).

Die Operatoren lassen zum Teil auch komplexere Ausdrücke zu:

Operator Beispiel Beschreibung
! [if !IE] NOT – der Nicht-Operator. Kehrt den nachfolgenden Ausdruck um. Das Beispiel schließt alle Versionen des Internet Explorers aus.
lt [if lt IE 5.5] Less Then – der Kleiner als Operator. Das Beispiel lässt nur den IE 5.0 zu.
lte [if lte IE 5.5] Less Then Equal- der Kleiner oder Gleich Operator. Das Beispiel lässt den IE 5.0 und den IE 5.5 zu.
gt [if gt IE 5.5] Greater Then – der Größer als Operator. Das Beispiel lässt den IE 6 und den IE 7 zu und schließt den IE 5.0 und IE 5.5 aus.
gte [if gte IE 5.5] Greater Then Equal – der Größer oder Gleich Operator. Das Beispiel lässt den IE 5.5, IE 6 und IE 7 zu. Lediglich der IE 5.0 wird ausgeschlossen.
() [if !(IE 5.5)] Subexpression Operator – Operator innerhalb eines Operators. Damit sind komplexere booleanische Ausdrücke möglich.
& [if (gt IE 5.0)&(lt IE 7)] AND – Der Und Operator. Das Beispiel lässt den IE 5.5 und den IE 6 zu.
| [if (lte IE 5.5)|(IE 7)] OR – Der Oder Operator. Das Beispiel schließt den IE 6 aus.
true [if true] Lässt immer durch.
false [if false] Schließt immer aus.

Es wird zwischen downlevel-hidden und downlevel-revealed unterschieden.

downlevel-hidden


Syntax: 	<!--[if expression]> Kommentar/Anweisung <![endif]-->
Beispiel: 	<!--[if gt IE 5]>
				<link href="schade.css" rel="stylesheet" type="text/css" media="screen" />
			<![endif]-->

Während wir die downlevel-hidden Comments gerne einsetzen, um den verschiedenen Internet Explorer Versionen ein eigenes- meist zuätzliches – Stylesheet anzubieten, gibt es für die downlevel-revealed Comments nicht ganz so offensichtliche Einsatzmöglichkeiten. Hierbei geht es eben darum etwas vor dem Internet Explorer zu verbergen.

downlevel-revealed

Die nachfolgende Syntax ist nicht valide!


Syntax: 	<![if expression]> Kommentar/Anweisung <![endif]>
Beispiel:	<![if !IE]> nix für IEs <![endif]>

Die valide Syntax lautet:


Syntax: 	<!--[if expression]>--> Kommentar/Anweisung <!--<![endif]>-->
Beispiel:	<!--[if !IE]>--> nix für IEs <!--<![endif]>-->

Tags:, ,
Veröffentlicht in Allgemein | 1 Kommentar »

Die Eigenschaft content zur Darstellung des Linkziels

Montag, 20. Oktober 2008

Für Verzeichnisse, Linksammlungen und nicht zuletzt für das Druckstylesheet: Mit der Eigenschaft content und der Pseudoeigenschaft after ist es ohne Markup möglich, das Linkziel darzustellen.


a.clink:after {
   	content: " (" attr(href) ") ";
   	color: #5C1;
	font-size: 0.78em;
}

So sieht’s aus.

Ausgedruckt per passendem Print-Stylesheet erscheint dann hinter dem Anchor Text (Verweistext) die Url, die ansonsten nicht sichtbar wäre. Die Sache funktioniert nicht im IE, der content ignoriert und folglich nur den Anchor Text darstellt.

Tags:
Veröffentlicht in Allgemein | Keine Kommentare »

Webmontag am 03.11. in Dortmund

Mittwoch, 15. Oktober 2008

Michael Jendryschik und Nicolai Schwarz organisieren am 03. November den Webmontag in Dortmund. Die Themen Mikroformate und Twitter interessieren mich beide und auf beiden Gebieten habe ich Lücken. Von daher passt’s also prima. Die Teilnehmerliste präsentiert sich übersichtlich und das finde ich gar nicht mal schlecht. Sehr wahrscheinlich bleibt es dann nicht nur beim sympathischen Motto “Ankommen, Tach sagen …”, sondern man hat die Chance zu weitergehenden Gesprächen. Details über Ort, Zeitpunkt und Ablauf fndet man im Beitrag auf Michaels Blog.

Leider ist es bislang zu keinem 2ten Webmontag in Bochum gekommen, was seinerzeit ein nettes Treffen war. Schön, dass ich jetzt mitbekommen habe, dass die werte Nachbarstadt in die Bresche springt *g*
Ich habe mich mal als Vielleicht-Teilnehmer eingetragen, aber es kristallisiert sich heraus, dass ich den Termin halten kann. Fein, da bin ich mal gespannt. Ein Paar Kollegen kommt vielleicht mit.

Tags:,
Veröffentlicht in Allgemein | Keine Kommentare »

Clearing floats

Dienstag, 14. Oktober 2008

Um zu erreichen, dass ein float innerhalb eines Containers von diesem eingeschlossen wird, gibt es mehrere Methoden. Für mich etwas unverständlich wird das Thema zum Teil lebhaft und mit nahezu missionarischem Eifer diskutiert. Ich möchte die mir bekannten CSS-Techniken hier einmal kurz vorstellen, werde das aber weitestgehend wertfrei halten. Ich habe alle Techniken schon benutzt und einen klaren Favoriten habe ich eigentlich nicht.

Markup method: Clearing floats durch zusätzliches Markup

Wie der Name schon sagt, ist das keine reine CSS-Technik. Man erzeugt zusätzlichen, für das Layout bedeutungslosen Code.

HTML


<div class="container">
	<div class="float">float</div>
	<p>Außerhalb des floats</p>
	<div class="clear"></div>
</div>

CSS


div.container {

}

div.float {
	float: left;
	width: 30%;
}

div.clear {
	clear: both;
	height: 0;
}

Für Puristen ist das nichts. Der Vorteil dieser Methode liegt aber in ihrer Übersichtlichkeit. Man kann sehr leicht Fehler vermeiden oder nachvollziehen.

Aslett/PIE Method: Clearing Floats durch Generierung von Content

Die Idee: Durch die Pseudoklasse :after generiert man Inhalt, dem man ein clear:both zuweist. Man muss noch ein “wenig” basteln, um die Methode crossbrowserfähig zu bekommen. Zudem möchte man den generierten Inhalt auch nicht sehen. Der aktuelle Stand von Tony Asletts Methode sieht 2 Stylesheets vor, wobei das zweite den Internet Explorer betrifft und per conditional comment vor den anderen Browsern (inkl. MAC/IE) verborgen wird.

HTML


<div class="clearfix container">
	<div class="float">float</div>
	<p>Außerhalb des floats</p>
</div>

Allgemeines CSS


.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

/* for IE/Mac */
.clearfix {
	display: inline-block;
}

CSS für IE über conditional comments


.clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
}

Ich bin nach wie vor beeindruckt von der Cleverness dieser Methode.

Float (Nearly) Everything: Clearing unnötig wenn (fast) alles floated

Steve Smith von orderedlist fand 2004 heraus, dass man ein float nicht clearen muss, wenn das Elternelement ebenfalls als float definiert wurde. Eine ausführliche Beschreibung seiner Methode findet sich auf seiner Seite.

Overflow Methode

Eine attraktive Methode. Man weist dem Elternelement das Attribut overflow zu. Hierbei nutzen manche den Wert auto, andere verwenden lieber hidden.

HTML


<div class="container">
	<div class="float">float</div>
	<p>Außerhalb des floats</p>
</div>

CSS mit overflow:auto


div.container {
	overflow: auto;
	width: 100%; /* gibt IE hasLayout */
}

div.float {
	float: left;
	width: 30%;
}

CSS mit overflow:hidden


div.container {
	overflow: hidden;
	width: 100%; /* gibt IE hasLayout */
}

div.float {
	float: left;
	width: 30%;
}

Tags:,
Veröffentlicht in Allgemein | Keine Kommentare »