CSS3 y las etiquetas propias de cada navegador

Logotipo CSS3
En CSS3 hay una serie de nuevas etiquetas que cada navegador interpreta de forma diferente. Es debido a ello que, a la hora de hacer un degradado, o con algunas etiquetas nuevas, sea necesario usar diferentes prefijos, del tipo:

  • Firefox 3.6+: -moz (-moz-linear-gradient)
  • Chrome, Safari 4: -webkit (-webkit-gradient)
  • Chrome 10+, Safari 5.1+(-webkit-linear-gradient)
  • Opera 11.10+: -o (-o-linear-gradient)
  • Internet Explorer 6-9: filter (filter)
  • Internet Explorer 10+: -ms (-ms-linear-gradient)
  • Estándar W3C: No tiene (linear-gradient)
  • Navegadores antiguos: No soportan etiquetas CSS3.

Un ejemplo para realizar mediante código CSS3 gradientes podría ser:

.degradado {
    background: #1e5799; /* Navegador antiguo */
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
    background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

Tamaños del body en las páginas visualizadas con ipad

Hoy el reto ha sido averiguar el tamaño correcto del body de una web en ipad. Resulta que siempre me daba 1024px, y se encontraba en horizontal, con lo cual no era nada creíble.

Por ello buscando por internet averigüé que, dependiendo de cuáles sean los parámetros de viewport que indiquemos, el $(document).height() nos mostrará una cosa u otra.

Estos son los parámetros:

Cuando la página no tiene etiqueta viewport

  • Portrait: 980×1208
  • Landscape: 980×661

Cuando la página tiene etiqueta viewport:

initial-scale + user-scalable + maximum-scale

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1">
  • Portrait: 768×946
  • Landscape: 1024×690

width

<meta name="viewport" content="width=device-width">
  • Portrait: 768×946
  • Landscape: 768×518

height

<meta name="viewport" content="height=device-height">
  • Portrait: 980×1024
  • Landscape: 980×1024

height + width

<meta name="viewport" content="height=device-height,width=device-width">
  • Portrait: 768×1024
  • Landscape: 768×1024

initial-scale + user-scalable + maximum-scale + width + height

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">
  • Portrait: 768×1024
  • Landscape: 1024×1024

initial-scale + user-scalable + maximum-scale + height

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">
  • Portrait: 831×1024
  • Landscape: 1520×1024

Pack de iconos para jquery mobile

Como os habréis dado cuenta, siempre hay un problema cuando uno intenta utilizar los iconos que hay por defecto en el jquery mobile, y es que son muy pocos.

Para eso está este packs de iconos (realmente sería más correcto decir que es una fuente con doscientos y pico iconos en vez de caracteres).

Podéis encontrarlo en esta página http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/index.html y podéis ver su totalidad si en esa misma pantalla accedéis al “Font Awesome Icons”.

Es muy fácil de instalar y de utilizar (con simplemente incluir un <i class=”icon-envelope icon-white”></i> yo puedo incluir un icono con forma de sobre de color blanco)

Como obligar a que el navegador cargue css/js/imágenes sin utilizar la caché

Me he encontrado hoy con el siguiente problema:

Tenía que modificar unos css para un cliente y resulta que una vez modificados y subidos contacta conmigo y me comenta que el no lo ve bien. Le explico que tiene que eliminar la caché y cómo debe hacerlo, cosa que ejecuta y le funciona (para gran alivio mío). Pero entonces me hace la siguiente pregunta:

¿Y qué sucede si un cliente ve esto de forma errónea porque tiene los archivos antiguos en caché? ¿cómo se podría solucionar para no obligarle a que refresque la caché?

Ahí me dejó helado….. y tras pensar un rato conseguimos elaborar la solución siguiente:

<link rel=”stylesheet” type=”text/css” href=”/css/estilos.css?id=001” />

Consiste en añadir un parámetro al link. NO TENDRÁ NINGÚN EFECTO sobre los estilos, pero hará que el navegador decida volver a cargar ese css. Recordar que tendréis que modificarlo para que vuelva a descargar el browser el css con id=002, con id=003,…..

Eliminar en chrome y safari la posibilidad de redimensionar las textareas

Desde hace un tiempo, en las textareas en chrome y safari aparecen unas flechitas que permiten redimensionar dichas textareas. Por supuesto, para la gente que nos encargamos de que en todos los navegadoresse vea igual esto es una pesadilla.

Para quitarlo, simplemente en el css de la página hay que poner:

textarea{resize: none}

Bordes redondeados en IE

Hoy explicaremos paso por paso lo que hay que hacer para poder tener bordes redondeados en todos los navegadores, y en especial en el que suele dar más problemas en este tema, el Internet Explorer.

Pasos a seguir:

  • Descargarse de DillerDesign el archivo js (yo he cogido el de mínimo tamaño puesto que realmente no voy a modificarlo). En caso de que lo hayan eliminado tb puedes descargarlo aquí.
  • Incluir ese js en el head.
<script src="/js/DD_roundies_0.0.2a-min.js"></script>
  • Al cuadro que queramos redondear le ponemos una clase que le identifique. Aquí lo haremos llamándolo por ejemplo “cuadro”.
<div class="cuadro">lo que queramos poner </div>
  • Justo al comienzo del body, pondremos.
<script type="text/javascript"></script>

¿Y qué significa esa última línea de código?

  • Primer parámetro ‘.cuadro’ indica la clase del div que queremos redondear.
  • Segundo parámetro ’10px 10px 10px 10px’ Qué redondeo queremos darle a cada una de las esquinas, en este caso a todas le damos 10px de redondeo.
  • Tercer parámetro false, significa que sólo querremos mostrarlo en el caso de que el usuario lo vea en IE. En el caso en que estemos en Firefox, Ópera, Chrome,… podremos hacerlo mediante css sin que añada líneas de código innecesarias.

Nota: Por Internet hay muchos sitios en donde se explica como hacerlo, pero en el 80% de las webs visitadas era erróneo, no sabéis cuanto tiempo he perdido viéndolo. Menos mal que encontré esta página, que es de donde he sacado esta forma, compatible con IE8 e IE7 (no he mirado más allá)

¿Por qué separar contenidos y diseño al crear una web?

Hoy voy a dar una serie de razones por las cuáles es conveniente, bueno y necesario crear una web cuyo contenido y diseño se encuentren separados. Estas son:

  • Una mejor indexación en los distintos buscadores: Los robots calificarán mejor nuestros contenidos debido a que no se encontrarán ningún elemento de diseño de en medio.
  • Reducción del tamaño global: Se minimiza el contenido redundante entre páginas, lo cual significa que se reduce el tamaño de la página a cargar, algo ventajoso para el usuario (le tardará menos en aparecer) y también para nosotros (menor carga de trabajo y transferencia de datos en nuestros servidores).
  • Maximiza la audiencia potencial: Es mucho más fácil solucionar los problemas de accesibilidad (mantener versiones para PDAs, teléfonos móviles, etc…) y usabilidad (hacer sitios para personas con minusvalía)
  • Excelente portabilidad: Los cambios menores o globales tanto de diseño como de contenido serán infinitamente más sencillos y rápidos.

Instalar varias versiones de IE en un mismo PC

Recientemente tuve el problema que después de maquetar correctamente el diseño de una página, haberlo probado en IE8, Firefox, Chrome y Opera, se lo paso a un amigo y este me dice que no puede ver correctamente las animaciones. ¿Cómo puede ser posible si he probado en todos los navegadores del mercado? Después de mucho reflexionar me pregunto de si es debido a que tiene una versión antigua de algún navegador….. y acierto….. era internet explorer 7.
Y ahora bien, ¿cómo puedo emular el comportamiento del IE7 o del IE6 en mi ordenador? Después de buscar mucho por Internet descubro un programa llamado IETester.

Con él, se permite tener abiertos al mismo tiempo sesiones del IE 5.5, IE 6, IE 7 e IE 8, permitiendo comparar las ejecuciones de las páginas, los errores que se provocan,…..

Cómo hacer un triángulo mediante css

Hoy os presento el código mediante el cual se pueden hacer triángulos únicamente mediante el uso de css. Decir que los triángulos serán rectángulos(como sabréis es cuando uno de los ángulos es de 90 grados).

.flechaizquierda {
border-color:transparent #000 transparent transparent;
border-style:solid;
border-width:10px 20px 10px 0;
width:0;
}
.flechaderecha {
border-color:transparent transparent transparent #000;
border-style:solid;
border-width:10px 10px 10px 20px;
width:0;
}
.flechatop {
border-color:transparent transparent #000000;
border-style:solid;
border-width:0 13px 13px;
width:0;
}
.flechabot {
border-color:#000000 transparent transparent;
border-style:solid;
border-width:13px 13px 0;
width:0;
}

Diferencia entre class e id

Hoy toca un post para los que estén empezando en el mundo de la maquetación y desarrollo web.
Si os habéis adentrado en el código de diferentes páginas web (cosa siempre recomendable) os habréis dado cuenta que a veces se utilizan atributos id y en otros casos class de la siguiente forma:

<div id=”nombre”></div>

<div class=”nombre”></div>

Y por ello nos surge la siguiente duda: ¿Qué diferencias hay entre class e id?

  • Los id’s se referencian con el prefijo “#” y las clases con “.”.
  • Un id debe ser único y una clase puede ser referenciada por muchos elementos.
  • Un elemento puede tener 2 o más clases, pero sólo un id.

Notas:

  • Referencia de un id #nombreDelID { background: #ff80c0 }
  • Referencia de un class .nombreDelClass { background: #ff80c0 }