Usar PHP para comprimir ficheros CSS

Existen varias técnicas que usan PHP para optimizar los ficheros CSS y reducir el número de peticiones HTTP en el caso de que dispongamos de varios. La siguiente técnica es una variación de la de Reinhold Weber. Los CSS son incluidos pero no son eliminados los espacios en blancos, lo que facilita la depuración y el acceso al contenido mediante herramientas como Firebug.

<?php
if(extension_loaded('zlib')){
   ob_start('ob_gzhandler');
}
header ("content-type: text/css; charset: UTF-8");
header ("cache-control: must-revalidate");
$offset = 60 * 60;
$expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
header ($expire);
ob_start("compress");
function compress($buffer) {
   // remove comments 
  $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
  return $buffer;
}
 // list CSS files to be included
include('baseline.css');
include('styles.css');

if(extension_loaded('zlib')){
ob_end_flush();
}
?>

Vía ethanandjamie.com » »

Algunas entradas relacionadas:

• Reducir ficheros Javascript y CSS con PHP

Resaltar con CSS código HTML obsoleto o "deprecated"

En Neal Grosskopf he encontrado una muy útil e interesante técnica para detectar el uso de elementos vacíos y/o obsoletos en nuestro código HTML. Mediante CSS resaltaremos en diversos colores, dependiendo de la "gravedad", elementos obsoletos o vacíos.

/* ELEMENTOS OBSOLETOS */
applet, basefont, center, dir, font, isindex, menu, s, strike, u, marquee, blink, acronym /* html 5, use abbr */
{ border: 5px solid red !important; }
/* ATRIBUTOS OBSOLETOS */
br[clear], hr[noshade], *[color],
*[bordercolorlight], *[bordercolordark], *[bordercolor], *[background], *[bgcolor], *[nowrap],
body[alink], body[link], body[text], body[vlink],
body[bottommargin], body[leftmargin], body[rightmargin], body[topmargin], body[marginheight], body[marginwidth], 
ol[compact], ul[compact], *[start],
img[hspace], img[vspace]
*[align], *[valign],
*[height], *[width],
ul[type], ol[type], li[type],
basefont[size], font[size], hr[size]
{ border: 5px dotted red !important; }
/* ELEMENTOS PROPUESTOS COMO OBSOLETOS */
input[type="button"], input[type="reset"], input[type="submit"],
tt, embed,
big, small
{ border: 5px solid orange !important; }
/* ATRIBUTOS PROPUESTOS COMO OBSOLETOS */
a[target], table[cellpadding], table[cellspacing],
map[name], img[name], object[name], form[name], iframe[name], a[name],
table[border], img[border], object[border], input[border],
object[classid], object[codebase], embed[quality], embed[pluginspage]
{ border: 5px dotted orange !important; }
/* ELEMENTOS VACIOS */
div:empty, span:empty, li:empty, p:empty, td:empty, th:empty 
{ padding: 20px; border: 5px solid yellow !important; }
/* ATRIBUTOS VACIOS */
*[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"] 
{ border: 5px dotted yellow !important; 

Vía Neal Grosskopf » »

Algunas entradas relacionadas:

• Controlar el espaciado con CSS
• Cambiar el aspecto del cursor
• Centrar una caja horizontalmente
• Dos clases juntas con CSS
• Añadir un icono a los enlaces con CSS

Styleneat: Organiza tus CSS

Styleneat es una utilidad online que organiza y unifica los archivos CSS - selectores, sub-selectores y propiedades - en una estructura que facilita la definición de zonas en la página y ver cómo se relacionan unas con otras.
Nos permite escoger entre una serie de opciones para organizar nuestra CSS:

• Ordenar por selectores alfabéticamente
• Ordenar por propiedades alfabéticamente
• Única linea de formateo o múltiple linea de formateo
• Importar y organizar los archivos enlazados

El servicio puede ser utilizado de tres formas: pegando el texto CSS, subiendo el archivo CSS o proporcionando la URL del archivo CSS.

Styleneat » »

Vía Web Resources Depot » »

Algunas entradas relacionadas:

• CSS Spy: Editor CSS gratuito
• YAML: Herramienta para crear layouts basados en CSS visualmente
• Compresores de CSS
• Convertir estilos CSS a etiquetas en línea para Emails
• Logic CSS framework

Style Switcher con jQuery

En Kelvinluck.com me he encontrado con una muy sencilla forma de hacer un style swither (o intercambiador de estilos) aprovechando la potencia de selección de jQuery. El ejemplo también utiliza cookies con lo que el estilo elegido por el visitante es almacenado para mostrarselo por defecto la próxima vez que visita la página.

La aplicación del ejemplo es muy sencilla. Primero incluimos el fichero de jQuery.

<script type="text/javascript" src="jquery-1.2.6.js"></script>

Incluimos tanto el estilo que se mostrará la primera vez que el visitante acceda a la página como los estilos alternativos que deseemos.

<link rel="stylesheet" type="text/css" href="Estilos.css" title="Normal" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="EstiloRojo.css" title="Rojo" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="EstiloNegro.css" title="Negro" media="screen" />

Lo importante es asignarle un atributo "title" con un nombre que posteriormente utilizaremos para identificarlo.

Lo siguiente es crear los enlaces, que deben tener la clase "styleswitch" y el atributo "rel" con el nombre que aparece en el "title" del estilo al que vamos a pasar.

<ul>
<li><a href="Ejemplo.html" rel="Normal" class="styleswitch">Estilo 1</a></li>
<li><a href="Ejemplo.html" rel="Rojo" class="styleswitch">Estilo 2</a></li>
<li><a href="Ejemplo.html" rel="Negro" class="styleswitch">Estilo 3</a></li>
</ul>

Ahora tan sólo queda incluir el script de Kelvinluck.com, que se ayuda de un par de funciones de Quirksmode.

<script language="javascript">
/**
* Styleswitch stylesheet switcher built on jQuery
* Under an Attribution, Share Alike License
* By Kelvin Luck ( http://www.kelvinluck.com/ )
**/
(function($){
$(document).ready(function() {
	$('.styleswitch').click(function()
	{
		switchStylestyle(this.getAttribute("rel"));
		return false;
	});
	var c = readCookie('style');
	if (c) switchStylestyle(c);
});
function switchStylestyle(styleName) {
	$('link[@rel*=style][title]').each(function(i) 
	{
		this.disabled = true;
		if (this.getAttribute('title') == styleName) this.disabled = false;
	});
	createCookie('style', styleName, 365);
}
})(jQuery);
// cookie functions http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days){
	if (days)	{
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name){
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++)
	{
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
function eraseCookie(name){
	createCookie(name,"",-1);
}
// /cookie functions
</script>

Ya tenemos realizado un intercambiador de estilos que recordará nuestra elección cada vez que carguemos la página.

Ver Ejemplo en funcionamiento » »

Algunas entradas relacionadas:

• Autotab: plugin de jQuery para auto-tabulación y filtrado de campos
• Tablesorter: Ordenar tablas de una forma sencilla
• Cambiar propiedades CSS con JQuery
• Construyendo un verdadero triple click con jQuery
• Efecto "Nudging" con JQuery

CSS Poligonal para crear tooltips con punteros

En Group Filament han escrito un post en el que explican como usar CSS poligonal para crear tooltips que tengan punteros pero sin utilizar imágenes.

El concepto queda explicado con el siguiente CSS:

div {
     width:0;
     height:0;
     border-left: 20px solid transparent;
     border-right: 20px solid transparent;
     border-top: 30px solid red;
     border-bottom: 0;
}

Que da como resultado:

En el artículo original podemos encontrar un ejemplo completo.

Image-free CSS Tooltip Pointers - A Use for Polygonal CSS? » »

Vía Ajaxian » »

Algunas entradas relacionadas:

• Colección de CSS de reinicialización
• Cross-Browser Inline Blocks
• Tip: Resaltar el campo activo de un formulario
• Centrar una caja horizontalmente
• Global White Space Reset

Cross-Browser Inline Blocks

En el blog Mozilla Webdev nos muestran el CSS necesario para crear un conjunto de bloques en línea y que se visualice correctamente en todos los navegadores.

<style>
    li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
    }
</style>

Vía Ajaxian » »

Algunas entradas relacionadas:

• Dos clases juntas con CSS
• Colección de CSS de reinicialización
• Cómo hacer un menú horizontal con CSS
• Resaltar con CSS código HTML obsoleto o "deprecated"
• Cambiar el aspecto del cursor

CSS Menus: Galería de menús con opción de descarga

CSS Menus es un sitio web creado para mostrar cómo se puede utilizar CSS para crear elegantes menús a partir de listas. La web nos permite previsualizar un gran número de menús divididos en categorías y descargar aquellos que nos agraden. Los menús realizados mediante CSS tienen la ventaja de que que permiten a los motores de búsqueda navegar fácilmente; son fáciles de implementar, y funcionan incluso cuando el javascript está desactivado. CSS menús se divide en cuatro secciones: Menús de nivel único; Menús desplegables; Dropline Menús; Menús de Flyout.

NOTA: La opción de descarga se encuentra en la parte inferior de la página.

CSS Menus » »

Algunas entradas relacionadas:

• Top 71 CSS Menus Navigation Tabs
• Generador de menús CSS
• 8 menús web que no te puedes perder

CSS Drive's Image to Colors Palette Generator

Herramienta online ofrecida desde CSS Drive que obtiene una paleta de color a partir de los colores primarios de una imagen. Tan solo deberemos seleccionar una imagen desde nuestro ordenador o introducir la URL donde se encuentra una imagen y pulsar el boton "GET PALETTE". De inmediato obtendremos una paleta de color completa así como unas variaciones en tonalidad. El generador nos ofrece la posibilidad de exportar la paleta tanto a CSS como a un formato .aco para Photshop -muestras o swatches-.

CSS Drive's Image to Colors Palette Generator » »

Algunas entradas relacionadas:

• Notación corta de colores en CSS

CSS-Reset.com

Los CSS para "resetear" los estilos por defecto de los navegadores se han hecho muy populares de un tiempo a esta parte. En CSS-Reset.com han ido un paso más allá y nos ofrecen poder incluir estas hojas de estilo utilizando las ventajas que proporciona Google. CSS-reset.com, queestá alojado en Google App Engine lo que proporciona una excelente velocidad y estabilidad gracias a su CDN (red distribuida de contenidos), han decidido compartir las hojas de estilo más populares para resetearlos:

• Eric Meyer's Reset
• Yahoo User Interface Reset
• Ed Eliot's Reset

De este modo tenemos nos evitamos el alojamiento y el tráfico de estos CSS.Tan sólo hay que incluirlos llamando directamente al dominio de css.reset. Dependiendo del css que elijamos deberemos hacer una de éstas inclusiones:

<link href="http://www.css-reset.com/css/meyer.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="http://www.css-reset.com/css/yui.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="http://www.css-reset.com/css/ejeliot.css" media="screen, projection" rel="stylesheet" type="text/css" />

CSS-reset.com » »

Algunas entradas relacionadas:

• Google DOCTYPE

Iron Myers CSS Layouts

En ironmyers.com nos ofrecen una buena colección de layouts, multitud de diseños preestablecidos para todas nuestras necesidades. Los layouts estan divididos en tres grandes bloques: con ancho 100%, con ancho de 950px y con ancho de 750px. Estos diseños CSS son totalmente compatibles con los navegadores actuales, lo que significa que estos diseños CSS se verán y se comportarán de la misma en todos los navegadores de Internet: Internet Explorer 6, Internet Explorer 7, Firefox, Opera, Safari, etc.

Iron Myers CSS Layouts » »

Algunas entradas relacionadas:

• YUI CSS Grid Builder
• Free CSS Templates
• CSS Templates
• Un XHTML, varios layouts
• Ex-designz.net: Plantillas XHTML/CSS