L'exprimer

Mettez les feuilles de style au sommet

Si vous voulez une page à charger progressivement; qui est, nous voulons que le navigateur pour afficher n'importe quel contenu elle a le plus tôt possible, mettre le CSS dans le haut de la page à l'intérieur du HEAD du document. Cela rend les pages semblent être plus rapide le chargement, ce qui facilite le rendu progressif de la page. Ceci est particulièrement important pour les pages avec beaucoup de contenu et pour les utilisateurs sur les connexions Internet lentes.

Il est un fait documenté que pour améliorer l'expérience utilisateur globale, il est important de fournir des indicateurs de progrès et de rétroactions visuelles. Pour éviter d'avoir à redessiner les éléments de la page, dans le cas si leur changement styles, certains navigateurs, y compris IE, rendu blocs de la page jusqu'à ce que le CSS est complètement chargée. Pour cette raison, l'utilisateur est arrive à voir une page vierge.

Les spécifications HTML W3 », déclare également que le CSS doit m'inclure dans la section HEAD de la page HTML. at the bottom of the page, so it's best not to use it. A noter également que, dans IE @import se comporte de la même que l'utilisation <link> au bas de la page, il est donc préférable de ne pas l'utiliser.

Évitez d'utiliser les caractéristiques spécifiques du navigateur

Filtres: utilisation du filtre augmente la consommation de mémoire et est appliquée par élément, et non par l'image, de sorte que le problème est multiplié. En outre, les filtres sont IE propriétaire, par conséquent, ne fonctionnera pas comme prévu dans d'autres navigateurs. Si vous voulez un fond transparent ou dégradé, utilisez 1Pixel avec des images.
Expressions: expressions CSS sont une caractéristique agréable d'avoir en CSS, mais il est encore IE fonctionnalité spécifique. En outre, il est important de noter que, ces expressions sont évaluée lorsque la page est rendue et redimensionnée, défile et même lorsque l'utilisateur déplace la souris sur la page. Inutile de dire que cela pourrait affecter les performances de votre page. Par conséquent, dans des mots simples, éviter d'utiliser des expressions CSS, à moins que vous vous sentez ses avantages »pèse plus que ses inconvénients»

Externaliser vous CSS

L'utilisation de CSS externe se traduira par un chargement plus rapide des pages, car les fichiers JavaScript et CSS sont mis en cache par le navigateur. Inline CSS dans les documents HTML se téléchargées à chaque fois le document HTML est demandée. Cela pourrait effectivement réduire le nombre de requêtes HTTP faites, mais il augmente par la suite la taille du document HTML. CSS externe sont mises en cache par le navigateur, la taille du document HTML est réduite sans pour autant augmenter le nombre de requêtes HTTP.

S'il vous plaît noter que, si les utilisateurs sur votre site ont une vue de plusieurs pages par session et nombre de vos pages réutiliser les mêmes scripts et feuilles de style, il ya un plus grand bénéfice potentiel de mise en cache des fichiers externes.

Emballez votre fichier CSS

D'emballage ou de croquer votre CSS est la pratique de la suppression des caractères inutiles à partir du code pour réduire sa taille ce qui améliore les temps de chargement.

Le CSS peut me croquer en supprimant tous les commentaires et les caractères indésirables tels que des espaces blancs, sauts de ligne, etc

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