Este es un Css Reset interesante para html5, aún nose si es tan útil como uno piensa, por que cabe recordar que (por mala suerte la mayoria de los usuarios de internet aún usan Internet Explorer 6, 7 u 8) el Navegador más usado por ahora sigue siendo Internet Explorer, el único que se salva es la versión 9 de este navegador, así que es algo complicado usar la mayoría de las etiquetas de html5. Pero bueno nunca esta de más ver que novedades existe entre los famosos resets de CSS.

/************************************************************************
html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark  html5doctor.com/html-5-reset-stylesheet/
************************************************************************/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

article, aside, figure, footer, header,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */

/************************************************************************
miscellaneous fixes
************************************************************************/

/* IE7 image resizing fix */
.ie7 img { -ms-interpolation-mode: bicubic; }

/* font normalization across browsers */
body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; }
table { font-size:inherit; font:100%; }
select, input, textarea { font:99% sans-serif; }

/* Webkit font smoothing */
html { -webkit-font-smoothing: antialiased; }

/* Formatting quoted text */
pre {
padding: 15px;
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}

/* Clickable inputs */
label, input[type=button], input[type=submit], button { cursor: pointer; }

/* align checkboxes, radios, text inputs with their label */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* Force scrollbar */
html { overflow-y: scroll; }

Escribir CSS es un trabajo relativamente sencillo y divertido, aunque muchas veces cause dolores de cabeza (gracias al IE) porque tenemos que hacer que la web se vea correctamente en todos los navegadores posibles (por lo general FF, Chrome, Safari e IE), entonces deberíamos hacerlo con las normas correctas y con una estructura sencilla y amigable para nosotros y para el navegador, a continuación pondré algunos tips de como lograr esto:

Agregar un Reset de elementos

Siempre empezar con un Reset, para los maquetadores esto es como OBLIGATORIO, sirve para que todos los navegadores muestren de la misma forma los elementos html:

/*El más sencillo*/
*{margin:0;padding:0;}

Ahora si quieren algo más completo yo les recomiendo el reset que hizo Eric Meyer es un reset muy completo, ligero y discutido, en su nueva version incluyó etiquetas de HTML5:

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

Ahora lo que yo hago y recomendio, es pegar este mismo código en nuestro archivo .css (style.css) y no tener otro archivo .css para cargar el reset (reset.css).

Procurar tener todo en una linea

Si bien se ve y se entiende mejor el código puesto en varias lineas no es recomendado, porque al final el archivo llega a pesar más de lo necesario, así que lo recomendable es escribir todo en una linea y si quieren ser mas correctos, ponerlo en orden alfabético no esta demás (al principio cuesta un poco pero luego con la practica esto se hace sencillo)

/*Escritura normal*/
h2 {
   font-size:18px;
   color: #333333;
   background: #cccccc;
}
.titulo {
   font-size:14px;
   line-height:20px;
   color:blue;
}

/*Escritura mejorada*/
h2{font-size:18px;color:#333;background:#ccc; }
.titulo{font-size:14px;line-height:20px;color:blue;}

Acortar el la nomenclatura (o escritura)

Sabemos que el CSS tiene propiedades para todos los elementos html pero no es necesario escribir todas las propiedades del CSS para un elemento HTML y si esto es necesario, podemos usar la forma corta de las propiedades del CSS:

/*Escritura Normal*/
.bg {
        background-color: blue;
        background-image: url(images/blue-bg.jpg);
        background-position: 100% 0;
        background-repeat: no-repeat;
}

/*Escritura Mejorada*/
.bg{background: blue url(images/blue-bg.jpg) 100% 0 no-repeat;}

Usar “px” o “em” en el tamaño de texto

Antes se recomendaba usar la medida de “em” por que los navegadores lo usaban para interpretar el texto y permitia que la web se vea correctamente, ahora esto cambio ya que los navegadores modernos usan px por el motivo del ZOOM del navegador.

Seccionar el css con Comentarios

Esto es muy necesario ya que en la mayoría de los proyectos el código css se hace bastante largo o debería ser así ya que también es recomendado tener solo un archivo css y no varios, volviendo a lo de seccionar podemos poner un ejemplo típico:

/*Reset*/
Aqui el código que resetea el los elementos

/*Generales*/
Aqui los elementos generales como el color de los link o el line-height.

/*Cabecera*/
todo el código del header

/*Footer*/
Todos el código del pie de la pagina

Tener una consistencia en todos los proyectos

Más que un tip esto debería ser un obligación como maquetadores siempre tenemos que manejar la misma estructura básica en todos los proyectos que hacemos, manteniendo un orden lógico y sencillo de entender, esto nos servirá para ubicar y familiarisarnos nuevamente con nuestro código si lo vemos después de un mes o despues de un año.

y Por último y opcional es usar herramientas que nos permitan minimizar el código una vez terminado como: Minify CSS o YUI Compressor.

Me quedo impresionado con la capacidad de comportamiento y efectos que se puede lograr con el uso de CSS.

No hablare de bordes redondeados ni de efectos de gradientes que se aplica muy bien con el estandar CSS3. Sino hablare de una especie de jerarquia que se maneja en hojas de estilos.

.eps > .esp

Esto indica una jerarquia. Traducido mas o menos seria: Para los elementos de clase esp dentro del contenedores o etiquetas de clase eps hacer.

Básicamente es una expresion de implicación al estilo Si … entonces.

Esta forma nos permite discriminar efectos en nuestro diseño. Por ejemplo si tenemos dos contenedores uno con el id header y el otro con el id body, y dentro de ellos, elementos span, que son dispuestos a manera de botones en header y en body a manera de mensajes. Tomemos este escenario, lo que tal vez hicieramos seria declarar por cada elemento span una clase. Digamos si estamos en header la clase .buttons, definidos por cada elemento y lo mismo en los elementos span del contenedor body. Un error sería colocar en la hoja de estilo una expresión general del elemento span. El error seria que lo que vayamos a poner afecte a los dos elementos span, tanto para el contenedor header como para el body.

Por lo tanto una solución sin utilizar una clase por cada elemento (que dicho de paso en una solución también) es usar el operador > de esta manera:

#header > span {}
#body > span {}

Esto permitira establecer a cada elemento span su reglas necesarias para cada contenedor, sin el uso de etiquetas class para cada elemento.

Otra de las posibilidades de esta expresion es en el uso de menus que tanto nos gusta.

Por ejemplo, tenemos un listado de link

<div id="nav">
	<ul>
		<li>Home</li>
		<li>Categorias
			<ul>
				<li>Casas</li>
				<li>Terrenos</li>
			</ul>
			</li>
		<li>contacto</li>
	</ul>
</div>
 

Esto mas o menos lo pondriamos en nuestro html

El documento de la hoja de cálculos sería:

#nav ul li > ul { display: hidden;}

Esto indicara que todos los elementos ul dentro de un elemento li no se muestren. Como se puede apreciar es muy útil.

Por último deseo mostrarles una aplicación de este operador que me dejo impresionado. Sobre la definicion de div con alineacion absoluta.

Normalmente se defiene un div con posicion absoluta con respecto a la pantalla donde se mostrará la pagina. Esta tecnica tiene muchos inconveniestes, pues sabemos que hay distitos tipos de monitores que pueden tener distinta resolución. dificultandonos su uso. Sin embargo si podemos definir un elemento con una posición conocida por ejemplo un div con id header y dentro de el un logo en una posición especial. Se podria usar la siguente aplicación

#header > #logo {
z-index:999;
width:210px;
position:absolute;
bottom:15px;
height:25px;
left:750px;
}
 

De esta manera tendriamos un div flotante con id logo, de manera que podamos mover a nuestra conveniencia su pocisión (usese las reglas de left o top para ello)

Nos vemos en otra oportunidad.

Siempre es interesante analizar las páginas web de los grandes en la RED como yo lo hice con Youtube, y me di cuenta de algo importante, que usan los interesantes CSS Sprites!.

Los Sprites con un conjunto de imagenes contenidas en una sola, con la finalidad de ahorrar el tiempo de carga de una web haciendo que exista solo una consulta de carga para cargar una imagen y no generar varias consultas cargando varias imagenes, en el caso de Youtube el Sprite es este:

Como ven carga todas las imagenes en un solo PNG y asi hace menos consultas al servidor y hace que la página cargue más rápido.

Ahora bien los “CSS Sprites” son las llamadas en CSS a cada imagen, y esto se lo hace con puro BACKGROUNDS, más especificamente se los hace con Background-Position, y generalmente se veran valores negativos o positivos según este ubicada la imagen en las coordenadas X y Y.

Ej., en Youtube para mostrar el Logo lo hace de la siguiente forma:

HTML

<div id="masthead-container">
      <div dir="ltr" class="" id="masthead">
          <a title="Página principal de YouTube" href="/">
              <img alt="Página principal de YouTube" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" class="master-sprite" id="logo">
          </a>
      </div>
</div>

CSS:

#logo {
    background-position: 0 -641px;
    display: block;
    float: left;
    height: 40px;
    margin: 0 10px 0 0;
    width: 110px;
}
www-co...mpq.css (línea 1)
.master-sprite, img.master-sprite, .master-sprite img {
    background-attachment: scroll;
    background-color: transparent;
    background-image: url("//s.ytimg.com/yt/img/master-vflosdRMg.png");
    background-repeat: repeat-x;
    border: 0 none;
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
}

Como ven usa el “background-position: 0 -641px;” para acomodar la imagen Sprite que posteriormente la llama.

Realmente es un metodo muy bueno, que hasta yo mismo lo estoy usando en el nuevo Theme para este sitio que ya lo pondre Online, hacerlo no es tan complicao una ves que esta ubicado con la posicion de las imagenes, ahora también en Internet existen herramientas online para crear estos “CSS Spriter” y hacernos la vida mas sencilla como esta:

Spritebox, que tiene una interface bastante sencilla y unas buenas herramientas para lograr coordenajdas justas y faciles.

Ya pronto verán el Nuevo diseño del Theme con esta técnica.

Este artículo lo leí en aNietos2k, y es muy interesante porque saca un listado de propiedades del CSS que son soportados por “absolutamente” todos los navegadores.. aunque la lista es muy corta aún, es bueno saber como conocimiento general.

• color
• direction
• font-family
• font-size
• font-style
• font-weight
• list-style-position
• table-layout
• text-indent
• word-wrap

.. y también exite otra lista que aún no es soportada por todos los browsers, y algunas veces nos van dolores de cabeza.

• background
• background-attachment
• background-color
• background-image
• background-repeat
• background-position
• border
• border-collapse
• border-color
• border-style
• border-width
• clear
• cursor
• display
• float
• font
• font-variant
• height
• left
• right
• bottom
• top
• letter-spacing
• line-height
• list-style
• list-style-image
• list-style-type
• margin
• overflow
• padding
• page-break-after
• page-break-before
• position
• text-align
• text-decoration
• text-transform
• vertical-align
• visibility
• white-space
• width
• word-spacing
• z-index

Link | Listado de propiedades CSS compatibles con todos los navegadores

CSS Refresh, es un complemento(plugin) de Firefox que permite actualizar el CSS sin necesidad de actualizar toda la página, esto ayuda a mejorar el tiempo de desarrollo de una página en especial si estamos trabajando directamente en el hosting de manera live, y ayuda bastante en servidores compartidos ya que se vuelven lentos.

Este complemento añade un nuevo item en el menú contextual del clic derecho “Refresh CSS”, mediante el cual su uso se hace sencillo y más sencillo aún porque añade un acceso directo desde el teclado con las teclas de CTRL-SHIFT-R, el autor lo recomienda especialmente para los desarrolladores de ajax.

Link | CSS Refresh

Ivan Vanderbyl,  hizo una excelente barra de progreso con javascript y CSS, según lo leido para editar el aspecto no necesitas tocar ninguna imagen ya que se trabaja con imágenes transparentes, así que cualquier cambio que necesites hacer lo haras simplemente desde el CSS, esta barra de progreso se ve muy bien y vendría bien en cualquier proyecto que estén realizando que de a esperar un poco al usuario.

Link y Demo | Pure CSS Progress Bar

Descarga | via github

Con las nuevas propiedades del CSS3, podemos hacer cosas que antes solo las hacíamos con javascript, en este caso veremos la propiedad de Resize.

La única función de esta propiedad es cambiar el tamaño de las cajas de texto como el “Textarea”, su uso es bastante sencillo.

textarea {
     width: 300px;
     height: 90px;
     border: 1px solid #fff;
     resize: both; /* Esto hace que podamos cambiar de tamaño*/
     overflow: auto;
}

Los valores que acepta esta propiedad son:

none | both | horizontal | vertical | inherit

textarea