Duke shprehur IT

CSS përfunduar 10 vjet ekzistencën këtë vit! Ata që kanë qenë rreth për një kohë, duke fituar bukën e tyre (ose jo) duke përdorur CSS, atëherë ju mund të vetëdijshëm se si ne kemi qenë të pamjaftueshme për një përzgjedhje të mirë të fonts. Edhe me mungesën e fonts designers si ata në Xhennet CSS Zen kanë bërë përdorimin e imazheve CSS sfond për të zëvendësuar fonts në ndjekje të bërë disa drejtësisë në planet e tyre. Ne kemi provuar edhe Flash / JavaScript ® hacks për të arritur qëllimet tona të projektimit. Në asnjë mënyrë kjo është një mënyrë e gabuar për të marrë fonts që dëshirojmë në planet tona të internetit, por pa dyshim, kjo nuk është mënyra më e dëshirueshme. dhe gjatë viteve projektuesi web, si unë, janë mbështetur plotësisht në dhjetë apo më shumë fonts për planet e tyre.

Zhvillimet e fundit në standardet dhe formatet web font bëjë të mundur që të merr tekstin në HTML typefaces tjera se fonts njëjta parazgjedhur të vjetra. Vjen në decleration "@" fontface CSS.

@ Fontface provids një zgjidhje për të lidhur në dosjen aktuale të gërmave dhe rifitoj atë nga web. Duke përdorur @ fontface, designers mund të përdorni gërmat pa pasur nevojë të ngrijë tekstin si imazhe sfond. Implementimi është shumë i drejtë përpara, siç tregohet më poshtë, por si të gjitha gjërat e mira kanë një pjesë CON për atë, jo të gjithë shfletuesit mbështesë një të vetme "llojin e shkronjave". Nëse jeni duke planifikuar të përdorni fontface @ në faqe, me që kërkon mbështetje nga të shfletuesit, atëherë ju do të keni për të siguruar burime të llojeve të font-të ndryshme të njëjtë.

1. TrueType - Një format projektuar për të duken të mira në ekran. Rekomandohet veçanërisht për shfletuesit Windows (Chrome).
2. OpenType (CFF) - Ky format është më i mirë për punën e shtypura dhe nuk ka gjithmonë duken të mira në Windows.
3. EOT - Ju duhet këtë format në qoftë se ju doni të synuar Internet Explorer. IE nuk do të përdorë ndonjë format tjetër. E EOT jonë do të konsiderohet si "Lite", pasi që ata janë të ngjeshur as domain-kufizuar.
4. SVG - Kjo është një format XML mbështetur nga disa shfletues, duke përfshirë iPhone.
5. WOFF - Kjo ndër-browser, web-vetëm format font është e lehtë (të dhënat e shkronjave është i ngjeshur zip) dhe mund të jetë përpiluar me ose TrueType ose PostScript (CFF) përvijon. Ajo mbështetet aktualisht nga Firefox 3.6 +.

Përdorimi @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular";
 src: url ('CalligraphyFLF.eot');
 src: lokal ('CalligraphyFLF'), lokal ('CalligraphyFLF'), format url ('CalligraphyFLF.woff') ('woff'), url ('CalligraphyFLF.ttf') Formati ('TrueType'), url ('CalligraphyFLF . svg # CalligraphyFLF ') Formati (' svg ');
 }
 @ Font-face {
   font-family: "typeface juaj";
   src: url ("fonts / font_filename.eot");
   src: lokale ("Emri Alternate"), lokal ("Alternatename"),
     ("fonts / font_filename.woff") url Formati ("woff"),
     ("fonts / font_filename.otf") url Formati ("OpenType"),
     ("fonts / font_filename.svg msgstr font_filename") url Formati ("svg");
   }
 H2 {font-family: "typeface juaj", Gjeorgji, shrift me dhëmbëza;} 

Siç mund ta shikoni nga shembullin e mësipërm, për të përfshirë typeface zgjedhur font, e ka të lidhur në një sërë fonttypes për typeface njëjtë. Kështu njerëzit i referohen asaj si "Kit Font".
Ka Kits Font dispozicion që në mënyrë eksplicite lejon lidhja me pronën @ CSS font-ballë për atë nën End User Marrëveshjes liçensë EULA).

Burime të dobishme WebFont me:

• Fonts dispozicion për @ font-face Embedding faqen wiki në http://webfonts.info/wiki/index.php?title=Main_Page~~pobj
  
• Ray Larabie . Ai është një stilist i njohur font që ka bërë qindra fonts interesante TrueType lirisht në dispozicion për përdorim në web. Fonts tij janë elegante, dekorative, dhe të gjallë.
• Dieter Steffmann është një tjetër stilist i madh font. Ai, gjithashtu, ka bërë fonts shumë të bukura në dispozicion për askënd që të përdorni.
• Dyqan Font : ofron fonts projektuar posaçërisht për përdorim web. Më shumë se 30 prej familjeve FontFont më të suksesshme janë tani në dispozicion si FontFonts Web. FontShop ka gjithashtu një udhëzues të detajuar anëtarit WebFont http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf~~dobj
  
• Ketri Font : tregon të gjitha fonts se Ketri Font ofron për përdorim me embedding @ font-face CSS. Ketri Font ofron një sasi mbresëlënëse të tipit, e bën atë të vdekur e thjeshtë për të marr një jashtë, dhe shkathtësisht ofron "mjeteve" - ​​typeface e zgjedhjes suaj, në formate të ndryshme, të paketuara me demo HTML dhe CSS se përdor shumë aktual sintaksë @ font-ballë . Ata gjithashtu ofrojnë një mënyrë për të bërë tuaj @ font-face kits . Nëse typeface ju doni të përdorni është i licencuar në mënyrë të përshtatshme (ato që vijnë me kompjuterin tuaj nuk janë domosdoshmërisht në rregull), gjeneratori prodhon EOT, svg, dhe hey! Fotografi WOFF.

Një tjetër tut shpejtë. Këtu është diçka e thjeshtë dhe e bukur duke përdorur fuqinë e CSS ... por ishte concieve vështirë (dhe kjo me siguri nuk ishte më) për të filluar me. Shtimi Dropshadow, mund të jetë një peice tortë për shumë prej nesh, duke përdorur një imazh editing mjete si Photoshop Fireworks anf etj
Arsyeja pse, i prirur për hijen rënie duke përdorur CSS është se, zakonisht duke krijuar një dizajn faqesh / html e kërkesës, kërkesat e mbajtur iterating. Çfarë dua të them është, në një web site ekzistuese me imazhe të shumta, si ato shfaqen freinds listë ose një galeri imazh, do të jetë e vështirë për të reprocess ngarkesës gjithë e imazheve që ishin shkarkuar tashmë për të shtuar ose hequr hijet, për këtë çështje.
Pra, Nëse ju keni bërë një të menduarit pak përpara, ndërsa krijimin e HTMLS për të shtuar e këtyre ndarjeve shtesë ose zakonisht situata është se ju keni një logjikë loop gjeneruar këto ikona / thumbnails në XSL, PHP. JAVA apo ndonjë tjetër programimit / scripting gjuhën, ju mund të shtoni atë në çdo kohë, atëherë është vetëm çështje e tregojnë dhe të fshehur këto hijet duke perdoruremailin e pronës Display CSS, si për klientë gjithnjë e në ndryshim kërkesat ... Unë havn't bërë këtë lloj të të menduarit përpara para se kjo ... por ahev filluar tani!

Në shembullin e mëposhtëm, imazhi origjinal është hija e lirë dhe dropshadows zbatohen siç kërkohet! Gjithashtu, unë kam shkuar një shtesë të vogël, duke përdorur truket e Tut sime më parë (Well! këto ndoshta janë të ndryshme nga më të shkurtër Tutorials, kështu që është e arsyeshme vetëm duke i quajtur ato "Tut" "s) në lidhje me shfrytëzimin e pronës CSS Clip për të nxjerr vetëm

Image Original

DropShadow Rezultatet CSS

Shiko Demo | Download sourcefiles

Pse dua të kuptoj këtë? Humm ...!

Shumica e shkrimtarëve CSS do të bien dakord se prona CSS Clip është ndoshta një nga më të pa-përdorura pronat CSS. Ajo ishte aq e vërtetë për mua dhe ishte më e lumtur për të lënë pas dore atë, derisa fillova të modifikuar DY çelës MOOTOOLS (PIN) Komponenti Slider (me Treguesi varg) .

Ka qenë një sugjerim i mirë nga një prej përdoruesve përbërëse të ndryshojë Component Slider duke përdorur imazhe clipped backgroud (kundër një ndarjeje të ndryshueshme gjerësi) për të treguar gamën e slider. Kështu erdhi koha ime për të hyrë në argëtim, por un-patundshme (për mua ofcourse) ujërat e pronës Clip CSS.

E pra! se sa e vështirë mund të jetë? Jo shumë në të gjitha ... PO dhe JO. Sintaksa për të përdorur pronën Clip CSS është shumë e drejtë, por kuptimi / usuage është pak croocked. Me një kujtesë si e imja, everytime unë ulem për të Rework mbi Script tim Slider ... kam tokeep iu referuar përsëri në përdorimin e këtë pronë Clip, për t'i kujtuar vetes logjikën që kam krijuar, në shkrimin tim .... Për këtë arsye! mendohet se stilolaps atë, me një shpresë për të kujtuar atë të ardhmen (dhe gjithashtu për të mirën e atyre që duket boggled nga Pronës Clip CSS)

Çfarë Clip CSS bëni?

Klip është pjesë e modulit efekte vizuale të CSS 2.1. Ta themi thjesht, puna e saj është që të zhvillohet një dritare të dukshme në krye të një objekt që është duke u clipped, prandaj prerë imazhet dhe krijimin Thumbnails pa pasur nevojë për të krijuar fotografi të tjera (i kemi tashmë të vënë këtë funksion për përdorim më të mirë në Komponentin Slider )

Përdorimi i pronës Clip CSS, ju mund të krijojë një krehja duke përdorur formën të drejtpërdrejt. Ashtu si Properties tjera shumë CSS (si diferencë, etj mbushje), duke përdorur të drejtpërdrejt kërkon katër koordinatat Top, drejta, Bottom, Left (TRBL). Natyra croocked i kësaj prone reflekton kur ju keni marrë një vështrim më të afërt se sa clip llogarit rajonin e prerë, duke përdorur këto katër koordinatat simbolit dërgon trurin në një hedhje për një kohë). Tani për të ngatërruar ju poshtme fillon nga lart, dhe e drejta fillon nga e majta. . Ju shikoni se çfarë i tha? .... Prandaj këtë post ...

Ky konfuzion pak lehtë mund të zhduket, me këtë shpjegim vizuale e pronës Clip / CSS të drejtpërdrejt si më poshtë!

Clip Kërkesat CSS

Detyra që kemi filluar të clip imazhin e mëposhtëm Thumbnail në një imazh squarer në kërkim (dhe gjithashtu një kënd të gjerë image)

Thumbnal Original / Image	Kërkesat për Clip sqaure Thumbmail

Clip Rezultatet CSS

Shiko Demo | Download sourcefiles

Para se ne kishim për t'u marrë me CSS Layouts për të krijuar faqe tona, përafrimin e disa përmbajtje brenda një qelizë tabelë dukej luajnë vetëm fëmijës. Vendosur thjesht "lidhur" ose "valign" pronë të tabelës që të ketë në drejtimin e zgjedhjes tuaj, copë tortë!
Me Layouts CSS, edhe pse ne kemi "vertikale-align" pronën për elementet, kjo nuk duket të jetë aq e thjeshtë sa "lidhur" ose "valign" pronave. Për të qenë më specifiic "vertikale-align" nuk duket të zgjidhë ndonjë nga problemet tuaja, sidomos nëse janë të shkruar një pjesë të ndër-shfletuesit CSS.

Pa përdorimin e tabelave HTML, problemi i qendërzim në objekt, të jetë ajo një imazh apo ndonjë tekst brenda një ndarje që përmbajnë, ka qenë ndoshta çdo UI / CSS zhvilluesve makth në një pikë. Ky problem më tej extrapolates shqetësimet tuaja për përafrimin, nëse objekti për t'u përqëndruar, është dinamike në natyrë, dmth kur lartësia e saj është e ndryshueshme (lartësia e panjohur).

Edhe pse nuk ka zgjidhje njohur drejt përpara se do të punojë në të gjithë gamën e shfletuesit kemi të bëjmë me të, zgjidhja që kam provuar për të arritur në nuk duket për të punuar në shfletues të pakta që kam provuar atë në (IE6, IE 7 , FF).

Zgjidhje:
Në shfletues si Mozilla, Opera dhe Safari, i çuditshëm sillet "vertikale-align" pronë mund të sillen në shqisat e saj, thjesht duke e pronës "ekranit" e ndarjes përmbajnë të "Tabela qelizë të" (display: table-qelizore) .

Problemi ende mbetet me familjen e shfletuesit IE, i cili, megjithatë nuk duket për të kuptuar se çfarë në me "table-qelizore" pronës dhe injorante si ata janë, ata vetëm injorojnë atë. Zgjidhja e dhënë më poshtë, edhe pse të thjeshta, reklama disa elemente më DOM me HTML tuaj për të bërë gjëra të ndodhë.

CSS dhe HTML duket si ky
.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/> views: 3456 </ div>
</ Div>
</ Div>

Rezultati duket si ky: -

shikoni demo këtu | Download Files Burimi (shkarkuar 453 herë)

TOP Vendose në 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/> shikime: 1234 </ div>
</ Div>
</ Div>

Rezultati duket si ky: -

BOTTOM Vendose në 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/> shikime: 1234 </ div>
</ Div>
</ Div>

Rezultati duket si ky: -

shikoni demo këtu | Shkarko këtu

Duket si mosha, pasi unë kam qenë duke u përpjekur për të gjetur një zgjidhje të arsyeshme për këtë problem shtrirjes. Por tani me këtë zgjidhje, unë ndihem në paqe pak.

Me një shpresë se një ditë

• vertikale-shtrirjes në pronë CSS do të punojë si ajo e bën brenda një qelizë tabelë, pa pasur nevojë për të rrahur shumë rreth shkurret
• Të paktën, duke margin-top: auto dhe margin-bottom: auto, do të japin si rezultat të njëjtë si me margin-left dhe kufirin e djathtë të vendosur për auto
• Luftërat Browser do të jetë mbi disa ditë.
• Nuk do vetëm një shfletues për të gjithë.

Shkarko CSS dhe HTML të zgjidhjes më lart këtu (shkarkuar 453 herë) .. per kuptueshmërisë, CSS nuk është e optimizuar

PS: Dhe nga rruga, ata janë thumbnails e disa fotove kam klikuar ...

Nëse kërkesa juaj është për të ndarë një vlerë të nyjeve në një XML, që përmban një varg përkufizuar me vlerë, në objekte të veçanta, atëherë ju keni arritur vendin e duhur ... keni një vështrim në shembullin më poshtë. Nëse jeni të njohur me pak e XML dhe XSL ... Unë nuk mendoj se ju do të duhet ndonjë shpjegim.
Gjithashtu, ky shembull përfshin përdorimin e funksioneve XSL si XSL: Telefononi-template, XSL: nënvargun-para, XSL: nënvargun-pas, nëse kjo është ajo që ju jeni pas.

XML në të transformohet (food.xml): -
Supozojmë detyrë është të tokenize e përkufizuar string me presje, në të "fjalët kyçe" tag

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

HTML rezultante output: -

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

S'është nevoja të thuhet ... vetëm të ndryshojë parametër "delimitr" në Kufi e zgjedhjes suaj

Nëse ju keni bërë ndonjëherë (ose për të bërë një) Meny një vertikale duke përdorur sende të listës (li) tags dhe CSS, ju mund të hasni, kjo edhe një bug në Internet Explorer, ku IE 6 fut këto boshllëqe në mes të artikujve lista që përmbajnë elemente të nivelit të bllokojë, të dmth nëse ka ndonjë hapësira të bardha në mes të artikujve në listën Markup. Faleminderit, por jo falë, versioni i IE 7 duket të lirë nga ky bug.
Nëse si unë, dhe shumë më tepër, ju i përkasin këtij grupi të zhvilluesve të frustruar, të cilët ende kanë për të marrë Layouts e tyre të reja, duke punuar në IE6 shumë, atëherë kjo mund të provojë të dobishme. Have a look ...

Markup Shembull:

<ul id="menu">
<li> <a href="#"> Kryesore </ a> </ li>
<li> <a href="#"> Rreth </ a> </ li>
<li> <a href="#"> Shërbimet </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Na Kontaktoni </ a> </ li>
</ Ul>

Ju mund të krijojë disa CSS, të ngjashme me atë më poshtë, për të transfrom e Markup e mësipërme në një meny vertikale ....

Shembull 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-stolisje: none;
mbushje: 0 15px;
line-height: 2.5; kufirit-bottom: solid 1px # FFF;
}

Rezultatet e ju do të shihni ...

Zgjidhja për këtë bug ... (modifikuar / CSS shtuar në shkronja korsive të guximshme)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
noton: la; / * kjo përmban artikuj qarkulloi lista * /
}
# Menu li {
margin: 0; padding: 0;
noton: la, / * Kjo fixes * /
width: 100%; / * bug hapësira të bardha në IE6 * /
}
# Menu a {
display: block; color: # 555555;
text-stolisje: none;
mbushje: 0 15px;
line-height: 2.5; kufirit-bottom: solid 1px # FFF;
}

Nëse doesnot lart zgjidhje duket për të punuar (për arsye të njohura për IE6 vetëm) ... provoni këtë metodë në vend

Vetëm të shtoni këtë shtesë stilet IE6 vetëm për të Markup tuaj ...

<- [Nëse lejtnant IE 7>
<style type="text/css">
# Menu li a {display: inline-bllok;}
# Menu li a {display: block;}
</ Style>
<[Endif] ->

Nëse XML / XSL Transformon është domian tuaj, pastaj ka raste kur ne duam një peice të kodit Dynamic që do të përdoret pika bibliotekës (për të bërë ri-përdorshme). Çfarë dua të them, ndoshta mund të bëhet më e qartë me këtë skenar shembull.

Paramendoni ju jeni duke krijuar një faqe interneti (dhe duke përdorur XML, XSL transfroms ofcourse) dhe shumica e faqeve do të ketë një Module Comments. E pra! pastaj ose ju kopje ose ngjisni këtë kod në çdo template faqe e cila I dont kanë thënë, por të bëjë mirëmbajtjen dhe Rework makth a) apo edhe më të mirë, keni krijuar një skedar të cilat mund të përfshijnë nxorrën në ku ndonjëherë doni atë në faqen tuaj ( s) ...
Deri sa nuk kemi Krijo një skedar përfshijnë XSL dhe përfshijnë atë brenda një tjetër fotografi XSL? Këtu është se si ...

Vetëm për të bërë gjëra të qartë ... këtu është lista e shpejtë të dosjeve që ju do të krijojë ... këtu, ne do të jemi duke përfshirë informacion në lidhje me fruta dhe perime në një faqe mëmë e quajtur ushqim.

1. food.xml - xml dhënave fotografi në të cilën transformimi do të aplikohet
2. food.xsl - kryesor fotografi XSL, i cili do të transformojë food.xml tonë
3. inc_fruits.xsl - XSL përfshijnë skedar që do të bëjë fruta të dhënat
4. inc_vegtables.xsl - XSL përfshijnë skedar që do të bëjë të dhënat vetetables

I dont mendoj se kam shpjeguar shumë, kodet për elementet e mësipërme, do të jetë vetë shpjegues ...

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>

Shkarko të gjitha dosjet e mësipërme këtu (256 downloads)

Posto IE 6, MSIE ka qenë e llojit të mjaftueshme për të na zhvilluesit UI duke shtuar një pak më shumë pronave CSS standarde në shumicën e shfletuesit të tjera standarde. Një pasuri e tillë i dobishëm në "min lartësi të". Prona mjaft i drejtë përpara që nuk ka nevojë për shpjegim të gjatë lodhshëm. Kur një min-height për një ndarje është vendosur, ai gjithmonë e mban atë lartësi të caktuar, kur përmbajtja e ajo shtëpi të zë më pak se ajo mund të mbajnë dhe e rëndësishmja (ndryshe nga thjeshtë vanilje "lartësi" të pronës) peshore apo me fjalë të CSS, ajo sillet si një Ndarja e të cilit "lartësi" është vendosur të "Auto" ...

Për disa prej nesh zhvilluesve të varfër, të cilët ende janë të nevojshme për kodin CSS që duhet gjithashtu të punojnë në IE6, un-disponueshmëria e "min-height", mund të provojë një tapë show diku ... dëshpërim donot.

Për fat të mirë, ne kemi quirks të mjaftueshme në IE, që ne do të përdorim në avantazhin jashtë dhe çajë rrugën tonë nëpërmjet të arritur qëllimin tonë ... dmth të bëjë një divizioni sikur i saj min-height në IE6

Zgjidhja 1: Përdorimi i fjalës Hack të theksuar ... Read more ]

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

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

---

Zgjidhja 2: Përdorimi i Selector atribut Hack CSS

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


Selector Attribute CSS Hack merr përparësi për faktin e shfletuesit IE6 më herët tha injoruar një atribute përzgjedhës-. Shënim kërkesat e një ndarjeje enë me class = "someclass". Vetëm presense e klasës atribut për këtë ndarje, refuzon lartësi përsëri në auto për Opera, Mozilla dhe MSIE7 dhe më vonë. IE6, e cila nuk e mbështet selectors atribute, e injoron atë.

Shiko Demo e hack min-height për IE6

Nëse ju përdorni XML dhe XSL, atëherë ju mund të ketë ardhur nëpër një kohë, kur ju duhet të luajnë rreth me atributet dhe vlerat e nyjeve XML në ju XSL. Ata janë ngarkesa e faqet me informacion të gjatë lodhshëm për këtë, por nuk kam gjetur ishte i shkurtër dhe i saktë ... kjo nuk është XML / XSL tutorial, por përpjekja ime për të vënë së bashku një lloj të mashtrojnë lista ...

Mostra XML se ne do të punojmë me duket si ky ...

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

Kështu që lejon të fillojë transformimi XML tonë të mësipërm duke përdorur XSL

Shembull 1: shfaqje vlerë në një atribut të zgjedhur

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

Rezultati HTML do të duket si

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

Shembull 2: looping përmes dhe shfaqja e të gjitha Emrat XML atribut dhe vlera e tyre

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

Rezultati HTML do të duket si


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


Shikojnë këtë hapësirë, unë do të mbaj përditësimin kjo me zbulimet e reja ...

Një Reset CSS i / CSS janë të vendosur një numër të stileve element në një bazë të veçantë që krijon qëndrueshmëri të gjithë shfletuesit të ndryshme.

Ne të gjithë kemi qenë përmes këqija të shkruar ndër-browser-së CSS. Pra, kur ne të filloni të shkruani CSS tonë, është një praktikë për të rivendosur atë më parë për të hequr / rivendosur ndonjë mospërputhje kryq shfletuesit. CSS Rivendos, linja të thjeshta pak CSS se ju fillojnë CSS tuaj me, duke ju dhënë një bazë të pastër për të filluar ndërtimi i juaj mbi të.

Rivendos CSS se unë zakonisht priren të përdorin duket si ky

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 {
lista-style: none;
}

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

Reset font size shfletuesit
Gjithashtu vini re te rese se ka qenë aplikuar për madhësinë e shfletuesit në linjë vijim ...

html {font-size: 76%;}

Lart CSS Rivendos font shfletuesi madhësia në 10 pixel, dhe kjo bën të mundur për të punuar me madhësinë e shkronjave të afërm (i cili është çdo rëndësishme nga një përputhje Wai këndvështrim)
Për shembull, në përkufizimin e mëposhtëm, font-size në një hapësirë ​​është vendosur në 10 pixels dhe se në paragarph është vendosur në 14 pixel ...

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