Expresando TI

Coloque hojas de estilo en la parte superior

Si quieres una página se cargue progresivamente, es decir, queremos que el navegador muestre el contenido de lo que tiene, tan pronto como sea posible, poner el CSS en la parte superior de la página dentro de la cabecera del documento. Esto hace que las páginas parecen estar de carga más rápido, ya que esto facilita la representación progresiva de la página. Esto es especialmente importante para las páginas con mucho contenido y para los usuarios de conexiones a Internet más lentas.

Es un hecho documentado de que para mejorar la experiencia general del usuario, es importante proporcionar a los indicadores de progreso y la retroalimentación visual. Para evitar tener que volver a dibujar los elementos de la página, en caso de que si cambian sus estilos, algunos navegadores, como Internet Explorer, los bloques de la representación de la página hasta que el CSS se carga totalmente. Debido a esto, el usuario es llega a ver una página en blanco.

Las especificaciones HTML de W3 también establece que la CSS debe incluirme en la sección HEAD de la página HTML. at the bottom of the page, so it's best not to use it. También tenga en cuenta que, en la IE @import se comporta de la misma como el uso de <link> en la parte inferior de la página, así que es mejor no usarlo.

Evitar el uso de las características específicas del navegador

Filtros: El uso de filtros aumenta el consumo de memoria y se aplica por cada elemento, no por imagen, por lo que el problema se multiplica. Además, los filtros son de propiedad exclusiva de IE, por lo tanto no va a funcionar como está previsto en otros navegadores. Si quieres un fondo transparente o gradiente, use 1pixel con imágenes.
Las expresiones: expresiones CSS son una buena característica a tener en CSS, pero todavía es una característica específica de IE. Además, es importante señalar que, estas expresiones son evalúa cuando se procesa la página y cambiar de tamaño, desplazarse e incluso cuando el usuario mueve el puntero del ratón sobre la página. Huelga decir que esto podría afectar el rendimiento de su página. Por eso, en palabras simples, Evite el uso de expresiones CSS, a menos que sienta sus pros 'pesa más que sus contras "

Externalizar a CSS

El uso de CSS externa se traducirá en una carga más rápida de la páginas debido a que los archivos JavaScript y CSS son cacheadas por el navegador. CSS en línea en los documentos HTML se descargan cada vez que se solicita el documento HTML. En realidad, esto podría reducir el número de peticiones HTTP realizadas pero posteriormente aumenta el tamaño del documento HTML. CSS externa se almacenan en caché por el navegador, el tamaño del documento HTML se reduce sin aumentar el número de peticiones HTTP.

Tenga en cuenta que, si los usuarios de su sitio con vistas de varias páginas por sesión y muchas de sus páginas de volver a utilizar los mismos scripts y hojas de estilo, hay un mayor beneficio potencial de la caché de archivos externos.

Empaca tus archivos CSS

Embalaje o crujido de su CSS es la práctica de la eliminación de caracteres innecesarios del código para reducir su tamaño con objeto de optimizar los tiempos de carga.

La CSS puede que me crujía mediante la eliminación de todas las observaciones y los personajes no deseados, como los espacios en blanco, saltos de línea, etc

Nota IE 6, MSIE ha sido lo suficientemente amable para los desarrolladores de la interfaz de usuario mediante la adición de un poco más de las propiedades CSS estándar para la mayoría de los otros navegadores estándar. Una de estas propiedades útiles en "min-height". La propiedad bastante sencillo que no necesita explicación largo aliento. Cuando un min-height de una división se establece, se conserva siempre que la altura de juego cuando el contenido que alberga ocupa menos de lo que puede sostener y esto es importante (a diferencia del plain vanilla "altura" de la propiedad) las escalas o, dicho de CSS, se comporta como un cuya división de "altura" está ajustado en "auto" ...

Para algunos de nosotros los desarrolladores de pobres, que todavía se requieren para el código CSS que también deben trabajar en IE6, sin disponibilidad de la "min-height", podría convertirse en un tapón de la demostración en algún momento ... la desesperación Donot.

Afortunadamente, tenemos bastantes peculiaridades de IE, que se utilizan en beneficio de salir y cortar el camino a través de llegar a nuestro objetivo ... es decir, hacer una división DIVISIÓN como si su min-height en IE6

Solución 1: Uso del Hack subrayado [ ... Leer más ]

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

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

---

Solución 2: Utilizar el atributo CSS Selector de 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>


El atributo CSS Selector de Hack se aprovecha del hecho de los navegadores IE6 antes del tha ignorado un atributo físico-selector. Tenga en cuenta el requisito de la otra división de contenedores con class = "SomeClass". Sólo el presense del atributo de clase de esta división, anula la altura del respaldo automático para Opera, Mozilla y MSIE7 y posteriores. IE6, que no es compatible con los selectores de atributo físico, lo ignora.

Ver demostración del truco min-height para IE6

Si utiliza XML y XSL, a continuación, que podría haber llegado a través de un tiempo, cuando se tiene que jugar un poco con los atributos y valores de los nodos XML que XSL. Son un montón de sitios con información acerca de este largo aliento, pero no encontré fueron breves y precisos ... Esto no es una TUTORIAL XML / XSL, pero mi intento de poner en conjunto-una especie de lista de trucos ...

El XML de ejemplo que vamos a trabajar con este aspecto ...

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

Así que vamos a empezar a transformar nuestra por encima de XML con XSL

Ejemplo 1: Visualización de valor en un atributo seleccionado

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

Resultado HTML se verá así

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

Ejemplo 2: a través de bucle y la visualización de todos los nombres de atributos XML y sus valores

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

Resultado HTML se verá así


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


Mire este espacio, voy a seguir actualizando este con los nuevos descubrimientos ...