Ausdruck ihrer IT-

CSS beendet 10 Jahre Bestehen in diesem Jahr! Diejenigen, die sich für eine Weile gewesen sind, verdienen ihr Brot (oder nicht) unter Verwendung von CSS, dann habe bewusst, wie wir für eine gute Auswahl an Schriften gehungert. Selbst mit dem Mangel an Schriften-Designer wie diejenigen bei CSS Zen Garden haben die Verwendung von CSS-Hintergrund-Bilder von Schriftarten in dem Streben nach Gerechtigkeit dabei einige um ihre Entwürfe zu ersetzen hat. Wir haben auch versucht Flash / JavaScript ®-Hacks, um unsere Design-Ziele zu erreichen. Auf keinen Fall ist dies ein falscher Weg, um die wir uns wünschen Schriften in unsere Web-Designs zu bekommen, aber definitiv ist es nicht das begehrteste Weise. und über Jahre Web-Designer, wie ich, haben sich voll auf zehn oder so Fonts für ihre Entwürfe verlassen.

Jüngste Entwicklungen in der Web-Standards und Font-Formate machen es möglich, HTML-Text in Schriften außer den gleichen alten Standard-Schriftarten machen. Kommt in dem "@ fontface" CSS Decleration.

@ Fontface provids eine Lösung für die aktuelle Schriftart-Datei zu verknüpfen und rufen Sie sie aus dem Web. Verwenden von @ fontface können Designer-Schriftarten, ohne den Text als Hintergrundbilder verwenden einfrieren. Die Umsetzung ist sehr geradlinig, wie unten dargestellt, sondern als alle guten Dinge ein CON Teil müssen sie unterstützen nicht alle Browser eine einzige "Schriftart". Wenn Sie planen, in @ fontface Website verwenden mit Cross-Browser-Unterstützung benötigt werden, dann müssen Sie Quellen zu verschiedenen font-Typen derselben liefern.

1. TrueType - Ein Format, das gut aussehen auf dem Bildschirm. Besonders empfohlen für Windows-Browsern (Chrome).
2. OpenType (CFF) - Dieses Format ist besser für den Druck der Arbeit und sieht nicht immer gut unter Windows.
3. EOT - Sie benötigen dieses Format, wenn Sie Internet Explorer ausrichten möchten. IE wird nicht mit irgendwelchen anderen Format. Unsere EOT würde als die "Lite", da sie weder komprimiert noch Domain-eingeschränkt werden.
4. SVG - Das ist ein XML-Format von einigen Browsern einschließlich dem iPhone unterstützt.
5. WOFF - Das Cross-Browser, Web-only-Font-Format ist leicht (Font-Daten ist zip komprimiert) und kann entweder mit TrueType-oder PostScript (CFF) skizziert kompiliert werden. Es wird gegenwärtig von Firefox 3.6 unterstützt +.

Verwenden von @ fontface

  @ Font-face {
 font-family: 'CalligraphyFLFRegular';
 src: url ('CalligraphyFLF.eot');
 src: local ('CalligraphyFLF'), lokale ('CalligraphyFLF'), url ('CalligraphyFLF.woff') format ('WOFF'), url ('CalligraphyFLF.ttf') format ('TrueType'), url ('CalligraphyFLF . SVG # CalligraphyFLF ') format (' svg ');
 }
 @ Font-face {
   font-family: "Ihre Schrift";
   src: url ("fonts / font_filename.eot");
   src: local ("Alternate Name"), lokale ("AlternateName"),
     url ("fonts / font_filename.woff")-Format ("WOFF"),
     url ("fonts / font_filename.otf")-Format ("OpenType"),
     url ("fonts / font_filename.svg # font_filename")-Format ("SVG");
   }
 h2 {font-family: "Ihre Schrift", Georgia, serif;} 

Wie Sie aus dem obigen Beispiel zu sehen, um die gewählte Schriftart Schrift gehören, muss man sich auf einen Satz von fonttypes für das gleiche Schriftbild zu verknüpfen. Daher Leute bezeichnen es als "Font Kit".
Es gibt Font Kits zur Verfügung, die explizit erlaubt die Verknüpfung mit der CSS @ font-face-Eigenschaft, um es unter End User License Agreement (EULA).

Nützliche WebFont Ressourcen:

• Verfügbaren Schriftarten für @ font-face Einbettung Wiki-Seite bei http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Er ist ein renommierter Schrift-Designer, die hunderte von interessanten TrueType-Schriften frei verfügbar für den Einsatz im Web gemacht hat. Seine Schriften sind elegant, dekorativ und verspielt.
• Dieter Steffmann ist ein weiterer großer Schrift-Designer. Auch er hat viele schöne verfügbaren Schriftarten für jedermann zu benutzen gemacht.
• Font-Shop : Fonts bietet speziell für die Web-Nutzung ausgelegt. Mehr als 30 der erfolgreichsten FontFont Familien sind jetzt auch als Web FontFonts. FontShop hat auch eine detaillierte Anleitung WebFont http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Font Squirrel : Vitrinen, dass alle Schriften Font Squirrel bietet für den Einsatz mit @ font-face CSS-Einbettung. Font Squirrel bietet eine beeindruckende Menge an Typ, macht es einfach tot um ein herausgreifen, handlich und bietet "Kits" - die Schrift Ihrer Wahl, in verschiedenen Formaten, mit Demo-HTML & CSS verpackt, die sehr aktuelle @ font-face-Syntax verwendet . Sie bieten auch einen Weg, um Ihre eigene @ font-face-Kits machen . Wenn die Schriftart Sie verwenden möchten, wurde entsprechend (die, die mit dem Computer kommen, sind nicht unbedingt in Ordnung) lizenziert, produziert der Generator EOT, SVG, und hey! WOFF-Dateien.

Eine weitere schnelle tut. Hier ist etwas einfach und schön mit der Kraft der CSS ... aber war schwierig concieve (und es war sicher nicht mich) zu beginnen. Hinzufügen von Schlagschatten, könnte ein peice der Kuchen für viele von uns sein, mit etwas Bildbearbeitungs-Tools wie Photoshop ANF Feuerwerk usw.
Der Grund, warum ich für Schlagschatten mit Hilfe von CSS entschieden ist, dass in der Regel während der Erstellung eines Seiten-Design / html einer Anwendung, die Anforderungen Iteration zu halten. Was ich meine ist, in einer bestehenden Website mit vielen Bildern, wie die, die Anzeige von freinds Liste oder eine Bildergalerie, wird es schwierig sein, die Wiederaufbereitung die gesamte Last der Bilder, die bereits abgeladen hatte, um hinzuzufügen oder zu entfernen, die Schatten, dass für Materie.
Wenn Sie also ein wenig vorausschauendes Denken getan haben während der Erstellung der HTMLs, diese zusätzlichen Divisionen oder fügen Sie in der Regel die Situation ist, dass Sie einen Loop Logic Erzeugung dieser Icons / Thumbnails in XSL, PHP haben. JAVA oder einer anderen Programmierung / Scripting-Sprache, können Sie es jederzeit vergrößern, dann ist nur die Frage der Show und versteckt diese Schatten unter Verwendung der CSS-Eigenschaft display, wie pro die Kunden sich ständig ändernden Anforderungen ... habe ich bis diese Art von zukunftsorientierten getan bevor diese ... aber ahev begann jetzt!

Im Beispiel unten ist das Originalbild schattenfreie und die dropshadows angewendet werden wie nötig! Außerdem habe ich ein wenig mehr gegangen, indem Sie die Tricks meiner früheren Tut (Well! diese wahrscheinlich kürzeste Vielzahl von Tutorials, so ist es nur gerechtfertigt, nannte sie "Tut" 's) über die Verwendung von CSS Clip-Eigenschaft für die Schau nur

Original Image

CSS DropShadow Ergebnisse

Demo ansehen | herunterladen Quelldateien

Warum will ich das zu verstehen??? Humm ...!!

Die meisten CSS-Autoren würden zustimmen, dass CSS-Clip-Eigenschaft ist wahrscheinlich eines der am meisten unbenutzte CSS-Eigenschaften. Es war so richtig für mich und war sehr glücklich, es zu vernachlässigen, bis ich begann Modifizierung der MooTools ZWEI Knob (Pin) Slider-Komponente (mit Range Indicator) .

Es war ein guter Vorschlag von einem der Komponente Benutzern, die Slider-Komponente mit Hilfe abgeschnitten backgroud Bilder (gegen eine variable Breite Teilung), um den Schieber Sortiment zeigen zu modifizieren. So kam meine Zeit, um den Spaß, aber un-Wirtschaftsprüfer (für mich natürlich) Wasser des CSS-Clip-Eigenschaft eingeben.

Na ja! wie schwierig es sein kann? Nicht viel überhaupt ... YES und NO. Die Syntax, um die CSS-Clip-Eigenschaft verwenden, ist ziemlich aufrecht, aber der Sinn / usuage ist ein bisschen croocked. Mit einem Speicher wie meine, immer wenn ich sitzen auf Nachbesserung auf meinem Slider Script ... Ich habe tokeep Rückbezug auf Nutzung dieses Clip-Eigenschaft, um mich daran erinnern, die Logik, die ich in meinem Skript erstellt .... DAMIT! gedacht, um Stift it down, mit einer Hoffnung zu erinnern, das die Zukunft (und auch zum Nutzen derer, die scheinen hilflos vor einem CSS-Clip-Eigenschaft)

Was bedeutet CSS Clip tun?

Clip ist Teil der visuellen Effekte-Modul von CSS 2.1. Einfach ausgedrückt, ist seine Aufgabe, ein sichtbares Fenster oben auf ein Objekt, das nicht abgeschnitten wird, zu platzieren, damit Clipping Bilder und Thumbnails ohne zusätzliche Dateien (I haben bereits diese Funktion, um eine bessere Nutzung der Slider-Komponente erstellen )

Mit dem CSS-Clip-Eigenschaft können Sie einen Ausschnitt mit dem rect Form. Wie viele andere CSS-Eigenschaften (wie margin, padding etc), mit rect erfordert vier Koordinaten Oben, Rechts, Unten, Links (TRBL). Die croocked Natur dieser Eigenschaft entspricht, wenn man einen genaueren Blick auf, wie Clip berechnet die Clipping-Region zu nehmen, mit diesen vier Koordinaten (sendet Gehirn in einen für eine Weile zu werfen). Nun, Sie zu verwirren beginnt der Boden von oben und die rechte von der linken Seite beginnt. . Du siehst, was ich gesagt habe? .... Damit dieser Beitrag ...

Dieses kleine Verwirrung kann leicht verschwinden, die mit diesem visuellen Erläuterung der CSS-Clip / rect Eigenschaft als unten!!

CSS Clip Bedarf

Die Aufgabe, die wir begonnen haben, ist es, die folgende Thumbnail-Bild in ein quadratischer suchen Bild-Clip (und auch ein Weitwinkel-Bild)

Ursprüngliche Thumbnal / Image	Clip Anforderungen für Sqaure Thumbmail

CSS Clip Ergebnisse

Demo ansehen | herunterladen Quelldateien

Bevor wir uns mit CSS zu tun, um unsere Seiten-Layouts zu erstellen, richten einige Inhalte in einer Tabellenzelle hatte schien nur ein Kinderspiel. Setzen Sie einfach das "align" oder "valign"-Eigenschaft der Tabelle, um die Ausrichtung Ihrer Wahl, Stück Kuchen haben!
Mit CSS-Layouts, aber wir haben "vertical-align"-Eigenschaft für die Elemente, scheint es nicht so einfach wie das "align" oder "valign" Eigenschaften sein. Um genauer zu sein specifiic die "vertical-align" scheint nie zu irgendwelchen Ihre Probleme zu lösen, vor allem, wenn sich ein Stück von Cross-Browser CSS zu schreiben.

Ohne den Einsatz von HTML-Tabellen, DAS PROBLEM DER Zentrierung auf Objekt, das ein Bild oder ein Text in einem haltigen Division, hat wahrscheinlich schon jeder UI / CSS Entwickler Alptraum an einem gewissen Punkt zu sein. Dieses Problem weiter extrapoliert Ihre Sorgen auszurichten, wenn das Objekt zu zentrieren ist in der Natur dynamisch, dh, wenn seine Höhe ist variabel (unbekannte Höhe).

Zwar gibt es keine bekannte Lösung, die gerade nach vorne über den Bereich der Browser haben wir zu tun haben will arbeiten, scheint die Lösung, dass ich versucht habe, bei ankommen tut, um in den wenigen Browsern, ich habe es versucht, in Arbeit (IE6, IE 7 , FF).

LÖSUNG:
In Browsern wie Mozilla, Opera und Safari, Der seltsame Verhalten "vertical-align"-Eigenschaft kann zur Vernunft gebracht werden, einfach indem Sie die "Display"-Eigenschaft des übergeordneten Division auf "table-cell" (display: table-cell) .

Das Problem bleibt trotzdem mit dem IE-Browser-Familie, die, noch scheinen nicht, was mit dem "table-cell"-Eigenschaft und unwissend zu verstehen, wie sie, sie ignorieren es einfach sind. Die Lösung unten, wenn auch einfach, ein paar Anzeigen mehr von DOM-Elementen, um Ihre HTML, die Dinge passieren gegeben.

Die CSS-und HTML sieht wie folgt aus
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> Aufrufe: 3456 </ div>
</ Div>
</ Div>

Das Ergebnis sieht wie folgt aus: -

Demo ansehen hier | Quellcode-Dateien (Downloads 452 mal)

Oben ausrichten CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> Ansichten: 1234 </ div>
</ Div>
</ Div>

Das Ergebnis sieht wie folgt aus: -

Unten ausrichten CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> Ansichten: 1234 </ div>
</ Div>
</ Div>

Das Ergebnis sieht wie folgt aus: -

hier sehen Sie die Demo | Download hier

Scheint, wie Alter, da ich versucht habe, eine angemessene Lösung für dieses Problem Ausrichtung zu finden. Aber jetzt mit dieser Lösung, fühle ich mich an etwas Ruhe.

Mit einer Hoffnung, dass eines Tages

• Vertikal-Alignment-Eigenschaft in CSS wird, wie sie aussieht in einer Tabellenzelle arbeiten, ohne sich viel um den heißen Brei
• Zumindest die Einstellung margin-top: auto und margin-bottom: auto, wird als das gleiche Ergebnis wie mit margin-left und margin-right auf auto-Set geben
• Die Browser-Kriege wird über einige Tage sein.
• Es wird dann lediglich ein Browser für alle.

Laden Sie die CSS-und HTML der obigen Lösung hier (Downloaded 452 times) .. für Verständlichkeit, wird die CSS nicht optimiert

PS: Und übrigens, das sind die Miniaturen von einigen Bildern habe ich geklickt ...

Wenn Ihre Forderung ist, um einen Knoten in einer XML-Wert, die eine getrennte Zeichenfolge der Wert enthält aufgeteilt in einzelne Elemente, dann haben Sie den richtigen Ort erreicht ... haben einen Blick auf das Beispiel unten. Wenn Sie sich mit ein wenig XML und XSL sind ... Ich glaube nicht, Sie würden keine Erklärung benötigen.
Außerdem enthält dieses Beispiel Verwendung von XSL-Funktionen wie xsl: call-template, xsl: substring-before, xsl: substring-after, wenn es das ist, was Sie suchen.

XML transformiert werden (food.xml): -
Angenommen, die Aufgabe ist, um die Zeichenfolge getrennt durch Komma tokenize, in den der Tag "Keywords"

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<keywords>Fruits, Vegetables, Pulses, Meat, Cereals </keywords>
</food>

XSL (food.xsl): -

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>XSL 1.0 Delimited String Tokeniser</title>
</head>
<body>
<xsl:value-of select="food/meta"/>
<div >
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="food/keywords" />
<xsl:with-param name="delimitr" select="','" />
</xsl:call-template>
</div>
</body>
</html>
</xsl:template>
<xsl:template name="tokenize">
<xsl:param name="string" />
<xsl:param name="delimitr" />
<xsl:choose>
<xsl:when test="contains($string, $delimitr)">
<div style="border:1px solid red;">
<h3><xsl:value-of select="substring-before($string,$delimitr)" /></h3>
<xsl:variable name="data" select="substring-before($string,$delimitr)"/>
</div>
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="substring-after($string, $delimitr)" /><xsl:with-param name="delimitr" select="$delimitr" /></xsl:call-template>
</xsl:when>
<xsl:otherwise>
<div style="border:1px solid red;">
<h3><xsl:value-of select="$string" /></h3>
</div>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>

Resultierende Ausgabe HTML: -

<div>
<div style="border: 1px solid red;">
<h3>Fruits</h3>
</div>
<div style="border: 1px solid red;">
<h3> Vegetables</h3>
</div>
<div style="border: 1px solid red;">
<h3> Pulses</h3>
</div>
<div style="border: 1px solid red;">
<h3> Meat</h3>
</div>
<div style="border: 1px solid red;">
<h3> Cereals </h3>
</div>
</div>

Unnötig zu sagen ... ändern Sie einfach den Parameter "delimitr" mit dem Trennzeichen Ihrer Wahl

Wenn Sie schon einmal (oder machen ein) ein vertikales Menü haben mit Listenelemente (li)-Tags und CSS, könnte unter Umständen, dies ein weiterer Fehler im Internet Explorer, IE 6 Einsätze, wo diese Lücken zwischen Listenelemente, die Block-Level-Elemente enthalten, dh ob es einen Leerraum zwischen den Listenelementen im Markup. Danke, aber nein danke, scheint die IE-Version 7 frei von diesem Fehler.
Wenn Sie wie ich, und viele mehr, Sie zu diesem Band frustrierter Entwickler, die noch auf ihre neue Layouts, Arbeiten im IE6 zu bekommen, gehören, dann könnte dies als nützlich erweisen. Werfen Sie einen Blick ...

Probe-Markup:

<ul id="menu">
<li> <a href="#"> Startseite </ a> </ li>
<li> <a href="#"> Über </ a> </ li>
<li> <a href="#"> Dienstleistungen </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Kontakt </ a> </ li>
</ Ul>

Vielleicht schaffen einige CSS, ähnlich wie ein unten, um die oben Markup in ein vertikales Menü transfrom ....

Beispiel CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; width: 150px;
}
# Menü li {margin: 0; padding: 0;}
# Menü a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Die Ergebnisse sehen Sie ...

Lösung für diesen Bug ... (modifiziert / CSS fett und kursiv hinzugefügt)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * Diese enthält schwebte Listenelemente * /
}
# Menü li {
margin: 0; padding: 0;
float: left; / * Dies behebt den * /
width: 100%; / * Leerzeichen Fehler im IE6 * /
}
# Menü a {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Wenn die obige Lösung doesnot zur Arbeit erscheinen (bekannten Gründen nur IE6) ... Versuchen Sie diese Methode anstelle

Fügen Sie einfach dieses zusätzliche IE6 nur Vorlagen, um Ihre Markup ...

<-! [If lt IE 7>
<style type="text/css">
# Menü li a {display: inline-block;}
# Menü li a {display: block;}
</ Style>
<[Endif] ->

Wenn XML / XSL-Transformationen ist Ihr Domian, dann gibt es Zeiten, in denen wir eine peice von dynamischen Code verwendet werden Bibliothekselement (gemacht wiederverwendbar sein) wollen. Was ich meine, könnte wahrscheinlich deutlicher gemacht mit diesem Beispiel-Szenario werden.

Stellen Sie sich vor der Erstellung einer Website (und unter Verwendung von XML, XSL transfroms natürlich) und die meisten der Seiten würde ein Kommentar Modul haben. Na ja! dann entweder Kopieren oder fügen Sie diesen Code in jede Seite Vorlage (das ich nicht mehr haben zu sagen, aber die Wartung und Nacharbeit einen Alptraum) oder besser noch, erstellen Sie eine Include-Datei, die in, wo immer Sie wollen, dass es in Ihre Seite gezogen werden könnten ( e) ...
So wie schaffen wir eine XSL-Include-Datei und schließen es innerhalb eines anderen XSL-Datei? Hier ist, wie ...

Nur um das klarzustellen ... hier ist schnell Liste der Dateien, die Sie schaffen würde ... hier werden wir auch Infos über Obst und Gemüse in eine übergeordnete Seite aufgerufen Essen.

1. food.xml - XML-Datendatei auf dem die Transformation angewendet werden wird
2. food.xsl - Haupt-XSL-Datei, die unsere food.xml verändern wird
3. inc_fruits.xsl - XSL-Datei, die Früchte beinhalten Daten zu rendern wird
4. inc_vegtables.xsl - XSL-Datei, die gehören GEMÜSE Daten machen wird

I dont think Ich habe viel zu erklären, die Codes für die oben genannten Elemente, wird selbsterklärend sein ...

FOOD.XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<hr/>
</ Body>
</ Html>
</ Xsl: template>
</ Xsl: stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Laden Sie all die oben genannten Dateien hier (255 Downloads)

Beitrag IE 6 hat MSIE war so freundlich, uns UI-Entwickler, indem noch ein paar Standard-CSS-Eigenschaften zu den meisten anderen Standard-Browser. Eine solche nützliche Eigenschaft in "min-height". Ziemlich geradlinig Eigenschaft, dass keine langatmigen Erklärung bedarf. Wenn ein min-height für eine Teilung eingestellt ist, er behält immer, dass die eingestellte Höhe, wenn der Inhalt es Häuser belegt weniger als es halten kann und vor allem (im Gegensatz zu den Plain-Vanilla "height"-Eigenschaft) Waagen oder in CSS Worten, verhält es sich wie ein Abteilung, deren "Höhe" auf "Auto" eingestellt ...

Für einige von uns armen Entwickler, die noch auf CSS-Code erforderlich sind, das auch in IE6 müssen daran arbeiten, könnte un-Verfügbarkeit der "min-height", eine Show Stopper irgendwann beweisen ... Donot Verzweiflung.

Zum Glück haben wir genug Macken im IE, die wir aus Vorteil zu nutzen und zu hacken unseren Weg durch unser Ziel erreichen würde ... also machen eine Division Division, als ob seine min-height im IE6

Lösung 1: mit dem Unterstrich Hack [ ... Lesen Sie mehr ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML: -
<div class="box1">Some dynamic content with variable height ...</div>

---

Lösung 2: Mit dem CSS-Attribut-Selektor Hack

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>


Das CSS-Attribut Selector Hack nutzt die Tatsache, die älteren Browsern IE6 tha eine atribute-Selektor ignoriert. Beachten Sie die Forderung nach einem anderen Container Division mit class = "SomeClass". Genau das presense der Klasse Attribut für diesen Bereich, überschreibt die Höhe zurück zum Auto für Opera, Mozilla und MSIE7 und später. IE6, der nicht die atribute Selektoren, ignoriert es.

Demo ansehen der min-height Hack für IE6

Wenn Sie XML-und XSL verwenden, dann könnten Sie über eine Zeit kommen können, wenn Sie spielen, um mit Attributen und Werten von XML-Knoten in XSL Sie haben. Sie sind Lasten von Standorten mit langatmigen Infos dazu, aber keiner fand ich waren kurz und präzise ... Dies ist KEINE XML / XSL-Tutorial, aber mein Versuch, Put-zusammen eine Art von Cheat-Liste ...

Die Probe XML, dass wir mit Arbeit sieht wie folgt aus ...

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>
</food>

So Beginnen wir verändern unsere obige XML mit XSL

Beispiel 1: angezeigte Wert bei einem gewählten Attribut

<xsl:value-of select="/food/fruits/item[@name='orange']" /><br />
to get more information about <a href="{/food/fruits/item[@name='orange']/@moreinfo}" target="new" ><xsl:value-of select="/food/fruits/item[@name='orange']/@name" /> </a>

HTML-Ergebnis aussehen wird

Orange is the color and rich in vitamin C,
to get more information about <a href="http://www.orange.com" target="new">

Beispiel 2: Durchschleifen und Anzeigen aller XML-Attributnamen und deren Werte

<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>,
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>

HTML-Ergebnis aussehen wird


attribute name : name, attribute value : mango
attribute name : moreinfo, attribute value : http://www.mango.com
attribute name : name, attribute value : banana
attribute name : moreinfo, attribute value : http://www.banana.com
attribute name : name, attribute value : orange
attribute name : moreinfo, attribute value : http://www.orange.com
attribute name : name, attribute value : Papaya
attribute name : moreinfo, attribute value : http://www.papaya.com


Watch this space, ich werde eine Aktualisierung dieser mit neuen Erkenntnissen ...

Ein CSS-Reset / CSS sind eine Reihe von Element Stile zu einer bestimmten Baseline, die Konsistenz schafft über verschiedene Browser eingestellt.

Wir alle waren der durch die Alpträume des Schreibens Cross-Browser CSS zu. Also, wenn wir schriftlich unsere CSS beginnen, ist es eine Praxis zu setzen es zuerst zu entfernen / zurücksetzen keine Cross-Browser-Inkonsistenzen. CSS-Resets, sind einfach paar Zeilen CSS, dass Sie Ihre CSS beginnen mit, was Ihnen eine saubere Basis zu beginnen, Ihre auf.

Die CSS setzt, dass ich in der Regel dazu neigen, verwenden sieht wie folgt aus

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ol, ul {
list-style: none;
}

H1, H2, H3, H4, H5, H6 {
font-size: 100%;
font-weight: normal;
}

Setzen Sie den Browser Schriftgröße
Beachten Sie auch die Reset-Browser, die Schriftgröße in der folgenden Zeile angewendet wurde ...

html {font-size: 76%;}

Die obige CSS setzt den Browser Schriftgröße auf 10 Pixel, und dies macht es möglich, mit relativen Schriftgrößen (das ist jede wichtige aus einer WAI Konformität prespective) arbeiten
Für z. B. in der folgenden Definition, ist font-size in einer Spannweite bis 10 Pixel, und dass in der paragarph ist auf 14 Pixel gesetzt ...

span {font-size: 1em;}
p {font-size: 1.4em;}