CSS 3 - Ein Vorausblick

Mit CSS haben Webdesigner eine mächtige Formatierungssprache zur Hand, die momentan in der Version 2.1 vorliegt. Wir wollen einen Ausblick auf die dritte Version wagen. »
Rob Robson 

CSS 3
Inhalt:

CSS für Print-Layout
Funktionsweise
Medienspezifische Stylesheets
Wozu ein neuer CSS-Standard?
Möglichkeiten von CSS 3
Eine Ausarbeitung von Albert Brückmann,
6. Semester OnlineMedien DHBW Mosbach
Stand: 24.06.2009
Kurze Frage am Rande: Was ist eigentlich CSS??
Funktionsweise
Einbindung (intern):
<head>

<style type="text/css"><!--
 Stylesheet Angaben
//--></style>

<title>Beispiel-Seite</title>
</head>

Einbindung (extern):
<head>
<link href="style.css" 
media="screen" 
type="text/css" />
</head>

Inline-Formatierung
...für einmalige Anpassung geeignet:
<p style=“font-family: Georgia;“>Beispieltext</p>
Deklaration CSS:
Selektor [, Selektor2, ...] {
 Eigenschaft-A: Wert-A;
 Eigenschaft-B: Wert-B
}
/* Kommentar */

Beispiel für Absatz der Klasse "notiz":
p.notiz {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.5em;
  color: black;
  text-align: justify;
}

Medienspezifische Stylesheets


print: Grafische Aufbereitung für die Druckausgabe

all : Das angegebene Stylesheet wird für alle Ausgabegeräte verwendet
handheld: Beispielweise für Smartphones geeignet, da geringere Bildschirmauflösung als auf PC-Bildschirmen
Wozu ein neuer CSS-Standard?
Schritt halten!
Neue Möglichkeiten ausschöpfen
Problemlösungen bieten
Woraus ergibt sich ein Standard?
Arbeitszyklen
Schreiben an der Spezifikation
Implementieren
Konstruieren der Tests
Überarbeiten & Verfeinern
Möglichkeiten in CSS 3
1. Advanced Selectors
Ordnet Elementen Attribute zu, die mit dem angegebenen Wert beginnen

Ordnet Elementen Attribute zu, die den angegebenen Wert enthalten

Ordnet Elementen Attribute zu, die mit dem angegebenen Wert enden
[attribut^="wert"] 
[attribut$="wert"] 
[attribut*="wert"] 
a[title$=“special“]{
   position: absolute;  
   top: 0;  
   right: 0;  
   display: block;  
   width: 140px;  
   height: 140px;     }
Anwendungsbeispiel
Hier werden alle Links, die im title-Attribut mit „special“ enden, gesondert angesprochen.
Browser-Kompatibilität:
außer IE6
1. Advanced Selectors
1. Advanced Selectors
1. Advanced Selectors
1. Advanced Selectors
1. Advanced Selectors
2. Pseudo-Klassen
Gezielte Auswahl von Elementen
Beispiele:
nth-child (n)
nth-last-child(n)
:last-child
:checked
:empty
:not(s)
:nth-child(3n+4){
background-color: #ccc  }
?
?
was macht...
was macht...
div p:nth-last-child(-n+2)
?
?
was macht...
:nth-last-child(1) 
?
?
Spricht angewählte Elemente an, zum Beispiel Auswahl-Kästchen.
Spricht Elemente an, die keine Kind-Elemente besitzen oder leer sind.
Spricht Elemente an, die nicht der angegebenen Deklaration entsprechen. 
p:not([class*="normal"]) { color: black; }
3. RGBa & Transparenz
#networks li a:hover,
#networks li a:focus {
    background: rgba(164, 173, 183, .15);
    }
http://timvandamme.com
Möchte man Transparenz zu einem gesamten div-Container zugeben, verwendet man folgende Zeile:
div {opacity: 0.8;}
4. Mehr-Spalten-Layout
http://tweetcc.com/ 
.index #content div {
    -webkit-column-count : 4;
    -webkit-column-gap : 20px;
    -moz-column-count : 4;
    -moz-column-gap : 20px;    }

Vertikale Linie zwischen den Spalten gewünscht?
column-rule: {1px solid #000;}
* Browser, die keine Unterstützung für das 
Mehr-Spalten-Layout anbieten, 
zeigen den Inhalt als reinen Fluss-Text an.
Browserkompatibilität:
Mehr-Spalten-Layout:
5. Mehrere Hintergrund-Grafiken
Möglichkeiten:
background-image, background-repeat, background-size, background-position, background-origin und background-clip 
Nutzung in einer einzigen Deklaration:
div {
background: url(beispiel.jpg) top left no-repeat,
url(beispiel2.jpg) bottom left no-repeat,
url(beispiel3.jpg) center center repeat-y;   }
!
6. Textschatten
.signup_area p {
text-shadow: rgba(0,0,0,.8) 0 1px 0;   }

x-Position
y-Position
Blur-Radius
ab Version 3.5
7. Schriftart-Attribute
web-"fremde"-Schriftarten einbetten
werden einfach heruntergeladen
Beispiel: https://jetpack.mozillalabs.com/
@font-face{
    font-family: 'DroidSans';
    src: url('../fonts/DroidSans.ttf') format('truetype');    }

CSS-Regel:
ab Version 3.5
8. Abgerundete Ecken
abgerundete Ecken ohne Hintergrundbilder
Verwendung der Eigenschaft border-radius
h2 span {
color: #1a1a1a;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px; }

Im Beispiel rechts:
http://sam.brown.tc/
Browserkompatibilität:
9. Rahmen mit Bildern als Linie
http://www.blog.spoongraphics.co.uk/ 
#content .post img {
    border: 6px solid #f2e6d1;
    -webkit-border-image: url(main-border.png) 6 repeat;
    -moz-border-image: url(main-border.png) 6 repeat;
    border-image: url(main-border.png) 6 repeat;     }

FAZIT
CSS3: Nicht nur grafische neue Möglichkeiten

mächtige Werkzeuge zur Element-Wahl

Einzug in Spezifikation noch immer fraglich
CSS für Print-Layout
Nielsen Norman Group: 79% der User lesen nicht, sondern scannen
Druck-Layout kann Abhilfe schaffen, indem es Websites leserlicher macht
Beispiel: http://planetshaker.de/2008/12/04/die-pastorin-und-das-brautkleid-betrug-bei-quoka/
CSS für Print-Layout
- Vordenken!
Vor der Erstellung einer Print-CSS beachten:
Auf Papier lässt sich nicht...
auf ein Navigations-Element klicken
eine Suche ausführen
Elemente vergrößern oder verkleinern
einen Weiterempfehlen-Link nutzen
durch die Seite scrollen
Kommentare oder Feedback abgeben
usw.

Alle unwichtigen Elemente deshalb ausklammern bzw. zurücksetzen!
Achtung bei float, position:absolute, padding, margin!
Weitere Hinweise
Schriftarten mit Serifen nutzen
Typografische Hintergrundbilder im Druck-CSS durch Bilder ersetzen - mit display:none im Standard-CSS ausblenden
Feste Seitenbreiten zurücksetzen / vermeiden
Quellen anführen, Links voll ausschreiben
Banner und Werbung grafischer Art anpassen oder entfernen
Kein sofortiger Druck bei Anzeige
Auf Farbkodierungen achten
!
!
Wahl der CSS-Datei per PHP
<h1>Titel des Eintrags</h1>
<p>Lorem ipsum...</p>
<a href="?q=printme">Druckansicht</a>

Mit dem Query q=printme können wir nun separate CSS-Dateien ansprechen, indem innerhalb des Kopfbereichs der Website folgendes Script hinterlegt wird:
<?php if ($_GET['q'] == "printme") { ?>
<link rel="stylesheet" type="text/css" href="print.css" />
<?php } else { ?>
<link rel="stylesheet" type="text/css" href="default.css" />
<?php } ?>

Nach Klick auf den Button „Druckansicht“ wird somit die gleiche Seite mit einer veränderten CSS-Datei geladen.
Quellen:
http://www.aadmm.de/de/css.htm

http://www.webkrauts.de/2008/12/24/vier-css3-tricks-fuer-sauberes-html/

http://www.noupe.com/css3/css3-exciting-functions-and-features-30-useful-tutorials.html

http://de.wikipedia.org/wiki/Cascading_Style_Sheets

http://tobias-otte.de/2008/09/css3-im-ie8/

http://www.webmasterpro.de/coding/article/css3.html

http://leaverou.me/2009/03/css3-colors-today-mediacampathens-session/

http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/#comment-359667

http://www.digital-web.com/articles/css_styling_for_print_and_other_media/

http://aktuell.de.selfhtml.org/artikel/css/drucklayout/

http://www.maratz.com/blog/archives/2004/09/21/10-minutes-to-printer-friendly-page/

Danke!

Fragen?

Loading comments...

Please log in to add your comment.

Report abuse

More presentations by Rob Robson

Popular presentations

More popular prezis in Explore>