Prägnantestes Beispiel sind die Gradients – die Farbverläufe. Definiert im CSS3-Modul „Image Value“

Einen Nachteil hat die Anwendung derzeit allerdings: Die Browserunterstützung. Webkit unterstützt Gradients, allerdings in eigener Syntax. Mozilla (3.6) unterstützt annähernd die (derzeit!) im Entwurf vorgegebene W3C-Syntax, jedoch nur für background-CSS-Eigenschaften. Opera und IE kennen die Syntax leider noch nicht.

Syntax für lineare Farbverläufe

Beschreibung

Standard: HPos und VPos beschreiben Startkoordinaten, Winkel beschreibt den Winkel in dem sich der Verlauf erstrecken soll (0deg = nach links, 90deg = nach oben). Alternativ gehen auch die gängigen Stop-Words wie top oder top left. Farbe und Position beschreibt die aktuelle Farbe und deren Position in Prozent (analog Photoshop). Alternativ kann bei den ersten beiden Angaben die Prozent-Angabe entfallen. Diesen wird dann automatisch 0% (Anfang) und 100% (Ende) zugewiesen werden.

Mozilla: Funktioniert analog, benötigt die Start- und Endfarbe allerdings zwingend ohne Prozentangabe.

Webkit: Vereint alle Gradienttypen in einer Funktion, sodass der Typ linear angegeben werden muss. Ferner wird eine Linie angegeben, an der der Verlauf entlang läuft. 0 0, 0 100% erzeugt also einen senkrechten Verlauf. innerhalb von from() wird die Startfarbe angegeben, innerhalb von to() die Zielfarbe.

Snippets zum Kopieren

1 – vertikal

background-image:
linear-gradient(top, black, white);

background-image:
-moz-linear-gradient(top, black, white)

background-image:
-webkit-gradient(linear, 0 0, 0 100%, from(black), to(white));

2 – Reflexion

background-image:
linear-gradient(top, #666, #666, #888 5%, #999 25%,
#999 48%,#444 52%, #777 90%);

background-image:
-moz-linear-gradient(top, #666, #666, #888 5%, #999 25%,
#999 48%,#444 52%, #777 90%)

background-image:
-webkit-gradient(linear, 0 0, 0 100%, from(#666), to(#666),
color-stop(.05, #888), color-stop(.25, #999), color-stop(.48, #999),
color-stop(.52, #444), color-stop(.90, #777));

Hier also verschiedene Blindtexte mit Markup zum kopieren und benutzen:

300 Zeichen Standard-Absätze

<p>
   Dier einan Ste jedes geber sie serer nigem St.
   Einachlen sit unghan Posser Auf Noth, und,
   jetendonichts isch inn würfolgt. Umshäfchön Häude, währten.
   Zig ei und das Ohrepper Zigker Reinn die Musich net hing
   vone nig die Man ichafteit zur Zeider Wir bleidem der
   Dre spötigt zur anderhar Wort, vies diebeführik dondes.
</p>
<p>
   Dace! Nottond zähreschtsder hier erache all' ich der
   die Ohr beht st das ei ung ver gläre Scht eibt
   derplausgängebreterteich folkren zu Zeints katzücktig zu
   frückeit grond, übes dem Fel hin inlichen, wen Strader derlich
   Scht untehallener zwei ster gen, des Lon unsinehme od
   künfahr schbistimpovier gankt sichten und mir
   Tagstückenkhend bre. Arch zugentersch.
</p>
<p>
   Dudend es Bacht hals sen zumentorthät hiner,
   nacher ab' dier Welbeführia; hiegst niche seiner mäßter
   ist hafs, diem mirs wir Straß gen könn das esein Lufgegt.
   Üben sikattein de Phals finehen ister am zu serwein
   geplanohle über Bulausen den.
</p>

Typische Textpassage

<p>
   Dies ist ein <strong>Typoblindtext</strong>. An ihm kann
   man sehen, ob alle Buchstaben da sind und wie sie aussehen.
   Manchmal benutzt man Worte wie Hamburgefonts,
   Rafgenduks oder Handgloves, um Schriften zu testen.
   Manchmal Sätze, die alle Buchstaben des Alphabets
   enthalten - man nennt diese Sätze „Pangrams“.
</p>
<p>
   Sehr bekannt ist dieser:
</p>
<blockquote>
   The quick brown fox jumps over the lazy old dog.
</blockquote>
<ul>
   <li><a href="http://www.smartr.de">
      Ein Link am Ende des Textes
   </a></li>
   <li><a href="http://www.smartr.de">
      ein weiterer Link
   </a></li>
</ul>

Alle Formate in Einem

<h3>Überschrift 1</h3>
<h4>Text</h4>
<p>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   <a href="http://www.smartr.de">Aenean commodo</a>
   ligula eget dolor. <strong>Aenean massa.</strong>
   Cum sociis natoque penatibus et magnis dis parturient montes,
   nascetur ridiculus mus. <em>Donec quam felis, ultricies nec,
   pellentesque eu, pretium quis, sem.</em>
</p>

<h4>Ungeordnete Liste</h4>
<ul>
   <li>
      Nulla <strong>consequat</strong> massa quis enim.
   </li>
   <li>
      Donec <strong>pede justo</strong>, fringilla vel, aliquet
      nec, vulputate eget, arcu.
   </li>
   <li>
      In enim justo, <strong>rhoncus ut</strong>, imperdiet
      a, venenatis vitae, justo. Nullam dictum felis eu pede
      mollis pretium. Integer tincidunt. Cras dapibus.
   </li>
</ul>

<h4>Geordnete Liste</h4>
<ol>
   <li>Vivamus elementum semper nisi.</li>
   <li>Aenean vulputate eleifend tellus.</li>
   <li>Aenean leo ligula, porttitor eu.</li>
</ol>

<h4>Definitionsliste</h4>
<dl>
   <dt>Aliquam lorem</dt>
   <dd>Ante, dapibus in, viverra quis, feugiat a, tellus.</dd>
   <dt>Phasellus viverra</dt>
   <dd>ulla ut metus varius laoreet. Quisque rutrum.</dd>
   <dt>Aenean imperdiet</dt>
   <dd>
      Etiam ultricies nisi vel augue. Curabitur ullamcorper
      ultricies nisi. Nam eget dui. Etiam rhoncus.
      Maecenas tempus, tellus eget condimentum
      rhoncus, sem quam semper libero, sit amet
      adipiscing sem neque sed ipsum.
   </dd>
</dl>

Vorüberlegungen

• Der Doctype bestimmt das spätere Aussehen der Seite stärker, als man denkt. Vor Allem im Internet Explorer, da man mit dessen Hilfe auch den modernen und halbwegs handzahmen IE 8 in seinen alten Großvater IE 6 verwandeln kann – mitsamt seinem Box-Model- und Positionierungs-Alzheimer.
• Framesets sind out und tauchen daher in diesem Artikel gar nicht mehr auf.
• XHTML und HTML unterscheiden sich im Doctype und in der Startdeklaration. Doch die Browser unterscheiden hie kaum. Ggf. wird bei XHTML etwas strenger mit der korrekten Tag-Schachtelung reagieren. Doch das sollten Sie in jedem Fall korrekt handhaben. Der W3C-Validator hilft Ihnen dabei

Doctypes

Kein Doctype: Im allgemein Kein Problem in “guten” Browsern wie Firefox oder Safari. Führt aber unter IE in den Quirks-Modus und damit zum falschen Box-Model-Modus und teilweise völlig anderer Darstellung einer Seite.

Transitional: Transitional bedeutet, dass einige deprecated HTML-Tags (wie &font&) und mehr Tag-Schachtelungen erlaubt sind. Beispielsweise darf man nur im transitionalen Modus Text direkt im Body Tag platzieren.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Strict: Strict rendert einige Elemente schulmäßiger und ist damit mein bevorzugtes Format. Doch manchmal kann man es einfach aufgrund des verwendeten Frameworks nicht einsetzen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML 5: Neu und für moderne Browser interessant. Lässt alle aktuelle Browser in den Standard-Mode wechseln und kann daher schon jetzt ohne Bedenken eingesetzt werden.

<!DOCTYPE html>

Header-Daten und Grundgerüst

Und nun das komplette Grundgerüst für aktuelle Projekte:

<!doctype html>
<html>
   <head>
      <title>##Dokumenttitel##</title>

      <meta http-equiv="content-type"
            content="text/html; charset=UTF-8" />
      <meta name="description" content="##Beschreibung##" />

      <link rel="stylesheet" type="text/css" href="css.css" />
      <script type="text/javascript" src="js.js"></script>

   </head>
   <body>

   </body>
</html>

Die wichtigste Suchmaschine ist im Moment Google mit einem weltweiten Marktanteil von über 80%. Konkurrenten wie Microsofts Bing oder Yahoo können vernachlässigt werden.
Im Prinzip gilt hier der Satz: Wer den Google-Berg bestiegen hat, kommt auch auf die anderen Hügel. Sprich: Wer vernünftige Seiten baut und sich in den Google-SERPs (Search Engin Result Pages) erfolgreich platziert, wird auch in den anderen Suchmaschinen auftauchen. Einzig für den chinesischen Markt muss man zusätzlich die Suchmaschine Baidu berücksichtigen.

Jeder Suchmaschine ist eines gemein: ihr Ziel. Nämlich dem Benutzer möglichst passende Seiten zu liefern. Für Webentwicklung und die Erstellung von Content sollte man daher eine wesentliche Fragestellung immer im Hinterkopf behalten: Wie würden Sie als Suchmaschinenanbieter vorgehen, um Ihrem User die bestmöglichen Ergebnisse liefern zu können? Außerdem muss berücksichtigt werden, dass Google Milliarden von Seiten indizieren muss. D.h. manuell passiert hier gar nichts mehr. Die Arbeit erledigen die so genannten Crawler, die Ihre Seite nach und nach automatisch auslesen und einordnen. D.h. bevor Sie nicht einer der Crawler besucht hat, können Sie auch gar nicht gefunden werden. Mit der Suchabfrage site:www.meineseite.de gibt Google Ihnen aus, was es auf Ihrer Seite schon indiziert hat.

Durch diese Fragestellungen kommen Sie ein wenig hinter Googles Strategien und können Ihre Inhalte dementsprechend gestalten. Suchmaschinen weisen verschiedene Algorithmen auf, um die Relevanz einer Seite zu beurteilen. Die betrügerischen Methoden verschiedener SEO-Gurus, diese Algorithmen auszutricksen, werden von Google regelmäßig abgestraft. Die Algorithmen sind dabei auch ständig im Fluss. Was heute gilt, kann in 14 Tagen schon wieder falsch sein.

Doch eine Sache bleibt, nämlich Googles Ziel, immer die für seine User passenden Seiten zu finden.
Im Wesentlichen kann man die SEO-Arbeit in drei Bereiche einteilen:

CSS3 bietet hier mit der Möglichkeit, Ecken abzurunden eine sehr einfache Lösung an. Doch auch komplexere Rahmen werden in der Zukunft kein Problem mehr sein: mit der CSS3-Option mehrere Hintergrundbilde zu platzieren. Doch dazu später mehr! Zunächst zum Naheliegenden.

Der Code

.rounded-10 {
   border: 1px solid #777;
   background-color: #aaa;
   color: #000;
   padding: 5px;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
}

Das Ergebnis

Inzwischen unterstützen sowohl Gecko (Firefox & Co.), als auch Webkit (Safari, Google Chrome & Co.) die Eckenabrundung per css. Da der entsprechende Standard vom W3C noch nicht verabschiedet wurde, hat der dritte Browser im Bunde, nämlich Opera seine Unterstützung für abgerundete Ecken wieder zurückgenommen.

IE kann es leider gar nicht (diesen Satz werde ich vermutlich noch öfter schreiben). Doch per nicht standardkonformer HTC-Action lässt sich auch dieser dazu überreden, Ecken abzurunden.

In den Browsern

Und so stellen es die aktuellen Browser dar:

Varianten

Damit lässt sich nun bereits einiges in Produktivumgebungen anfangen – nachdem der IE diese Technik noch nicht beherrscht begrenze ich den Einsatz allerdings auf die Formatierung spezieller Absatzformate wie beispielsweise in einer Sitemap. Für den Professionellen Einsatz als Seitenlayoutwerkzeug ist es sicher noch nicht geeignet.

Wie sieht es aber mit der Kombination mehrere Möglichkeiten aus?

Zunächst die Verwendung unterschiedlicher Border-Dicken. Hier stellt Webkit das Ergebnis nicht gut dar und wechselt mitten in der Abrundung abrupt die Rahmenstärke. Firefox 3.6 ist hier sehr gut.

border: 1px solid #777;
border-top: 6px solid #777;

Oder die Verwendung unterschiedlicher Border-Farben. Erzeugt einen witzigen Effekt, der wohl eher selten in der Praxis verwendet werden wird.

border: 6px solid #a00;
border-top: 6px solid #00a;

Oder das Ineinanderschachteln mehrerer Rahmen. Auch hier wieder Renderschwächen bei Webkit, Probleme mit dem Antialiasing

.outer{
   border: 1px solid #888;
   background: #ccc;
   padding-bottom: 20px;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
}
.inner{
   border: 1px solid #aaa;
   background: #fff;
   border-radius: 9px; /* Radius um 1px reduziert */
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
}

Und schließlich die erweitert angedachten Möglichkeiten, den Radius für jede Ecke individuell festlegen zu können. Diese Technik wird sicher Eingang in die Webdesignpraktiken der nächsten Jahre finden.

border-radius: 20px 5px 0 0;
-moz-border-radius: 20px 5px 0 0;
-webkit-border-radius: 20px 5px 0 0;

.outer{
   border: 1px solid #888;
   background: #ccc;
   padding-bottom: 20px;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
}
.inner{
   border: 0;
   border-bottom: 1px solid #888;
   background: #fff;
   border-radius: 9px 9px 0 0;
   -webkit-border-radius:  9px 9px 0 0;
   -moz-border-radius:  9px 9px 0 0;
}