Sebastian Durandeu Blog

  • Visitantes

Archive for the ‘CSS’ Category

Algunos Tips de CSS

Posted by sebastiandurandeu on March 24, 2012

Definitivamente el contenido de este blog es demasiado variado. Marketing –> NLTK –> CSS ?? Y bueno, probablemente tenga que postear mas seguido!

Lo que sigue a continuación son una serie de tips que junté últimamente para utilizar hojas de estilos (CSS). Muchos no son la gran ciencia, pero a mi me suelen ser útiles y los quería compartir. Algunas cosas de las que están acá las aprendí de un libro llamado Bulletproof Web Design de Dan Cederholm (muy recomendable!) y otros los aprendí haciendo el trabajo práctico final de mi carrera.

Crear una Stylesheet desde Cero

Al comenzar una nueva app web desde cero me apareció la pregunta, y ahora como arranco con el CSS del sitio? Y buscando, encontré que una buena practica es usar un set de estilos para resetear los estilos default del browser a un valor conocido. Para esto se pueden bajar código de ‘Reset CSS’ de varios sitios, en particular yo utilicé http://meyerweb.com/eric/tools/css/reset/ de Eric Mayer. Uno de los objetivos de esto es evitar inconsistencias entre distintos browsers, haciendo nuestro sitio cross-browser compatible.

Self-Clearing Floats

Si duda el float puede ser de gran ayuda al momento de armar el layout de un sitio (acá se explica muy bien que es y como funciona). Sin embargo, manejar bien los floats puede ser difícil, especialmente utilizar bien el clear para que un elemento se ubique siempre debajo de una serie de elementos flotados. Un truco, entre varios que existen, que leí en el libro que comenté arriba, es usar self-clearing floats con la propiedad overflow.

Siguiendo el código de abajo, la idea es que al tener 2 elementos flotados en su interior, el #contenedor no va a tener tamaño propio y el #contenido-separado se va a posicionar por la derecha de los #contenido-flotado.

Markup:

<div id=”contenedor”>
    <div id=”elemento-flotado1”></div>
    <div id=”elemento-flotado2”></div>
</div>
<div id=”contenido-separado”>Esto quiero que se siempre se muestre abajo de los elementos flotados</div>

CSS:

#contenedor {
    overflow: hidden;
}
#elemento-flotado1 {
    float: left;
    background-color: Blue;
}
#elemento-flotado2 {
    float: left;
    background-color: Green;
}

Sin ‘overflow:hidden’:

image

Con ‘overflow:hidden’:

image

Eso sí, asegurarse que el contenedor no tenga contenido que sobresalga (en overflow) que querramos mostrar!

Centrado Horizontal de Elementos

Este es un tip que uso muy muy seguido para centrar elementos horizontalmente: definir los márgenes izquierdo y derecho de un elemento en auto, de la siguiente forma:

#elemento {
    margin-left: auto;   
    margin-right: auto;
}

Claramente si lo que quieren es alinear texto dentro de un elemento pueden usar text-align: center, que es bastante mas cómodo. Lo mismo si tienen que centrar una imagen pueden asignarla como background de un elemento y usar la propiedad background-position.

Centrado Vertical de Texto

Otro tip simple que puede ayudar algunas veces, es usar la propiedad line-height para centrar texto verticalmente. La idea es definir el valor de line-height exactamente al mismo tamaño del elemento contenedor de la siguiente forma.

#elemento {
    height: 30px;   
    line-height: 30px;
}

Este tip no sirve si el texto ocupa mas de una línea.

Como Nombrar los Elementos en CSS: Structural Naming Conventions

Cuando no saben que nombre usar para identificar las clases (.miClase) o los elementos del sitio (#miElemento), prueben esta convención: nombrar las cosas por su función y no por su ubicación en el sitio o como se ven. El ejemplo típico es que en vez de usar #top-div, #left-col y #right-col, usar #header, #mainContent, #secondaryContent.

Si en un futuro queremos cambiar la posición de los elementos o como estos se ven, no necesitamos modificar los nombres de clases o identificadores de elementos. Al mismo tiempo, estamos aumentando la separación entre el markup (código HTML) y la presentación.

Este no es un tema nuevo y hay muchos artículos al respecto, pero acá dejo algunos:

Y si quieren ver como los sitios mas populares llaman a los elementos principales del markup, prueben: http://www.stuffandnonsense.co.uk/archives/naming_conventions_table.html (Andy Clarke).

Resumir Valores para Top-Bottom y Left-Right

Esto es muy simple, pero lo aprendí hace poco! Al definir los valores de margin o padding, podemos definir los valores top y bottom juntos, así como los de left y right. Por ejemplo el elemento siguiente va a tener un valor 0 de margen superior y inferior, y un valor de 15px para los márgenes de izquierda y derecha.

#elemento {
    margin: 0 15px;
    padding: 10px 5px;
}

Uso de Definition Lists <dl>, <dt> y <dd>

Siempre es importante darle significado al markup que escribimos, utilizando los tags que mas representen la “función o sentido” del elemento. Por ejemplo, si definimos un título, usar un elemento <h1>, si definimos la descripción de un input, utilizar un <label>. Pero dentro de los elementos disponibles, uno que no se suele usar mucho son las definition lists. Por ejemplo, si tenemos una lista de productos con su descripción e imagen, podríamos armar cada producto dentro de un <dl>, con el nombre del producto dentro de un <dt> y la imagen y la descripción en un <dd> cada uno.

<dl>
    <dt>Mi Producto</dt>    <dd>La descripción del producto</dd>
    <dd><img src="…" alt="imagen de mi producto"></dd>
</dl>

Otro uso propuesto por W3C es para mostrar diálogos entre actores:

Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.

Propiedad CSS Text-Transform

Esta es una propiedad que nunca había usado, pero puede llegar a ser útil. Text-transform permite formatear texto en mayúscula (uppercase), minúscula (lowercase) o con la primera letra mayúscula y el resto minúscula (capitalize) desde la hoja de estilos. Lo interesante de esta propiedad es que permite ajustar el formato del texto desde la hoja de estilos, sin necesidad de modificar el markup.

.texto-en-mayuscula {
    text-transform: uppercase;
}

Arial vs. Helvetica

Por último un artículo que a mi me pareció bastante interesante sobre la historia de una a las fuentes mas famosas de todos los tiempos – Arial – y su relación con Helvetica, Apple y Microsoft: http://www.ms-studio.com/articles.html

Posted in CSS, Programming, Web | Leave a Comment »