Kategorien
Stylesheets Webentwicklung

Multiple Backgrounds in CSS 3

CSS Programming Image

CSS3 erlaubt die Verwendung mehrerer Hintergrundbilder (multiple backgrounds). Dazu werden den entsprechenden CSS-Eigenschaften einfach mehrere durch Kommata von einander getrennte Werte übergeben.

Die Hintergrundgrafiken werden dabei in umgekehrter Reihenfolge, in der sie genannt werden, übereinander gestapelt, also die erste Grafik liegt ganz oben.

Damit man die neue Technik nutzen kann, muss man mehrere URLs, das Attachment und die Position des Bildes in die background– Anweisung schreiben.

id.multiple_backgroung {
	background:url(img1.jpg) no-repeat 0 0,
	url(img2.jpg) no-repeat right bottom,
	url(img3.jpg) no-repeat center center;
  • Zuerst kommt der flächendeckende Verlauf
  • wird die Grafik einer Fliege referenziert, die mittels no-repeat nur einmal angezeigt und links mittig positioniert
  • wird zum Schluss kommt eine Wolke, die mit repeat-x horizontal gekachelt wird.

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Hintergrund

Kategorien
Stylesheets Webentwicklung

Neue Möglichkeiten mit CSS 3

CSS Programming Image
box-sizing – ein alternatives Box-Modell

Mit der Eigenschaft box-sizing hält ein alternatives Box-Modell Einzug in CSS 3. Dieses soll die oben beschriebene Desginschwäche beseitigen, indem nach Aktivierung durch box-sizing:border-box die Angaben für width als Gesamtbreite interpretiert werden. Innenabstände und Rahmen werden von dieser Gesamtbreite subtrahiert.

Damit kann die Gesamtbreite direkt vorgegeben werden und die effektiv verbleibende Nutzbreite im Innenraum der Box wird vom Browser dynamisch festgelegt. Durch diese Änderungen haben padding und border keinen Einfluss mehr auf die Gesamtbreite einer Box, was den Umgang mit verschiedenen Einheiten und flexiblen Breiten enorm vereinfacht.

Dieses neue Box-Modell stellt keinen Ersatz, sondern lediglich eine Alternative dar. Zwischen dem alten Box-Modell von CSS 1 (box-sizing:content-box) und dem alternativen Modell von CSS 3 (box-sizing:border-box) kann beliebig umgeschaltet werden.

calc() – Rechnen innerhalb von CSS

Der aktuelle Entwurf für CSS 3 enthält noch einen weiteren interessanter Ansatz, dem zu Beginn beschriebenen Designproblem Herr zu werden. Dieser Ansatz sieht vor, dass es in Zukunft möglich sein wird, neben konkreten Größenangaben auch eine Rechenvorschrift zu übergeben. Ein Beispiel für zwei nebeneinander liegende flexible Boxen:

#left {
float:left;
padding: 0 1em;
border-right: 1px #888 dotted
width: calc( 30% - 2*1em - 1px );
}

#right {
float:right;
padding: 0 1em;
width: calc( 70% - 2*1em );
}

Durch die Möglichkeiten der neuen Funktion calc() ist es eigentlich egal, mit ob mit dem alten oder dem neuen Box-Modell gearbeitet wird. Durch die Rechenvorschrift können verschiedene Einheiten beliebig miteinander kombiniert werden. Für der Gestaltung von Boxen mit flexibler Breite steht damit gleich noch ein zweiter Lösungsansatz bereit.

Column – Spaltensatz mit CSS

Noch heute basieren viele Layouts auf Tabellenkonstrukten – dem Gestaltungsmittel der 90er Jahre des letzten Jahrhunderts. CSS 2 sieht keinen Spaltensatz vor und erfordert ein Umdenken des Designers bei der Layoutentwicklung.

Die Schwierigkeiten, die sich aus dieser Entscheidung des W3C ergeben, sind Webdesignern bestens vertraut. Nur sehr langsam haben sich moderne CSS-basierte Layouttechniken entwickelt, die dieses Manko des CSS-Standards mit zunehmend fehlerfreier Unterstützung der Browser vergessen lassen. In CSS 3 wird der allseits beliebte Spaltensatz über die Eigenschaft column nun endlich Einzug in den CSS-Standard finden.

#3col_container {
column-count: 3;
column-gap: 20px;
…
}

Über die Eigenschaften column-count wird die Anzahl der Spalten innerhalb eines Containers festgelegt. Der Wert für column-gap regelt den horizontalen Abstand zwischen den einzeln Spalten. Auf diese Weise wird die effektive Breite der Spalte durch den Browser ermittelt. Der Designer gibt lediglich die Anzahl der gewünschten Spalten vor. In erster Linie eignet sich diese Eigenschaft zur Aufteilung von Texten in mehrere nebeneinander liegende Spalten.

Ob die Flexibilität dieser Eigenschaft jedoch ausreicht, die mittlerweile recht hohen Ansprüche an CSS-basierte Spaltenlayouts zu erfüllen, um die derzeitigen Techniken ersetzen zu können, wird sich erst noch zeigen müssen.

Unabhängig davon können Sie sich auch schon heute ein Bild von den Möglichkeiten des CSS 3-Spaltensatzes machen, wenn Sie den folgenden Links mit dem Firefox Browser folgen, der die Eigenschaft bereits unterstützt.

Kategorien
Stylesheets Webentwicklung

CSS3 – Ausblick und ultimatives Fazit

CSS Programming Image

Einleitung

CSS3 ist eine Weiterentwicklung von Cascading Style Sheets, mit der du Websites schöner und dynamischer gestalten kannst. Es bietet neue Funktionen wie abgerundete Ecken, Schatten, Farbverläufe, Transparenz, benutzerdefinierte Schriftarten, Animationen und Layout-Optionen. Außerdem ermöglicht es, Websites für verschiedene Geräte anzupassen. Damit wird das Gestalten von Websites flexibler und spannender.

Auf Grund der bisher ungelösten Probleme für den Übergang von CSS2 auf CSS3 wäre es wohl das Beste, wenn der Wechsel noch ein Weilchen auf sich warten lassen würde. Die Browser-Entwickler benötigen ausreichend Zeit, um die Funktionalität in ihre Software zu integrieren und ausgiebig zu testen.

Was sind moderne Browser?

Beispiele für moderne Browser sind Google Chrome, Mozilla Firefox, Microsoft Edge und Apple Safari. Diese Browser werden regelmäßig aktualisiert, um die neuesten Technologien und Sicherheitsverbesserungen zu bieten.

Sie zeichnen sich durch folgende Merkmale aus:

  1. Schnelligkeit: Moderne Browser sind schnell und laden Webseiten zügig, was die Benutzererfahrung verbessert.
  2. Sicherheit: Sie bieten robusten Schutz vor schädlichen Websites und Sicherheitsbedrohungen.
  3. Erweiterbarkeit: Moderne Browser unterstützen Add-Ons und Erweiterungen, die den Funktionsumfang erweitern und personalisieren.
  4. Unterstützung von Webstandards: Sie halten sich an aktuelle Webstandards und unterstützen HTML, CSS und JavaScript in ihrer neuesten Form, um eine korrekte Anzeige von Webinhalten sicherzustellen.
  5. Responsives Design: Moderne Browser unterstützen responsives Webdesign und passen sich automatisch verschiedenen Bildschirmgrößen und Geräten an.
  6. Tabbed Browsing: Sie ermöglichen das gleichzeitige Öffnen mehrerer Registerkarten, um verschiedene Webseiten bequem zu verwalten.
  7. Private Browsing: Moderne Browser bieten private Surfmöglichkeiten, bei denen keine Verlaufsdaten oder Cookies gespeichert werden.
  8. Synchronisierung: Sie erlauben die Synchronisierung von Lesezeichen, Verlauf und anderen Daten zwischen verschiedenen Geräten.
  9. Entwicklerwerkzeuge: Moderne Browser bieten Entwicklern Werkzeuge zur Fehlerbehebung und Optimierung von Webseiten.

Niemandem ist mit einem fehlerbehafteten CSS3-Browser geholfen. Man wird damit rechnen müssen, dass auch unter den wichtigen Browsern der ein- oder andere sein wird, der mehr als nur einen Generationswechsel benötigt, um den kommenden neuen Standard zu unterstützen. Wenn es schneller geht, wird es allen zugute kommen.

Bereits heute unterstützten zumindest einige moderne Browser einzelne der zahlreichen neuen Funktionen von CSS3.

Fazit

Zusammenfassend kann man sagen, CSS3 bringt spannende und hilfreiche Neuerungen für die Entwicklung von CSS-Layouts. Allerdings ist man von der Einführung vermutlich noch weit entfernt und auch dann ist noch ein gutes Stück zu gehen bis die breite Anwendung sinnvoll möglich wird.

Kategorien
Stylesheets Webentwicklung

Bildersetzung in HTML Dateien

CSS Programming Image

FIR – Fahrner Image Replacement als Bildersetzung

Wir benutzen das span-Element als – nicht unumstrittenes – Mittel der Bildersetzung, um den umschlossenen Text über CSS auszublenden, während statt dessen ein Bild angezeigt wird.

FIR ist die ursprüngliche Bildersetzungsmethode schafft aber auf Grund der Einschränkungen in Bezug auf Barrierefreiheit einige Probleme. Der zu ersetzende Text wird in einen eigenen SPAN-Bereich gesetzt.

<p> <span> zu ersetzender Text </span> </p>

Dem p-Bereich wird nun das Hintergrundbild zugewiesen.

p { background:url(image.gif) no-repeat; }

Der Inhalt des SPAN-Bereiches wird ausgeblendet.

span {display:none};

Probleme gibt es mit einigen (nicht allen) Bildschirmlesegeräten, die den Text ignorieren. FIR funktioniert unter Internet Explorer 5+, Opera 5+, Netscape 6+ und Safari.

Kategorien
Stylesheets Webentwicklung

Der lustige Peek-a-boo Bug

CSS Programming Image

Der “Peek-a-boo Bug” ist ein Problem auf Websites, bei dem Dinge auf der Seite plötzlich verschwinden oder sich merkwürdig verhalten. Dies kann passieren, wenn man versucht, die Website mit bestimmten Gestaltungsregeln zu versehen. Es ist so benannt, weil es ähnlich ist wie das Spiel “Verstecken”, bei dem jemand für kurze Zeit verschwindet und dann wieder auftaucht. Webentwickler müssen solche Probleme beheben, damit die Website richtig funktioniert und aussieht.

Der entsteht bei einem variablen Container in der Breite mit einer Box darin bei der z.B. float:left gesetzt ist. Der die innere Box umfliessende Content ist einfach nicht sichtbar. Du kannst die Seite sooft reloaden wie du willst… Ein scrollen (wenn möglich) der Seite lässt den Text hervortreten. Hier mal kurz die Syntax in Kurzform

Kategorien
Stylesheets Webentwicklung

CSS Box Model – kollabierende Abstände

Die Erklärung

“Kollabierende Abstände” bezieht sich auf das Verhalten von vertikalen Margen benachbarter Elemente. Wenn zwei vertikale Margen aufeinandertreffen, wird der größere der beiden verwendet, während der kleinere “kollabiert” oder verschwindet. Dies verhindert unerwünschte, große Abstände zwischen den Elementen und sorgt für ein vorhersehbares Layout.

Horizontal

Stehen zwei Boxen nebeneinander so addieren sich die Außenabstände.

Hat eine Box einen Außenabstand von 50px rechts und eine zweite Box einen Außenabstand von 50px nach links so beträgt der Abstand der zwei Boxen 100px voneinander entfernt.

Vertikal

Sind zwei Boxen übereinander angeordnet, so wird der kleinere der beiden Abstände ignoriert.

Hat eine Box einen unteren Außenabstand von 50px und eine zweite Box einen oberen Außenabstand von 50px so beträgt der Abstand der zwei Boxen 50px.

kollabierende vertikale Abstände
kollabierende vertikale Abstände

Ausnahmen

Es gibt Fälle in denen die Außenabstände nicht kollabieren. Das trifft bei Elementen wie

overflow, float, position, display

zu. Probleme entstehen in bezogen auf das CSS Box Model besonders bei Boxen mit Angaben in Prozent.

Kategorien
Stylesheets Webentwicklung

Die Magie der Farben CSS-Farbanweisungen

CSS Programming Image

CSS-Farbanweisungen sind Befehle, die verwendet werden, um die Farben von Texten, Hintergründen und anderen Dingen auf einer Webseite festzulegen. Du kannst diese Befehle nutzen, um zu bestimmen, welche Farben deine Webseite haben soll. Dies hilft dabei, deine Webseite hübsch und ansprechend zu gestalten.

hsl()

Neben RGB ist es in CSS3 auch möglich seine Farbangaben in HSL anzugeben. Das heißt, dass die Werte nicht in additiver Farbmischung sondern in Farbton durch Grad und Sättigung und relative Helligkeit in Prozent angegeben werden. HSL im Einsatz

background-color: hsl(0,100%,50%); 

Transparenz

rgba(), hsla()

Daneben ist es auch möglich RGB und HSL mit Transparenz-Angaben zu versehen: Die beiden Farbsysteme nehmen hierbei die Form RGBA und HSLA ein. “A” steht für den Alpha-Kanal. Die Werte liegen zwischen 0 und 1, wobei 0 0% Transparenz und 1 100% Transparenz hat. RGBA verhält sich hierbei genauso wie HSLA. RGBA im Einsatz

background: rgba(255, 0, 0, 0.2);
Kategorien
Stylesheets Webentwicklung

Ausblick auf CSS 3 – fantastisch!

CSS Programming Image

Die Entwicklung von Cascading Stylesheets (CSS) bleibt nicht stehen und so liegt der Entwurf für CSS 3 bereits seit längerem auf dem Tisch des World Wide Web Consortium (W3C). Diese nächste Generation beinhaltet zahlreiche Verbesserungen, die die Layoutentwicklung entscheidend beeinflussen werden.

Das Box-Modell und seine Grenzen

Bei dem bestehenden, mit CSS1 eingeführten Box-Modell ergibt sich die Gesamtbreite einer Box aus der Addition des Inhaltsbereiches (width), der Innenabstände (padding) und der Rahmen (border). Aus dieser Regelung ergeben sich für die moderne Layoutgestaltung jedoch einige Nachteile.

Kategorien
Stylesheets Webentwicklung

Attributselektoren, was sind das?

Attributselektoren Beispiel
Attributselektoren Beispiel

Eine Besonderheit an diesem Beispiel sind die Attributselektoren aus der CSS Spezifikation.

Attributselektoren filtern HTML-Elemente nach Attributen – oder auch nach Zeichenketten in Attributen – oder sie finden Elemente, wenn ein Attribut mit einer bestimmten Zeichenfolge beginnt – z.B. a[href^=”https”] – alle Links, die mit https beginnen.

Diese ist zwar noch nicht Standard, jedoch werden diese von Firefox, SeaMonkey, Safari und IE7 unterstützt. Insofern ist das Risiko, dass diese Spezifikationen nicht in die endgültige Version von CSS-3 übernommen werden relativ gering.

Inzwischen sind die Eigenschaften Standard und können problemlos verwendet werden.

<!DOCTYPE html>
<html>
	<head>
		<style>
			a[href^="http:"] {
			padding-right:10px;
			background: url(link.gif) no-repeat center top;
			min-height:75px;
			display: block;
			}
			a[href^="http://www.xy.de"], a[href^="http://xy.de"]{
			padding-right:0;
			background-image:none;
			min-height:75px;
			display: block;
			}
			a[href^="mailto:"] {
			padding-right:10px;
			background: url(mail.gif) no-repeat center top;
			min-height:75px;
			display: block;			
			}
		</style>
	</head>
	<body>
	<h1>Attributselektoren</h1>
	<p>Attributselektoren - 3 Beispiele	 </p>
	 <a href="http://www.testlink.de">Testlink</a>
	 <a href="http://www.xy.de">Testlink</a>
	 <a href="mailto:email@example.com">E-Mail senden.></a>

	</body>
</html>

Einige Joomla Templates die ich erstellt habe, arbeiten mit diesen Selektoren, ich weise aber ausdrücklich darauf hin, das nicht alle Browser diese vollumfänglich korrekt darstellen.

Kategorien
Stylesheets Webentwicklung

Schrift und Satz – der Textfluss

CSS Programming Image

Schrift bedeutet, wie die Buchstaben und Wörter geschrieben sind. Zum Beispiel, welche Schriftart und -größe genutzt werden. Das hilft dabei, dass der Text leicht zu lesen ist.

Satz ist, wie der Text auf einer Seite oder auf dem Bildschirm angeordnet ist. Das betrifft, wie der Text in Abschnitte aufgeteilt ist, ob er links oder in der Mitte steht, wie viel Platz zwischen den Zeilen ist und wie die Absätze beginnen. Ein guter Satz sorgt dafür, dass der Text gut aussieht und einfach zu verstehen ist.

Der Textfluss ist die Art und Weise, wie der Text im Dokument angeordnet ist. Er bestimmt, wie der Text gelesen wird, indem er die Abschnitte und Seiten ordnet. Ein guter Textfluss macht den Text leichter verständlich und angenehm zu lesen. Alle diese Dinge arbeiten zusammen, um sicherzustellen, dass der Text gut aussieht und leicht zu lesen ist. Designer und Autoren denken darüber nach, um sicherzustellen, dass ihre Texte ansprechend und verständlich sind.

text-wrap

Bessere Steuerung von Zeilenumbrüchen: Mit text-wrap können Zeilen an Interpunktionszeichen umgebrochen werden.

word-wrap

Mit word-wrap legt man fest wie Wörter umgebrochen werden dürfen. hyphenate bricht Wörter um, indem an die vorangehende Silbe ein “-” angehängt wird.

word-break

Die word-break-Eigenschaft legt fest, welche Zeilenumbruch-Beschränkungen für ein Element gelten. Diese Eigenschaft ist nur für asiatische Schriftarten interessant.

Textfluss

text-overflow

Was mit überfließendem Text geschehen soll, kann mit text-overflow gesteuert werden. Hier kann man z.B. automatisch bei zu langem Text Pünktchen “…” anhängen lassen. (Opera:-o-text-overflow )

Blöcke

text-align-last

Die Eigenschaft text-align-last gibt (falls text-align:justify; gesetzt ist) an, wie die letzte Zeile des Blocksatzes gehandhabt werden soll.

text-justify

Genauso verhält sich auch text-justify zu text-align. Diese Eigenschaft gibt an wie stark der Blocksatz erzeugt werden soll. Zum Beispiel nur durch die Zwischenräume der Wörter oder auch durch die Zwischenräume der Buchstaben.

Sonstige

Mit white-space-collapse kann, wie der Name schon sagt, die Handhabung von Leerzeichen gesteuert werden.

Die Eingeschaften text-align, letter-spacing und word-spacing erhalten weitere Werte.

text-kashida-space ist eine Eigenschaft die noch undefiniert ist. Unter Umständen kommt diese auch gar nicht im CSS3 zum Einsatz.

WebFonts

@font-face

Mit @font-face kann eine beliebige Schriftdatei auf einem Server angegeben werden, die dann heruntergeladen und vom Browser verwendet wird. Zu beachten ist hierfür aber besonders die Lizenzart der Font.

Dies war eigentlich schon seit sehr langer Zeit in der CSS2 Spezifikation, wurde aber mangels Browserunterstützung in CSS 2.1 wieder entfernt.

@font-face {
      font-family: "Fertigo";
      src: url(http://www.taptaptap.com/Fertigo.otf)
          format("opentype");

Neuste WebKit-Versionen (Safari 3) enthalten diese Funktion, Schriften dynamisch nachzuladen. Der Internet Explorer unterstützt seit Version 4 das nachladen von Schriftarten im eigenen .eot-Format.