Te drukken

CSS afgerond 10 jaar bestaan ​​dit jaar! Degenen die zijn rond voor een tijdje, verdienen hun brood (of niet) met behulp van CSS, dan kun je op de hoogte hoe we zijn uitgehongerd voor een goede selectie van lettertypen. Zelfs met het ontbreken van fonts ontwerpers zoals die bij CSS Zen Garden hebben gebruik gemaakt van CSS achtergrondafbeeldingen om lettertypen te vervangen in de uitoefening van het doen van enig recht om hun ontwerpen. We hebben ook geprobeerd Flash / JavaScript ® hacks om onze doelstellingen uit het ontwerp te realiseren. In geen geval is dit een verkeerde manier om de lettertypen die we wensen in onze web-ontwerpen te krijgen, maar zeker is het niet de meest wenselijke manier. en meer dan jaar webdesigner, net als ik, hebben een volledig beroep op een tiental lettertypen voor hun ontwerpen.

Recente ontwikkelingen in web-standaarden en het lettertype formaten maken het mogelijk om HTML tekst weer te geven in lettertypes anders dan de oude standaard lettertypen. Wordt geleverd in de "@ fontface" CSS verklaring!.

@ Fontface provids een oplossing om te linken naar de feitelijke font bestand in en haal het van het web. Met behulp van @ fontface, kunnen ontwerpers gebruik maken van fonts zonder dat de tekst als achtergrond beelden bevriezen. De implementatie is erg recht toe recht aan, zoals hieronder wordt weergegeven, maar als alle goede dingen hebben een CON deel aan het, Niet alle browsers ondersteunen een enkele "lettertype". Als u van plan bent om @ fontface te gebruiken in plaats met die cross-browser ondersteuning, dan moet je bronnen te verstrekken aan diverse font-soorten van hetzelfde.

1. TrueType - Een formaat ontworpen om er goed uitzien op het scherm. Aanbevolen met name voor Windows browsers (Chrome).
2. OpenType-lettertypen (CFF) - Dit formaat is beter voor drukwerk en niet altijd goed uitzien op Windows.
3. EOT - U heeft deze indeling als u wilt Internet Explorer richten. IE zal geen gebruik maken enige andere manier. Onze EOT's zou worden beschouwd als "Lite", omdat ze worden niet gecomprimeerd of domein-beperkt.
4. SVG - Dit is een XML-formaat dat wordt ondersteund door een aantal browsers, waaronder de iPhone.
5. WOFF - Deze cross-browser, web-only font formaat is licht van gewicht (lettertype gegevens zip) en kan worden samengesteld met zowel TrueType of PostScript (CFF) schetst. Het wordt momenteel ondersteund door FireFox 3.6 +.

Met behulp van @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular ';
 src: url ('CalligraphyFLF.eot');
 src: lokaal ('CalligraphyFLF'), lokaal ('CalligraphyFLF'), url ('CalligraphyFLF.woff ") formaat (' WOFF '), url (' CalligraphyFLF.ttf") formaat ('TrueType'), url ('CalligraphyFLF . svg # CalligraphyFLF ') formaat (' SVG ');
 }
 @ Font-face {
   font-family: "Uw lettertype";
   src: url ("fonts / font_filename.eot");
   src: lokale ("andere naam"), lokale ("Alternatename"),
     url ("fonts / font_filename.woff") formaat ("WOFF"),
     url ("fonts / font_filename.otf") formaat ("OpenType"),
     url ("fonts / font_filename.svg # font_filename") formaat ("SVG");
   }
 h2 {font-family: "Uw lettertype", Georgia, serif;} 

Zoals je kunt zien in het bovenstaande voorbeeld, om het gekozen lettertype lettertype zijn, moet men om een ​​aantal fonttypes koppelen voor hetzelfde lettertype. Vandaar dat mensen noemen het "Font Kit".
Er zijn Font kits beschikbaar die expliciet maakt de koppeling met de CSS @ font-face eigenschap om het onder End User License Agreement (EULA).

Handige WebFont bronnen:

• Fonts beschikbaar voor @ font-face inbedding wiki-pagina op http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Hij is een gerenommeerd lettertype ontwerper die heeft honderden interessante TrueType fonts vrij beschikbaar voor gebruik op het web. Zijn fonts zijn elegant, decoratief, en speels.
• Dieter Steffmann is een andere grote lettertype ontwerper. Ook hij heeft veel mooie fonts beschikbaar voor iedereen te gebruiken.
• Font winkel : biedt fonts speciaal ontworpen voor web gebruik. Meer dan 30 van de meest succesvolle FontFont families zijn nu beschikbaar als Web FontFonts. FontShop heeft ook een gedetailleerde WebFont gebruikershandleiding http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Font Squirrel : Showcases alle lettertypen die Font Squirrel biedt voor gebruik met de @ font-face CSS inbedding. Font Squirrel biedt een indrukwekkende hoeveelheid van het type, is het doodsimpel om te kiezen uit, en handig biedt "kits" - het lettertype van uw keuze, in verschillende formaten, verpakt met demo HTML & CSS dat zeer actueel @ font-face syntax gebruikt . Ze bieden ook een manier om uw eigen @ font-face kits te maken . Als het lettertype dat u wilt gebruiken is de juiste licentie (degenen die bij uw computer zijn niet per se in orde), de generator produceert EOT, SVG, en hey! WOFF-bestanden.

Een andere snelle tut. Hier is iets eenvoudig en mooi gebruik van de kracht van CSS ... maar was moeilijk concieve (en het zeker was het niet) om te beginnen. Het toevoegen van Slagschaduw, kan een stuk van cake voor velen van ons zijn, met behulp van enkele image editing tools zoals Photoshop anf Vuurwerk etc.
De reden waarom, heb ik gekozen voor slagschaduw met behulp van CSS is dat, meestal tijdens het maken van een pagina-ontwerp / html van een aanvraag, aan de eisen te houden itereren. Wat ik bedoel is, in een bestaande website met veel afbeeldingen, zoals die weergegeven freinds lijst of een image gallery, zal het moeilijk zijn om opnieuw verwerken van de gehele lading van beelden die was al gelost toe te voegen of de schaduwen te verwijderen, want dat materie.
Dus als je gedaan hebt een beetje vooruit denken tijdens het maken van de HTMLS deze extra divisies of toe te voegen meestal de situatie is dat je een Loop Logic het genereren van deze pictogrammen / miniaturen in XSL, PHP hebben. JAVA of een andere programmering / scripting taal, je kan op elk moment toevoegen, dan is alleen de kwestie van show en verbergen van deze schaduwen met behulp van de CSS-display eigendom, volgens de klanten steeds veranderende eisen ... Ik havn't gedaan dit soort vooruitstrevende voordat dit ... maar ahev begonnen nu!

In het onderstaande voorbeeld, het originele beeld is als een schaduw gratis en de dropshadows worden toegepast als nodig! Ook heb ik gegaan een beetje extra, met behulp van de trucs van mijn eerdere Tut (Well! deze waarschijnlijk kortste verschillende Tutorials, dus het is alleen gerechtvaardigd noemde ze "Tut" 's) over gebruik van CSS Clip Eigendom voor pronken alleen

Originele afbeelding

CSS DropShadow resultaten

Bekijk de demo | Download bronbestanden

Waarom wil ik dit begrijpen??? Humm ...!!

De meeste van CSS schrijvers zijn het erover eens dat CSS Clip eigendom is waarschijnlijk een van de meest niet-gebruikte CSS-eigenschappen. Het was zo waar ook voor mij en was het meest blij om het te negeren, totdat ik begonnen met het wijzigen van de MooTools TWEE knop (pen) Slider Component (met Range Indicator) .

Er was een goede suggestie van een van de component gebruikers om de component Slider met geschoren backgroud beelden (tegen een variabele breedte divisie) naar de slider range aangeven te wijzigen. Zo kwam mijn tijd aan de pret, maar niet-registeraccountant (voor mij natuurlijk) water van de CSS Clip eigendom in te voeren.

Nou! hoe moeilijk het kan zijn? Niet veel op alle ... JA en NEE. De syntax van de CSS Clip eigendom te gebruiken is vrij rechtop maar de betekenis / usuage is een beetje croocked. Met een geheugen als de mijne, iedere keer zit ik bewerken om mijn Slider Script ... Ik heb tokeep verwijzen naar het gebruik van deze CLIP eigendom, herinner ik mezelf eraan de logica die ik heb gemaakt in mijn script .... DUS! dacht pen neer, met een hoop om te onthouden dat de toekomst (en ook ten behoeve van degenen die lijken boggled door de CSS Clip Eigendom)

Wat doet CSS Clip doen?

Clip is een onderdeel van de visuele effecten module van CSS 2.1. Simpel gezegd, de taak om een ​​zichtbaar venster boven op een object dat wordt geknipt, dus het knippen van foto's en het maken van miniaturen, zonder dat u extra bestanden (ik heb deze functie al beter benut in de component Slider maken )

Met behulp van de CSS Clip woning, kunt u een knipsel met behulp van de rect vorm. Net als veel andere CSS-eigenschappen (zoals marge, padding, enz.), met behulp van rect zijn vier coördinaten Boven, Rechts, Onder, Links (TRBL). De croocked aard van deze woning aan wanneer je een kijkje op hoe clip berekent de clipping regio, met behulp van deze vier coördinaten (stuurt hersenen in een worp voor een tijdje). Nu te verwarren je de onderkant begint vanaf de top, en de rechter gaat uit van de links. . Zie je wat ik zei? .... Vandaar dat dit bericht ...

Deze kleine verwarring kan gemakkelijk, verdwijnen met deze visuele uitleg van de CSS Clip / eigenschap rect, zoals hieronder!!

CSS Clip Eisen

De taak die we zijn begonnen is aan de volgende Thumbnail image clip in een rechthoek is op zoek afbeelding (en ook een groothoek afbeelding)

Originele Thumbnal / Image	Clip Eisen aan Sqaure Thumbmail

CSS Clip resultaten

Bekijk de demo | Download bronbestanden

Voordat we te maken gehad met CSS op onze pagina lay-outs te creëren, waarbij u bepaalde inhoud in een tabel cel leek net kinderspel. U hoeft alleen maar de "lijnen" of "valign" eigendom van de tabel om de uitlijning van uw keuze, fluitje van een cent hebben!
Met CSS-lay-outs, maar we hebben "vertical-align 'eigenschap voor de elementen, lijkt het niet zo eenvoudig te zijn als de" align "of" valign "eigenschappen. Om meer specifiic de "vertical-align 'nooit lijkt op te lossen al uw problemen, vooral als zijn schrijven een fluitje van een cross-browser CSS.

Zonder het gebruik van HTML-tabellen, het probleem van het centreren op object, of het nu een afbeelding of een tekst in een bevattende divisie, is waarschijnlijk om de UI / CSS ontwikkelaars nachtmerrie op een bepaald punt. Dit probleem extrapoleert verder je zorgen af ​​te stemmen, als het object dat moet worden gecentreerd is dynamisch van aard, dat wil zeggen wanneer de hoogte is variabel (onbekend hoogte).

Hoewel er voor zover bekend geen recht toe recht aan oplossing die zou werken het gehele scala van browsers hebben we te maken met de oplossing die ik heb geprobeerd om te komen tot wel lijken te werken in de weinige browsers die ik heb het geprobeerd (IE6, IE 7 , FF).

OPLOSSING:
In browsers zoals Mozilla, Opera en Safari, Het vreemde gedrag "vertical-align 'eigenschap kan worden gebracht tot bezinning, simpelweg door het instellen van de" display "eigendom van de bevattende divisie' table-cell" (display: table-cell) .

Het probleem blijft nog steeds met IE familie van browsers, die maar niet lijken te begrijpen wat er met de 'table-cell "eigendom en onwetend als ze zijn, ze gewoon negeren. De oplossing hieronder gegeven, hoewel eenvoudig, advertenties een paar DOM-elementen om uw HTML om dingen te laten gebeuren.

De CSS en HTML ziet er als volgt
.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/> bekeken: 3456 </ div>
</ Div>
</ Div>

Het resultaat ziet er als volgt uit: -

hier demo bekijken | Download Source Files (gedownload 448 keer)

TOP Lijn 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/> bekeken: 1234 </ div>
</ Div>
</ Div>

Het resultaat ziet er als volgt uit: -

BOTTOM Lijn 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/> bekeken: 1234 </ div>
</ Div>
</ Div>

Het resultaat ziet er als volgt uit: -

hier demo bekijken | Download hier

Het lijkt erop dat leeftijd, omdat ik probeerde om een ​​redelijke oplossing voor dit uitlijning probleem te vinden. Maar nu met deze oplossing, voel ik me weinig vrede.

Met een hoop dat op een dag

• verticale uitlijning onroerend goed in CSS zal werken zoals het hoort in een tabel cel, zonder te veel rond de pot
• Tenminste, het instellen van margin-top: auto en margin-bottom: auto, zal geven hetzelfde resultaat als bij margin-left en de margin-right op auto
• De browser oorlogen zal over enkele dagen.
• Er zal alleen een browser voor iedereen.

Download de CSS en HTML van de bovenstaande oplossing hier (gedownload 448 keer) .. voor begrijpelijkheid, wordt de CSS niet geoptimaliseerd

PS: En trouwens, dat zijn thumbnails van een aantal foto's die ik heb geklikt ...

Als uw vereiste is dat splitsen een knooppunt waarde in een XML, dat een gescheiden tekenreeks van waarde bevat, in individuele items, dan bent u aan het juiste adres ... eens een kijkje op het onderstaande voorbeeld. Als u bekend bent met een beetje van XML en XSL ... ik denk niet dat je enige uitleg nodig hebben.
Ook dit voorbeeld omvat het gebruik van XSL-functies zoals xsl: call-template, xsl: substring-voor, xsl: substring-after, als dat is wat u zoekt.

XML worden omgezet (food.xml): -
Neem aan dat de taak is om de string gescheiden tokenize door een komma, in de de 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>

Resulterende uitgang 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>

Onnodig te zeggen dat ... verander gewoon de parameter "delimitr" om de afbakening van uw keuze

Als u ooit gemaakt (of het maken van een) een verticale menu met behulp van de lijst items (li) tags en CSS, kunt u tegenkomen, is dit nog een bug in Internet Explorer, waar IE 6 inserts deze kloof tussen de lijst met items die block-level elementen bevatten, dat wil zeggen als er een witruimte tussen de lijstitems in de markup. Bedankt, maar nee dank je, de IE versie 7 lijkt vrij is van deze bug.
Als je zoals ik, en nog veel meer, behoort u tot deze groep van gefrustreerde ontwikkelaars, die nog aan hun nieuwe lay-outs, het werken in IE6 te krijgen, dan kan dit nuttig zijn. Neem een ​​kijkje ...

Voorbeeld opmaak:

<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> Over </ a> </ li>
<li> <a href="#"> Services </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Neem contact met ons </ a> </ li>
</ Ul>

Je zou kunnen maken wat CSS, vergelijkbaar met een onder, op het bovenstaande opmaak transfrom in een verticale menu ....

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

De resultaten ziet u ...

Oplossing voor deze bug ... (gewijzigd / toegevoegd CSS in vet cursief)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * deze bevat gedreven lijstitems * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Dit corrigeert de * /
width: 100%; / * whitespace bug in IE6 * /
}
# Menu a {
display: block; color: # 555555;
text-decoration: none;
padding: 15px 0;
line-height: 2.5; border-bottom: 1px solid # fff;
}

Als de bovenstaande oplossing gebeurt onafhankelijk lijkt te werken (om redenen bekend dat IE6 beschikbaar) ... in plaats daarvan proberen deze methode

Voeg deze extra IE6 alleen stijlen om uw opmaak ...

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

Als XML / XSL-transformaties is uw domian, dan zijn er momenten waarop we een stuk van dynamische code te gebruiken bibliotheekitem (gemaakt worden herbruikbare) willen. Wat ik bedoel, kan waarschijnlijk worden gemaakt met dit voorbeeld duidelijk scenario.

Stel je voor dat het maken van een website (en het gebruik van XML, XSL transfroms natuurlijk) en de meeste van de pagina's zou een Opmerkingen Module hebben. Nou! vervolgens te kopiëren of deze code plakken in elke pagina template (die ik dont have zeggen, maar maken het onderhoud en rework een nachtmerrie), of nog beter, maak je een INCLUDE-bestand dat kan in waar je zelf wil worden getrokken in uw pagina ( s) ...
Dus Hoe creëren we een XSL INCLUDE-bestand en dit opnemen in een andere XSL-bestand? Hier is hoe ...

Gewoon om dingen duidelijk maken ... hier is een snelle lijst met bestanden die je zou maken ... hier, zullen we ook informatie over fruit en groenten in een bovenliggende pagina genaamd voedsel.

1. food.xml - XML-gegevensbestand, waarop de transformatie zal worden toegepast
2. food.xsl - belangrijkste XSL-bestand, dat onze food.xml zal transformeren
3. inc_fruits.xsl - XSL-bestand dat onder meer zal maken vruchten gegevens
4. inc_vegtables.xsl - XSL-bestand dat onder meer zal maken vetetables gegevens

Ik denk niet dat ik moet uitleggen veel, de codes voor bovenstaande elementen, zal zijn spreekt voor zichzelf ...

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>

Download al deze bestanden hier (249 downloads)

Bericht IE 6, is MSIE zo vriendelijk geweest om ons UI ontwikkelaars door het toevoegen van een paar meer CSS eigenschappen standaard op de meeste andere standaard browsers. Een van die nuttige eigenschap in 'min-height ". Pretty straight forward onroerend goed dat geen lange adem uitleg behoeft. Als een min-height voor een divisie is ingesteld, altijd dat bepaalde hoogte blijft wanneer de inhoud ervan huizen neemt minder dan het belangrijkste is kan houden en (in tegenstelling tot de plain vanilla "height" eigendom) schalen of in CSS woorden, het gedraagt ​​zich als een afdeling waarvan de "hoogte" is ingesteld op "auto" ...

Voor sommigen van ons arme ontwikkelaars, die nog nodig zijn om code CSS die ook moeten werken in IE6, kunnen niet-beschikbaarheid van de "min-height ', soms blijken een show stopper ... donot wanhoop.

Gelukkig hebben we genoeg eigenaardigheden in IE, dat we gebruiken om uit te maken en te hacken onze weg door om ons doel te bereiken ... dat wil zeggen een DIVISIE divisie alsof het min-height in IE6

Oplossing 1: Het gebruik van de underscore Hack [ ... Lees meer ]

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

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

---

Oplossing 2: Met behulp van de CSS Attribute Selector 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>


De CSS Attribute Selector Hack maakt gebruik van het feit dat de browsers eerder tha IE6 een atribute-selector genegeerd. Let op de eis van een andere container divisie met class = "someclass". Alleen al de presense van de klasse attribuut voor deze divisie, heeft voorrang op de hoogte Terug naar Auto voor Opera, Mozilla en MSIE7 en later. IE6, die geen ondersteuning biedt voor atribute selectors, negeert het.

Bekijk de demo van de min-height hack voor IE6

Als u XML en XSL, dan kun je misschien zijn gekomen over een tijd, wanneer je moet spelen met attributen en waarden van de XML-nodes in je XSL. Ze zijn veel sites met lange adem info over deze, maar geen enkele vond ik waren kort en precies ... Dit is geen XML / XSL tutorial, maar mijn poging om put-samen een soort cheat lijst ...

Het voorbeeld-XML-dat we werken met ziet er als volgt ...

<?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>

Dus laten we beginnen met de transformatie van onze bovenstaande XML met behulp van XSL

Voorbeeld 1: Weergave van waarde op een gekozen kenmerk

<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 resultaat eruit zal zien

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

Voorbeeld 2: doorlussen en weergeven van alle XML-attribuut Namen en hun waarden

<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 resultaat eruit zal zien


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, zal ik een update van deze nieuwe bevindingen ...

Een CSS Reset is / zijn CSS om een aantal elementen stijlen ingesteld op een specifieke uitgangssituatie voor deze samenhang creëert in verschillende browsers.

We hebben allemaal al de door de nachtmerries van het schrijven van cross-browser CSS. Dus als we beginnen met het schrijven van onze CSS, Het is een praktijk te resetten voor het eerst te verwijderen / reset elke cross browser inconsistenties. CSS Resets, zijn eenvoudig paar regels CSS dat je je CSS te beginnen, waardoor u een schone basis om te beginnen met het bouwen van uw op.

De CSS-resets die ik normaal de neiging om te gebruiken ziet er als volgt

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: normaal;
}

Reset de browser lettergrootte
Let ook op de reset die is toegepast op de browser lettergrootte in de volgende regel ...

html {font-size: 76%;}

De bovenstaande CSS reset de browser lettergrootte van 10 pixels, en dit maakt het mogelijk om te werken met relatieve lettergroottes (dat is elke belangrijke van een WAI-naleving perspectivisch)
Voor bijvoorbeeld in de volgende definitie, is font-size in een span ingesteld op 10 pixels en dat in de paragarph is ingesteld op 14 pixels ...

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