Kategorien
Stylesheets Webentwicklung

Flexible Layouts in HTML mit CSS

Das CSS Flexible Box Layout zeigt neben CSS Grid eine der beiden wesentlichen Möglichkeiten zur Gestaltung von Layouts mit CSS auf.

Im Gegensatz zu älteren Techniken wie Floats wird Flexbox für die Erzeugung von responsiven Layouts bereitgestellt. Es stehen mit flexiblen Layouts sehr eine Vielzahl an Möglichkeiten der Gestaltung zur Verfügung.

Wie funktioniert CSS Flexbox?

Flexbox arbeitet mit einem Container-Element und den darin enthaltenen Child Elementen in der ersten Ebene (Flex-Items). Der Flexboxcontainer wirkt auf eine Ebene. Weitere Ebenen abwärts werden nicht unterstützt.

Bei den Container Elementen kann es sich um <div> Elemente oder auch um Listen handeln. Hier ein Beispiel mit Listenelementen, in der realen Darstellung ist es nicht in Graustufen gehalten..

Flex Layout
Flex Layout

Eigenschaften der Flex-Box

Elemente können mittels der Eigenschaften justify-content, align-items auf den Achsen (vertikal und horizontal) positioniert werden. Die Ausrichtung auf der horizontalen kann mit flex-direction angepasst werden.

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>Flexible Darstellung</title>
	<style>
		ul {
			font-family: sans-serif;
			display: flex;
			justify-content: space-around;	
			margin: 5rem;
			border: 1px solid #BBBBBB;
			background-color: #595873;
			padding: 0px;
			width: 35rem; 
			list-style-type: none;
		}
		li {
			box-sizing: border-box;
			margin: 0px;
			border-right: 0px solid #FFFFFF;
			text-align: center;
		}
		li:last-of-type {
			border-right: none;
		}
		a {
			display: block;
			padding: 1rem;
			background-color: #567482;
			color: #FFFFFF;
			text-decoration: none;
		}
		a:hover, a:focus {
			background-color: #CCCCCC;
			color: #000000;
		}	
	</style>
</head>
<body>
  <nav>
  <ul>
    <li><a href="#" title="Anfang">Anfang</a></li>
    <li><a href="#" title="Beiträge">Beiträge</a></li>
    <li><a href="#" title="Kontaktformular">Kontaktformular</a></li>
    <li><a href="#" title="Impressum">Impressum</a></li>
  </ul>
</nav>
</body>
</html>

Die Eigenschaft display:flex erzeugt die Flexbox generell.

Die weiteren Eingenschaften lauten:

  • flex-direction: row (links nach rechts = Standardwert)
  • flex-direction: column (oben nach unten)
  • flex-direction: row-reverse (rechts nach links)
  • flex-direction: column-reverse (unten nach oben)

Flex Elemente

Neben der Positionierung über den Flex-Container können auch die Items innerhalb des Containers angepasst werden. Entweder mit Hilfe der klassischen CSS-Angaben für Größe und mittels eines Box Models. In der CSS Flexbox dienen die Eigenschaften flex-basis, flex-grow und flex-shrink zur Beeinflussung der Größe. Mit den verschiedenen flex-Werten kann das gewollte Layout innerhalb des Flex Containers erzeugt werden.

Kategorien
Stylesheets Webentwicklung

RGBa – Werte für RGB und Alphakanal

RGBa steht für Red-Green-Blue-alphachannel, also einem Quadrupel aus drei Farbwerten (Rot, Grün und Blau) und einem Transparenzwert (Alphakanal).

Damit stellt es eine Weiterentwicklung des schon bekannten RGB Farbraumes dar und unterscheidet sich im Wesentlichen nur durch den vierten Kanal.

https://www.w3schools.com/css/css_colors_rgb.asp

Kategorien
Stylesheets Webentwicklung

Flash of unstyled content

CSS Programming Image

CSS Unterstützung.

Nicht immer halten die Browser das was versprochen wird. Immer wieder gibt es Probleme (flash) in der Darstellung zwischen den einzelnen Browsern, welche es dem Webdesigner schwer machen sein Projekt umzusetzen. Hier auf diesen Seiten habe ich einige häufige Probleme gesammelt. Natürlich biete ich auch Lösungen an. Konzentriert habe ich mich dabei nicht auf sog. “Hacks” sondern eher auf eine Umgehung bzw. “schöne” Lösung des aufgetretenen Problems.

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

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.