7/1/09

Hacks CSS: Selectores para un navegador en particular

Distingir entre Google Chrome y Safari con CSS pese a que los dos usan el mismo motor de renderizado


/* Google Chrome hack */
body:nth-of-type(1) .elementOrClassName {
/* properties go here */
}
/* Safari hack */
body:first-of-type .elementOrClassName{
/* properties go here */
}

Depurar estilos en Firefox, ie6 e ie7


#MyDiv {margin : 10px 10px 10px 10px;}
/* IE6 Only (start html hack)*/
* html #MyDiv {margin : 5px 5px 5px 5px;}
/* IE7 Only */
*:first-child+html #MyDiv {margin : 2px 2px 2px 2px;} 
/* IE7 and IE6 */
*:first-child+html {} * html {}
/* Safari 3 y Opera 9 Only*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
 /* Reglas de Safari 3.0 y Opera 9  */
}

Hack para IE7 y navegadores modernos


 html>body #content {} 

Hack para navegadores modernos no IE7


 html>/**/body #content {} 

Hack para Opera 9 y anteriores


 html:first-child #content {} 

Hack para Safari


 html[xmlns*=""] body:last-child #content {} 

Star-html hack, no valida


 /* Hides from IE5-mac \*/
 * html .buggybox {height: 1%;}/*Holly Hack*/
 /* End hide from IE5-mac */ 

alternativa, usar !important, si valida


/* Hides from IE5-mac \*/
.buggybox {
 height: auto !important;
 height: 1%;
}
/* End hide from IE5-mac */

6/10/08

Marcar las citas: blockquote y cite

Cite como elemento es inline y debe ir dentro del blockquote para relacionar cita y autor.

También está cite como atributo de blockquote y permite incluir un enlace que nos lleve a la fuente


<blockquote cite="http://books.google.es/books?id=5s4OAAAAYAAJ"> 
<p>Si estos preceptos y estas reglas sigues, Sancho, serán luengos tus días,  tu fama será eterna, 
tus premios colmados, tu felicidad indecible, casarás  tus hijos como quisieres, títulos tendrán ellos y 
tus nietos, vivirás en paz  y beneplácito de las gentes, y en los últimos pasos de la vida te alcanzará  
el de la muerte en vejez suave y madura, y cerrarán tus ojos las tiernas y  delicadas manos de tus 
terceros netezuelos.</p> 
<p><cite>Miguel de Cervantes Saavedra</cite></p>  
</blockquote>

Vía Ovillo

5/10/08

Posición absoluta vs relativa

La posición absoluta y relativa es siempre con respecto al padre del elemento que estamos posicionando.

Simplemente que la absoluta no entra en el flujo del documento y la relativa sí. Es decir con una relativa y con un clear puedes hacer que el texto de otro div al mismo nivel no se ponga encima del primer div relativo. Esto con la posición absoluta no se puede hacer.

Vía Ovillo

30/9/08

Accesskey: teclas de acceso rápido o atajos de teclado

La mayoría de los navegadores actuales permiten saltar directamente a un enlace utilizando una combinación de teclas. Existe una convención, que no estándar, al respecto:

  • 0: Accesibilidad
  • 1: Página de inicio
  • 2: Mapa del sitio
  • 3: Buscador
  • 4-9: Otras secciones importantes del sitio web

En los sistemas operativos Windows y Linux, se utiliza ALT + Tecla (o ALT + SHIFT + Tecla); en Macintosh CTRL + Tecla. Algunos navegadores (como Mozilla o Firefox) siguen automáticamente el enlace, otros (como Microsoft Internet Explorer) sólo le dan el foco al enlace, con lo que hay que pulsar la tecla Enter para seguirlo.

Vía AccesoWeb

29/11/07

Tipos de medios en CSS 2

Existen 10 tipos de medios (interfaces) en CSS 2.

  1. all (todos): todos los dispositivos
  2. aural (fonética): sintetizadores de voz
  3. braille (braille): destinados a la retroalimentación táctil dispositivos Braille
  4. embossed (en relieve): variación de Braille, al parecer, es para impresoras Braille, y por lo tanto, ofrece paginación
  5. handheld (de mano): para usar en un teléfono móvil u otros dispositivos de mano como PDA´S
  6. print (imprimir): presentaciones de documentos destinados a la impresión
  7. projection (proyección): documentos destinados a la proyección, por ejemplo, proyectores de transparencias, impresoras de transparencias, cañones. Ofrece paginación
  8. screen (pantalla): la que siempre usamos cuando trabajamos para las pantallas de ordenador
  9. TTY: Destinados a los medios de comunicación a través de una instalación de visualización tipo parrilla, como teletipos, terminales, o dispositivos portátiles con capacidades limitadas de pantalla
  10. TV: Destinado a dispositivos tipo televisión

El tipo de medio al que va dirigida una hoja de estilo puede especificarse en el atributo media en los elementos link o style (separados por comas en el caso de ser más de uno):

<link href="pantalla.css" media="screen" type="text/css" rel="StyleSheet" />
<style media="screen,print" type="text/css"></style> 

También definidos con las reglas de tipo @media, como si fuera un estilo más

@media print {
h2 { page-break-after:avoid; }
}

o definidos con las reglas de tipo @import

@import url("estilos_basicos.css") screen;
@import url("estilos_impresora.css") print; 

Vía Intenta

15/10/07

HTML 5, la web semántica

La web semántica busca organizar la información de una forma precisa y eficaz para conseguir que sus contenidos sean más fáciles de clasificar y encontrar. Un ejemplo de aplicación web semántica son los RSS que utilizan XML permitiendo la catalogación de información (noticias, eventos, etc.) de tal forma que es posible encontrar información relevante.
  • <header> El encabezado; no confundir con <head>
  • <nav> Navegación
  • <section> Como un capítulo en un libro, puede albergar varios <article>
  • <article> Un artículo
  • <footer> El pie de pagina, la firma, la dirección, ...
HTML 4: basado en elementos DIV no semánticos

HTML 5: basado en elementos semánticos

Más información en:
  1. A List Apart
  2. ¿Qué es la Web Semántica?
  3. IBM
  4. Seraccesible
  5. aNieto2K
Vía CSSLab

Resetear los estilos CSS predeterminados

Por defecto los navegadores representan los distintos elementos HTML de una determinada manera no coincidiendo siempre entre ellos. Para evitarlo tratamos de empezar un diseño (layout) con una hoja de estilos "nuestra" por defecto que sea previsible con lo que queremos ver en todos los navegadores (cross-browsing).

Una forma rápida de hacer todo esto es utilizando el selector universal (*) pero parece que no es del todo correcto pues sobrecarga el navegador.

Más propuestas sobre este tema:

12/10/07

Cómo ordenar las propiedades CSS al escribirlas

Se trata de una propuesta para escribir las propiedades CSS que consiste en ir de fuera hacia dentro

  1. Comportamiento: display, overflow, clear
  2. Posición: position, float, top, left, ...
  3. Tamaño: width, height
  4. Márgenes y bordes: margin, border, padding
  5. Texto: font, text, ...
  6. Fondos y colores: background, color

Vía Daniel Mota

9/10/07

Posicionamiento. Los 10 factores más importantes

Sobre una escala de 5 son:

  1. Uso de keywords en la etiqueta <title> (4,9)
  2. Popularidad global del sitio (4,5)
  3. Anchor Text de los enlaces entrantes (4,4)
  4. Popularidad dentro de la estructura interna del sitio (4,1)
  5. Edad del sitio (4)
  6. Enlaces desde sitios de temática relacionada (3,9)
  7. Popularidad en su comunidad (3,9)
  8. Keywords en texto (3,9)
  9. Popularidad del enlace entrante (3,7)
  10. Relación de temáticas con web que nos enlaza (3,6)

En resumen, el 90% de la ecuación del posicionamiento puede depender de 4 factores:

  1. Palabras clave y relevancia del contenido
  2. Enlaces a la página, en cantidad y calidad
  3. Antigüedad del dominio
  4. Texto encerrado en los enlaces que contengan las palabras clave

Vía SEOmoz

Expresiones regulares con JavaScript

Utilizar el objeto RegExp

oRegExp = new RegExp("azul", "gi");
oRegExp = /azul/gi; notación tipo Perl
g = (global) compara todas las coincidencias, nos solo la primera
i = (ignoreCase) el patrón no distingue entre may y min 
var aMatches = oRegExp.exec(cadena); devuelve una matriz con un solo elemento
var aMatches = cadena.match(oRegExp);devuelve una matriz con todas las coinciedencias en la cadena
var indice = cadena.search(oRegExp); índice de la 1ª instancia en la cadena (parecido a indexOf())

Métodos de cadena que aceptan expresiones regulares: replace

var sTextoReemplazado = cadena.replace(oRegExp, "rojo"); genera el mismo resultado que
var sTextoReemplazado = cadena.replace(oRegExp, function(sMatch){
return "blue";}
); genera el mismo resultado que
var sTextoReemplazado = cadena.replace("azul", "rojo");

Métodos de cadena que aceptan expresiones regulares: split

var array = cadena.split(","); genera el mismo resultado que
var oRegExp = /\,/;
var array = cadena.split(oRegExp);

Metacaracteres de expresiones regulares se escapan con \

( [ { \ ^ $ | ) ? * + . ,
\\t, \\n, \\r, \\0 tabulación, nueva línea, retorno de carro y  carácter Null, respectivamente

Clases de caractéres (caracteres entre corchetes[])

oRegExp = /[abc]dar/gi;   clase sencilla: cadenas que empiezan por a, b ó c y terminan con dar
oRegExp = /[^abc]dar/gi; clase de nagación (^:acento circunflejo): cadenas que no empiezan por a, b ó c y si terminan con dar 
oRegExp = /numero[1-4]/gi; clase de intervalo (-)
oRegExp = /[a-m1-4\n]/gi;   clase de combinación: cadenas que empiezan entre la a y la m, entre el 1 y el 4, y el carácter de nueva línea

Clases predefinidas

. = [^\n\r] cualquier caracter menos los de nueva línea y retorno de carro 
\d = [0-9]   un dígito
\D = [^0-9] un valor que no sea dígito
\s = [ \t\n\x0B\f\r] carácter de espacio en blanco
\S = [^\t\n\x0B\f\r] carácter que no sea espacio en blanco
\w = [a-zA-Z_0-9]   un carácter de palabra, letras números y guión bajo
\W = [^a-zA-Z_0-9] un carácter que no sea de palabra 

Cuantificadores: cuantas veces debe repetirse un patrón

? = una o ninguna instancia
* = cero o más instancias
+ = una o más instancia
{n} = exactamente n instancias
{n,m} = al menos n pero no más de m instancias
{n,}  = al menos n instancias

Agrupar: procesando secuencias de caracteres (hasta ahora se aplicaban a caracteres individuales)

var oRegExp = /micmic/g; genera el mismo resultado que
var oRegExp = /(mic){2}/g;
var oRegExp = /(azul( y rojo)?)/; encuentra "azul" o "azul y rojo" 

Límites

^ = inicio de línea
$ = final de línea
\b = límite de palabra
\B = límite que no es de palabra

Ejemplo de lo visto hasta ahora: crear un método trim()

String.prototype.trim = function(){
var oRegExp = /^\s+(.*?)\s+$/;
return this.replace(oRegExp, "$1");
};
var sText = " texto de ejemplo ";
alert(sText.trim());