23 de marzo de 2009
Como casi siempre ando refactorizando código, esta vez le toco a mis CSS. En las webs que me toca maqueta siempre utilizo una técnica de reemplazo de texto para las imágenes.
html:
<h1><a href="index">Nombre del cliente<span></span></a></h1>CSS:
h1{ position: relative;
width: 200px;
height: 150px;
/* font-size: 0.2em; */
/* text-align: -9999px; */
/* usa una de estas dos etiquetas si la imagen es más pequeña que el texto y no lo oculta */
}
h1 a span{
position: absolute;
width: 100%;
height: 100%;
display:block;
top: 0;
left: 0;
cursor: pointer;
}Para cada imagen del diseño de la web tocaría utiizar la misma técnica, por lo que se repite en exceso el código.
¿Cómo solucionar ésto para no escribir el mismo código repetidas veces?
Pués refactorizando en una clase, asi de sencillo:
CSS:
.replacetext{
position: absolute;
width: 100%;
height: 100%;
display:block;
top: 0;
left: 0;
}
a .replacetext{ cursor: pointer; }¿Cómo usarlo?
HTML:
<h1><a href="index">Nombre del cliente<span class="replacetext"></span></a></h1>Con ésto conseguimos un código sencillo pero super útil y reutilizable.