Usar PHP para comprimir ficheros CSS

0 COMENTARIOS -  Publicado hace 9 meses -  Clasificado en: , ,

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:

 

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

0 COMENTARIOS -  Publicado hace 10 meses -  Clasificado en: ,

En la entrada anterior se vio cómo hacer uso de las fuentes que lleva incorporado GD. Pero también podemos utilizar otras fuentes TrueType. En este ejemplo se utiliza la fuente District:

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:

 

Styleneat: Organiza tus CSS

1 COMENTARIO -  Publicado hace 12 meses -  Clasificado en: ,

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:

 

Style Switcher con jQuery

1 COMENTARIO -  Publicado hace 12 meses -  Clasificado en: , , , ,

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:

 

CSS Poligonal para crear tooltips con punteros

1 COMENTARIO -  Publicado hace 12 meses -  Clasificado en: ,

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.

Tooltip sin imagenes ejemplo

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:

Tooltip

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:

 

Cross-Browser Inline Blocks

2 COMENTARIOS -  Publicado hace 13 meses -  Clasificado en: ,

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:

 

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

0 COMENTARIOS -  Publicado hace 13 meses -  Clasificado en: , ,

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.

CSS Menus

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

CSS Menus » »

Algunas entradas relacionadas:

 
Páginas: < Anterior 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Siguiente >