Posts Tagged ‘webkit’

Rediseño del inspector web de Webkit: ¿Alternativa a Firebug?

Tuesday, October 7th, 2008

Desde la aparición de Firebug los inspectores web se han convertido una de las herramientas fundamentales de trabajo de cualquier desarrollador web. Prácticamente todos los desarrolladores de navegadores incorporan un inspector.

Hasta ahora el Firebug no tenía competencia en la práctica y desde luego esta no provenía del que incorpora el IE8. Pero con el rediseño del inspector web de Webkit creo que esto puede empezar a terminarse. Una primera y rápida inspección revela un interfaz cómodo de utilizar, muy rápido y con funcionalidades extra como el acceso a bases de datos

Entonces… ¿Ya puedo pasar de Firebug?: bueno, no diría tanto. Creo que hay una cosa que no se puede hacer en Webkit: añadir propiedades CSS directamente en el inspector correspondiente.  Además todavía tiene algunos fallos (¡Permite inspeccionarse a sí mismo… y empieza anidar ventanas!) que hacen que todavía no sea una alternativa 100%. Pero le falta muy poco.

Nokia también adopta a Webkit

Monday, September 29th, 2008

El modelo s60 de Nokia incorporará un navegador web basado en Webkit. La compañía se une a lo que ha hecho otras muchas, entre ellas Google con su Chrome y Apple con Safari.

Por lo que sé, hasta el momento Nokia se basaba, generalmente, en un motor web propio, bastante pobre.

Este movimiento por parte de uno o el fabricante de móviles más importante del mundo puede ser el principio de la estandarización o al menos la reducción del confuso y complejo mercado de los navegadores web para terminales móviles; algo que debe ser la desesperación de los desarrolladores web orientados a ese sector.

CSS Hack para Chrome y Safari

Friday, September 5th, 2008

[Vía Pinceladas Web]

Era inevitable y posiblemente será necesaria la aparición de un filtro o hack css que nos permita aplicar una determinada regla CSS que solamente entienda el nuevo navegador de Google, Chrome. El que presentamos a continuación también funciona en Safari, dado que ambos usan el motor de Webkit.

El hack se basa en el selector CSS "E:nth-of-type(n) " que selecciona el elemento (E) situado en la posición (n) de nuestro documento. Por ejemplo, div:nth-of-type(3) aplicaría la regla que definamos al tercer div que aparezca en nuestro documento. Con esta explicación espero que entendáis porqué funciona el siguiente filtro:

CSS:
  1. body:nth-of-type(1) div.caja {
  2.        background: blue;
  3. }

En este caso los div con un class "caja" del primer elemento "body" de nuestro documento se verán con fondo azul únicamente en Chrome y Safari.

Si queréis el codigo completo para probar...

HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Chrome CSS Hack Demo</title>
  5. <style type="text/css">
  6. div.caja {
  7.        border: 1px solid red;
  8.         width: 200px;
  9.         height: 200px;
  10. }
  11. body:nth-of-type(1) div.caja {
  12.     background: blue;
  13. }
  14. </style>
  15. </head>
  16.     <div class="caja">
  17.    
  18.     </div>
  19. </body>
  20. </html>