Historial de un navegante

by Angel

Posts Tagged ‘css

CSS Mini Reset

leave a comment »

Enlace recogido del twitter de anieto2k.

What is CSS Reset?

CSS Reset usually aims to reduce browser inconsistencies by evening up the CSS default settings in all browsers.

The most used CSS Rests are

Last week I spotted “CSS Reset – a simpler option” by Russ Weakley.

Russ made few smart observations: we don’t always need complete CSS reset because CSS Reset file can become very large and we often forget to set all the styles.

Also in my opinion we don’t always use all the CSS and HTML tags, when was the last time when you used “address” tag?

In many cases the complete CSS Reset makes perfect sense like in the case of some CSS Framework.

I used Eric Meyer Reset for my CSS Framework (Emastic and The Golden Grid).

In other my project complete CSS reset doesn’t make sense (MaloFormy1 line CSS Framework).

My point is different projects(sites) can be approached differently, and not always we need complete CSS reset.

I wanted to make Mini CSS Reset who will focus on the main CSS features like Divs , Tables and Forms who are also the most used CSS(HTML) elements.

And here is the result:

/* CSS Mini Reset */

html, body, div, form, fieldset, legend, label
{
 margin: 0;
 padding: 0; 
}

table
{
 border-collapse: collapse;
 border-spacing: 0;
}

th, td
{
 text-align: left;
 vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

img { border: 0; }

You can compare:

You can use CSS Mini Reset when you actually don’t want to reset everything just the fundamental HTML elements.

Fork – Download CSS Mini Reset on github

Enlace | vcarrer

Anuncios

Written by Angel Flores

20 mayo 2010 at 22:42

Publicado en css, General

Tagged with ,

Cómo usar variables de PHP en tus estilos CSS

leave a comment »

Leído en elwebmaster:

Cuando se le pregunta a los diseñadores qué nuevas funcionalidades quisieran añadir a las futuras versiones de CSS, siempre surge la idea de "variables".

Al día de hoy esto no se considera una práctica ni buena ni mala, aunque muchos optan por usar variables de php en sus estilos css. El principal motivo es el grado de abstracción que nos permite trabajar de esta forma. ¿Estás dispuesto a conocer cómo implementar esta técnica?

Style.php

En lugar de utilizar la extensión de archivo .css, utiliza .php

Content-type

Al comienzo de tu nuevo archivo style.php setea el tipo de contenido de nuevo como CSS:

  1. header("Content-type: text/css; charset: UTF-8");
  2. ?>

Setea las variables

Ahora puedes setear variables para lo que quieras, por ejemplo:

  1. header("Content-type: text/css; charset: UTF-8");
  2. $colorMarca = "#990000";
  3. $colorLinks = "#555555";
  4. $urlBase = "http://cdn.blahblah.net";
  5. ?>

Usando las variables

Debajo del código PHP, puedes comenzar con el CSS común y corriente, sólo que ahora también puedes usar PHP para imprimir el contenido de esas variables.

  1. #header {
  2. background: url("/images/header-bg.png") no-repeat;
  3. }
  4. a {
  5. color: ;
  6. }
  7. ul#main-nav li a {
  8. color: ;
  9. }

Ir más allá/Otras ideas

  • Además de esto, podrías también comprimir el CSS con PHP.
  • En teoría, podrías tomar el user agent y tratar de cargar estilos específicos para cada navegador.
  • Obtener la fecha/hora y cambiar el diseño de tu sitio según las estaciones o los distintos momentos del día.
  • Genera un número random y utilízalo para setear una imagen de fondo al azar en tu cabecera.

¿No funciona?

Si no funciona puede que la solución sea dejar el nombre del archivo como style.css, y utilizar .htaccess para que sea analizado como PHP. Simplemente asegúrate de incluir este código en el archivo .htaccess (sólo para servidores Apache) en el mismo nivel del directorio en que se encuentra el archivo CSS. Luego, sólo utiliza PHP dentro, de la misma forma en que lo harían con cualquier otro archivo PHP.

  1. SetHandler php5-script

Enlaces | CSS-Tricks | elwebmaster

Written by Angel Flores

6 enero 2010 at 10:59

Publicado en css, diseño web

Tagged with , ,

Es compatible con CSS el navegador que usas

with one comment

Visita este enlace para saber si el navegador que usas normalmente es compatible con CSS.

http://www.css3.info/selectors-test/test.html

Enlace | CSS3

Written by Angel Flores

9 diciembre 2009 at 22:18

Publicado en css, navegadores

Tagged with , ,

Complemento FireFox: CSS Usage 0.2.1

with one comment

CSS Coverage es un complemento para Firebug que permite que puedas buscar en multiples páginas de tu sitio web para ver que reglas de CSS estás usando en el sitio web.

Este complemento necesita que tengas instalado Firebug.

¿Cómo funciona?
– Abre una página del sitio web que quieras comprobar y pulsa el botón “Scan” en la pestaña de “CSS Coverage” de Firebug.
– En el caso de que uses Ajax o DHTML, puedes abrir muchos divs/popups/ como quieras y pulsa el botón “Scan” de nuevo.

– Visitar otras páginas del sitio web y pulsa “Scan” de nuevo.

Cada vez que pulses “Scan”, los ficheros CSS son incluidos en la página actual.

Written by Angel Flores

5 diciembre 2009 at 11:17