Esprimere IT

CSS completato l'esistenza 10 anni quest'anno! Coloro che sono stati intorno per un po ', guadagnarsi il pane (o meno) utilizzando CSS, allora si potrebbe consapevoli di quanto siamo stati affamati per una buona selezione di font. Anche con la mancanza di font designer come quelli di CSS Zen Garden hanno fatto uso di immagini di sfondo CSS per sostituire i caratteri nella ricerca di fare po 'di giustizia ai loro disegni. Abbiamo anche provato Flash / JavaScript hack ® per raggiungere i nostri obiettivi di progettazione. In nessun modo questo è un modo sbagliato per ottenere i caratteri che desideriamo nei nostri progetti web, ma sicuramente, non è il modo più desiderabile. web designer e oltre anni, come me, hanno pienamente invocato una decina di tipi di carattere per i loro disegni.

I recenti sviluppi degli standard web e formati di font permettono di rendere il testo HTML in caratteri tipografici diversi gli stessi font di default vecchi. Viene nel "@ fontface" decleration CSS.

@ Fontface provids una soluzione per il collegamento al file font effettivo e recuperare dal web. Utilizzando @ fontface, i progettisti possono usare i font senza dover congelare il testo come immagini di sfondo. L'implementazione è molto semplice, come mostrato qui sotto, ma come tutte le cose belle hanno un ruolo CON ad esso, non tutti i browser supportano un unico "tipo di carattere". Se si prevede di utilizzare fontface @ in sito con che richiedono il supporto cross browser, allora si dovrà fornire a varie fonti font-tipi dello stesso.

1. TrueType - Un formato progettato per guardare bene sullo schermo. Consigliato soprattutto per i browser di Windows (Chrome).
2. OpenType (CFF) - Questo formato è meglio per il lavoro di stampa e non sempre bene su Windows.
3. EOT - Hai bisogno di questo formato se si vuole indirizzare Internet Explorer. IE non utilizzerà qualsiasi altro formato. Il nostro EOT sarebbe stato considerato "Lite", poiché non sono né compressi, né dominio limitato.
4. SVG - Questo è un formato XML supportato da alcuni browser compreso l'iPhone.
5. WOFF - Questo cross-browser, web-only formato di font è leggero (dati dei font è compresso zip) e può essere compilato sia con TrueType o PostScript (CFF) delinea. Esso è attualmente supportato da Firefox 3.6 +.

Utilizzo di @ fontface

  @ Font-face {
 font-family: 'CalligraphyFLFRegular';
 src: url ('CalligraphyFLF.eot');
 src: locale ('CalligraphyFLF'), locale ('CalligraphyFLF'), url ('CalligraphyFLF.woff') format ('WOFF'), url ('CalligraphyFLF.ttf') format ('TrueType'), url ('CalligraphyFLF . svg # CalligraphyFLF ') format (' svg ');
 }
 @ Font-face {
   font-family: "Il tuo carattere";
   src: url ("fonts / font_filename.eot");
   src: locale ("nome alternativo"), locale ("Alternatename"),
     url ("fonts / font_filename.woff") format ("WOFF"),
     url ("fonts / font_filename.otf") format ("OpenType"),
     url ("fonts / font_filename.svg # font_filename") format ("SVG");
   }
 h2 {font-family: "Il tuo carattere", Georgia, serif;} 

Come potete vedere dall'esempio sopra, per includere il carattere del font scelto, si deve collegare ad una serie di fonttypes per lo stesso carattere. Di qui la gente si riferisce ad esso come "Kit Font".
Ci sono kit di font che consente in modo esplicito il collegamento con il CSS @ font-face proprietà sotto End User License Agreement (EULA).

Risorse utili: WebFont

• Font disponibili per @ font-face embedding pagina wiki a http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . E 'un designer di fama carattere che ha fatto centinaia di interessanti caratteri TrueType liberamente disponibili per l'uso sul web. I suoi caratteri sono eleganti, decorativi, e giocoso.
• Dieter Steffmann è un altro designer di grande carattere. Anche lui ha fatto molti bei caratteri a disposizione da usare per chiunque.
• Negozio Font : offre i caratteri progettati specificamente per uso web. Più di 30 delle famiglie Fontfont di maggior successo sono ora disponibili come FontFonts web. FontShop ha anche una dettagliata guida utente WebFont http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Font Squirrel : Vetrine tutti i tipi di carattere Font Squirrel propone per l'utilizzo con @ font-face embedding CSS. Font Squirrel propone una quantità impressionante di tipo, lo rende morto semplice scegliere uno fuori, e offre una comoda "kit" - il carattere della vostra scelta, in diversi formati, confezionati con la demo HTML e CSS che utilizza molto attuale @ font-face sintassi . Offrono anche un modo per fare i vostri propri @ font-face kit . Se il tipo di carattere che si desidera utilizzare in modo appropriato è stato concesso in licenza (quelli forniti con il computer non sono necessariamente bene), il generatore produce EOT, SVG, e hey! File WOFF.

Un altro tut veloce. Ecco qualcosa di semplice e piacevole utilizzando il potere del CSS ... ma era concieve difficile (e sicuramente non ero io) per cominciare. Aggiunta Dropshadow, potrebbe essere un pezzo del dolce per molti di noi, utilizzando alcuni strumenti di editing di immagini come Photoshop ANF Fireworks, ecc
Il motivo per cui, ho optato per ombra con i CSS è che, di solito durante la creazione di una struttura di pagina / html di una domanda, i requisiti di mantenere l'iterazione. Quello che voglio dire è, in un sito web esistente con molte immagini, come quelle che mostrano lista freinds o una galleria di immagini, sarà difficile per rielaborare l'intero carico di immagini che erano già stati scaricati per aggiungere o rimuovere le ombre, per quel materia.
Quindi, se avete fatto un po 'il pensiero in avanti, mentre i file HTML per la creazione di aggiungere queste divisioni extra o in genere la situazione è che hai un loop Logic generare queste icone / miniature in XSL, PHP. JAVA o di qualsiasi altro di programmazione / scripting language, è possibile aggiungere in qualsiasi momento, è quindi solo questione di spettacolo e hai tenuto nascoste queste ombre utilizzando la proprietà CSS display, come per i clienti mutevoli esigenze ... I Havn't fatto questo genere di trasmettere il pensiero prima di questo ... ma ahev Inizia ora!

Nell'esempio riportato di seguito, l'immagine originale è l'ombra di libero e le dropshadows vengono applicate come richiesto! Inoltre, ho fatto un piccolo extra, utilizzando i trucchi della mia precedente Tut (Well! questi sono probabilmente più breve serie di Tutorials, quindi è giustificato solo chiamandoli "Tut" 's) su CSS utilizzando la proprietà clip per mostrare solo

Immagine originale

CSS DropShadow Risultati

Visualizza Demo | Scarica SourceFiles

Perché voglio capire questo?? Humm ...!!

La maggior parte degli scrittori CSS sarebbe d'accordo che la proprietà Clip CSS è probabilmente una delle più inutilizzato proprietà CSS. E 'stato così vero anche per me ed è stato più felice di trascurare, fino a quando ho iniziato a modificare il MooTools due pomelli (Pin) Component Slider (con indicatore Range) .

C'era un buon suggerimento da uno degli utenti componente per modificare il componente Slider utilizzando immagini ritagliate da sfondo (contro una divisione larghezza variabile) per indicare l'intervallo cursore. Così è venuto il mio tempo per entrare nel divertimento, ma un-a noleggio (per me ovviamente) le acque della proprietà Clip CSS.

Bene! quanto possa essere difficile? Non più di tanto ... SI e NO. La sintassi per utilizzare la proprietà Clip CSS è abbastanza eretta, ma il significato / usuage è un po 'croocked. Con una memoria come la mia, ogni volta che mi siedo a rielaborare il mio script Slider ... ho tokeep rinviando all'uso di questa proprietà CLIP, per ricordare a me stesso la logica che ho creato nel mio script .... QUINDI! pensato di penna giù, con una speranza per ricordare che il futuro (e anche per il beneficio di coloro che sembrano ho provato con la proprietà Clip CSS)

Cosa fa clip CSS fare?

Clip è parte del modulo di effetti visivi di CSS 2.1. In poche parole, il suo compito è quello di posizionare una finestra visibile sulla parte superiore di un oggetto che viene tagliato, quindi ritaglio immagini e la creazione di miniature senza dover creare ulteriori file (ho già messo questa funzionalità per un migliore utilizzo nel componente Slider )

Utilizzando la proprietà Clip CSS, è possibile creare un ritaglio utilizzando la forma rect. Come molte altre proprietà CSS (come margin, padding, ecc), utilizzando rect richiede quattro coordinate Top, Right, Bottom, Left (GUASTO). La natura di questa proprietà croocked riflette quando si dà un'occhiata più da vicino come fermaglio calcola l'area di visualizzazione, utilizzando queste quattro coordinate (manda il cervello in un lancio per un po '). Ora, per confondere il fondo inizia dalla parte superiore, e la destra inizia da sinistra. . Vedete quello che ho detto? .... Quindi questo post ...

Questa confusione poco può facilmente scomparire, con questa spiegazione visiva del Clip / rect proprietà CSS, come qui sotto!!

CSS clip Requisiti

Il compito che abbiamo iniziato è quella di ritagliare l'immagine seguente Miniatura in un immagine più squadrata cercando (e anche un grandangolo immagine)

Thumbnal Original / Image	Requisiti clip per Sqaure Thumbmail

CSS risultati di clip

Visualizza Demo | Scarica SourceFiles

Prima abbiamo avuto a che fare con i CSS per creare i nostri layout di pagina, allineando alcuni contenuti all'interno di una cella di una tabella sembrava proprio gioco da ragazzi. Basta impostare la "align" o "valign" la proprietà della tabella per avere l'allineamento della vostra scelta, pezzo di torta!
Con layout CSS, anche se abbiamo "vertical-align" proprietà per gli elementi, non sembra essere semplice come il "align" o "valign" Proprietà. Per essere più specifiic il "vertical-align" non sembra mai per risolvere qualsiasi dei vostri problemi, specialmente se si scrive un pezzo di cross-browser CSS.

Senza l'uso di tabelle HTML, IL PROBLEMA di centrare su un oggetto, sia esso un'immagine o un testo all'interno di una divisione di contenimento, è stato probabilmente ogni UI / CSS incubo sviluppatori ad un certo punto. Questo problema estrapola ulteriormente le vostre preoccupazioni di allinearsi, se l'oggetto da centrare è di natura dinamica, cioè quando la sua altezza è variabile (altezza sconosciuto).

Anche se non vi è alcuna soluzione nota dritto in avanti che avrebbe funzionato per tutta la gamma di browser che abbiamo a che fare con la soluzione che ho cercato di arrivare a non sembrano funzionare nei browser pochi che ho provato in (IE6, IE 7 , FF).

SOLUZIONE:
In browser come Mozilla, Opera e Safari, lo strano comportamento "vertical-align" proprietà può essere portato ai suoi sensi, semplicemente impostando la proprietà "display" della divisione di contenimento a "table-cell" (display: table-cell) .

Il problema resta con la famiglia dei browser IE, il quale, tuttavia non sembrano capire cosa con la proprietà "table-cell" e ignoranti come sono, semplicemente la ignorano. La soluzione qui di seguito, anche se semplici, annunci di alcuni elementi in più al vostro DOM HTML per far accadere le cose.

Il CSS e HTML simile a questa
.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/> viste: 3456 </ div>
</ Div>
</ Div>

Il risultato assomiglia a questo: -

visualizzare la demo qui | File di origine Scarica (Scaricato 451 volte)

TOP Allinea 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/> viste: 1234 </ div>
</ Div>
</ Div>

Il risultato assomiglia a questo: -

Allinea in basso 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/> viste: 1234 </ div>
</ Div>
</ Div>

Il risultato assomiglia a questo: -

visualizzare la demo qui | Scarica qui

Sembra età, dal momento che stavo cercando di trovare una soluzione ragionevole a questo problema di allineamento. Ma ora con questa soluzione, mi sento in pace piccola.

Con una speranza che un giorno

• l'allineamento verticale proprietà CSS lavorerà come fa all'interno di una cella di una tabella, senza dover battere molto intorno al cespuglio
• Almeno, impostando margin-top: auto e margin-bottom: auto, darà come lo stesso risultato con margin-left e margin-right set di auto
• La guerra dei browser sarà finito un giorno.
• Ci sarà un solo browser per TUTTI.

Scarica il CSS e HTML della soluzione qui sopra (Scaricato 451 volte) .. per la comprensibilità, la CSS non è stato ottimizzato

PS: E comunque, queste sono le miniature di alcune foto che ho cliccato ...

Se la vostra esigenza è quella di dividere un valore del nodo in un XML, che contiene una stringa delimitata di valore, in singoli elementi, allora hai raggiunto il posto giusto ... dare un'occhiata al seguente esempio. Se si ha familiarità con un po 'di XML e XSL ... non credo che si avrebbe bisogno di alcuna spiegazione.
Inoltre, questo esempio include l'utilizzo di funzioni come XSL xsl: call-template, xsl: substring-before, xsl: substring-after, se è questo che siete dopo.

XML per essere trasformato (food.xml): -
Si supponga che il compito è quello di tokenize la stringa delimitata da una virgola, nei 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>

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

Inutile dire ... basta cambiare il parametro "delimitr" per il delimitatore di vostra scelta

Se avete mai fatto (o fare uno) un menu verticale con voci di elenco (LI) e tag CSS, è possibile incontrare, questo ennesimo bug in Internet Explorer, dove IE 6 inserti in questi spazi vuoti tra gli elementi dell'elenco che contengono elementi a livello di blocco, vale a dire se c'è qualche spazio bianco tra le voci di elenco nel markup. Grazie, ma no grazie, la versione IE 7 sembra esente da questo bug.
Se, come me, e molti altri, tu appartieni a questa fascia di sviluppatori frustrati, che ancora devono ottenere i loro nuovi layout, lavorando anche in IE6, allora questo potrebbe rivelarsi utile. Dai un'occhiata ...

Esempio di markup:

<ul id="menu">
<li> <a href="#"> Home </ a> </ li>
<li> <a href="#"> Chi </ a> </ li>
<li> <a href="#"> Servizi </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Contatti </ a> </ li>
</ Ul>

Si potrebbe creare qualche CSS, simile a quello riportato di seguito, per transfrom il codice sopra in un menu verticale ....

Esempio di 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: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

I risultati si vedono ...

Soluzione per questo bug ... (modificato / aggiunto CSS in grassetto corsivo)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; width: 150px;
float: left; / * questo contiene elementi di una lista float * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Questo risolve il * /
width: 100%; / * bug spazi in IE6 * /
}
# Menu a {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Se il doesnot soluzione di cui sopra sembra funzionare (per ragioni note solo a IE6) ... provare questo metodo, invece

Basta aggiungere questo ulteriore stili IE6 solo al markup ...

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

Se XML / XSL Trasforma il tuo domian, poi ci sono momenti in cui ci vogliono un pezzo del codice dinamico da utilizzare elemento di libreria (da effettuarsi riutilizzabile). Quello che voglio dire, probabilmente potrebbe essere reso più chiaro con questo scenario di esempio.

Immaginate di creare un sito web (e l'utilizzo di XML, XSL transfroms ofcourse) e la maggior parte delle pagine avrebbe un modulo commenti. Bene! allora o si copia o incolla il codice in ogni modello di pagina (che io non sono dire, ma fare la manutenzione e rielaborare un incubo) o ancora meglio, si crea un file di inclusione che potrebbe essere tirato in dove mai lo vuoi nella tua pagina ( s) ...
Così come possiamo creare un file XSL INCLUDE e includerlo in un altro file XSL? Ecco come ...

Giusto per fare chiarezza ... ecco breve lista di file che si creerebbe ... qui, ci saranno anche informazioni su frutta e verdura in una pagina padre chiamato cibo.

1. food.xml - file di dati XML su cui la trasformazione sarà applicato
2. food.xsl - file principale XSL, che trasformerà la nostra food.xml
3. inc_fruits.xsl - XSL file di inclusione che il rendering dei dati frutta
4. inc_vegtables.xsl - XSL file di inclusione che il rendering dei dati vetetables

Non credo che ho spiegare molto, i codici per gli elementi di cui sopra, sarà auto esplicativo ...

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>

Scarica tutti i file qui sopra (251 downloads)

Messaggio IE 6, MSIE è stato così gentile da noi sviluppatori dell'interfaccia utente con l'aggiunta di qualche proprietà più CSS standard per la maggior parte degli altri browser standard. Una proprietà come utile in "min-height". Proprietà piuttosto semplice che ha bisogno di alcuna spiegazione a lungo senza fiato. Quando un min-height per una divisione è impostato, mantiene sempre che l'altezza set quando il contenuto che ospita occupa meno di quanto può contenere e soprattutto (a differenza del plain vanilla proprietà "height"), scale ovvero CSS, si comporta come una divisione di cui "l'altezza" è impostato su "auto" ...

Per alcuni di noi poveri sviluppatori, che ancora sono tenuti al codice CSS che devono lavorare anche in IE6, non-disponibilità del "min-height", potrebbe rivelarsi un tappo di spettacolo ... a volte la disperazione Donot.

Fortunatamente, abbiamo capricci abbastanza in IE, che avremmo usato a vantaggio di uscire e incidere attraverso il nostro modo per raggiungere il nostro obiettivo ... cioè fare una divisione divisione come se il suo min-height in IE6

Soluzione 1: Utilizzare il carattere di sottolineatura Hack [ ... Read more ]

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

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

---

Soluzione 2: Utilizzo dell'attributo CSS 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>


L'attributo CSS Selector Hack si avvale del fatto che i browser precedenti IE6 tha ignorato uno atribute-selector. Si noti l'esigenza di un'altra divisione contenitore con class = "someclass". Solo il presense dell'attributo classe per questa divisione, prevale l'altezza dello schienale per auto per Opera, Mozilla e MSIE7 e versioni successive. IE6, che non supporta selettori atribute, lo ignora.

Visualizza la demo del min-height hack per IE6

Se si utilizza XML e XSL, allora si potrebbe sono imbattuto in un tempo, quando si deve giocare con gli attributi ei valori di nodi XML in voi XSL. Essi sono un sacco di siti con informazioni fiato lungo su questo, ma non ho trovato erano brevi e precise ... Questo non è un XML / XSL TUTORIAL, ma il mio tentativo di mettere insieme-una sorta di trucco lista ...

L'XML di esempio che ci lavoro con simile a questa ...

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

Quindi, consente di iniziare a trasformare la nostra in precedenza XML utilizzando XSL

Esempio 1: visualizzazione valore di un attributo scelto

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

Risultato HTML sarà simile a

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

Esempio 2: la ripetizione ciclica di e la visualizzazione di tutti i nomi degli attributi XML ei loro valori

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

Risultato HTML sarà simile a


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


Tieni d'occhio questo spazio, terrò questo aggiornamento con nuove scoperte ...

Un reset CSS è / sono i CSS per impostare una serie di stili di elementi in una linea di base specifica che crea coerenza tra i vari browser.

Tutti siamo stati passante gli incubi di scrittura cross-browser CSS. Così, quando abbiamo iniziato a scrivere il nostro CSS, E 'una pratica per reimpostarla prima di rimuovere / ripristinare eventuali incoerenze cross browser. Ripristina CSS, sono semplici poche righe di CSS che iniziano con il CSS, fornendo una base pulita per iniziare a costruire il vostro momento.

Il reset CSS che normalmente tendono a utilizzare il seguente aspetto

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

Ripristina la dimensione del carattere del browser
Da notare anche il reset che è stato applicato alla dimensione del font del browser nella riga seguente ...

html {font-size: 76%;}

Quanto sopra CSS azzera la dimensione del carattere del browser a 10 pixel, e questo rende possibile lavorare con dimensioni relative per i font (che è ogni importante dal punto di conformità WAI prespective)
Per esempio, nella seguente definizione, font-size in un arco è impostata a 10 pixel e che nel paragarph è impostato a 14 pixel ...

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