Uttrycka det

CSS i 10 år existens i år! De som har funnits ett tag, tjäna sitt bröd (eller inte) med hjälp av CSS, så du kanske vet hur vi har svälta för att ett bra utbud av teckensnitt. Även med avsaknaden av typsnitt designers som de på CSS Zen Garden har använt sig av CSS bakgrundsbilder att ersätta teckensnitt i jakten på att göra lite rättvisa sina konstruktioner. Vi har också försökt Flash / JavaScript ® hacka för att nå våra mål. På intet sätt är detta ett fel sätt att få typsnitt vi önskar i våra web design, men definitivt är det inte det mest önskvärda sättet. och under åren webbdesigner, liksom jag, har fullt förlitat sig på ett tiotal teckensnitt för sina konstruktioner.

Den senaste utvecklingen inom webbstandarder och format typsnitt gör det möjligt att göra HTML-text i typsnitt än samma gamla standard teckensnitt. Kommer i "@ fontface" CSS decleration.

@ Fontface provids en lösning för att länka till den aktuella teckensnittet filen och hämta det från webben. Med @ fontface kan designers använder typsnitt utan att behöva frysa texten som bakgrundsbilder. Genomförandet är mycket rakt fram, som visas nedan men som alla goda ting har en CON del av avtalet, inte alla webbläsare stödjer en enda "typsnitt". Om du planerar att använda @ fontface i sida med som kräver kors webbläsare support, då du måste ge källor till olika teckensnitt-typer av densamma.

1. TrueType - Ett ​​format utformad för att se bra ut på skärmen. Rekommenderas speciellt för Windows webbläsare (Chrome).
2. OpenType (CFF) - Detta format är bättre för tryck arbete och inte alltid ser bra ut på Windows.
3. EOT - Du behöver detta format om du vill rikta Internet Explorer. IE kommer inte att använda ett annat format. Vår EOT: s skulle vara "Lite", eftersom de varken komprimeras eller domän-begränsad.
4. SVG - Detta är ett XML-format som stöds av vissa webbläsare, inklusive iPhone.
5. WOFF - Detta cross-browser, web-only font format är lätt (Font data är zip komprimerat) och kan sammanställas med antingen TrueType eller PostScript (CFF) beskriver. Det stöds för närvarande av Firefox 3.6 +.

Användning @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular ';
 src: url ('CalligraphyFLF.eot');
 src: Lokal (CalligraphyFLF '), lokal (CalligraphyFLF), url ("CalligraphyFLF.woff) format (" WOFF), url ("CalligraphyFLF.ttf) format (" TrueType), url ("CalligraphyFLF . SVG # CalligraphyFLF) format ("SVG ');
 }
 @ Font-face {
   font-family: "Din typsnitt";
   src: url ("typsnitt / font_filename.eot");
   src: lokal ("Alternate namn"), lokal ("Alternatename"),
     url ("typsnitt / font_filename.woff") format ("WOFF"),
     url ("typsnitt / font_filename.otf") format ("OpenType"),
     url ("typsnitt / font_filename.svg # font_filename") format ("SVG");
   }
 H2 {font-family: "Din typsnitt", Georgia, serif;} 

Som du kan se från exemplet ovan, att inkludera den valda teckensnittet, måste man länka till en uppsättning fonttypes för samma typsnitt. Därför människor hänvisar till det som "Font Kit".
Det finns Font kit som uttryckligen tillåter samman med CSS @ font-face egenskapen den under End User License Agreement (EULA).

Användbara WebFont resurser:

• Teckensnitt för @ font-face bäddat wiki sida på http://webfonts.info/wiki/index.php?title=Main_Page
  
• Stråle Larabie . Han är ett välkänt typsnitt designer som har gjort hundratals intressanta TrueType teckensnitt fritt tillgängliga för användning på webben. Hans typsnitt är elegant, dekorativa och lekfulla.
• Dieter Steffmann är en annan stor font designer. Även han har gjort många vackra typsnitt tillgängliga för alla att använda.
• Font butiken : erbjuder typsnitt som utformats speciellt för webb. Mer än 30 av de mest framgångsrika FontFont familjerna finns nu som Web FontFonts. FontShop har också en detaljerad WebFont manual http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Font Squirrel : visar upp alla de teckensnitt som Font Squirrel erbjuder för användning med @ font-face CSS inbäddning. Font Squirrel erbjuder en imponerande mängd av typ, är det dött enkelt att välja en ut, och handily erbjuder "kit" - typsnittet som du väljer, i flera format, medföljer demo HTML & CSS som använder mycket aktuellt @ font-face syntax . De erbjuder också ett sätt att göra dina egna @ font-face kit . Om typsnittet du vill använda har licensierats lämpligt sätt (de som följde med datorn är inte nödvändigtvis okej), producerar generatorn EOT, SVG, och hey! WOFF filer.

En annan sammanfattning Tut. Här är något enkelt och fint hjälp av kraften i CSS ... men var svårt concieve (och det säkert inte var jag) att börja med. Lägga DropShadow, kan vara en lappa av tårta för många av oss, att använda någon bildredigering verktyg som Photoshop ANF Fireworks etc.
Anledningen valde jag för skugga med hjälp av CSS är att oftast när du skapar en sida design / html av en ansökan, de krav som håller iteration. Vad jag menar är, i en befintlig webbplats med många bilder, som de visar freinds lista eller ett bildgalleri, kommer det att bli svårt att upparbeta hela laddningen av bilder som redan hade lossats att lägga till eller ta bort skuggor, för den ärendet.
Så om du har gjort en liten framåttänkande samtidigt som man skapar HTMLS att lägga till dessa extra divisioner eller oftast situationen är att du har en Loop Logic generera dessa ikoner / miniatyrer i XSL, PHP. JAVA eller något annat program / skriptspråk, kan du lägga till den när som helst, då är bara frågan om showen och dölja dessa skuggor med hjälp av CSS Display egendom, enligt kunderna ständigt föränderliga kraven ... Jag havn't gjort denna typ av framåttänkande innan denna ... men ahev igång nu!

I exemplet nedan är den ursprungliga bilden skuggan gratis och dropshadows appliceras som krävs! Dessutom har jag gått lite extra, genom att använda knep för min tidigare Tut (Well! detta förmodligen är kortast olika Tutorials, så det är bara motiverat att kalla dem "Tut" 's) om hjälp CSS Clip Property för att visa upp enbart

Originalbilden

CSS DropShadow Resultat

Visa Demo | Ladda ner sourcefiles

Varför vill jag förstå detta?? ... Humm!!

De flesta av CSS författare håller med om att CSS Clip egendomen är förmodligen en av de mest oanvända CSS-egenskaper. Det var så sant för mig också och var mest glad att försumma det, tills jag började ändra MooTools TWO Vred (Pin) Slider-komponenten (med Range Indicator) .

Det var ett bra förslag från en av de ingående användarna att ändra Slider-komponenten med klippta bakgrunden, bilder (mot en variabel bredd division) för att indikera reglaget området. Således kom min tid för att skriva det roliga, men un-chartrade (för mig självklart) vatten i CSS Clip fastigheten.

Tja! hur svårt det kan vara? Inte mycket alls ... Ja och nej. Syntaxen att använda CSS Clip fastigheten är ganska upprätt, men innebörden / usuage är lite croocked. Med ett minne som mitt, varje gång jag sitter att omarbeta på min Slider Script ... Jag har tokeep hänvisar till användning av detta klipp egendom, för att påminna mig själv den logik som jag har skapat i mitt manus .... BORT! ansåg att pennan ner med en förhoppning att komma ihåg det i framtiden (och även till förmån för dem som verkar boggled av CSS Clip Property)

Vad gör CSS Clip?

Clip är en del av visuella effekter modul CSS 2,1. Enkelt uttryckt, är dess uppgift att placera ett synligt fönster ovanpå ett objekt som är klippt, varför klippning bilder och skapa thumbnails utan att behöva skapa ytterligare filer (jag har redan lagt den här funktionen användas bättre i Slider-komponenten )

Använda CSS Clip egendom, kan du skapa en klippning med rect formen. Liksom många andra CSS-egenskaper (som marginal, padding etc), med hjälp av rect kräver fyra koordinater Top, höger och undre, vänster (FEL). Den croocked naturen av fastigheten speglar när man tar en närmare titt på hur klipp beräknar klippning regionen med hjälp av dessa fyra koordinater (skickar hjärnan i en kasta ett tag). Nu till förvirra dig ner startar från toppen, och den högra börjar från vänster. . Du ser vad jag sa? .... Därför detta inlägg ...

Denna lilla förvirring kan lätt försvinna med denna visuella förklaring av CSS klipp / rect egendom som nedan!!

CSS Clip Krav

Den uppgift vi har igång är att klippa följande Miniatyrbild bilden i rektangulär ser bild (och även en vidvinkel bild)

Original Thumbnal / bild	Clip Krav Sqaure Thumbmail

CSS Clip Resultat

Visa Demo | Ladda ner sourcefiles

Innan vi hade att göra med CSS för att skapa våra sidlayouter, anpassa visst innehåll i en tabellcell verkade bara en barnlek. Ställ bara in "justera" eller "valign" egendom i tabellen att anpassningen av ditt val, piece of cake!
Med CSS-layouter, även om vi har "vertikal-align" egendom för elementen, verkar det inte vara så enkelt som "justera" eller "valign" egenskaper. För att vara mer specifiic den "vertikala-align" aldrig verkar lösa alla dina problem, särskilt om är skriva en bit olika webbläsare CSS.

Utan användning av HTML-tabeller, problemet med centrering på objekt, vare sig det en bild eller text i en innehåller division, har nog varit alla UI / CSS utvecklare mardröm någon gång. Detta problem extrapolerar ytterligare dina bekymmer att anpassa, om objektet som ska centreras är dynamisk till sin natur, det vill säga när dess höjd är variabel (okänd höjd).

Men det finns ingen känd rättfram lösning som skulle fungera inom alla webbläsare vi har att göra med, den lösning som jag har försökt att komma fram till inte verkar fungera i de få webbläsare som jag har provat det i (IE6, IE 7 , FF).

LÖSNING:
I webbläsare som Mozilla, Opera och Safari, Den märkliga uppför "vertikal-align" egendom kan föras till sina sinnen, helt enkelt genom att ställa in "display" egendom innehåller divisionen till "table-cell" (display: table-cell) .

Problemet är fortfarande med IE familj webbläsare som inte ännu inte tycks förstå vad de ska med "table-cell" egendom och okunniga som de är, de bara ignorera det. Lösningen nedan, men enkla, annonser några mer DOM element i HTML för att få saker att hända.

CSS och HTML ser ut så här
.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/> Visningar: 3456 </ div>
</ Div>
</ Div>

Resultatet ser ut så här: -

visa demo här | Ladda ner Källfiler (Nedladdat 452 gånger)

TOP Rikta 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/> Visningar: 1234 </ div>
</ Div>
</ Div>

Resultatet ser ut så här: -

BOTTEN Rikta 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/> Visningar: 1234 </ div>
</ Div>
</ Div>

Resultatet ser ut så här: -

visa demo här | Ladda ner här

Verkar som åldrar, eftersom jag försökte att hitta en rimlig lösning på denna anpassning problem. Men nu med denna lösning, känner jag på lite lugn.

Med en förhoppning om att en dag

• vertikal inriktning fastighet i CSS kommer att fungera som det gör i en tabellcell, utan att behöva slå mycket kring het gröt
• Åtminstone sätta margin-top: Auto och margin-bottom: auto, kommer att ge samma resultat som med margin-left och margin-rätten inställd på auto
• De webbläsaren krig kommer att vara över en dag.
• Det kommer bara en webbläsare för ALLA.

Hämta CSS och HTML-koden för ovanstående lösning här (Nedladdat 452 gånger) .. För begriplighet är CSS inte optimerats

PS: Och förresten, de är miniatyrer av några bilder jag har klickat ...

Om dina krav är att dela en nod värde i ett XML, som innehåller en avgränsad sträng av värde, till enskilda poster, så har du kommit rätt ... ta en titt på exemplet nedan. Om du är bekant med en liten bit av XML och XSL ... Jag tror inte du skulle behöva någon förklaring.
Även detta exempel användning av XSL funktioner som xsl: call-mall, xsl: delsträng-före, xsl: delsträng-efter, om det är vad du är ute efter.

XML för att omvandlas (food.xml): -
Antag att uppgiften är att tokenize strängen avgränsas med kommatecken, i taggen "sökord"

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

Resultat utgång 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>

Onödigt att säga ... bara ändra parametern "delimitr" till avgränsare du vill

Om du någonsin har gjort (eller gör en) en vertikal meny med listobjekt (Li) taggar och CSS, kan du stöta på detta ännu en bugg i Internet Explorer, där IE 6 inlägg dessa luckor mellan listobjekt som innehåller element blocknivå, dvs om det finns något blanktecken mellan listobjekten i markeringen. Tack, men nej tack, verkar IE version 7 fri från detta fel.
Om som jag, och många fler, du tillhör denna skara frustrerade utvecklare som fortfarande måste få sina nya layouter, som arbetar i IE6, då detta kan vara till nytta. Ta en titt ...

Exempel på kod:

<ul id="menu">
<li> <a href="#"> Hem </ a> </ li>
<li> <a href="#"> Om </ a> </ li>
<li> <a href="#"> Tjänster </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> Vanliga frågor </ a> </ li>
<li> <a href="#"> Kontakta oss </ a> </ li>
</ Ul>

Du kan skapa viss CSS, liknande en nedan, för att transfrom ovanstående markeringar i en vertikal meny ....

Provet CSS ...
# Meny {
margin: 0; padding: 0; Bakgrund: # FF9900;
list-style-type: none; width: 150px;
}
# Menyn li {margin: 0; padding: 0;}
# Menyn en {display: block;
color: # 555.555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Resultatet ser du ...

Lösning för denna bugg ... (modifierad / till CSS i fet stil)

# Meny {
margin: 0; padding: 0; Bakgrund: # FF9900; list-style-type: none; width: 150px;
float: left; / * Denna innehåller flottades listobjekt * /
}
# Meny li {
margin: 0; padding: 0;
float: left; / * Detta fixar * /
width: 100%, / * whitespace buggen i IE6 * /
}
# Menyn en {
display: block; color: # 555.555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Om ovanstående lösning doesnot verkar fungera (av skäl som är kända för att IE6 endast) ... prova denna metod i stället

Lägg bara till den kompletterande IE6 endast stilar till din markup ...

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

Om XML / XSL Förvandlas är din domian, då finns det tillfällen då vi vill ha en lappa av Dynamic kod som ska användas bibliotekspost (göras återanvändbar). Vad jag menar, skulle förmodligen bli mer tydliga med detta exempel scenario.

Tänk dig att du skapar en webbplats (och med hjälp av XML, XSL transfroms självklart) och de flesta av sidorna skulle ha en Kommentar modul. Tja! sedan antingen du kopiera eller klistra in den här koden i varje sidmall (som jag inte har något att säga, men gör underhåll och omarbetningar en mardröm) eller ännu bättre, skapar du en include-fil som kan dras in var du vill ha det i din sida ( s) ...
Så Hur skapar vi en XSL INCLUDE fil och inkludera den i en annan XSL fil? Här är hur ...

Bara för att göra saker klart ... här är snabb lista över filer som du skulle skapa ... här kommer vi bland annat info om frukt och grönsaker till en överordnad sida som heter mat.

1. food.xml - XML-datafil som omvandlingen ska tillämpas
2. food.xsl - Main XSL-fil, som kommer att förändra vårt food.xml
3. inc_fruits.xsl - XSL innehåller fil som kommer att göra frukt uppgifter
4. inc_vegtables.xsl - XSL innehåller fil som kommer att göra vetetables uppgifter

Jag tror inte jag har att förklara mycket, koderna för ovanstående faktorer kommer att vara självförklarande ...

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>

Ladda ner alla dessa filer här (253 nedladdningar)

Inlägg IE 6 har MSIE varit vänlig nog att vi UI utvecklare genom att lägga till några fler CSS-egenskaper standard för de flesta andra vanliga webbläsare. En sådan användbar egenskap i "min-höjd". Ganska rakt fram fastigheter som behöver ingen lång omständlig förklaring. När en min-höjd för en division är inställd, det alltid behåller den uppsättningen höjd när det innehåll som husen upptar mindre än den kan hålla och allt (till skillnad från plain vanilla "höjd" egendom) skalor eller CSS ord, beter det som en delningen vilkas "höjd" är inställd på "auto" ...

För vissa av oss stackars utvecklare som fortfarande krävs för att koda CSS som också måste arbeta i IE6, kan un-tillgängligheten av "min-höjd", visar en show propp någon gång ... inte apparaten förtvivlan.

Lyckligtvis har vi tillräckligt med egenheter i IE, att vi skulle använda för att reda fördel och hacka oss igenom för att nå vårt mål ... dvs göra en DIVISION division som om den min-höjd i IE6

Lösning 1: Använda understreck Hack [ ... Läs mer ]

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

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

---

Lösning 2: Använda CSS attribut 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>


CSS attribut Selector Hack drar fördel av det faktum webbläsarna tidigare tha IE6 ignoreras en atribute-väljare. Observera kravet på en annan behållare division med class = "someclass". Bara presense i klassen attributet för denna uppdelning, åsidosätter höjden tillbaka till auto för Opera, Mozilla och MSIE7 och senare. IE6, som inte stöder atribute väljare, ignorerar det.

Visa demo av min höjd hack för IE6

Om du använder XML och XSL, då kanske du har stött på en tid, när man har att leka med attribut och värderingar XML noder i dig XSL. De är massor av platser med långa omständlig info om detta, men ingen jag hittade var kortfattade och precisa ... Detta är inte XML / XSL tutorial, men mitt försök att sätta-ihop några slags fusk lista ...

Provet XML att vi kommer att arbeta med ser ut så här ...

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

Så låter börja omvandla våra ovan XML med XSL

Exempel 1: Visar värdet vid en vald 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-resultat kommer att se ut

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

Exempel 2: Looping igenom och visa alla XML attributnamn och deras värderingar

<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-resultat kommer att se ut


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


Titta på detta utrymme, jag håller uppdatera detta med nya rön ...

En CSS Reset / vilka CSS för att ställa ett antal inslag stilar till en viss baslinje som skapar överensstämmelse mellan olika webbläsare.

Vi har alla varit genom mardrömmar skriva olika webbläsare CSS-talet. Så när vi börjar skriva vår CSS, Det är en praxis att återställa det först att ta bort / återställa alla cross webbläsaren inkonsekvenser. CSS Återställer är enkla raderna i CSS som du börjar din CSS, vilket ger dig en ren bas att börja bygga din på.

CSS återställer som jag normalt brukar använda ser ut så här

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

Återställ storleken webbläsaren font
Också notera återställningen som har tillämpats till webbläsaren teckenstorlek i följande rad ...

html {font-size: 76%;}

Ovanstående CSS återställer webbläsaren teckenstorlek till 10 pixlar, och detta gör det möjligt att arbeta med relativa teckenstorlekar (vilket är varje viktigt ur ett WAI efterlevnad prespective)
För t.ex. i följande definition är font-storlek i en spann inställd på 10 pixlar och att i paragarph sätts till 14 pixlar ...

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