Cada vez que tengo que empezar un CSS nuevo me pasa lo mismo, me tengo que poner a reciclar partes de los anteriores evitando los selectores únicos de cada uno, es un verdadero coñazo. Hoy me he puesto las pilas y juntando algunas piezas de tutoriales y de artículos que he ido recopilando me he creado un CSS inicial con los arreglos y selectores básicos pre-configurados.
Así es como ha quedado finalmente:
Theme Name: CSS inicial
Theme URI: http://rudeworks.com/blog/css-inicial/
Author: RUDE
Author URI: http://rudeworks.com
Version: 1.0
Description: CSS básico con arreglos y selectores pre-configurados.
*/
/*** HACKS PARA IE ***/
/* Si tienes la necesidad de aplicar algún hack para IE6 utiliza este selector: */
*html {
}
/* Si necesitas aplicarlo a IE7 utiliza este:*/
*:first-child+html {
}
/*** NEUTRALIZANDO ESTILOS:
elementos que queremos limpiar completamente: ***/
* {
margin: 0;
padding: 0;
border: none;
}
html {
font: 62.5% "Lucida Grande", Lucida, Verdana, sans-serif;
text-shadow: #000 0px 0px 0px;/*Elimina el efecto bold en Safari*/
}
/*** NEUTRALIZANDO ESTILOS:
elementos con margen vertical: ***/
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
font-weight: normal;
margin: 0 0 1em 0;
}
/*** Algunos ajustes basicos: ***/
sup {
position: relative;
bottom: 0.3em;
vertical-align: baseline;
}
sub {
position: relative;
bottom: -0.2em;
vertical-align: baseline;
}
li, dd, blockquote {
margin-left: 1em;
}
/*** LINKS:
recuerda utilizar siempre la regla del LoVe-HAte ***/
a, a:link, a:visited, a:hover, a:active {
/*
Si quisieramos eliminar la línea de puntos que aparece al pulsar un enlace, aplicaríamos la siguiente propiedad:
outline: 0;
Sin embargo no se recomienda, por temas de accesibilidad para navegación con teclado (lo cual implica temas legales, un tema peliagudo).
*/
text-decoration: none;
}
a img {
border: none;
text-decoration: none;
}
img {
border: none;
text-decoration: none;
/*Si añades un background aparecerá como fondo de la imagen, útil para imágenes de carga*/
}
/*** FORMULARIOS: ***/
label, button {
cursor:pointer;
}
input, select, textarea {
font-size: 100%;
}
input:focus, select:focus, textarea:focus {
background-color: #FFF;
}
fieldset {
border: none;
}
/*** Algunas clases útiles: ***/
.clear {
clear: both;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.helvetica {
font-family: Arial, Helvetica, Geneva, sans-serif;
}
Podéis descargar la versión del CSS inicial que hay sobre estas líneas o bien, si sois felices usuarios de CSSEdit (como yo), podéis bajar esta versión especial, con todo en carpetitas, más recogidito y liviano.
Actualización (29/05/2007): He dejado la opción de eliminar el outline de los links como optativa, con comentarios adjuntos para los que no conozcan su funcionamiento.
Actualización (23/09/2007): He añadido unos cuantos selectores nuevos, retocado comentarios e incluido una base html, más información en el nuevo post del CSS inicial 2.0.
22/07 - 0:47
La pena de:
*/
/*** HACKS PARA IE ***/
/* Si tienes la necesidad de aplicar algún hack para IE6 utiliza este selector: */
*html {
}
/* Si necesitas aplicarlo a IE7 utiliza este:*/
*:first-child+html {
}
es que no validan. Actualmente es más recomendable utilizar hojas de estilo diferentes para cada navegador (comentarios condicionales).
Podeis ver más información aquí: http://www.quirksmode.org/css/condcom.html
22/07 - 0:54
Gracias por la aportación estorde ;-) yo hace un par de proyectos que empecé a aplicar condicionales para navegadores “pobres”, pero aun tengo el tick del archivo único… jejeje
28/07 - 12:11
Otro punto importante junto a la validación es la línea “outline = 0;”, que no hay que utilizar prácticamente nunca.
Esas líneas de puntos están ahí para localizarse en la página saltando entre enlaces, usando el tabulador, en caso de no tener ratón o de tener una discapacidad que impide al usuario su utilización.
El uso de esta regla en los enlaces dificulta la accesibilidad a esos usuarios, y podría llevar a acciones legales (y a probable sanción) contra el diseñador o dueño del website por discriminación.
Aunque comprendo que el efecto estético de este borde es bastante negativo para muchos diseños, no es aconsejable incluirlo en una plantilla de “punto de partida” sin avisar de sus posibles consecuencias, tanto éticas como legales.
He creído importante decirlo ya que muchos no conocen la importancia de estos outlines. Aún así, el post es muy útil para los que seguimos codeando a mano, y con tu permiso, pienso usarlo :D
28/07 - 14:18
Vaya, pues te agradezco en el alma que me avises de estas cuestiones MonoSimio. Tan pronto como pueda actualizo el post ;-)
31/07 - 10:05
Esturde, el hack de ie6 valida perfectamente si separamos * de html, o sea: * html {}
y funciona exactamente igual.
Para el caso de ie7 yo uso otro sistema que me valida. Puedes ver el post aqui: http://www.albertofortes.com/blog/?p=397
13/07 - 15:48
Que tal Rude…
Ya que hablas sobre CSS Iniciales te invito a revisar un post que escribí al respecto: Escoge tu CSS Inicial: Eric Meyer vs. Faruk Ateş
Allí “comparo” otros dos CSS Iniciales y vinculo otros más. Saludos!
13/07 - 15:58
Gracias Gabriel, muy buen artículo! ;-)
13/07 - 21:43
Casi como lo ago yo, me falto el bug de safari
bastante buen “truco” saludos.
24/07 - 19:00
Estaba justamente preparando una CSS de este estilo (valga la redundancia) para mis trabajos.
Con tu permiso, usaré la tuya a partir de ahora. Gracias
25/07 - 11:34
Me alegro de que le sirva señor Richard ;-)