Eliminando el style por defecto de una gallery con un add_filter en WordPress

post - - 2 replies - share

Cuando insertamos una galería de imágenes en WordPress se incrusta por defecto una serie de estilos CSS:

#{$selector} {
margin: auto;
}
#{$selector} .gallery-item {
float: {$float};
margin-top: 10px;
text-align: center;
    	width: {$itemwidth}%;
    }
    #{$selector} img {
    	border: 2px solid #cfcfcf;
    }
    #{$selector} .gallery-caption {
    	margin-left: 0;
    }

Este fragmento de código se encuentra en:
wp-includes/media.php (Line 833)

El problema es que se incrusta estilo en pleno documento, donde se ha insertado la galería. Lo cual no resulta muy limpio si atendemos a la abstracción de las 3 capas: diseño, función y contenido.

Si volvemos a media.php veremos entorno a la línea 831:

if ( apply_filters( 'use_default_gallery_style', true ) )

Por tanto una opción elegante podría ser:

add_filter('use_default_gallery_style', FALSE);

Colocando este filtro en el fichero functions.php del theme usado, indicamos a WordPress que no debe usar por el estilo CSS por defecto para las galerías, y relegamos el CSS necesario al fichero style.css donde tengamos centralizado todo el estilo del blog.

Usando filtros se puede cambiar altamente el comportamiento por defecto de WordPress.

CSS adaptado al navegador con PHP

post - - 4 replies - share

Tener diferentes hojas de estilo dependiendo del navegador me parece algo horrible 🙁 .  Pero si por algún motivo es necesario, podemos emplear una forma bastante fácil y limpia mediante PHP (Ref. Andrew Martin).

Para ello, (1) pondremos un CSS base que sea compatible para todos los navegadores y a continuación (2) haremos uso del array $_SERVER y del campo donde se cargan las cabeceras con información del navegador del usuario “HTTP_USER_AGENT”.

1. Código CSS base:

<link rel="stylesheet" href="base.css" type="text/css">

2. Código PHP:

$browser = $_SERVER['HTTP_USER_AGENT'];	
if (preg_match('/MSIE.8/i', $browser)) { echo ''; } 
elseif (preg_match('/MSIE.7/i', $browser)) { echo ''; }
elseif (preg_match('/MSIE.6/i', $browser)) { echo ''; }
elseif (preg_match('/MSIE.9/i', $browser)) { echo ''; }
elseif (preg_match('/Firefox.2/i', $browser)) { echo ''; }
elseif (preg_match('/Firefox.3.5/i', $browser)) { echo ''; }
elseif (preg_match('/Firefox.3/i', $browser)) { echo ''; }
elseif (preg_match('/Chrome/i', $browser)) { echo ''; }
elseif (preg_match('/Safari/i', $browser)) { echo ''; }
elseif (preg_match('/Opera/i', $browser)) { echo ''; }
else { echo ''; }

El código escribirá el link con la hoja de estilo correspondiente al navegador empleado por el usuario basándose en la comparación de cadenas.

Si lo que queremos es únicamente discernir la versión de MSIE, podemos también recurrir a los comentarios condicionales de Internet Explorer.

Para hacer las pruebas necesarias con los diferentes navegadores, podemos descargarlos o emularlos.

Optimización de CSS; Nicole Sullivan nos enseña 5 errores típicos y 5 buenas maneras

video - - 7 replies - share

Hace un tiempo escribí sobre algunas técnicas para poder optimizar nuestros códigos CSS. También mencionaba herramientas que puede facilitar nuestro trabajo de optimización: Firebug, PageSpeed, YSlow y YUI Compressor.

5 errores típicos

  • Un 42% de páginas no comprimen su contenido con GZIP.
  • Un 44% de páginas enlazan a más de 2 ficheros CSS.
  • Un 56% no sirven el CSS con cookies (o no la entiendo, o esta la veo complicada de evitar sin CDN).
  • Un 63% no minimiza sus ficheros con herramientas como YUI Compressor.
  • Un 21% de páginas tienen ficheros CSS con más de 100K de peso (esta es de escándalo).

Si en nuestros CSS sumamos: demasiada atomicidad, normas, duplicación, conflictos y lo aderezamos todo con algo de impredecibilidad, tendremos por resultado un enorme e incontrolable CSS.

5 buenas maneras

Lo que debemos evitar es:

1. La Atomicidad

Imaginemos una página Web como si fuera un coche. Para crear ese coche usamos piezas de lego, una a una las vamos posicionando hasta crear la figura del coche.

  • Con CSS básicamente hacemos lo mismo, podemos ir pieza a pieza posicionando y creando el sitio web. Y es justamente el planteamiento que debemos cambiar.
  • La idea es evitar pensar en pequeñas piezas (átomos) y pensar en objetos que se puedan reutilizar. De esta manera podemos por ejemplo crear con CSS una rueda del coche, que a su vez bastaría para simular las otras tres restantes.
  • Esto se podría considerar una evolución de la forma de pensar en el CSS.

2. Normas desfasadas

Que van acumulandose, que no se reutilizan, que son incrementales en el tiempo, muy especificas, etc.

3. Normas imprevisibles

Que no pueden ser reutilizadas y que son totalmente dependientes de su ubicación.

4. Guerras de especificidad

Nodos hijos de hijos de otros hijos, hacks, estilos con #ID que no pueden ser reutilizados, la sentencia !important no tiene cabida (si se usa bien la cascada), etc.

5. Duplicidad

Definir en numerosas ocasiones reglas como: margin, float, font-size, etc. Como solución tenemos:

PNG transparente e IE, el mítico problema…

post - - 1 reply - share

Internet Explorer en su versión 6 y anteriores no soporta la transparencia del formato PNG.
Para solucionar este problema existen varias técnicas:

Todas ellas presentan pros y contras. Dependiendo del proyecto puede que venga mejor uno u otro, o que simplemente alguno no funcione por conflictos de JavaScript o misteriosas razones que solo las meigas de IE conocen. Así que la única solución es probar y probar… 🙁

A continuación voy a desarrollar la primera de ellas.

AlphaImageLoader

#logo  { 
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
		src='http://..../logo.png', 
		sizingMethod='crop'
	); 
}

El primero de los pasos es indicar que no hay ningún fondo background-image: none;, a continuación usamos filter y la llamada Directx de Microsoft para cargar imágenes que incorporan factor alfa. En el parámetro src va la ruta absoluta al fichero png.

Conflicto con los enlaces

Con lo dicho anteriormente el PNG es mostrado con transparencia y sin errores, pero los enlaces no realizan el comportamiento adecuado si se encuentran en el interior de un elemento que tenga aplicado el filtro AlphaImageLoader.

Para solucionar este último problema podemos recurrir al siguiente código CSS:

#logo a { 
	position: relative; 
	z-index: 1; 
}

Cuando se aplica un filtro el elemento tiene una posición estática y esto presenta problemas en los enlaces, por ello se fuerza por medio de CSS a que los enlaces dispongan de una posición relativa y con z-index en una capa inferior.

Solo para Internet Explorer

Otros navegadores modernos (Firefox, Opera, Safari, Chrome) soportan perfectamente el formato PNG y su grado de transparencia, por tanto sería bueno pensar en ofrecer esta técnica únicamente cuando el usuario se encuentra navegando con Internet Explorer. Para lograrlo podemos recurrir a los comentarios condicionales:

<!--[if lt IE 7]><link rel="stylesheet" href="ie6.css" mce_href="ie6.css" type="text/css" media="screen" /><![endif]-->

Mediante este comentario condicional ubicado en el head podemos indicar que solo aquellos navegadores que sean inferiores al Internet Explorer 7 [if lt IE 7] se enlace el fichero de esitlo “ie6.css” que a su vez contiene los códigos comentados para esta técnica.

De esta forma:

  • No obligamos a que se interprete código propietario (no estándar) como el filtro AlphaImageLoader por parte de otro navegador que no sea IE6 o inferior.
  • El sitio Web será estándar y válido según el W3C – Validator.
  • Reducimos el código CSS innecesario para otros navegadores y con ello logramos una mejor optimización.

Optimizar CSS, 12 consejos y 4 herramientas

post - - 3 replies - share

Expongo a continuación algunos consejos para la optimización de nuestras hojas de estilos CSS.

1. Selectores ID, Classes, Tags

#logo { margin-top: 1em; }
.ico { margin-left: 1em; }
a { text-decoration:none; }

Los Selectores ID es la forma más eficiente y rápida que hay en CSS para otorgar estilo. Por contra no podemos sobrecargar nuestro CSS usándolos para cada elemento que requiera un mínimo de diseño. En este punto tenemos que pensar de forma creativa y global para usar los selectores de clase, las propias etiquetas y los principios de la cascada.

Read more

No me gustan las “CSS Expressions”

post - - leave a reply - share

Las CSS Expressions son usadas para establecer propiedades dinámicas. Fue un invento más de Microsoft para Internet Explorer.

Los problemas que veo en las “CSS Expressions” son:

  • No es un estándar web, con todo lo que ello implica…
  • Se diluye la abstracción: contenido > estilo > comportamiento.
  • A excepción de IE todos los navegadores tendrán que tragar estos bytes de más sin tener soporte para ello.
  • Y lo peor de todo, las “CSS Expressions” se procesan muchísimas veces, no solo cuando se carga el CSS sino también cuando realizamos múltiples tareas como por ejemplo desplazar el scrooll vertical. Esto genera una cantidad de proceso enorme para el navegador y una deficiencia en la optimización del sitio web.

En la mayoría de los casos se usan las “CSS Expressions” para solucionar problemas de incompatibilidad (cross-browsing) o carencia/deficiencia de soporte para los estándares web por parte del software de Microsoft. Osea que al final para solucionar un problema de este navegador ponemos un parche que afecta al resto de navegadores e incluso le puede sentar indigesto al propio Internet Explorer.

En fin, el parche puede infectar más la herida 🙁

Variables en CSS; Implementaciones

post - - 3 replies - share

Es seguro que en algún momento todos los que trabajamos con CSS echamos en falta las conocidas variables, elementos esenciales en cualquier lenguaje de programación. Para solventarlo se me ocurren varias formas:

  • Evitar las redundancias.
  • Usar mejor la descendencia en los selectores.
  • Definir las variables como meros comentarios.
  • Usar variables de PHP u otro lenguaje dinámico de servidor.
  • Decantarnos por CSS 3.

Es probable que existan más formas ¿conoces alguna?, bueno… de momento voy a intentar explicar las mencionadas.

Read more

CleanCSS – Limpiar y optimizar nuestras hojas de estilo

link - - 3 replies - share
cleancss

Con la ayuda de herramientas como CleanCSS (basado en CSSTidy) podemos optimizar y reducir notablemente el peso de nuestras hojas de estilo.

Hace tiempo hablábamos en este blog sobre como optimizar CSS y hace uso de formas abreviadas. Mediante esta herramienta online podemos probar nuestros ficheros CSS y descubrir mejores formas a la hora de escribir reglas de estilo. CleanCSS nos indica errores y propone alternativas más eficientes, hasta un punto en que ya ni nos hará falta recurrir a este tipo herramientas puesto que acabaremos aprendiendo mejores formas.

Por cierto, existen muchas herramientas similares, esta la descubrí hace ya mucho mucho tiempo y sigue siendo la que mas me convence, ¿conocéis otras aplicaciones parecidas?.

Button y img, botón de formulario con icono

post - - 7 replies - share

Para crear un botón en HTML contamos con dos etiquetas:

Ambas son válidas. La segunda de ellas es menos usada (con diferencia) aunque esconde tras de si muchas ventajas al poder anidar en su interior contenido.

Botón tradicional con input

<input type="submit" value="Eliminar" />

Botón + icono con button

<button type="submit"><img src="delete.gif" alt="x" />Eliminar</button>

Nota: En este caso se ha usado un GIF con el mismo color de fondo que el botón. Cuidado con el formato PNG y sus problemas en Internet Explorer.

Read more