L'exprimer

CSS complété l'existence de 10 ans cette année! Ceux qui ont été autour pendant un certain temps, gagner leur pain (ou non) en utilisant le CSS, alors vous pourriez connaître la façon dont nous avons été affamés pour une bonne sélection de polices de caractères. Même en l'absence de polices designers comme ceux de CSS Zen Garden ont fait usage d'images de fond CSS pour remplacer les polices dans la poursuite de faire un peu de justice à leurs desseins. Nous avons également essayé Flash / JavaScript hacks ® pour atteindre nos objectifs de conception. En aucun cas, il s'agit d'une mauvaise façon d'obtenir les polices que nous désirons dans nos conceptions web, mais certainement, ce n'est pas la façon la plus souhaitable. et plus web année designer, comme moi, ont pleinement compté sur une dizaine de polices pour leurs conceptions.

Les développements récents dans les standards du Web et des formats de polices permettent de rendre le texte HTML dans des polices de caractères autres que les mêmes polices par défaut anciens. Livré dans le "@ fontface" Decleration CSS.

@ Fontface provids une solution à un lien vers le fichier de police réel et le récupérer à partir du Web. Utilisation de @ fontface, les concepteurs peuvent utiliser des polices sans avoir à geler le texte comme les images de fond. La mise en œuvre est très simple, comme indiqué ci-dessous, mais comme toutes les bonnes choses ont une partie de l'CON, tous les navigateurs prennent en charge un «type de police" unique. Si vous prévoyez d'utiliser fontface @ dans le site avec besoin de soutien navigateur croix, alors vous aurez à fournir des sources à divers polices-types du même.

1. TrueType - Un format conçu pour bien paraître à l'écran. Recommandé en particulier pour les navigateurs Windows (Chrome).
2. OpenType (CFF) - Ce format est préférable pour les travaux d'impression et de ne pas toujours l'air bien sur Windows.
3. EOT - Vous avez besoin de ce format si vous souhaitez cibler Internet Explorer. IE de ne pas utiliser n'importe quel autre format. Notre EOT seraient considérés comme "Lite", car ils ne sont ni compressées ni domaine restreint.
4. SVG - Il s'agit d'un format XML pris en charge par certains navigateurs, y compris l'iPhone.
5. WOFF - Ce cross-browser, le format de police uniquement sur ​​le Web est léger (données de police est compressé zip) et peut être compilé avec TrueType ou PostScript (CFF) décrit. Il est actuellement pris en charge par Firefox 3.6 +.

Utilisation de @ fontface

  @ Font-face {
 font-family: 'CalligraphyFLFRegular';
 src: url ('CalligraphyFLF.eot');
 src: local ('CalligraphyFLF'), locale («CalligraphyFLF '), format d'URL (' CalligraphyFLF.woff ') (' WOFF '), url (' CalligraphyFLF.ttf ') format (" truetype "), url (' CalligraphyFLF . svg # CalligraphyFLF ') format (' svg ');
 }
 @ Font-face {
   font-family: "Votre police";
   src: url ("fonts / font_filename.eot");
   src: local ("Autre nom"), locale ("Alternatename"),
     url ("fonts / font_filename.woff") format ("WOFF"),
     url ("fonts / font_filename.otf") format ("OpenType"),
     url ("fonts / font_filename.svg # nom_du_fichier_de_fonte") format ("svg");
   }
 h2 {font-family: "Votre police", la Géorgie, serif;} 

Comme vous pouvez le voir dans l'exemple ci-dessus, afin d'inclure la police de caractères choisie, on doit relier à un ensemble de fonttypes pour le même type de caractère. Ainsi les gens se réfèrent à lui comme "Kit de police".
Il existe des kits de polices disponibles, qui permet explicitement le lien avec le CSS @ font-face de propriété en vertu de contrat de licence utilisateur final (CLUF).

Ressources WebFont utiles:

• Polices disponibles pour @ font-face plongement page wiki à http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Il est un concepteur de la police de renom qui a fait des centaines de polices TrueType intéressantes disponibles gratuitement pour une utilisation sur le web. Ses polices sont élégantes, décoratives, et ludique.
• Dieter Steffmann est un autre concepteur de la police grand. Lui aussi, a fait de nombreuses polices disponibles belles pour quiconque d'utiliser.
• Boutique de polices : les polices offre spécialement conçus pour l'utilisation du Web. Plus de 30 des familles les plus réussies FontFont sont maintenant disponibles en FontFonts Web. FontShop dispose également d'un utilisateur détaillé WebFont guide de http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Squirrel polices : vedette toutes les polices d'écureuil Font offre pour une utilisation avec @ font-face intégration CSS. Squirrel polices offre une quantité impressionnante de type, il est mort simple à en choisir un, et offre haut la main "kits" - La police de caractères de votre choix, dans plusieurs formats, emballés avec la démo HTML et CSS qui utilise très actuel @ font-face syntaxe . Ils offrent également un moyen de faire vos propres @ font-face kits . Si la police de caractères que vous souhaitez utiliser a été autorisé de façon appropriée (ceux qui viennent avec votre ordinateur ne sont pas nécessairement d'accord), le générateur produit EOT, SVG, et hey! Fichiers WOFF.

Un autre tut rapide. Voici quelque chose de simple et agréable en utilisant la puissance des CSS ... mais il était d'enfant au difficile (et il n'était sûrement pas moi) pour commencer. Ajout DropShadow, peut-être un peice de gâteau pour beaucoup d'entre nous, en utilisant certains outils d'édition d'image comme Photoshop anf Fireworks etc
La raison pour laquelle, j'ai opté pour une ombre portée en utilisant le CSS, c'est que, généralement, tout en créant un modèle de page / html d'une demande, les exigences garder itération. Ce que je veux dire, c'est, dans un site Web existant avec beaucoup d'images, comme celles Affichage de la liste freinds ou une galerie d'images, il sera difficile de retraiter l'ensemble du chargement des images qui avaient déjà été déchargés d'ajouter ou de supprimer les ombres, pour que question.
Donc, si vous avez fait un peu de réflexion avant tout en créant les HTMLS d'ajouter ces divisions supplémentaires ou plus souvent la situation, c'est que vous avez une logique de boucle générer ces icônes ou vignettes dans XSL, PHP. JAVA ou de toute autre programmation / langage de script, vous pouvez l'ajouter à tout moment, est alors seulement la question de spectacle et de cacher ces ombres en utilisant la propriété CSS display, comme par les clients en constante évolution des exigences ... je havn't fait ce genre de réflexion prospective avant cette ... mais ahev dès maintenant!

Dans l'exemple ci-dessous, l'image originale est libre et l'ombre des dropshadows sont appliquées selon les besoins! AUSSI, je suis allé un peu plus, en utilisant les tours de mon Tut plus tôt (Well! ces sont probablement plus courte variété de tutoriels, de sorte qu'il ne se justifie que les qualifiant de «Tut» 's) au sujet de l'aide de la propriété CSS clip pour montrer que

Image de l'original

Résultats Ombre CSS

Voir la démo | Télécharger SourceFiles

Pourquoi dois-je veux comprendre cela?? Humm ...!!

La plupart des écrivains CSS serait d'accord que la propriété CSS clip est probablement l'un de la plupart des propriétés CSS non utilisés. C'était si vrai pour moi aussi et j'ai été très heureux de le négliger, jusqu'à ce que j'ai commencé à modifier le MooTools DEUX composant Slider Bouton (Pin) (avec Range Indicator) .

Il y avait une bonne suggestion de l'un des utilisateurs de composants pour modifier le composant Slider à l'aide d'images taillées backgroud (contre une division de largeur variable) pour indiquer le domaine du slider. Ainsi vint mon temps pour entrer dans le plaisir, mais affrété par l'ONU (pour moi ofcourse) les eaux de la propriété Clip CSS.

Eh bien! comment il peut être difficile? Pas grand-chose du tout ... OUI et NON. La syntaxe à utiliser la propriété Clip CSS est assez verticale, mais la signification / usuage est un peu croocked. Avec une mémoire comme la mienne, chaque fois que je suis assis à retravailler sur mon script curseur ... J'ai tokeep renvoyant à l'usage de cette propriété CLIP, à me rappeler la logique que j'ai créé dans mon script .... DONC! pensé à l'stylo, avec un espoir de se rappeler qu'il l'avenir (et aussi pour le bénéfice de ceux qui semblent boggled par la propriété Clip CSS)

Qu'est-ce que CSS clip faire?

Clip est une partie du module d'effets visuels de CSS 2.1. Autrement dit, son travail consiste à placer une fenêtre visible sur le dessus d'un objet qui est coupé, donc détourage d'images et de création de vignettes sans avoir à créer des fichiers supplémentaires (j'ai déjà mis cette fonction pour une meilleure utilisation dans le composant Slider )

Utilisation de la propriété Clip CSS, vous pouvez créer une coupure en utilisant la forme rect. Comme beaucoup d'autres propriétés CSS (comme rembourrage, etc marge,), en utilisant rect nécessite quatre coordonnées Haut, Droite, Bas, Gauche (DEFT). La nature croocked de cette propriété reflète quand vous prenez un peu plus près comment calcule clip de la zone de découpage, l'utilisation de ces quatre coordonnées (envoie des cerveaux en un tirage au sort pendant un certain temps). Maintenant, pour vous confondre le fond commence à partir du haut, et le droit commence à partir de la gauche. . Vous voyez ce que j'ai dit? .... Ainsi ce post ...

Ce peu de confusion peut facilement disparaître, avec cette explication visuelle de la CSS Clip / rect propriété comme ci-dessous!!

Exigences clip CSS

La tâche que nous avons commencé est de couper l'image Vignette suivant dans une image plus carrée à la recherche (et aussi une image grand-angle)

Thumbnal origine / Image	Exigences clip pour Sqaure Thumbmail

Résultats clip CSS

Voir la démo | Télécharger SourceFiles

Avant, nous avions à traiter avec les CSS pour créer nos mises en page, l'alignement du contenu dans une cellule de tableau semblait jeu juste enfant. Il suffit de mettre le "align" ou "valign" propriété de la table pour avoir l'alignement de votre choix, un morceau de gâteau!
Avec mises en page CSS, si nous avons "vertical-align" propriété pour les éléments, il ne semble pas être aussi simple que le "align" ou "valign" propriétés. Pour être plus specifiic le "vertical-align" ne semble jamais à résoudre tous vos problèmes, surtout si on écrire une pièce de cross-browser CSS.

Sans l'utilisation des tableaux HTML, LE PROBLÈME de centrage sur l'objet, que ce soit une image ou un texte dans une division contenant, a probablement été tous les cauchemar UI / CSS développeurs à un moment donné. Ce problème extrapole encore vos soucis d'alignement, si l'objet à être centré est de nature dynamique, c'est à dire lorsque sa hauteur est variable (hauteur inconnue).

Bien qu'il n'y ait pas de solution connue simple qui fonctionne sur toute la gamme des navigateurs que nous avons à traiter, la solution que j'ai essayé d'arriver à ne semble pas fonctionner dans les navigateurs peu que je l'ai essayé dans (IE6, IE 7 , FF).

SOLUTION:
Dans les navigateurs comme Mozilla, Opera et Safari, L'étrange comportement "vertical-align" propriété peut être mis à la raison, tout simplement en réglant le "display" propriété de la division contenant de "table-cell" (display: table-cell) .

Le problème reste encore avec la famille des navigateurs IE, qui, pourtant ne semble pas comprendre ce qu'il faut avec la "table-cell« la propriété et ignorants qu'ils sont, ils ont juste l'ignorer. La solution donnée ci-dessous, bien que simples, les annonces de quelques éléments plus DOM à votre HTML pour faire bouger les choses.

Le CSS et HTML ressemble à ceci
.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/> vues: 3456 </ div>
</ Div>
</ Div>

Le résultat ressemble à ceci: -

voir la démo ici | Les fichiers source Télécharger (téléchargé 448 fois)

TOP Aligner 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/> vues: 1234 </ div>
</ Div>
</ Div>

Le résultat ressemble à ceci: -

Aligner en bas 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/> vues: 1234 </ div>
</ Div>
</ Div>

Le résultat ressemble à ceci: -

voir la démo ici | Télécharger ici

On dirait que les âges, depuis que j'ai essayé de trouver une solution raisonnable à ce problème d'alignement. Mais maintenant, avec cette solution, je me sens à peu de paix.

Avec un espoir qu'un jour

• vertical-alignement propriété CSS fonctionne comme il le fait dans une cellule de tableau, sans avoir à battre beaucoup plus autour du pot
• Au moins, la mise en margin-top: auto et margin-bottom: auto, donnera le même résultat qu'avec la marge gauche et l'ensemble margin-right à auto
• Les guerres du navigateur sera plus un jour.
• Il y aura juste un navigateur pour TOUS.

Télécharger le CSS et HTML de la solution ci-dessus ici (Téléchargé 448 fois) .. pour l'intelligibilité, la CSS n'est pas optimisé

PS: Et en passant, ceux qui sont des vignettes de quelques photos que j'ai cliqué ...

Si votre exigence est de diviser une valeur dans un noeud XML, qui contient une chaîne délimitée de la valeur, en éléments individuels, alors vous avez atteint le bon endroit ... jeter un oeil à l'exemple ci-dessous. Si vous êtes familier avec un peu de XML et XSL ... Je ne pense pas que vous auriez besoin d'explication.
En outre, cet exemple inclut l'utilisation de fonctions comme XSL xsl: call-template, xsl: substring-before, xsl: substring-after, si c'est ce que vous êtes après.

XML pour être transformé (food.xml): -
Supposons que la tâche est de tokenize la chaîne délimitée par des virgules, dans les le 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>

De sortie résultant 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 de dire que ... il suffit de changer le paramètre "delimitr" pour le délimiteur de votre choix

Si vous avez déjà fait (ou en faisant un) un menu vertical à l'aide des éléments de liste (li) et les balises CSS, vous pourriez rencontrer, ce encore un autre bug dans Internet Explorer, IE 6 inserts où ces écarts entre les éléments de la liste qui contiennent des éléments de niveau bloc, à-dire s'il n'y a aucun espace entre les éléments de liste dans le balisage. Merci, mais non merci, la version d'IE 7 semble exempt de ce bug.
Si comme moi, et beaucoup d'autres, vous appartenez à ce groupe de développeurs frustrés, qui ont encore pour obtenir leurs nouvelles dispositions, qui travaillent dans IE6 trop, alors cela pourrait se révéler utile. Jetez un oeil ...

Balisage de l'échantillon:

<ul id="menu">
<li> <a href="#"> Accueil </ a> </ li>
<li> <a href="#"> propos </ a> </ li>
<li> <a href="#"> Services </ a> </ li>
<li> <a href="#"> portefeuille </ a> </ li>
<li> <a href="#"> FAQ </ a> </ li>
<li> <a href="#"> Contactez-nous </ a> </ li>
</ Ul>

Vous pouvez créer un peu de CSS, similaire à celui ci-dessous, à transfrom le balisage ci-dessus dans un menu vertical ....

Exemple de CSS ...
# Menu {
margin: 0; padding: 0; background: # FF9900;
list-style-type: none; largeur: 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 solide # FFF;
}

Les résultats vous verrez ...

Solution pour ce bogue ... (modifié / ajouté CSS en gras et italique)

# Menu {
margin: 0; padding: 0; background: # FF9900; list-style-type: none; largeur: 150px;
float: left; / * contient cette liste des articles flottants * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Ceci fixe le * /
largeur: 100%; / * espaces bug dans IE6 * /
}
# Menu a {
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solide # FFF;
}

Si la solution ci-dessus doesnot semble pas fonctionner (pour des raisons connues d'IE6 seulement) ... essayer cette méthode au lieu

Il suffit d'ajouter cette supplémentaires IE6 seuls styles à votre balisage ...

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

Si XML / XSL Transformations est votre domian, alors il ya des moments où nous voulons un peice de code dynamique pour être utilisé élément de la bibliothèque (à faire ré-utilisable). Qu'est-ce que je veux dire, sans doute pourrait être rendu plus clair avec ce scénario par exemple.

Imaginez que vous créez un site web (et en utilisant XML, XSL transfroms ofcourse) et la plupart des pages aurait un module Commentaires. Eh bien! alors soit vous copiez ou collez ce code dans tous les modèle de page (qui je n'ai pas dit, mais compliquent la maintenance et de retravailler un cauchemar) ou, mieux encore, vous créez un fichier INCLUDE qui pouvait être tirée en où que vous le voulez dans votre page ( s) ...
Alors comment créer un fichier XSL INCLUDE et l'inclure dans un autre fichier XSL? Voici comment ...

Juste pour clarifier les choses ... voici la liste rapide de fichiers que vous créez ... ici, nous allons être, y compris d'infos sur les fruits et les légumes dans une page parent appelé la nourriture.

1. food.xml - fichier de données XML sur lequel la transformation sera appliqué
2. food.xsl - fichier principal XSL, qui va transformer notre food.xml
3. inc_fruits.xsl - XSL inclure le fichier qui va rendre les données de fruits
4. inc_vegtables.xsl - XSL inclure le fichier qui va rendre les données vetetables

Je ne pense que je dois expliquer en grande partie, les codes pour les éléments ci-dessus, sera auto explicative ...

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>

Télécharger tous les fichiers ci-dessus ici (249 téléchargements)

Poster IE 6, MSIE a été assez aimable pour nous développeurs d'interface utilisateur en ajoutant quelques autres propriétés CSS standard pour la plupart des autres navigateurs standard. Un tel bien utile dans "min-height". Propriété assez simple qui ne nécessite aucune explication de longue haleine. Quand un min-height pour une division est défini, il conserve toujours cette hauteur ensemble lorsque le contenu qu'il abrite occupe moins que ce qu'il peut contenir et surtout (contrairement à la vanille "hauteur" plaine de propriété) des échelles ou des mots CSS, il se comporte comme un division dont le "hauteur" est réglé sur "automatique" ...

Pour certains d'entre nous pauvres développeurs, qui sont encore nécessaires pour code CSS qui doit également travailler dans IE6, non-disponibilité de la «min-height", pourrait se révéler un show stopper parfois ... désespoir Donot.

Heureusement, nous avons assez de bizarreries dans IE, que nous devons utiliser au mieux les pirater et notre chemin à travers pour atteindre notre objectif ... à savoir faire une division DIVISION comme si son min-height dans IE6

Solution 1: Utilisation du Hack de soulignement [ ... Lire la suite ]

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

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

---

Solution 2: Utilisation de l'attribut 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'attribut CSS Selector Hack prend avantage du fait des navigateurs antérieurs IE6 tha ignoré une atribute-sélecteur. Note à l'exigence d'une autre division des conteneurs avec class = "someclass". Juste le presense de l'attribut class pour cette division, l'emporte sur la hauteur du dossier à l'auto pour Opera, Mozilla et MSIE7 et plus tard. IE6, qui ne prend pas en charge les sélecteurs atribute, il ne tient pas compte.

Voir la démo du hack min-height pour IE6

Si vous utilisez XML et XSL, alors vous pourriez avoir rencontré un certain temps, lorsque vous avez à jouer avec les attributs et les valeurs de nœuds XML dans XSL-vous. Ils sont des tas de sites avec des infos à propos de cette longue haleine, mais aucun que je trouvais était brève et précise ... C'est pas de tutoriel XML / XSL, mais ma tentative de mettre ensemble-une sorte de triche liste ...

L'échantillon XML que nous allons travailler avec ressemble à ceci ...

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

Permet donc commencer à transformer notre XML ci-dessus en utilisant XSL

Exemple 1: Affichage de la valeur à un attribut choisi

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

Résultat HTML ressemblera

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

Exemple 2: boucle par le biais et l'affichage de tous les noms d'attributs XML et leurs valeurs

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

Résultat HTML ressemblera


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


Surveillez cet espace, je vais continuer la mise à jour avec les nouveaux résultats de cette ...

Un Reset CSS est / sont les CSS pour définir un certain nombre de styles d'élément à un niveau de référence spécifique qui crée la cohérence entre les différents navigateurs.

Nous avons tous été à travers les cauchemars de l'écriture cross-browser CSS. Ainsi, lorsque nous commencer à écrire notre CSS, Il s'agit d'une pratique pour réinitialiser d'abord de supprimer / réinitialiser toutes les incohérences Croix-navigateur. Réinitialise CSS, sont de simples quelques lignes de CSS que vous commencez votre CSS avec, en vous donnant une base propre pour commencer à construire votre sur.

Le CSS que je réinitialise normalement ont tendance à utiliser ressemble à ceci

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

Réinitialiser la taille de police navigateur
A noter également la remise à zéro qui a été appliquée à la taille de police du navigateur dans la ligne suivante ...

html {font-size: 76%;}

Le réinitialise ci-dessus la taille de police CSS navigateur à 10 pixels, ce qui rend possible de travailler avec les tailles de police relatives (qui est tout à partir d'une importante respect WAI prespective)
Pour exemple, dans la définition suivante, font-size dans une travée est fixée à 10 pixels et que dans le paragarph est fixé à 14 pixels ...

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