CSS3 - mehr als runde Ecken

Kategorie: CSS3
Erstellt: Dienstag, 10. Juli 2012 15:48
Zuletzt aktualisiert: Dienstag, 25. September 2012 11:07
Geschrieben von Martina Major

Hervorgehobene 1. Buchstaben (Drop Caps)

In alten Büchern, aber auch in moderneren Schriften werden gerne mal die Anfangsbuchstaben eines Absatzes hervorgehoben. Diese Buchstaben werden auch Initiale, engl. "drop cap" genannt.
Um dies im CSS2 umzusetzten, wurde dazu z.B. ein <span< um den entsprechenden Buchstaben gesetzt.

 

<style type="text/css">
.dropcap {
   display: block;
   float: left;
   font-size: 300%;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-weight: bold;
   height: .8em;
   margin-bottom: -.4em;
   padding: .2em .1em 0 0;
}

Der zugehörige Quelltext sieht das in etwa so aus:

<p><span class="dropcap">I</span>ch bin ein Kapitel mit Initial ... </p>

Mal abgesehen davin, dass dies auch nichtin allen Browsern funktioniert, und in reinen Textbrowser der span-Tag hinderlich ist, wäre eine Lösung mit reinem CSS wohl elegnater.

Ab CSS3 gibt es dafür eine Selektor

 .cap::first-letter
  {

   color: white;
   float: left;
   font-family: Comic Sans, Comic Sans MS;

  }

Wer jetzt nicht jedem Absatz mit einem solchen Buchstaben versehen will, der kann z.B. eine Klasse cap definieren, welche dann dem Absatz zugeordnet wird.

<p class="cap">Ich bin ein Kapitel mit Initial ... </p>

Auch für die Simulation von "alten Büchern" ist die Verwendung moderner Techniken wie z.B. von CSS3 für die Anzeige besonderer Anfangsbuchstaben sinnvoll. Durch den first-letter-Selektor wird der Text nicht unterbrochen, die Anpassung ist somit pures CSS und wird von reinen Text-Readern nicht einmal bemerkt.

Schade das Microsoft CSS3 nicht im IE8 und IE9 implementieren will, denn bis der IE10 (nur verfügbar für Windows8) flächendeckend verwendet wird, werden Webdesigner und Programmierer wohl auf diese Vorzüge verzichten müssen bzw. Browser-Weichen einbauen müssen.

 

Neue Möglichkeiten mit CSS3, html5, SVG und Canvas

Kategorie: CSS3
Erstellt: Dienstag, 03. Juli 2012 13:24
Zuletzt aktualisiert: Dienstag, 03. Juli 2012 13:24
Geschrieben von Martina Major

Bei meiner Recherche für mein Browserspiel habe ich interessante Dinge gefunden, dass ich aber auf der Entwicklerseite von Microsoft ein so tolles Beispiel für die - im IE8 und IE9 nicht verfügbaren Möglichkeiten -  gefunden habe, hat mich ein bisschen verwundert. 

Glas mit Goldfischen

 

Was sind htc-Dateien?

Kategorie: CSS3
Erstellt: Dienstag, 03. Juli 2012 11:01
Zuletzt aktualisiert: Donnerstag, 17. März 2016 18:27
Geschrieben von Martina Major

Der behavior-Filter kommt aus dem Hause Microsoft (siehe Introduction to DHTML Behaviors), er wird ausschliesslich vom IE interpretiert, und stellt keinen Bestandteil der CSS-Spezifikation dar.

Mit diesem Filter lässt sich über eine *.htc-Datei ein Verhalten für ein Element beschreiben.

In der Vergangenheit wurden viele Browser-Probleme im IE über die Verwendung des behavior-Filters mit der passenden htc-Datei kaschiert.

Beispiele

  • der bekannteste Hack ist wohl - iepngfix.htc - für den IE 5+, der Transparenzen sehr kreativ, aber nicht transparent dargestellt hat. In den aktuellen IE-Versionen ist dieser Hack allerdings nicht mehr notwendig.
     
  • ein altbekanntes Beispiel ist auch der csshover.htc-Hack für den IE (<7), der die :hover-Pseudoklasse neben dem a-Element für die übrigen HTML-Elemente nicht unterstützt.
    s.a. http://peterned.home.xs4all.nl/csshover.html


Aktuell wird dieses Verfahren für die Anwendung der neuen CSS3-Eigenschaften sogar in 2 verschiedenen Versionen angeboten.

Beide Hacks beschränken sich auf die Umsetzung der "runden Ecken" und Schatten. Für die durchaus interessantere und vermutlich auch schwierigere Umsetzung der 3D-Funktionalitäten (perspektive, transform, ..) habe ich bisher noch keinen Hack für den IE8 oder 9 im Internet gefunden. Schade.

Auf den Entwicklerseiten von Microsoft wird die Umsetzung der neuen CSS3 Funktionalität bereits angekündigt und beschrieben, aber bekommen können wird diese erst ab dem E10.

 

Anmerkung

Für HTC-Dateien gelten erhöhte Sicherheitsmerkmale. Das bedeutet, dass sich die HTC-Dateien auf dem selben Server befinden müssen, auf dem sich das aufrufende Dokument befindet. Außerdem muss es sich bei der Verbindung auch um das gleiche Protokoll und die gleiche Domain handeln.

Da es sich bei HTC-Dateien um XML handelt und müssen auch die Regeln von XML beachtet werden, z.B. 

  • /> bei leeren Elementen,
  • Anführunsgezeichen

 



 

 

 

^