Kategorie: Stylesheets

Was kann mit Stylesheets alles dargestellt werden?

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.

Weiterlesen “Bildersetzung in HTML Dateien”
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

Weiterlesen “Der lustige Peek-a-boo Bug”
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.

Weiterlesen “Ausblick auf CSS 3 – fantastisch!”
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.

Kategorien
Stylesheets Webentwicklung

Let’s create – Positionieren mit :float

Kleines Beispiel zur Positionierung von Bildern und Text mit der Eigenschaft float. Insbesondere das Verhalten von Bildern im Textfluß werde ich hier darstellen. Die Codebeispiele könnt ihr zum Testen und üben hernehmen. Also dann: “Lorem ipsum”.

Beispiel 1 enthält etwas Content und ein Bild. Zu sehen ist die bekannte Positionierung mit entsprechendem Hintergrund, um es sichtbar zu gestalten:

Beispiel 1
Beispiel 1

Hier der entsprechende Code dazu.

Weiterlesen “Let’s create – Positionieren mit :float”
Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K14

Joomla Logo flat

Zusammenfassung

Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen. Dieses Template baut auf DIV-Container auf, besitzt eine feste Breite von 840px.
Als primaeren Font verwende ich Tahoma.
Das Zentrieren des Layouts erfolgt mittels automatischer Raender:

#container {width: 840px; margin:auto;}

Anpassung

Das funktioniert bei den meisten neueren Browsern, fuer den IE im Quirks-Modus sollte ein

body {text-align: center;} eingefuegt werden.

Dieses Template ist getestet mit Firefox und dem IE 11. Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen.

82 kB