Archivos en la categoría CSS

gotAPI, un buscador de funciones en distintos lenguajes

gotAPI.com es un buscador muy interesante que permite buscar documentación sobre propiedades, funciones, métodos, etc. de distintos lenguajes de programación, librerías o APIs.

Algunos ejemplos son:

  • HTML
  • CSS
  • PHP
  • JAVASCRIPT
  • ACTIONSCRIPT
  • CakePHP
  • jQUERY
  • Flicker API
  • Drupal
  • JAVA (J2SE, J2EE)
  • XML/XSL
  • C/C++
  • ORACLE
  • MySQL

En la página de inicio se seleccionan los lenguajes en los que se desea buscar. Mientras más lenguajes estén seleccionados, más tardará en dar los resultados.

La caja de búsqueda cuenta con un suggest, en el que se van mostrando las distintas funciones o propiedades que coinciden con la búsqueda a medida que se escribe.

Doctype: Google incorpora enciclopedia sobre estándares de Open Web

Google lanzó un nuevo producto realmente interesante: Google Doctype. Definido según su creador, Doctype es “una enciclopedia para desarolladores web para desarolladores web”.

Armado en forma de Wiki, éste proyecto pretende documentar todos los estándares web de lenguajes abiertos (como Javascript, CSS, HTML, etc.). Puede ser editado y comentado por cualquiera que posea una cuenta en Google (o Gmail).

También tiene una versión en español, aunque no tan completa de cada tema.

http://code.google.com/doctype/

Cómo diferenciar estilos para distintos navegadores en un mismo CSS

Siempre que se maqueta una página con CSS hay que probarla en distintos navegadores, ya que no todos interpretan los estilos de la misma forma. Generalmente, los problemas aparecen con Internet Explorer en sus versiones 6 y 7 (ni hablar de las anteriores).

Para establecer distintos atributos a los estilos para cada navegador se puede utilizar lo siguiente:

.estilo1 {

width: 100px !important; /* Firefox, Safari, Opera, etc */

*width: 101px !important; /* IE7 */

*width: 102px; /* IE6 */

}

El CSS siempre privilegia la última línea que contiene un atributo en caso de que se encuentre duplicado. Pero en este caso, sólo los navegadores IE reconocen los atributos que comienzan con asterisco. Así, todos los demás navegadores interpretarán que el ancho de estilo1 es 100px.

Al usar !important, se indica al navegador que privilegie ese atributo por sobre otros que vengan a continuación y se refieran a lo mismo. Todos los navegadores reconocen esta expresión, salvo IE6. De esta forma, IE7 leerá las dos líneas que comienzan con asterisco, pero privilegiará la de ancho 101px.

Por último, IE6 sólo reconocerá la última línea e interpretará que el ancho de estilo1 es 102px.

Input dentro de Span en IE

A diferencia de Firefox, cuando se tiene un campo input dentro de un span en IE, el input hereda los valores de márgenes del span.

Esto puede generar problemas en la visualización, ya que el span tendrá más altura y más ancho. La solución es simplemente agregar margin: 0px a los estilos del campo input.

Estandarización del código

Algo que no hay que dejar de tener en cuenta a la hora de hacer una página de internet, es que el código cumpla con los estándares establecidos. Esto sirve, a parte de para hacer las cosas correctamente, para que la mayoría de los navegadores pueda mostrar correctamente la página (salvo IE que cumple con sus propios estándares).
También es importante para el SEO (search engine optimization), ya que Google da privilegio (aunque no mucho, se ve en los resultados) a las páginas que cumplen con los estándares.

World Wide Web Consortium, o W3C, es la organización que se encarga de estandarizar el código web. En su página se encuentran las especificaciones que indican de que manera se debe usar cada propiedad, cada tag, etc.

También es su web, hay herramientas destinadas a verificar que las páginas cumplan con los estándares y, de no ser así, mostrar los errores.

Las herramientas de verificación o validación son las siguientes:

También hay una herramienta que busca enlaces (links) rotos: http://validator.w3.org/checklink