Udtrykke det

CSS afsluttet 10 års eksistens i år! De, der har eksisteret i et stykke tid, tjener deres brød (eller ej) bruger CSS, så er du måske klar over, hvordan vi har sulten for et godt udvalg af skrifttyper. Selv med manglende skrifttyper designere som dem på CSS Zen Garden har gjort brug af CSS baggrundsbilleder til at erstatte skrifttyper i jagten på at gøre nogen ret til deres designs. Vi har også prøvet Flash / JavaScript ® hacks til at nå vores design mål. På ingen måde det er en forkert måde at få de skrifttyper, vi ønsker i vores web-design, men bestemt, det er ikke den mest ønskelige måde. og over årene webdesigner, ligesom mig, er helt pålidelig på ti eller deromkring skrifttyper til deres design.

Den seneste udvikling inden for web-standarder og skrifttypeformater gør det muligt at gøre HTML-tekst i skrifttyper andre end de samme gamle standardskrifttyper. Leveres i "@ fontface" CSS decleration.

@ Fontface provids en løsning til at linke til den faktiske skrifttype fil og hente den fra internettet. Brug @ fontface, kan designere bruge skrifttyper uden at skulle fryse teksten som baggrundsbilleder. Gennemførelsen er meget ligetil, som vist nedenfor, men som alle gode ting har en CON del heraf, ikke alle browsere understøtter en enkelt "skrifttype". Hvis du planlægger at bruge @ fontface i stedet med krav om cross browser-understøttelse, så bliver du nødt til at give kilder til forskellige font-typer af samme.

1. TrueType - Et format designet til at se godt ud på skærmen. Anbefales især til Windows browsere (Chrome).
2. OpenType (CFF) - Dette format er bedre for print arbejde og ikke altid ser godt ud på Windows.
3. EOT - Du skal bruge dette format, hvis du ønsker at målrette Internet Explorer. IE vil ikke bruge noget andet format. Vores EOT s ville blive betragtet som "Lite", da de hverken er komprimeret eller domæne-begrænset.
4. SVG - Dette er et XML format, der understøttes af nogle browsere, herunder iPhone.
5. WOFF - Denne cross-browser, web-only font format er let (skrifttyper data er zip komprimeret) og kan kompileres med enten TrueType eller PostScript (CFF) beskriver. Det er i øjeblikket understøttes af Firefox 3.6 +.

Brug @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular ';
 src: url ('CalligraphyFLF.eot');
 src: lokalt ('CalligraphyFLF'), lokal ('CalligraphyFLF'), url ('CalligraphyFLF.woff') format ('WOFF'), url ('CalligraphyFLF.ttf') format ('TrueType'), url ('CalligraphyFLF . svg # CalligraphyFLF ') format ("SVG');
 }
 @ Font-face {
   font-family: "Din skrifttype";
   src: url ("fonts / font_filename.eot");
   src: lokalt ("Alternativ navn"), lokal ("Alternatename"),
     url ("fonts / font_filename.woff") format ("WOFF"),
     url ("fonts / font_filename.otf") format ("OpenType"),
     url ("skrifttyper / font_filename.svg # font_filename") format ("SVG");
   }
 H2 {font-family: "Din skrifttype", Georgien, Serif;} 

Som du kan se af ovenstående eksempel, til også at omfatte den valgte skrifttype, må man linke til et sæt af fonttypes for den samme skrifttype. Derfor folk henvise til det som "Font Kit".
Der er Font Kits til rådighed, der tillader udtrykkeligt forbinder med CSS @ font-face ejendom, den i henhold til End User License Agreement (EULA).

Nyttige WebFont Ressourcer:

• Skrifttyper til rådighed for @ font-face integrering wiki side på http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Han er en berømt font designer, der har gjort hundredvis af interessante TrueType frit til rådighed til brug på internettet. Hans skrifter er elegante, dekorative, og legende.
• Dieter Steffmann er en anden stor font designer. Han har også lavet mange flotte skrifttyper til rådighed for alle at bruge.
• Font shop : tilbyder skrifttyper er designet specielt til web brug. Mere end 30 af de mest succesfulde FontFont familier er nu tilgængelig som web FontFonts. FontShop har også en detaljeret WebFont brugervejledning http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Font Squirrel : Showcases alle de skrifttyper, der Skrifttype Squirrel tilbyder til brug med @ font-face CSS indlejring. Font Squirrel tilbyder en imponerende mængde af type, gør det døde nemt at vælge en ud, og behændigt tilbyder "kits" - den skrifttype af dit valg, i flere formater, pakket med demo HTML & CSS, der bruger meget strøm @ font-face syntaks . De tilbyder også en måde at lave dine egne @ font-face kits . Hvis den skrifttype du vil bruge er licenseret korrekt (dem, der leveres sammen med computeren, er ikke nødvendigvis i orden), generatoren producerer EOT, SVG, og hey! WOFF filer.

En anden hurtig Tut. Her er noget enkelt og rart at bruge magt CSS ... men det var vanskeligt concieve (og det sikkert var ikke mig), til at begynde med. Tilføjelse Dropshadow, kan være en peice kage for mange af os, at bruge nogle billedredigeringsprogram værktøjer som Photoshop ANF Fireworks mv
Grunden til, jeg valgte drop shadow med CSS er, at normalt samtidig skabe en side, design / html af en ansøgning, de krav, der holder iteration. Hvad jeg mener er, I et eksisterende web site med mange billeder, som dem, viser freinds liste eller et billede galleri, vil det være vanskeligt at oparbejde den samlede belastning af billeder, der allerede var losset for at tilføje eller fjerne skygger, for at stof.
Så hvis du har gjort lidt fremadrettet, samtidig med at skabe de HTMLS at tilføje disse ekstra divisioner eller normalt er situationen, at du har en løkke Logic generere disse ikoner / thumbnails i XSL, PHP. JAVA eller anden programmering / scripting sprog, kan du tilføje den når som helst, så er bare spørgsmålet om showet og skjule disse skygger ved hjælp af CSS Display ejendom, som pr kunder stadigt skiftende krav ... Jeg havn't gjort denne form for fremadrettet tænkning før dette ... men ahev i gang nu!

I eksemplet nedenfor, er det originale billede skygge fri og dropshadows anvendes efter behov! Desuden har jeg gået lidt ekstra, ved at bruge de tricks af min tidligere Tut (Well! disse formentlig er kortest række Tutorials, så det er kun berettiget at kalde dem "Tut" 's) om hjælp CSS Clip Ejendom for vise kun

Original billede

CSS DropShadow Resultater

Se demo | Hent sourcefiles

Hvorfor jeg ønsker at forstå dette?? ... Humm!!

De fleste af CSS forfattere enige om, at CSS Clip ejendom er nok en af ​​de fleste ikke-anvendte CSS egenskaber. Det var så sandt for mig og var mest glad for at forsømme det, indtil jeg begyndte at ændre den Mootools TO Knob (Pin) Slider Komponent (med Range indikator) .

Der var et godt forslag fra en af ​​de komponenter brugere at ændre Slider Component ved hjælp af klippede baggrundsrapporten billeder (mod en variabel bredde division) for at indikere skyderen rækkevidde. Således kom min tid at komme ind i sjov, men FN-chartret (for mig selvfølgelig) farvande CSS Clip ejendom.

Nå! hvor svært det kan være? Ikke meget på alle ... ja og nej. Den syntaks at bruge CSS Clip ejendommen er temmelig oprejst men betydningen / usuage er en smule croocked. Med en hukommelse som mit, jeg hver gang sidder til omarbejde på min Slider Script ... Jeg har tokeep henviser tilbage til brugen af ​​denne CLIP ejendom, for at minde mig selv om den logik, som jeg har skabt i mit script .... DERMED! menes at pen det ned, med et håb om at huske det i fremtiden (og også til gavn for dem, der synes imponeret af CSS Clip Property)

Hvad betyder CSS Clip gøre?

Clip er en del af den visuelle effekter modulet af CSS 2,1. Simply put, dens opgave er at placere et synligt vindue oven på et objekt, der bliver klippet, og derfor klippe billeder og skabe thumbnails uden at skulle oprette flere filer (jeg har allerede sat denne funktion til bedre udnyttelse i Slider Component )

Brug af CSS Clip ejendom, kan du oprette en klipning ved hjælp af rekte form. Ligesom mange andre CSS egenskaber (såsom margin, padding osv.), ved hjælp af rect kræver fire koordinater Top, Højre, Bund, Venstre (TRBL). Den croocked karakteren af ​​denne ejendom afspejler, når du tager et nærmere kig på, hvordan klip beregner klipning regionen ved hjælp af disse fire koordinater (sender hjernen i et kast i et stykke tid). Nu at forvirre dig bunden starter fra toppen, og den højre starter fra venstre. . Du kan se hvad jeg sagde? .... Derfor dette indlæg ...

Dette lidt forvirring kan nemt forsvinde, med denne visuelle forklaring af CSS Klip / rect ejendom som nedenfor!!

CSS Clip Krav

Den opgave, vi er begyndt, er at klippe følgende miniaturebillede til et firkantede se billede (og også en vidvinkel billede)

Original Thumbnal / Billede	Clip Krav til Sqaure Thumbmail

CSS Clip Resultater

Se demo | Hent sourcefiles

Inden vi var nødt til at beskæftige sig med CSS til at skabe vores side layouts, som bringer noget af indholdet i en tabelcelle syntes bare en leg. Du skal blot indstille "justere" eller "valign" ejendom i tabellen for at få tilpasningen af dit valg, stykke kage!
Med CSS layout, selv om vi har "lodret-align" ejendom for de elementer, synes det ikke at være så simpelt som "tilpasse" eller "valign" egenskaber. For at være mere specifiic den "lodret-align" synes aldrig at løse nogen af dine problemer, især hvis der skriver et stykke af cross-browser CSS.

Uden brug af HTML-tabeller, er problemet med centreret om objektet er det et billede eller en tekst i en holdigt division, har sandsynligvis været hver UI / CSS udviklere mareridt på et tidspunkt. Dette problem yderligere ekstrapolerer dine bekymringer for at afstemme, om objektet til at være centreret er dynamisk af natur, dvs når dets højde er variabel (ukendt højde).

Selv om der er ingen kendte ligetil løsning, der ville arbejde på tværs af forskellige browsere, vi har at gøre med, den løsning, som jeg har forsøgt at nå frem til synes at arbejde i de få browsere, jeg har prøvet det i (IE6, IE 7 , FF).

LØSNINGEN:
I browsere som Mozilla, Opera og Safari, Det mærkelige opfører sig "lodret-align" ejendom kan bringes til fornuft, blot ved at sætte "display" ejendom indeholder division til "table-celle" (display: table-celle) .

Problemet er stadig med IE familie af browsere, som ikke endnu ikke synes at forstå, hvad der skal med "table-celle" ejendom og uvidende som de er, de bare ignorere det. Løsningen nedenfor, men simple, annoncer få mere DOM elementer til din HTML for at gøre tingene ske.

CSS og HTML ser sådan ud
.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/> visninger: 3456 </ div>
</ Div>
</ Div>

Resultatet ser således ud: -

se demo her | Hent kildefiler (Downloaded 452 gange)

TOP Juster 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/> visninger: 1234 </ div>
</ Div>
</ Div>

Resultatet ser således ud: -

BUND Juster 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/> visninger: 1234 </ div>
</ Div>
</ Div>

Resultatet ser således ud: -

se demo her | Hent her

Synes lige aldre, da jeg prøvede at finde en fornuftig løsning på denne tilpasning problem. Men nu med denne løsning, føler jeg på lidt fred.

Med et håb om at en dag

• vertikal-tilpasning ejendom i CSS vil arbejde som det gør i en tabelcelle, uden at slå meget om den varme grød
• Mindst, sætte margin-top: auto og margin-bottom: auto, vil give det samme resultat som med margin-venstre og margin-rigtige sæt til auto
• De Browser krige vil være over en dag.
• Der vil kun én browser for ALLE.

Download CSS og HTML af ovennævnte løsning her (Downloaded 452 gange) .. for forståelighed, er CSS ikke er blevet optimeret

PS: Og ved den måde, er dem, miniaturer af nogle billeder, jeg har klikket ...

Hvis dit krav er at splitte en node værdi i et XML, der indeholder en afgrænset streng værdi, i enkelte elementer, så har du nået det rigtige sted ... få et kig på nedenstående eksempel. Hvis du er fortrolig med en lille smule af XML og XSL ... jeg tror ikke du ville brug for nogen forklaring.
Også dette eksempel omfatter brug af XSL funktioner som xsl: call-template, xsl: delstreng-før, xsl: delstreng-efter, hvis det er det du er ude efter.

XML at blive omdannet (food.xml): -
Antag opgaven er at tokenize strengen afgrænset af komma, i tagget "søgeord"

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

Det er overflødigt at sige ... bare ændre parameteren "delimitr" til afgrænsningstegn efter eget valg

Hvis du nogensinde har gjort (eller lave en) en vertikal menu ved hjælp af listeelementer (Li) tags og CSS, kan du støde på, er dette endnu en fejl i Internet Explorer, hvor IE 6 indsætter disse huller mellem listeelementer, der indeholder blok niveau elementer, dvs hvis der er nogen mellemrum mellem listeelementerne i opmærkningen. Tak, men nej tak, den IE version 7 synes fri fra denne fejl.
Hvis ligesom mig, og mange flere, du tilhører denne gruppe af frustrerede udviklere, der stadig har til at få deres nye layouts, der arbejder i IE6, så det kan vise sig nyttige. Tag et kig ...

Sample markup:

<ul id="menu">
<li> <a href="#"> Forside </ a> </ li>
<li> <a href="#"> Om </ a> </ li>
<li> <a href="#"> Services </ a> </ li>
<li> <a href="#"> portefølje </ a> </ li>
<li> <a href="#"> Ofte stillede spørgsmål </ a> </ li>
<li> <a href="#"> Kontakt os </ a> </ li>
</ Ul>

Du kan skabe nogle CSS, svarende til en nedenfor, for at transfrom ovenstående markup ind i en lodret menu ....

Sample CSS ...
# Menu {
margin: 0; padding: 0; baggrund: # FF9900;
list-style-type: none; bredde: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

De resultater, du vil se ...

Løsning for denne fejl ... (ændret / tilføjet CSS med fed kursiv)

# Menu {
margin: 0; padding: 0; baggrund: # FF9900; list-style-type: none; bredde: 150px;
float: venstre; / * denne indeholder svævede listeelementer * /
}
# Menu li {
margin: 0; padding: 0;
float: venstre; / * dette løser * /
Bredde: 100%; / * whitespace fejl i IE6 * /
}
# Menu a {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Hvis ovenstående løsning doesnot synes at arbejde (på grund kendt for at IE6 kun) ... prøv denne metode i stedet for

Du skal blot tilføje denne ekstra IE6 kun stilarter til din markup ...

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

Hvis XML / XSL Transformation er din domian, så er der tidspunkter, hvor vi ønsker en peice af Dynamic kode, der skal bruges bibliotek post (som skal gøres genbrugelige). Hvad jeg mener, kunne måske gøres mere tydeligt med dette eksempel scenario.

Forestil dig du opretter en hjemmeside (og ved hjælp af XML, XSL transfroms selvfølgelig), og de ​​fleste af siderne ville have en Kommentarer modul. Nå! derefter enten du kopierer eller indsætte denne kode på hver side skabelon (som jeg ikke har at sige, men gør vedligeholdelse og omarbejde et mareridt), eller endnu bedre, kan du oprette en include file, der kunne trækkes på, hvor nogensinde du vil have det på din side ( s) ...
Så Hvordan skaber vi en XSL include file og medtage den inde i en anden XSL-fil? Her er, hvordan ...

Bare for at gøre tingene klart ... her er hurtig liste over de filer, du vil skabe ... her vil vi bl.a. information om frugt og grøntsager ind i en overordnet side kaldet mad.

1. food.xml - XML-datafil, som transformation vil blive anvendt
2. food.xsl - vigtigste XSL-fil, som vil forvandle vores food.xml
3. inc_fruits.xsl - XSL omfatter fil, der vil gøre frugter data
4. inc_vegtables.xsl - XSL omfatter fil, der vil gøre vetetables data

Jeg tror ikke jeg har forklare meget, koderne for ovenstående elementer vil være selvforklarende ...

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 alle ovenstående filer her (255 downloads)

Indlæg IE 6, har MSIE været så venlig at os UI udviklere ved at tilføje nogle flere CSS egenskaber standard til de fleste andre standard browsere. En sådan nyttig egenskab i "min-højde". Temmelig ligetil ejendom, som ikke behøver lange forpustet forklaring. Når en min-højde for en afdeling er indstillet, er det altid bevarer det sæt højde, når det indhold, husene optager mindre end den kan rumme og vigtigere (i modsætning til plain vanilla "højden" ejendom) skalaer eller i CSS ord, den opfører sig som en spaltningen, hvis "højde" er sat til "auto" ...

For nogle af os fattige udviklere, der stadig er forpligtet til at kode, CSS, som også skal arbejde i IE6, kan un-tilgængeligheden af "min-height", vise et show prop engang ... donot fortvivlelse.

Heldigvis har vi nok særheder i IE, at vi ville bruge til at ud fordel og hacke vores vej igennem for at nå vores mål ... nemlig at gøre en division division, som om den min-højde i IE6

Løsning 1: Ved hjælp af understregning Hack [ ... Læs mere ]

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

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

---

Løsning 2: Brug af 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 drager fordel af det faktum, de browsere tidligere THA IE6 ignoreret en atribute-vælgeren. Bemærk kravet om en anden beholder division med class = "someclass". Bare presense i klassen attributten for denne opdeling, tilsidesætter højden tilbage til Auto, for Opera, Mozilla og MSIE7 og senere. IE6, som ikke understøtter atribute vælgere, ignorerer det.

Se demo af min højde hack for IE6

Hvis du bruger XML-og XSL, så er du måske stødt på et tidspunkt, når du skal lege med attributter og værdier af XML noder i dig XSL. De er masser af sites med lang forpustet info om dette, men ingen jeg fandt, var kort og præcis ... dette er ikke XML / XSL TUTORIAL, men mit forsøg på at sætte-sammen en slags cheat liste ...

Prøven XML, at vi vil arbejde med ser sådan her ud ...

<?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å lad os begynde at omdanne vores ovenfor XML ved hjælp af XSL

Eksempel 1: Viser værdien på en valgt data

<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 vil se ud

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

Eksempel 2: Looping igennem og vise alle XML-attribut navne og deres værdier

<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 vil se ud


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


Se dette rum, vil jeg holde opdatere denne med nye fund ...

En CSS Reset / er CSS at sætte en række element stilarter til en bestemt baseline, der skaber sammenhæng på tværs af forskellige browsere.

Vi har alle været gennem mareridt for at skrive cross-browser CSS har. Så når vi begynde at skrive vores CSS, Det er en praksis for at nulstille det først at fjerne / nulstille alle cross browser uoverensstemmelser. CSS Nulstiller, er enkle par linjer af CSS, som du begynder din CSS med, giver dig en ren base for at begynde at bygge din på.

CSS nulstiller, at jeg normalt har en tendens til at bruge ser sådan ud

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

Nulstil browseren skriftstørrelse
Bemærk også den nulstilling, der er blevet anvendt til browser skriftstørrelse i den følgende linje ...

html {font-size: 76%;}

Ovenstående CSS nulstiller browseren skriftstørrelsen til 10 pixel, og det gør det muligt at arbejde med relative skriftstørrelser (som er alle vigtige ud fra et WAI overholdelse prespective)
For eksempel, i det følgende definition font-size i en span sat til 10 pixels, og at i paragarph er sat til 14 pixels ...

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