Consejos CSS en una linea

Otro post antiguo, recuperado gracias al RSS.

Traducción libre de un articulo publicado por CSS Globe con 8 soluciones muy sencillas a problemas que nos suelen dar muchos dolores de cabeza.

Las mejores soluciones son muchas veces las más simples. Una lista de 8 consejos (o trucos) con una sola propiedad CSS.

• Centrado vertical con line-height: Cuando tenemos un objeto contenedor con una altura fija, podemos usar la propiedad line-height para centrar verticalmente el contenido. Se puede comprobar en esta demo.

  line-height: 24px;

• Prevenir que el contenido sobredimensionado en objetos flotantes con un tamaño fijo rompa nuestra plantilla: Cuando el contenido (p.ej; una imagen panorámica) se coloca en un contenedor flotante con un tamaño fijo, es posible que descuadre nuestra plantilla. Para evitar esto, se puede usar este truco que ocultara parte del contenido pero mantendrá nuestra plantilla intacta.

  #main{overflow:hidden;}

• Evitar saltos de linea en los enlaces:

  a{white-space:nowrap;}

• Mostrar siempre el scroll vertical en Firefox: Firefox esconde por defecto el scroll vertical si la página no lo necesita. El “problema” es que si tienes páginas que precisen el scroll y otras que no, al pasar de unas a otras, nuestro diseño sufrirá un pequeño salto hacia la izquierda.

  html{overflow:-moz-scrollbars-vertical;}

• Central elementos horizontalmente: Con esta linea sera suficiente en todos los navegadores modernos para centrar horizontalmente cualquier elemento.

  margin:0 auto;

• Ocultar el scroll vertical de los textarea en IE: En IE se muestra por defecto el scroll vertical en los textarea. Para ocultarlos siempre que no sean necesarios con esta sola propiedad será suficiente.

  textarea{overflow:auto;}

• Forzar saltos de página al imprimir un documento: Con esta linea de código, podemos controla los sitios donde deseamos que haya un salto de página al imprimir nuestra (valga la redundancia) página.

  h2{page-break-before:always;}

• Ocultar los bordes de los enlaces activos:

  a:active, a:focus{outline:none;}

Espero que os sean de utilidad .

Letra capital con CSS

Desde hace algún tiempo quería poner algunas citas (o frases celebres) en el blog. Pero un post de unas dos lineas (a lo sumo tres) no quedaba visualmente demasiado bien, pero poniendo la primera letra como una letra capital, la cosa mejora mucho.

Tan solo son necesarias unas lineas de CSS y una class específica para las citas en cuestión:

1
2
3
4
5
6

.cita:first-letter {
    font-size: 3em;
    line-height: 0.9em;
    float: left;
    margin: .1em;
    }

.cita, selecciona los párrafos con class=”cita” que pueda haber en la página, esto junto con el first-letter lo que hace es seleccionar la primera letra de dichos párrafos para aplicar las propiedades CSS necesarias.

El resultado puedes verlo en los dos post anteriores .

Min-width, max-width, min-height y max-height también en IE

Estoy maquetando una web, una de las columnas tiene una imagen de fondo que siempre debe verse entera (aunque no tenga suficiente contenido), ¿como lo hago…?. Facil si la imagen mide 600px de alto agrego la propiedad min-height: 600px al elemento en cuestión y ya esta. ¿O no?

Pues si y no, ya que Internet Explorer 6 no reconoce ninguna de las propiedades que definen tanto la altura y anchura máxima y mínima, y por desgracia este navegador aun lo usa demasiada gente (e incluso algún cliente que puedas tener).

Hay 2 posibles soluciones, o bien hacemos uso de !important (solo para min-width/min-height) o de expresiones. A continuación las posibles soluciones para cada propiedad:

Min-width:

1
2
3
4
5
6

div {
     min-width: 600px;
     /* min-width para IE6 */
     width: auto !important;
     width: 600px;
     }

1
2
3
4
5

div {
     min-width: 600px;
     /* min-width para IE6 */
     width: expresion(document.body.clientWidth < 601? "600px": "auto");
     }

Max-width:

1
2
3
4
5

div {
     max-width: 600px;
     /* max-width para IE6 */
     width: expresion(document.body.clientWidth > 601? "600px": "auto");
     }

Min-height:

1
2
3
4
5
6

div {
     min-height: 600px;
     /* min-height para IE6 */
     height: auto !important;
     height: 600px;
     }

1
2
3
4
5

div {
     min-height: 600px;
     /* min-height para IE6 */
     height: expresion(this.scrollHeight < 601? "600px": "auto");
     }

Max-height:

1
2
3
4
5

div {
     max-height: 600px;
     /* max-height para IE6 */
     height: expresion(this.scrollHeight > 601? "600px": "auto");
     }

Para la altura y anchura mínima lo más cómodo es hacer uso de !important y ahorrarnos los posible problemas del uso de expresiones, en cambio para la altura y anchura máxima tendremos que tener en cuenta los inconvenientes de este método (Seguir enlace de la fuente).

Otra opción si no nos importa usar javascript es incorporar en nuestra página el ie7.js con el cual conseguiremos que IE (5 y 6) se comporten como la versión 7, pudiendo usar estas propiedades sin problemas tan solo añadiendo dentro de la etiqueta head el siguiente código:

1
2
3

<!--[if lt IE 7]>
     <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

Bueno, ahora solo te queda decidir que se adapta mejor a lo que necesitas .

Fuentes: Reflections on max-width, ie7.js y LibrosWeb.

Reset CSS

Una de las cosas más útiles a la hora de maquetar una web es el uso de un reset css.

Este archivo lo que hace es resetear las propiedades por defecto que los diferentes navegadores suelen darle a cada elemento. Tiene un incoveniente; tendremos que establecer de nuevo nosotros los valores necesarios, y una ventaja mucho mayor; conseguiremos una página cross-browser (multinavegador) de una manera mucho más rápida y sencilla.

Hay muchos reset css, prueba una búsqueda en google. Yo en mi caso siempre uso el reset de Eric Meyer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Lo más recomendable es incluirlo en un archivo css diferente del de los estilos de nuestra web (reset.css por ejemplo) y realizar la llamada primero al reset y luego el resto:

1
2

<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="general.css" type="text/css" />

Ponlo a prueba, una vez te acostumbres a usarlo no podrás maquetar sin él .