El Comercio Digital

Webmaster Libre

Subtitulo del blog

Archivo de la categoría "CSS"

Bookmarklet para la retícula de maquetar

El mes pasado en Intenta, se nos apuntaba un truco para maquetar nuestras páginas. Colocar una retícula como fondo, una solución simple pero eficaz para comprobar esas diferencias entre navegadores en nuestros diseños.

A pesar de ser una solución inteligente, para muchos es un incordio ir modificando el css cada vez que haya que comprobar algo, por eso Andy Budd ha creado un bookmarlet que, con un simple click aplica la rejilla a las páginas.

Layout Grid Bookmarklet

Tamaños mínimos y Explorer

Las propiedades min-width y min-height nos permiten establecer un tamaño mínimo para el ancho y el alto de una capa u objeto, respectivamente. Esto tiene sentido en los navegadores más estrictos donde width y height son valores exactos para la anchura y altura pero cuando mostramos la página en Internet Explorer suceden cosas “raras”:

  1. Las propiedades height y width son interpretadas como min-height y min-width, es decir, si el contenido es más grande que el contenedor este se adaptara para albergarlo.
  2. Min-height y min-width no se entienden y por tanto se ignoran

En aNieto2k se ha publicado hoy un enlace a un hack que nos ayudará a solucionar este problema, nada que no pudiésemos hacer ya con otros trucos de los que ya hemos hablado, no obstante es interesante y bastante limpio para ser un hack: Min-Height Fast Hack por Dustin Diaz

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Como el Explorer no entiende la marca !important, la ignora y continua tomando valores. Por tanto funcionará hasta que se arregle el fallo en versiones nuevas pero esperemos que llegados a ese momento también funcione min-height.

Supongo que no hace falta decirlo pero: también funciona con min-width

Checkboxes y Radio Buttons personalizados con CSS y Javascript

Hace tiempo llegó a portada de digg un artículo, del que se hicieron eco algunos blogs como Sentido Web, que hablaba de cómo dar estilo a los checkboxes y radio buttons de los formularios. Como viene siendo habitual, la mayor pega de este método es que no funciona en Internet Explorer.

Si quieres dar estilo a los radio buttons y checkbox de tus formularios, para todos los navegadores con javascript activado, prueba la técnica de Chris Erwin.

Por medio de Javascript se ocultan los botones y se le da estilo a la etiqueta label.
El formulario sigue recogiendo los datos normalmente ya que es la propia etiqueta label la que activa el control correspondiente.
Y si el Javascript no está activado, no se ocultarán los controles y el formulario se presentará como un formulario normal, totalmente funcional.

Ejemplo del CRIR en accion

Su implementación es muy sencilla, tenéis instrucciones detalladas en la página del autor.

CRIR: http://www.chriserwin.com/scripts/crir/index.php

CSS Tools: Recopilación de enlaces sobre CSS

Via Intenta descubro esta colección de enlaces útiles para CSS. Está dividida por categorías: herramientas, generadores de layouts…

CSS Tools: http://www.soxiam.com/Notes/CSSTools

S5 presentaciones online a la Eric Meyer

Hace ya algo os había comentado la existencia de HTML Slidy, un sistema bastante simple para generar presentaciones tipo Power Point con XHTML, CSS y Javascript que se pueden reproducir en cualquier navegador.

Captura de pantalla de S5 en funcionamiento
S5 es un sistema similar, creado por Eric Meyer, que cuenta con bastante más documentación y ayuda que HTML Slidy, además de existir varios themes para escoger, más cómodo imposible.

S5: http://meyerweb.com/eric/tools/s5/

PNGs con transparencia en Internet Explorer

Una de las “novedosas novedades” del Internet Explorer 7 es el soporte a la transparencia de los PNG, ¡por fin! No obstante, seguro que aún nos quedan algunos años de versiones anteriores que no tragan bien con las transparencias.

Para solucionar este “pequeño” inconveniente existen algunos trucos, unos sirven para unos casos , otros para otros.
Leer el resto de la entrada

Creando un CSS compatible con todos los navegadores ¡y válido!

Supongo que todos sabemos lo difícil que puede resultar conseguir que nuestras páginas se vean bien en todos los navegadores, en múltiples ocasiones nos vemos forzados a usar fragmentos de código propietario, que rompen con la validación, para conseguir efectos sencillos en determinados navegadores (no miro para ninguno…).

Por suerte, tenemos a nuestra disposición diversos mecanismos para facilitarnos, en la medida de lo posible, la labor de obtener páginas compatibles con todos los navegadores y que validen contra los estándares web.
Leer el resto de la entrada

Centrado con CSS (2): Vertical

Si centrar elementos horizontalmente con CSS es casi un juego de niños, el centrado vertical entraña una dificultad muy superior.

No existe una propiedad de CSS equivalente a vertical-align: middle que se pueda aplicar a elementos que no sean tablas por tanto se hace necesario emplear un pequeño truco para conseguir el mismo efecto.

En el siguiente ejemplo vamos a centrar un elemento verticalmente con respecto al tamaño de toda la página.

Creamos un contenedor al que daremos la propiedad display: table

.contenedor {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
display: table; }

Creamos un segundo contenedor al que daremos la propiedad display: table-cell y sobre el que aplicaremos el centrado vertical-align: middle;

.centrado {
display: table-cell;
vertical-align: middle;
text-align: center; }

Y finalmente, creamos el que será nuestro contenedor centrado verticalmente, al que también daremos margin: 0 auto para centrarlo horizontalmente.

.contenido {
width: 200px;
height: 200px;
margin: 0 auto;
border: 1px solid #000;}

Centrado Vertical con CSS, ejemplo 1

Pero, claro, el Explorer no entiende estas simples instrucciones y, por tanto, se hace necesario emplear algunos trucos para conseguir un resultado compatible con la mayor parte de los navegadores.

Para ello, vamos a evitar utilizar el hack del guión bajo y, en su lugar, vamos a aprovechar un fallo del explorer para producir un CSS válido.

.contenedor {
top: 0;
left: 0;
width: 100%;
height: 100%;}

.contenedor[class] {
position: fixed;
display: table;}

.centrado {
position: absolute;
top: 50%;}

.centrado[class] {
display: table-cell;
vertical-align: middle;
text-align: center;
position: static;}

.contenido {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
top: -50%;}

El selector .contenido[class] es exactamente lo mismo que .contenido pero IExplorer ignora todos los selectores de atributo, lo cual nos permite introducir las instrucciones pertinentes para los navegadores más avanzados (como Firefox o Safari) sin que interfieran con el surrealista navegador de Microsoft.

Centrado Vertical con CSS, ejemplo 2

Plantillas Libres

Si estás buscando plantillas en (X)HTML y CSS que puedas destripar, modificar, utilizar a tu gusto y redistribuir según mejor te convenga, seguro que estas dos páginas se hacen un hueco en tus favoritos.

Open Source Web Design LogoOpen Source Web Design:

http://www.oswd.org

Decana en este tipo de páginas, fundada en el año 2000.
Actualmente pone a nuestra disposición 1688 diseños.

Open Source Templates LogoOpen Source Templates:

http://opensourcetemplates.org

Destinada a organizaciones sin ánimo de lucro, aunque sus plantillas están publicadas bajo licencia Creative Commons (atribución) lo que nos permite utilizarlas a cualquiera.
De momento ofrece pocas plantillas pero de bastante calidad.

Resumen de compatibilidad con los estándares web de los navegadores

Ya lo sabemos, no todos los navegadores son igual de compatibles con los estándares web, pero no siempre sabemos hasta qué punto.

Web Browser Standards Support es un completo estudio de compatibilidad de los navegadores Firefox, Opera e Internet Explorer, centrada en las tecnologías CSS, HTML, DOM y ECMAScript.

Via Pixel Groovy

Webmaster Libre es un blog de Alma Fernández y está publicado bajo licencia Creative Commons desde el año 2006

Agradecimientos especiales a WordPress y FamFamFam

Política de Privacidad | Condiciones de uso | Sitemap (XML)