Tripix.net » webkit http://www.tripix.net Just another web sobre desarrollo web Wed, 29 Jun 2011 08:24:43 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Rediseño del inspector web de Webkit: ¿Alternativa a Firebug? http://www.tripix.net/2008/10/07/rediseno-del-inspector-web-de-webkit-%c2%bfalternativa-a-firebug/ http://www.tripix.net/2008/10/07/rediseno-del-inspector-web-de-webkit-%c2%bfalternativa-a-firebug/#comments Tue, 07 Oct 2008 05:54:52 +0000 Tripix http://www.tripix.net/?p=658 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.

Comparte este post

]]> http://www.tripix.net/2008/10/07/rediseno-del-inspector-web-de-webkit-%c2%bfalternativa-a-firebug/feed/ 2 Nokia también adopta a Webkit http://www.tripix.net/2008/09/29/nokia-tambien-adopta-a-webkit/ http://www.tripix.net/2008/09/29/nokia-tambien-adopta-a-webkit/#comments Mon, 29 Sep 2008 05:40:43 +0000 Tripix http://www.tripix.net/?p=608 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.

Comparte este post

]]> http://www.tripix.net/2008/09/29/nokia-tambien-adopta-a-webkit/feed/ 0 CSS Hack para Chrome y Safari http://www.tripix.net/2008/09/05/css-hack-para-chrome-y-safari/ http://www.tripix.net/2008/09/05/css-hack-para-chrome-y-safari/#comments Fri, 05 Sep 2008 10:53:05 +0000 Tripix http://www.tripix.net/2008/09/05/css-hack-para-chrome-y-safari/ [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:

PLAIN TEXT
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...

PLAIN TEXT
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">
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Chrome CSS Hack Demo</title>
  6. <style type="text/css">
  7. div.caja {
  8.        border: 1px solid red;
  9.         width: 200px;
  10.         height: 200px;
  11. }
  12. body:nth-of-type(1) div.caja {
  13.     background: blue;
  14. }
  15. </style>
  16. </head>
  18.     <div class="caja">
  19.    
  20.     </div>
  21. </body>
  22. </html>

Comparte este post

]]> http://www.tripix.net/2008/09/05/css-hack-para-chrome-y-safari/feed/ 12